Guides & tutorials

The complete guide to payment and subscription forms with Stripe

Table of contents

With Arengu, you won't need a backend or to build the frontend from scratch to create fully personalized payment forms with Stripe: the editor takes care of building them.

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 Public key and the Private key from your account.

Payment form with Stripe integration

You will find these keys inside 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.

API key in Stripe - Where to find it

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 with a temporary scheduled basis, that can also have fixed or dynamic values.

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 one-off donation. Let's take a look.

Donation form - Flow example

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.

Payment forms with Stripe - One off payments

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 for 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.

Payment form builder with dynamic payments

Just reference the final price variable in the 'Amount' field, as you can see in the picture above, and then it will be automatically updated and charged. It could be the resulting prize after the product or service customization, or the amount to donate input 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 one-year subscription to a magazine or a box of your products that is sent monthly.

Recurrent payment & subscription forms

Creating a subscription plan in Stripe

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

Create a subscription plan in Stripe

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.

Subscription plan in Stripe

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, as you can see in the picture below.

Payment form builder with subscription plans

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

  1. Specify the payment type: Subscription
  2. Include the pricing plan ID from your Stripe account. You will find it in the preview of the subscription plan, in the 'Details' section.

Finally and again, simply remember to confirm that the 'Required' checkbox is activated in the payment field settings in Arengu, if you want the payment to be mandatory.

Dynamic values

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

Setting subscription plan in Stripe

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.

Dynamic payments - Payment form editor

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, pasting them on the proper field.

Dynamic payment – Payment form

Coupon codes

Stripe allows you too 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.

Coupon codes in Stripe

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.

Payment form with discount codes

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.

Stripe customer portal

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.

After-payment flows

Set up custom integrations after the payment is processed with after-payments flows, also known as webhooks or integration flows. You can send data to any CRM with an API, but also custom notifications by email, SMS, Slack, Telegram...

Update CRM after payment flow

Our flow editor allows you to define, program and execute after payment actions with any external service with an API, in a few minutes.

You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.