Set up a custom checkout action with Stripe

ConvertSite's Stripe-backed checkout lets you collect payments directly on your site. You configure a Checkout component to display the payment form, and then add a Charge action to process the payment when users submit.

The Checkout component displays a Stripe Elements payment form. When users submit, the Charge action processes the payment through your connected Stripe account.

Before you start

You'll need:

• A connected Stripe account — Your workspace must have Stripe connected. If no Stripe account is connected, the checkout will fail with an error

• A Checkout component on your page — This displays the payment form

• An amount to charge — Either a fixed value or a calculated value from your logic

Add a Checkout component

The Checkout component displays the Stripe Elements payment form to your users.

1. Add a Checkout component to your page

2. In the component settings, configure:

   • Amount — The payment amount (can be a fixed number or a variable from your calculations)

   • Currency — Choose from: USD, EUR, GBP, CAD, AUD, CHF, SEK, NOK, DKK, SGD, HKD, NZD

   • Description — What appears on your customer's bank statement

Add a Charge action

The Charge action triggers the actual payment when users submit your form or click a button.

1. Add the Charge action to your workflow

2. Configure the action:

   • checkout_component_id — Links to the Checkout component you created

   • customer_email — The customer's email address for the receipt

   • customer_name — (Optional) The customer's name

Configure the payment amount

The amount you charge can come from different sources:

Fixed amount

For simple pricing, enter a fixed number like 5000 for $50.00 (amounts are in cents).

Dynamicamount from calculations

For calculated pricing, reference a variable from your site's logic:

ORDER_TOTAL * 100

ConvertSite stores amounts in the currency's smallest unit. Multiply by 100 to convert dollars to cents.

Set the currency

Choose the currency for your payments. The Checkout component supports:

• USD — US Dollar

• EUR — Euro

• GBP — British Pound

• CAD — Canadian Dollar

• AUD — Australian Dollar

• CHF — Swiss Franc

• SEK — Swedish Krona

• NOK — Norwegian Krone

• DKK — Danish Krone

• SGD — Singapore Dollar

• HKD — Hong Kong Dollar

• NZD — New Zealand Dollar

Understand the payment flow

When a customer completes checkout:

1. The Charge action sends the checkout component ID and customer details to ConvertSite's server

2. The server creates a Stripe PaymentIntent and returns a client_secret

3. Stripe.js confirms the payment using the secret

4. The customer sees a success or error message based on the result

Stripe Elements handles card validation, error display, and secure input automatically.

Troubleshooting

Next steps

• Combine checkout with calculated quotes for dynamic pricing

• Use customer_email to send confirmation emails after payment

• Build conditional logic that shows different checkout amounts based on user selections