The complete guide to payment and subscription forms with Stripe

With Arengu, you won't need to build a backend or frontend from scratch to create fully personalized payment forms with Stripe: we take care of the logic, you just have to visually design it. 

Our forms are compatible with any tech stack, thanks to our JS SDK, and they can be embedded by pasting a simple line of code. High security and PCI standards are also guaranteed, replacing credit card details by a non-reversible and securitized token.

Integrate Stripe in any form step

A native integration with Stripe is provided, so it is really easy to set it up in any step of the form: drag and drop the payment field from the left menu, click on the field to open its settings, and just copy and paste the Publishable key and the Secret key from your account.

You will find these keys in your Stripe account in the Developers > API keys menu. Note that there are two different keys of each type: two to test the form and two to start charging the payments. Remember to replace test keys before publishing, with live ones.

How to configure each type of payment

Now we can set up field settings depending on the type of payment we want to use:

• One-off payments: Charges that are paid a single time, with a fixed or a dynamic amount that you can easily show in the form using variables.
• Recurring payments & Subscriptions: Charges that are repeated periodically can also be fixed or dynamic.

Let's take a look at them and learn how to configure them in a few minutes.

One-off payments

A one-off payment is a charge which has only to be paid once, for example, an activation fee or a donation. Let's take a look.

Field settings for one-off payments

First, click on the payment field to open the settings, to properly configure the field for this type of payment, as you can see in the picture below.

Once you have pasted the keys of your Stripe account, you just have to:

1. Specify the payment type: Charge
2. Select the currency from the dropdown.
3. Set up the amount using a period (.) to separate decimals.

Finally, simply remember to confirm that the 'Required' checkbox is activated, as you can see in the picture, if you want the payment to be mandatory.

Dynamic values

You can also set up a variable amount to charge simply by substituting the amount with the final price variable. They are used for customizable services and products, when the price varies depending on the chosen characteristics, and also for free amount donations.

Just reference the final price variable {{fields.donation}} in the 'Amount' field, and then it will be automatically updated and charged.

It could be the resulting prize after the product or service customization, or the amount donated by the user in the previous form step. If you need it, check here how to reference variables in Arengu.

Recurrent payments & subscriptions

Allow your customers to pay for your products or services during a specified period of time with subscription plans. For example, by offering a monthly subscription to a magazine or product.

Creating a subscription plan in Stripe

Stripe lets you also easily create recurring payment and subscription plans. Just go to your Stripe account, click on 'Products' and then on 'Add a product'.

Create a custom recurrent pricing plan. For example, a simple monthly subscription of 5 €, which will be charged every month until the user unsubscribes from our service.

You can also use Stripe to create a subscription plan with different pricing options, just by adding different prices to a recurring product, to which specific price IDs will be automatically assigned.

You can use the product ID to reference in the forms to the entire subscription plan and the price IDs to reference each pricing option.

Field settings for subscription plans

Once the subscription plan is ready, click on the payment field to open the settings to properly configure the payment in Arengu.

Once you have pasted the Publishable key and Secret key from your Stripe account (under Developers > API keys menu): 

1. Specify the payment type: Subscription.
2. Select the type of action that you want to execute: Create subscription or Update subscription. 
3. To create a subscription plan: Include the product ID from your Stripe account. You will find it in the preview of the subscription plan, in the 'Details' section.
4. To update a subscription plan: Reference the product ID on the first input and the price ID (or IDs), to which the user will be changed, on the second one. This will replace all the items already included in that subscription.

Finally, simply remember to confirm that the 'Required' checkbox is enabled, if you want the payment to be mandatory.

Dynamic values

To create a subscription plan with different pricing options, just add different prices to a recurring product. A specific ID will be automatically assigned to each pricing option.

Back in the form editor, add a 'Choice' field listing the pricing options to allow the user to choose one of them, but in a step of the form prior to the payment.

Then, activate the 'Required' checkbox, click on 'Advanced' > 'Internal values' to open a modal window and link each option in the list with the prices from Stripe. Simply copy and paste here the ID of each pricing option in Stripe on the proper field.

Create and update customers

Once the Payment provider and Payment type settings are ready, select the type of action that you want to execute: Create customer or Update customer. 

To create a customer you must have chosen the Create subscription option before. To set it up, simply enable the Create customer option and reference the email variable of the form as you can see in the picture above.

To update a customer, select the Update customer option in the payment field settings and reference the customer ID variable. To get this variable, you will need to execute a flow before this form step to get the customer data from your Stripe account and save it as a custom state variable. You can check the tutorial here.

Coupon codes

Stripe allows you to create discount coupons to redeem when subscribing to your services. You can easily configure them following the steps below.

First, go to your Stripe account > Products > Coupons and create a new one. Define the amount or percentage, the duration, and customize the coupon code ID to make it more friendly, because this is the code that the user has to input in the form to redeem it.

Back in the form editor, add a text field before the payment one to allow users to input the coupon code. Then, reference the coupon code field ID in the payment field settings. It will send the input code to Stripe and automatically update the amount to charge.

Customer portal: managing subscriptions

You can also provide an interface for your users to manage their billing history, payment methods, update subscriptions, etc. with the Stripe customer portal. It will really save you a lot of dev time if you want to give your users a dashboard to easily manage their subscriptions.

It provides a great user experience and you will only need to enable it and give them access. If you want to make the access to the customer portal even easier, you can learn here how to build a passwordless flow to allow your subscribers to access it.

Custom flows with Stripe

Thanks to our editor’s set of native actions, you can manage and recall data from your Stripe account in any stage of the form.

This set of native actions will allow you to visually build flows that:

• Create, update and find customers.
• Create and update subscriptions.
• Create charges.
• Create and delete tax IDs.
  

It also includes common integrations to set up webhooks or integration flows, once the payment is processed. For example, to send data to any CRM with an API, custom notifications by email, SMS, Slack, Telegram, etc.

Easily define, program and execute before and after payment actions with any external service with an API, in a few minutes, with Arengu.