# 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 {% hint style="info" %} Here is a link to Stripe to help you get a Stripe account set up: [Stripe docs | Overview](https://docs.stripe.com/get-started). {% endhint %} ### 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. {% hint style="info" %} Refer to [Stripe’s documentation](https://docs.stripe.com/keys) to locate your API keys and understand their usage. {% endhint %} Ensure that you use the correct keys based on your [environment](https://docs.formsort.com/publishing-and-deployment/environments): * **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**](#products) * [**Charge later**](#charge-later) ### Charge immediately

If you enable **"Allow charging the card immediately"**, you can collect payments using: * [**A** **fixed** **amount**](#a-fixed-amount): Defined in cents by you. * [**A** **variable amount**](#a-variable-amount): Defined dynamically based on a form variable (**number**-type). * and [**Product(s)**](#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. {% hint style="info" %} If you'd like to see other fields added, let us know in our Intercom chat! {% endhint %} #### 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"`. {% hint style="info" %} **Note:** The payment ID is sent when [answers](https://docs.formsort.com/getting-data-out#sending-answers) are sent, not immediately. {% endhint %} 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`: ```json { "answers": { "phone": "6262626262", "email": "test@test.com", "stripe": { "paymentIntentId": "pi_3RADdoC6ecQgQwdM0pfFGa3d" }, } ``` If you [store responses in Formsort](https://docs.formsort.com/saving-and-retrieving-responses), 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](https://docs.formsort.com/response-data-collection-and-management/variable-schema#data-types).

{% hint style="info" %} If you don't have a `number` variable, create a [**calculated variable function**](https://docs.formsort.com/response-data-collection-and-management/variable-schema/calculated-answers) that returns the amount (as a `number`) in cents. {% endhint %} 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: ```json { "answers": { "charge_amount_in_cents": 6000, "stripe": { "paymentIntentId": "pi_3RADPfC6ecQgQwdM0VKGOZdV" }, "email_address": "test@test.com", "phone_number": "1234567890 }, ``` {% hint style="info" %} If you store responses in Formsort, the Stripe object will also be included in the answer set. {% endhint %} ### 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**.

3. Enter: * **Name** - appears as the button/dropdown label in Formsort (pictured below). * **Amount -** visible based on pricing setup: recurring or one-time.

***

product-name-field — The name field from the Stripe product, as it appears in Formsort

4. Click **Add Product**. {% hint style="info" %} The **More options** fields are required only for the needs of your business, and are not included as part of the Formsort integration. {% endhint %} #### Configuring Products in Formsort Once Products are added in Stripe, configure the **Payment component** in Formsort: {% hint style="info" %} Currently, Stripe [will not load in the **Live Preview** of a form](#stripe-in-live-preview). 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. {% endhint %} 1. Click **Edit Products** under **How much to charge**. 2. Choose a **Product Select Component** style: * **Buttons**: Styled as [select buttons](https://docs.formsort.com/adding-questions-and-content/question-reference/select). * **Dropdown**: Styled as a [dropdown](https://docs.formsort.com/styling/customizing-appearance/dropdown-menu) (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**.

2. Click **Add Another Price**.

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

***

3. 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](https://docs.formsort.com/css-and-advanced-styling/custom-css-overrides#comparison-cards). #### 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](https://docs.formsort.com/saving-and-retrieving-responses), 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](https://docs.formsort.com/response-data-collection-and-management/variable-schema/external-answers) (URL parameters) * [API Variable](https://docs.formsort.com/response-data-collection-and-management/variable-schema/api-answers) (API lookup) * [Calculated Variable](https://docs.formsort.com/response-data-collection-and-management/variable-schema/calculated-answers) (locally-calculated variable) {% hint style="warning" %} 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. {% endhint %} ### Charge later By default, **"Allow charging the card immediately"** is disabled. In this case: * A **Token ID** (`tok_XXXXXXXX`) is sent to [answer integrations](https://docs.formsort.com/getting-data-out#sending-answers) 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](https://docs.formsort.com/publishing-and-deployment/preview-window) 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.

The Stripe component in a live, "production" instance.

{% hint style="info" %} Here is more Stripe documentation to help you set up your Stripe account for testing: . Always make sure to test before going live! {% endhint %}