# Stripe payment

## Overview

Integrate with [Stripe Checkout](https://stripe.com/docs/payments/checkout) to collect payments seamlessly after form submissions. This integration ensures a smooth and secure transaction experience for your customers.

### Key Steps to Set Up the Integration

1. Obtain the API key from the Stripe admin dashboard.
2. Customize the Stripe Checkout page in the Stripe admin.
3. Create a new form for testing purposes.
4. Add a payment field to the form via the Form's Design section and configure it.
5. Save the form design.
6. **Test the entire flow from the customer's perspective.**
7. Deploy the integration on a live form once testing is successful.

> **Tip:** Always test thoroughly before going live!

***

## How to Obtain the Stripe API Key

1. Sign up for a Stripe account if you don’t already have one.
2. Access the [API key](https://stripe.com/docs/keys) in the Stripe dashboard:

* Navigate to **Developers > API Keys**.
* Follow the [latest Stripe documentation](https://stripe.com/docs/keys#reveal-an-api-secret-key-live-mode) to retrieve your key.

<figure><img src="https://4168782644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fm4vguP4EvKgU8vwxKCJR%2Fuploads%2Fgit-blob-bfef0690b8ef3113c2e4092b26afea1451ea6f71%2FScreenshot%202024-02-09%20at%2012.18.02.png?alt=media" alt="Stripe API Key Screenshot"><figcaption></figcaption></figure>

3. While in the Stripe dashboard, customize the payment checkout page:

* Go to **Settings > Payments > Checkout**.
* Configure branding and appearance to match your needs.

***

## Setting Up the Integration

1. Once you have the Stripe API key, navigate to **App Admin > App Settings > Integration > Stripe Payment** in your app.
2. Enter and validate the API key.

<figure><img src="https://4168782644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fm4vguP4EvKgU8vwxKCJR%2Fuploads%2Fgit-blob-fcf63dce323f9b49aad9419917de308f27c1b265%2FScreenshot%202024-02-09%20at%2012.24.46.png?alt=media" alt="Stripe Integration Settings Screenshot"><figcaption></figcaption></figure>

***

### Adding the Payment Field

1. After validating the payment integration, the payment field will become available in the Form's Design section.![](https://4168782644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fm4vguP4EvKgU8vwxKCJR%2Fuploads%2Fgit-blob-4ccc3968cd9125e89f1adfb417892c0c2b39fa37%2FScreenshot%202024-02-09%20at%2012.26.22.png?alt=media)
2. Add the payment field to the form. **Note:** Only one payment field is allowed per form.

<figure><img src="https://4168782644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fm4vguP4EvKgU8vwxKCJR%2Fuploads%2Fgit-blob-ea8415f604bd1132cdb65171c36d720b4a6e9223%2FScreenshot%202024-02-09%20at%2012.42.31.png?alt=media" alt="Payment Field Screenshot"><figcaption></figcaption></figure>

### Required Payment Field Details

* **Product Name:** The name displayed to customers on the Stripe Checkout page.
* **Price:** The amount to be charged.
* **Currency:** The currency for the transaction.

You can also configure success and cancellation messages in the payment field options. Once configured, save the form design.

***

## Customer Experience

After saving the form, customers will:

1. Fill out the form as usual.
2. Be redirected to the Stripe-hosted payment checkout page upon submission.
3. Complete the payment using their preferred method (e.g., credit card).
4. See a success or cancellation message based on the payment outcome.

<figure><img src="https://4168782644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fm4vguP4EvKgU8vwxKCJR%2Fuploads%2Fgit-blob-2490137ab5479bcd185944361f9fd3d4bcf1eb07%2FScreenshot%202024-02-09%20at%2012.51.00.png?alt=media" alt="Stripe Checkout Example"><figcaption></figcaption></figure>

> **Note:** The product name, price, and description displayed on the checkout page are configured in the payment field.

***

## Emails and Statuses

* By default, form submissions are assigned the **Requested** status (this can be changed in the form's settings).
* An email is automatically sent to the customer upon submission (customizable or disable-able in the form's settings).

### Payment-Specific Statuses

Once payment integration is enabled, two new statuses are added:

* **Paid:** Automatically assigned when payment is successful.
* **Unpaid:** Assigned when payment fails or is canceled.

To send emails based on payment outcomes, customize the email templates under **App Settings > Statuses > Paid/Unpaid**.

***

## Why Use Payment Integration?

Payment integration is useful in various scenarios, such as:

* Charging for registrations.
* Collecting partial payments for claims.
* Covering shipping costs for claims.

This integration streamlines the payment process, enhancing both customer experience and operational efficiency.