Stripe

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.

Adding Stripe

Adding Stripe to your Form integrations

To allow users to make payments through Stripe, you must first add your Stripe account credentials to your flow's integrations.

1. Navigate to Integrations → Data Integrations → Stripe.

2. Click Add a credential, then select Add New.

3. 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.

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.

Adding the Payment component to the form

To enable Stripe payments in your form:

1. Open Formsort Studio.

2. Create a Payment question.

3. Set Provider to Stripe.

4. The Studio will then display which environments have Stripe credentials configured.

Stripe Payments API

There are several ways to collect payments from your users:

• Charge immediately

• Products

• Charge later

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.

A fixed amount

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:

{
  "answers": {
    "phone": "6262626262",
    "email": "[email protected]",
    "stripe": {
      "paymentIntentId": "pi_3RADdoC6ecQgQwdM0pfFGa3d"
     },
  }

If you store responses in Formsort, the Stripe object will also be included in the answer set:

A variable amount

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.

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:

{
  "answers": {
    "charge_amount_in_cents": 6000,
    "stripe": {
      "paymentIntentId": "pi_3RADPfC6ecQgQwdM0VKGOZdV"
    },
    "email_address": "[email protected]",
    "phone_number": "1234567890
  },

Products

With the Product option, Formsort fetches your Stripe products in real time, allowing users to select purchase options.

Creating a Product in Stripe

First, you will need to add a product in the Product catalog section in Stripe.

1. In Stripe, go to Product Catalog.

2. Click Create Product.

1. Enter:

   • Name - appears as the button/dropdown label in Formsort (pictured below).

   • Amount - visible based on pricing setup: recurring or one-time.

1. Click Add Product.

Configuring Products in Formsort

Once Products are added in Stripe, configure the Payment component in Formsort:

1. Click Edit Products under How much to charge.

2. 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.

Multiple prices

If a product has multiple price points:

1. In Stripe, go to the product and click Edit Product.

1. Click Add Another Price.

1. Enable Is Multiple Price in Formsort.

Once everything is configured, you will see that the Product has a card for each price tier.

Passing data into the price cards

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:

1. Open the product in Stripe.

2. Click a specific price and select Edit Metadata.

1. 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.

Styling price comparison cards

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.

Transaction record

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:

// Example
{
  "answers": {
    "time_zone": "America/Denver",
    "stripe": {
      "paymentIntentId": "pi_3R9wReC6ecQgQwdM1OMlvF7I",
      "subscriptionId": "sub_1R9wReC6ecQgQwdMp5F1ZLOh",
      "selectedProductId": "prod_ROQ0exf8TguzDz",
      "selectedProductName": "Product 2"
    }

If you store responses in Formsort, the Stripe object will also be included in the answer set:

Promo Codes

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.

Autofilling promo codes

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)

Charge later

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.

Stripe in Live Preview

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.