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.
Here is a link to Stripe to help you get a Stripe account set up: Stripe docs | Overview.
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.
Refer to Stripe’s documentation to locate your API keys and understand their usage.
Ensure that you use the correct keys based on your environment:
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:
A fixed amount: Defined in cents by you.
A variable amount: Defined dynamically based on a form variable (number-type).
and Product(s): Pulled from your Stripe Product Catalog.
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.
If you'd like to see other fields added, let us know in our Intercom chat!
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".
Note: The payment ID is sent when answers are sent, not immediately.
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:
With the Variable amount setting, the charge amount is dynamically calculated based on a previous form question. The variable must return a number data type.
If you don't have a number variable, create a calculated variable function that returns the amount (as a number) in cents.
A transaction record in Stripe will be similar to a fixed-amount charge, and the webhook payload will contain 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.
The More options fields are required only for the needs of your business, and are not included as part of the Formsort integration.
Once Products are added in Stripe, configure the Payment component in Formsort:
Currently, Stripe will not load in the Live Preview of a form. When testing updates to the component, you will need to deploy the form and view a production or staging instance.
It is suggested that you use the staging environment for testing, if available.
Click Edit Products under How much to charge.
Choose a Product Select Component style:
Buttons: Styled as select buttons.
Dropdown: Styled as a dropdown (select-based option).
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.
If you require custom styling, you can use the class names referenced in Custom CSS.
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:
External Variable (URL parameters)
API Variable (API lookup)
Calculated Variable (locally-calculated variable)
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:
A Token ID (tok_XXXXXXXX) is sent to answer integrations when answers are submitted.
You must charge the user later using the Token ID via Stripe.
Products cannot be used with this setting.
The Stripe integration will not be functional in the Live Preview 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.
To experience a live test of the integration, deploy your form to the staging or production environments and test the functionality there.
Here is more Stripe documentation to help you set up your Stripe account for testing:
https://docs.stripe.com/testing#cards.
Always make sure to test before going live!
