The Stripe integration allows you to create payment forms. You can do it by using the new Stripe Elements to create a payment form that securely collects your customer’s card information without you needing to handle sensitive card data. In this article, you will learn how to use this integration.

Create a Payment Form #

Forms are created through the Form Builder. You just need to drag and drop the fields your form needs and add an HTML Snippet Field with the following content:

{{STRIPE}}

Or to keep the design:

<div class="form-group">
{{STRIPE}}
</div>

Then, from the Stripe Add-On UI you can select the fields that will collect the necessary information to pay in Stripe. For example, price, quantity, etc.

Get your API Keys from your Stripe account #

Now that you have your form, let’s integrate it with your Stripe account. For this you must perform the following steps:

1. Log in on Stripe
2. Under “API” section, copy your API Keys.

Set Up Payment Forms with your Stripe account #

To create a Stripe configuration, you must perform the following steps

1. Go to the Add-Ons Manager and click on Stripe.
2. Click on the Setup a Payment Form button.
3. A form used to configure the payment process will appear:
   • Form: Required. It is the form you’ll integrate with your Stripe account.
   • Status: Allows to disable the Stripe configuration.
   • Secret Key: Required. Api Credential.
   • Publishable Key: Required. Api Credential.
   • Items: Each item represents a product or service that will be detailed on the Stripe website. It’s composed of:
     • Description: Describes your product or service.
     • Price: It’s the form field used to collect the product price.
     • Quantity: It is the form field to collect the number of products. The number of products is multiplied by the price of each product, to get the sub-total transaction. If you don’t select any fields, the amount used is going to be 1.
   • Credit Card Field Settings: Is a group of fields that let you customize how your customers see your Credit Card field and share their information. You can set:
     • Label: Text to identify your credit card.
     • Description: Text that you can attach to a charge. Your receipt emails will include it.
     • Statement Descriptor: Up to 22 characters to be displayed on your customer’s credit card statement.
     • Currency: The charge currency. We recommend using “United States dollar'”.
     • Hide Postal Code: Enable to hide the postal code field.
     • Hide Icon: Enable to hide the credit card icon.
     • Hide Style: Enable to hide custom CSS styles.
     • Style: This field let you customize the Credit Card Field appearance by using CSS properties in JSON format. Click here to get more details.
   • Additional Fields: Is a group of fields that let you customize additional form fields. Although these fields are optional, this information can be used to perform a number of verifications, such as CVC, ZIP, and address verification.
     • Receipt Email
     • CardHolder Name
     • Address Line 1
     • Address Line 2
     • Address City
     • Address State
     • Address Zip
     • Address Country
4. Click Create.