Payment Fields

The Payment field embeds a Stripe payment element directly into your form. Visitors enter card details and check out as part of the same submission flow. Used for selling products, taking donations, capturing user-defined amounts, or just keeping a card on file.

Payment Modes​

The first decision for any Payment field — what kind of charge is this?

Mode	What It Does	Visitor Sees
Sell Products	Visitor picks from your product catalog	Product list with prices, can pick one or many
Donation	Visitor picks any amount (with suggested defaults)	Suggested amount buttons + custom amount input
User-Defined Amount	Visitor types in any amount	Single amount input
Collect Credit Card	No charge — just save the card for later	Card form with no amount displayed

Set this in the Payment field's Properties tab.

Sell Products​

Pick one or more products from your account's catalog. Each product can be a one-time charge or a recurring subscription.

Product Setup​

1. Add products in Settings → Products (separate area). Each product has a name, price, billing frequency (MONTHLY, YEARLY, QUARTERLY, ONE_TIME), and optional interval count.
2. In the form's Payment field properties, click Add Product and pick from your catalog.
3. Each product on the form has its own row — you can add multiple, plus optionally allow customers to select multiple at checkout.

Multiple Product Selection​

When you have more than one product on the field:

Setting	Behavior
Select One	Radio-style — visitor picks exactly one product
Select Multiple	Checkbox-style — visitor can pick any combination
All Selected	Every product is forced — visitor pays for the bundle, no opting out

Product-Specific Settings​

Setting	What It Does
Product Header Text	Custom heading above the product list (e.g. Choose your plan)
Section Header Text	Custom heading above the payment section as a whole
Show Product Prices	Toggle individual product prices on/off
Show Total Price	Toggle total at the bottom

Donation Mode​

The visitor picks an amount. You supply a few suggested values and let them type a custom amount too.

Setting	What It Does
Amount Label	The label on the amount input (e.g. Donation amount)
Currency	ISO currency code (USD, EUR, GBP, etc.)

Suggested-amount buttons can be configured by adding products with the donation amounts as their prices and using Select One mode.

User-Defined Amount​

A single text input where the visitor types in an amount. No suggested values, just a free-form number.

Setting	What It Does
Amount Label	The label on the amount input
Currency	Currency code

Useful for "name your price" or "pay what you want" flows.

Collect Credit Card (No Charge)​

Tokenizes the card and saves it on the lead's Stripe customer record. No actual charge happens. Use for:

• Capturing a card for later subscription billing
• Membership signups where the first charge is delayed
• Authorization-only flows where charges happen via your own backend after lead qualification

Universal Payment Settings​

These apply across all modes.

Card & Address Toggles​

Setting	Behavior
Show Credit Card	Show the Stripe card element (default on; off only makes sense for some advanced ACH/bank flows)
Show CVV	Toggle the security code field
Collect Card Holder Name	Add a separate "Cardholder Name" input
Collect Phone	Add a phone input alongside the card form
Collect Email	Add an email input alongside the card form

Billing Address​

Mode	What's Collected
No	No billing address
ZIP Only	Just country + postal code
Full Address	Street, city, state/region, postal code, country

ZIP-only is enough for most US/Canada card verification (AVS) and is the smoothest UX. Full address is for international or higher-fraud-risk merchants.

Coupon Code​

Setting	Behavior
Show Coupon Code	Toggle the coupon-code input (visitor enters a code, it applies a Stripe coupon to the charge)

Billing Confirmation​

Setting	Behavior
Add Billing Confirmation	When on, adds a checkbox the visitor must tick before submitting
Agreement Text	The text next to the checkbox (e.g. I authorize my card to be charged the displayed amount.)

How a Payment Submission Works​

When the visitor clicks Submit on a form with a Payment field:

1. The Stripe element tokenizes the card client-side. If anything's invalid (incomplete card, declined CVV, etc.), the form shows an error and stays put.
2. The tokenized payment data is bundled with the rest of the form's responses.
3. The form POSTs to /api/forms/public/{slug}/submit.
4. Backend validates the form, creates a Stripe charge / customer / subscription per the mode, and writes the submission row.
5. On success, the form's Thank You / Success Message / Redirect runs as usual.

If Stripe rejects the card or the charge fails, the visitor sees the failure and stays on the form to try again.

Worked Example: Donation Form​

Goal: Collect $5 / $10 / $25 / custom donations.

Steps:

1. Add three products in Settings → Products: $5 Donation, $10 Donation, $25 Donation.
2. In the form, drop a Payment field.
3. Mode: Donation.
4. Add the three products to the Payment field.
5. Multiple Product Selection: Select One.
6. Show Total Price: on.
7. Show Coupon Code: off (probably not relevant for donations).
8. Save & Publish.

Visitors see three big "$5 / $10 / $25" buttons + a custom-amount input. Picking one and submitting a card creates a one-time Stripe charge.

Worked Example: Subscription Signup​

Goal: A signup form that charges a recurring $29/month subscription on submit.

Steps:

1. Create a Pro Plan — $29/month product in Settings → Products, billing MONTHLY.
2. In the form, drop a Payment field.
3. Mode: Sell Products.
4. Add the Pro Plan product.
5. Multiple Product Selection: All Selected (only one product, no choice).
6. Collect Card Holder Name: on.
7. Billing Address: ZIP Only.
8. Save & Publish.

Visitors who submit have a Stripe customer + subscription created automatically and start being billed.

---

Next Steps​

• Submissions — How payment submissions are stored
• Field Properties — Other field settings on the Payment field
• Form Settings — Customize submit/success/redirect for paid forms