On the Custom Form Fields tab is where you’ll add and configure custom fields, buttons, and labels displayed in your on-page forms.
To see many of the available custom fields in action check out the custom fields demos.
To begin, simply select the type of field you’d like added to your payment form and click Add.
At this point, a new section for configuring the field you just added should appear below. For example, if you added a Text Field, you should see something like this:
This field should now appear on the page of your payment form above your Stripe button. All custom fields are assigned a unique Field ID by the system for that payment form that cannot be changed.
Within the configuration for each field, you can click “Remove Field” if you need to delete it. You can also drag and drop fields to re-arrange the order they appear in.
Basic Data Input Fields
The following custom fields are intended for collecting additional data other that is not specific to payments, billing, subscriptions, and coupons. They include:
- Text Field
- Dropdown Select
- Radio Button Select
- Date Field
- Number Field
Basic Data Input Field Options
|Form Field Label||Label displayed above the field on the payment form.||text, dropdown, radio, date, number, checkbox|
|Required Field||Require input field to be filled out, selected or checked.||text, dropdown, date, number, checkbox|
|Default Value||Pre-fill input field with a value, specific selection or checked state.||text, dropdown, radio, date, number, checkbox|
|Stripe Metadata Label||Used to identify this field in Stripe payment records. It is not displayed on the payment form and is limited to 40 characters. See Viewing Custom Field Values in Stripe.||text, dropdown, radio, date, number, checkbox|
|Placeholder Value||Hint displayed in the input field before the user enters a value.||text, number|
|Multi-line||Set to a paragraph text field. Limited to 500 characters by Stripe.||text|
|Options||A comma separated list of options to fill the dropdown or radio button list with.||dropdown, radio|
|Quantity or Amount Field||Dropdowns and radio button lists can be used as a quantity value, multiplying the amount, or a list of amounts the user can select from. Must be valid numbers or amounts separated by commas (i.e. "2,5,10" or "5.00,7.50,10.00"). Quantity fields can also be used to multiply the number of subscriptions a user is signing up for.||dropdown, radio|
|(Number) Quantity Field||Number fields can also be used as a quantity field. Can also be used to multiply the number of subscriptions a user is signing up for.||number|
Other Form Elements
This field is automatically added to the payment form and set to required by default, but can be removed or made optional. The customer’s name will be saved to the Stripe payment record and card details if a value exists.
This field is required for Embedded and Overlay options only as Stripe Checkout forces email capture in its overlay. The email entered by the customer will be saved to the Stripe payment record details.
This field is required for Embedded and Overlay options only as Stripe Checkout forces credit card details to be collected in its overlay. It currently collects credit card details in a single line using Stripe Elements. This means you get the same security, live validation, and PCI compliance in your forms as you do with Stripe Checkout as you’re using a field originating from Stripe’s servers.
Like Stripe Checkout, you may disable verification of the postal/zip code if desired, but Stripe highly recommends collecting it to minimize fraud.
This field is used for Embedded and Overlay options only as Stripe Checkout gives you the option to collect a billing and shipping address. It is not added or required by default. Like Stripe Checkout, you can specify if you want to allow the customer to fill out a shipping address in addition to a billing address.
Billing address data will be saved to the Stripe payment record. Shipping address data will be saved to the payment record metadata.
Coupon Code Field
Add this field to display an input to for the customer to enter a discount code. An “Apply” button is automatically generated on the right-hand side.
While in Test Mode you may only select coupons from your Stripe Test Coupons. Before switching to Live Mode, make sure the same coupons (with the exact same IDs) are created in your Stripe Live Coupons.
Custom Amount Field
Just a placeholder where the Custom Amount field, if enabled, will be displayed on the form.
Subscription Plan Select
Just a placeholder where the Subscription multi-plan select field, if enabled, will be displayed on the form. If you enabled a custom amount field within the plan selection, it will also be displayed here. See Subscription Options.
Note: Subscription capabilities are included with Business and Elite licenses only.
Recurring Amount Toggle
Display a checkbox to let the customer or donor choose between paying one-time or recurring. Also, set the interval and frequency of the recurring amount. If you set the Max Charges value, you’ll need to set up a Stripe webhook endpoint as well.
Total Amount Label
A read-only label to display the amount to be paid with an optional text label preceding. It is calculated on the fly if there are any other fields on the form that affect the amount when their data is modified.
You can also show a Recurring Total Label if the initial amount is different from the recurring amount (in the case of a free trial or setup fee).
If you charge taxes along with your payments, you can also display the Tax Amount in another label above the other total label(s). See Currency, Locale and Date Format Settings for more details.
Change the text on the payment button itself (defaults to “Pay with Card”). Additionally, change the text of the button while it’s in a disabled/processing state (defaults to “Please Wait…”).
The payment button will be automatically added to the form upon saving it if not already done so as it is required.
Both the payment button and coupon code “Apply” button can either inherit the Stripe button style or inherit the theme’s style and be further customized. See Style Options.
All custom fields are assigned a unique Field ID by the system for that payment form that cannot be changed.
Looking to add a checkbox with a label such as “Agree to terms” that opens new page? Read more here.