Verbb
You are viewing beta documentation for Formie 4.x.
Fields

Payment

Use Payment when the form should collect or authorize a payment as part of the submission flow.

Use Payment when the form itself is responsible for taking payment. If the project already has a full checkout flow, it may be better to keep payment there and link the form to that process.

Key settings

  • Payment integration - Choose the provider used by this field.
  • Amount and currency - Configure the amount to charge or authorize.
  • Billing details - Map form fields into the payment provider’s expected customer or billing data.
  • Provider behavior - Configure provider-specific settings such as hosted UI, tokenization or redirects.
  • Submission behavior - Account for any Ajax or workflow requirements surfaced by the provider.

Submitted value

Payment stores payment-related submission data rather than normal text input. The exact value and records depend on the configured provider and whether the payment is authorized, captured, redirected or reconciled later.

When querying or saving submissions through GraphQL, payment behavior depends on the provider and submission workflow. Query the form’s formFields and include inputTypeName when building a custom front end.

Payment providers

Payment providers are configured in two places:

  1. Create and configure a payment integration in Formie → Settings → Payments.
  2. Edit the Payment field, then choose the provider for Payment Integration.

Provider setup is documented on the payment integration pages:

Payment behavior depends on the selected provider. Some providers use hosted payment UI, some tokenize card details in the browser, and some complete payment through redirects or webhook updates. If you are building a custom provider, see Payment Integration.

Theme config

The Payment field can be targeted with the payment theme config key.

{{ craft.formie.renderForm('contactForm', {
    themeConfig: {
        payment: {
            field: {
                attributes: {
                    class: 'my-payment-field',
                },
            },
            stripePlaceholder: {
                attributes: {
                    class: 'my-stripe-placeholder',
                },
            },
        },
    },
}) }}

Use theme config for surrounding markup and attributes. Be careful with template overrides because payment providers may require specific elements or scripts.

For full Tailwind, Bootstrap and other framework examples, see Formie theme configs (opens new window).

Front-end reference

Payment fields often depend on provider JavaScript, Ajax submission, redirects or webhook reconciliation. If you customize rendering, keep the provider’s required front-end assets and submission flow intact.

The front-end docs live on the separate browser UI reference site and cover rendered markup, data attributes, styling classes and JavaScript behavior for custom front-end implementations.

  • Use Products or Variants when the form should select Commerce elements.
  • Use Calculations when the payment amount is derived from other field values.
Last updated: June 2, 2026, 3:48:40 PM
Previous Password Next Phone