— Stripe & Arengu — The complete guide on creating custom payment forms

Introduction
— Stripe & Arengu — The complete guide on creating custom payment forms

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

Our forms are compatible with any tech stack, thanks to our JS SDK, and they can be embedded by copying and 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.

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.

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.

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

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.

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

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.

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.

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

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.

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.

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

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

Do you want to try it yourself? Sign up free or schedule a demo with our team!

Author

Andrea L. Lozano

Social Media & Content Specialist.

View Comments
Next Post

Conditional logic in forms: Interactive and smart forms for a dynamic behavior

Previous Post

— WordPress & Arengu — Custom signup, login and passwordless forms