Dynamic payment forms with Stripe

If you're building a payment form, you know customization is crucial in order to obtain good results. Today we're looking into dynamic payment forms, so you can build highly personalized payment forms, displaying different prices and executing the transaction according to the user's choice.

Arengu enables you to build dynamic payment forms, connected to Stripe as a payment platform, without coding. Plus, you can add additional server-side actions for a highly advanced form. Let's see this use case in detail:

Dynamic payments: Why are they useful?

If you're designing a payment form for your business, you may want to apply dynamic pricing for different reasons. These are some of the main scenarios that require displaying dynamic pricing:

• Dynamic prices based on the item's characteristics. The most typical occasion when dynamic pricing may be set is simply to give the user the chance to see different prices after switching the item's characteristics. For instance, a subscription service may offer different pricing options based on shipping frequency.
• Dynamic prices based on voluntary contributions. On many online businesses users themselves decide the quantity they want to pay for a certain content. Of course, this is also a frequent case on cooperation and volunteering projects, that include donation forms where the user may insert the quantity they wish to donate. Both cases require a payment form that supports a dynamic price field.

There are many different use cases you can cover with a dynamic payment form. Whatever use case you're targeting, you can cover it by using Arengu and Stripe.

How to display dynamic pricing in forms

Arengu allows you to build any kind of form for any use case, including advanced logic behind the screens. In order to build payment forms, arengu works along with Stripe, the payment platform.

If you're looking to build much more than a simple payment form, keep reading to find out how to achieve it in a simple and easy way.

1. Create a payment form

Arengu enables you to create a payment form in minutes. You can choose to start one form of your own, or choose one of the predefined templates.

As you'll see after clicking on Create a form, there is one specific template to create a payment form. Remember, even if you choose a template, you'll be able to modify every aspect of your form and add complex and customized logic to it.

2. Reorganize your payment form

Arengu allows you to add as many fields and steps as you need. In this case, we have organized the form into two different steps: one to select the payment options, and a second one to execute the payment.

With Arengu, you could also add additional steps. For instance, you could add an SMS verification action with a one-time password before executing the payment, or a registration action before proceeding to the payment.

3. Add your preferred pricing fields

In order to give the users several pricing options, you can select different fields. As you can see in the example below, we chose the field Choice and added names to each subscription.

For this matter, you could also select a Dropdown field, a Cards component or a Number field, in case you want your users to write the price themselves (for instance, for the donation use case).

4. Set the Stripe IDs

Arengu is a platform that allows you to build personalized payment forms. To do so, you'll have to configure the payment field that is linked to your Stripe account.

Click on the Choice field, and then go to Advanced > Internal values. For this example, we have created a subscription payment, so you will have to set the subscription ID that you will find in your Stripe account. Simply copy and paste here the ID of each pricing option in Stripe, on the proper field.

In case you have set a one-off payment, you can just write down the value of each option, without having to refer to a Stripe ID.

5. Set Stripe keys

And last, you just have to complete the payment fields with the Stripe keys so the payments can be executed. Click on the payment field and configure it to your needs. Here, you can select the type of payment (charge or subscription), the type of currency, and other additional field settings.

In the field Amount, write the reference of the field where the price is selected. For instance, in the example below, the amount corresponds to whatever the user wrote down in the field called donation. Hence, the reference to be written in Amount is {{fields.donation}}.

To know the reference of a field, just click on it and check its ID. Remember, if the ID of the field changes, you'll have to change it here too!

Then, add your Stripe keys: Publishable key and Secret key. To get them, go to your Stripe account. Go to Developers > API keys and copy them to later paste them in Arengu.

In Fields settings, you can also set a minimum value and a maximum value to limit the quantity in the field.

6. Embed everywhere!

To start using your payment form, you just have to embed it wherever you need in your webpage. Simply copy paste our two lines of code, including the form ID, and you'll be able to start using the dynamic payment form.

Embedding your forms is a great way to save time on form maintenance. This way, whenever you'll need to apply changes to your forms, you can do it in a centralized way, and all your pages and channels will display the modifications without deployments or any manual work.

Forms are a crucial element to improve your conversion rates, and that is why personalizing their logic to the fullest is key for any business. To learn more on how to improve conversions on your payment forms, keep an eye on Arengu's blog.