Stripe
Last updated
Was this helpful?
Last updated
Was this helpful?
Integrating Stripe with Formsort allows you to collect payments seamlessly within your forms. This guide will walk you through setting up Stripe, adding it as an integration, and configuring payment components to accept payments from users.
To allow users to make payments through Stripe, you must first add your Stripe account credentials to your flow's integrations.
Navigate to Integrations → Data Integrations → Stripe.
Click Add a credential, then select Add New.
Enter your Stripe credentials:
Publishable Key (required): Found in your Stripe account configuration.
Secret Key (required for direct card charges in Formsort).
At a minimum, you will need to provide a Publishable Key, found in your Stripe account configuration. A Secret Key will additionally be required to charge cards directly in Formsort.
Production Environment: Live Publishable Key (must start with pk_live_)
Staging or Testing Environment: Test Publishable Key (must start with pk_test_)
The Description field is optional but can help your team distinguish configurations across environments.
To enable Stripe payments in your form:
Open Formsort Studio.
Create a Payment question.
Set Provider to Stripe.
The Studio will then display which environments have Stripe credentials configured.
There are several ways to collect payments from your users:
Charge immediately
If you enable "Allow charging the card immediately", you can collect payments using:
You can also attach Phone and Email variables to the transaction, which will be stored in Stripe’s customer and transaction records. Currently, only these fields are supported; additional fields may be added in the future.
Once a fixed amount charge is made:
A Transaction is created in Stripe.
Transactions can be viewed in Balances → All Activity in Stripe.
A payment ID is sent to answer integrations, appearing as: "stripe":"pi_XXXXXXXXX".
Here is an example stripe transaction that was charged for a fixed amount of $95...
And the associated answers sent in the webhook payload at finalize; notice the Stripe object that holds the paymentIntentId:
The transaction record in Stripe will be similar to that of the fixed-amount charge, and the webhook payload will contain the Stripe object with the paymentIntentId and the variable used to determine the amount:
With the Product option, Formsort fetches your Stripe products in real time, allowing users to select purchase options.
First, you will need to add a product in the Product catalog section in Stripe.
In Stripe, go to Product Catalog.
Click Create Product.
Enter:
Name - appears as the button/dropdown label in Formsort (pictured below).
Amount - visible based on pricing setup: recurring or one-time.
Click Add Product.
Once Products are added in Stripe, configure the Payment component in Formsort:
Click Edit Products under How much to charge.
Choose a Product Select Component style:
Native Dropdown: Browser-based dropdown styling.
The Product Select Component Label and Pricing Cards Label are optional fields that provide additional information when using a Select component or a pricing card.
If a product has multiple price points:
In Stripe, go to the product and click Edit Product.
Click Add Another Price.
Enable Is Multiple Price in Formsort.
Once everything is configured, you will see that the Product has a card for each price tier.
You can pass metadata into the pricing card, to help explain to your users what they are buying at each price point.
There are two sections of the card that can be customized: the title of the card, and the description in the card.
To pass data into these fields:
Open the product in Stripe.
Click a specific price and select Edit Metadata.
Add:
formsort_title (will be inserted into the card title area, and by default will appear as an H4 element).
formsort_description (markdown-supported).
e.g. use asterisks to create a bullet list of descriptions, as in the example below.
General styling for comparison cards can be found in Theme -> Components -> Comparison Cards.
Once a transaction is made, you will see the transaction record in Stripe update.
If you receive webhooks, the Stripe transaction data will be nested in the stripe object, along with the session's other answers:
To provide a promo code field for your users, enable Allow inline promo code.
If a promo code is valid, the discount will be applied at checkout.
To autofill promo codes for your users:
enable Promotion code variable and choose the variable that is going to provide the promo code.
Formsort suggests using the following variable types to provide the promo codes:
The definition of the promo code variable should be available before the user arrives at the Stripe checkout step — trying to calculate the definition at the time of checkout could result in errors.
By default, "Allow charging the card immediately" is disabled. In this case:
You must charge the user later using the Token ID via Stripe.
Products cannot be used with this setting.
To experience a live test of the integration, deploy your form to the staging or production environments and test the functionality there.
Refer to to locate your API keys and understand their usage.
Ensure that you use the correct keys based on your :
: Defined in cents by you.
: Defined dynamically based on a form variable (number-type).
and : Pulled from your Stripe Product Catalog.
Note: The payment ID is sent when are sent, not immediately.
If you , the Stripe object will also be included in the answer set:
With the Variable amount setting, the charge amount is dynamically calculated based on a previous form question. The variable must return a number .
If you don't have a number variable, create a that returns the amount (as a number) in cents.
Currently, Stripe . When testing updates to the component, you will need to deploy the form and view a production or staging instance.
Buttons: Styled as .
Dropdown: Styled as a (select-based option).
If you require custom styling, you can use the class names referenced in .
If you , the Stripe object will also be included in the answer set:
(URL parameters)
(API lookup)
(locally-calculated variable)
A Token ID (tok_XXXXXXXX) is sent to when answers are submitted.
The Stripe integration will not be functional in the window. Instead, a card-capture input area and a "start" button will be mocked up to get a sense of how the integration will sit in your form.
.
