Skip to main content

Enable Form Payments

Goal​

Enable payments on a form so visitors can pay with Stripe and/or PayPal using a fixed amount, a custom amount, or a Calculation field total.

Prerequisites​

  • Complete General payment settings (gateways, currency, test mode).
  • Site uses HTTPS.
  • Form already exists in the Visual Builder (any form type can enable payments).

Steps​

Step 1: Enable payment on the form​

  1. Open the page in the Visual Builder and select the Form module.
  2. Open the Content tab.
  3. Turn on Enable Payment (Price / payment group).
  4. Enable Stripe, PayPal, or both.
  5. Optionally customize gateway button labels.

Step 2: Choose the price type​

In Price Options, set Price Type:

Price TypeUse when
FixedOne static amount for every submission
CustomVisitor enters an amount (for example donations)
CalculatedAmount comes from a Calculation field

Fixed price​

Enter Fixed Price.

Custom price​

Configure Minimum Price, Maximum Price, optional Default Price, Price Step, and validation messages (%f inserts the limit or step amount).

Calculated price​

  1. Add one or more Calculation fields with formulas that produce the payable amount.
  2. Set Price Type to Calculated.
  3. If the form has more than one calculation field, set Payment Calculation Field to the field that should drive the payment amount.
Multiple calculation fields

Forms can include more than one calculation field. Use Payment Calculation Field to choose which result sets the charge. The setting appears when payments are enabled, price type is Calculated, and the form has more than one calculation field.

Step 3: Configure price display​

For all price types:

  • Price Label — Text shown with the amount (for example Total).
  • Price Label Position — Top or Inline.
  • Price Display Position — Top of Form or Above Submit Button (hidden when Price Field Placement is set).
  • Price Field Placement — Optional field ID; places the price after that field instead of using display position.

Step 4: Configure payment UI behavior​

In payment options:

  • Product Name — Static text or field merge tags (for example %%f_service%%).
  • Payment Section Label — Optional label above the payment UI.
  • Payment Display Type — In Page or In Modal Overlay (overlay adds submit button text; use %s for the price).
  • Show Payment Selection Buttons — Shown only when both Stripe and PayPal are enabled. When a single gateway is enabled, selection buttons stay hidden automatically.
  • Hide Submit Until Payment Amount — Hide the submit button until the payment amount is greater than zero (useful when calculated totals start at 0).
  • Optional card labels, placeholders, and Terms & Conditions checkbox.

Step 5: Style and test​

  1. Use the Design tab to style payment area, gateway buttons, overlay, errors, and price text.
  2. Keep gateways in test/sandbox mode.
  3. Submit a test payment and confirm the transaction in Stripe/PayPal and Form Payments.

Verify it works​

  • Payment UI appears on the form when payment is enabled.
  • Calculated forms charge the amount from the selected Payment Calculation Field.
  • Single-gateway forms do not show unnecessary gateway switch buttons.
  • With Hide Submit Until Payment Amount on, submit stays hidden until the amount is above zero.
  • Test checkout completes and the form submission finishes successfully.

Common pitfalls​

  • Enabling payment on the form without configuring global gateway credentials.
  • Setting Calculated price without a calculation field (or without selecting one when multiple exist).
  • Expecting gateway selection buttons when only one gateway is enabled.
  • Switching to live keys before a successful sandbox test.

What's Next​