{"id":2690,"date":"2022-07-25T16:52:36","date_gmt":"2013-02-06T10:34:41","guid":{"rendered":"http:\/\/www.123formbuilder.com\/docs\/?p=2690"},"modified":"2024-08-20T07:18:50","modified_gmt":"2024-08-20T07:18:50","slug":"step-by-step-guide-on-stripe-integration","status":"publish","type":"post","link":"https:\/\/www.123formbuilder.com\/docs\/step-by-step-guide-on-stripe-integration\/","title":{"rendered":"123FormBuilder and Stripe Integration"},"content":{"rendered":"\n

The 123FormBuilder \u2013 Stripe payment integration provides an extremely easy way to collect payments with your online order form. The best thing about Stripe is that it doesn’t require a merchant account. Funds go directly into your bank account and Stripe’s fee at successful payments is 2.9% + 30\u00a2, with no other setup or monthly fees.<\/p>\n\n\n\n

Stripe<\/a> is primarily aimed at developers, but 123FormBuilder is here to help non-developers out. Like any other of our payment integrations, the integration with Stripe requires just authentication data that allows the applications to communicate. Your order form with Stripe can be set up in minutes!<\/p>\n\n\n\n

\n\n\n\n

Setting up your Stripe integration<\/h2>\n\n\n\n

1. Click New Form<\/b> from your account dashboard and start creating your payment form.<\/p>\n\n\n\n

You can use choice fields (single\/multiple choice and dropdown lists) to display the products on sale or, even better, the Product field<\/b>. <\/p>\n\n\n\n

2. In your Form Editor<\/b>, in the left side panel, you will notice the Payments <\/b>section. You can also use the search bar to quickly find Stripe<\/b>.<\/p>\n\n\n

\n
\"Stripe<\/a><\/figure>\n<\/div>\n\n\n

3. After adding Stripe to your form, you will notice a couple of changes: the Stripe<\/b> payment processor has a tag near its name and the settings panel opens up to the right side of the page.<\/p>\n\n\n\n

\"Stripe<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

4. In order to set up the Stripe integration, you have to click on Connect<\/b> and follow the instructions to enable the integration.<\/p>\n\n\n

\n
\"Connect<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

5. Back to the Form Editor<\/b>, you have to provide the connected account. If you want to use recurring billing, tick the option Use recurrent payment<\/em> and add the necessary data. The shortest billing cycle you can set for your customers is daily.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Stripe<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

If you have a donation form, you can also tick the option Payment represents a donation<\/em>. Please be aware that this option cannot be used with recurring payments.<\/p>\n\n\n\n

\"Stripe<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

6.\u00a0Enable\u00a0the payment integration by clicking on the Enable<\/b> button. After you enable Stripe, you will notice a couple of changes on your form.<\/p>\n\n\n\n

The Stripe payment processor on the left side panel has an Enabled<\/b> tag on it so you can easily notice which payment processor is enabled.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Stripe<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Another change is that an Order summary <\/b>will be displayed on your form. Here will appear all the products your respondents select on the form, together with the price per option, quantity, and the total price. If you want to customize the Order summary, you only have to click on it and the available settings will open on the right side panel.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Order<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

You’ll also notice a change related to the Submit <\/b>button. Once your payment integration is enabled, the Submit button is changed to\u00a0Continue to payment<\/b>. Below it, we are displaying a disclaimer together with the Stripe logo so that respondents are aware they are proceeding to a payment.<\/p>\n\n\n\n

Also, the accepted cards by the Stripe integration are visually displayed so that respondents know from the start what is the accepted payment method.<\/p>\n\n\n\n

You can customize the action bar (everything that is related to the submit button, additional buttons, disclaimer, etc) by simply clicking on this area.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Stripe<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

You can also make changes to the default settings related to showing the accepted cards and the icon & logo of the payment processor. By default, both of these settings are enabled, but you can disable them by clicking on the payment processor. <\/p>\n\n\n\n

\"Display<\/a><\/figure>\n\n\n\n
\n\n\n\n

If the Reference ID is enabled on your online form, you’ll also find it in your Stripe account, in the Transactions<\/b> \u2192 Payments<\/b> section, under Description<\/b>. You may use this workaround to track your transactions.<\/p>\n\n\n\n

Important Note <\/b><\/p>The Reference ID prefix can contain up to 9 characters.<\/span><\/div>\n\n\n\n

\n\n\n\n

Testing payments with Stripe<\/h2>\n\n\n\n

To test out the integration without having to do real transactions, follow these steps:<\/p>\n\n\n\n

1. Enable the Use sandbox<\/b> option.<\/p>\n\n\n\n

2. Click Connect<\/b>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Testing<\/a><\/figure>\n<\/div>\n\n\n

3. On the new tab at the top of the page click on Skip this form<\/b>.<\/p>\n\n\n

\n
\"Stripe<\/a><\/figure>\n<\/div>\n\n\n

4. Make a test submission and check your Test data<\/em> information in Stripe.<\/p>\n\n\n

\n
\"View<\/a><\/figure>\n<\/div>\n\n\n

Now sit back and let the payments begin!<\/p>\n\n\n\n

Stripe supports processing payments in over 135 currencies. For a list of all currencies, check out their article<\/a>.<\/p>\n\n\n\n

\n\n\n\n

Related articles<\/b><\/p>\n\n\n\n