How to create payment forms with Stripe and Arengu

Introduction
How to create payment forms with Stripe and Arengu

Stripe is one of the best solutions to process online payments in your website, they provide a powerful suite of tools and APIs that reduce tons of work creating and integrating a payment gateway. One of those tools is Stripe Elements, a simple pre-built of UI components that helps you collecting payments in your website with just a few lines of code.

This is a great option if you only need to collect payments with very basic information from your users but, in case you need to create custom payment flows like: a sign-up form with payment details, recurring subscriptions, trials, verifying users information with your systems, multistep payment forms, etc. This solution is not enough as you need to create more UI components and code your backend to validate and process collected information. In this blog post, we are going to talk how to combine Arengu with Stripe to easily cover all those use cases and gain much more flexibility in your payment flows.

Creating a one-off payment form

Go to Arengu form editor  and create your form adding a payment field, once you click on it you can specify your payment type: charge, if you want to process one-off payments or subscription, if you want to process recurring payments. In this case we are using USD ($) as currency but you can specify your own.

To connect your payment form to your Stripe's account you have to add your public and private keys, you can find them inside your Stripe account in Developers > API keys menu.

Notice testing keys start with pk_test_XXXX and sk_test_XXXX. Remember to change them for live keys once you finish testing your implementation.

If you want to map your users email to your Stripe records, you can do it using the Customer email option, to replace the value from other fields in your form you have to use {{field_id}} syntax. In this case we are using {{email}} because our Email field has also email as Field ID.

Finally, all you have to do is to embed your form in your website with just a simple line of code and start collecting payments.

After someone submits your form, you can view all collected payments inside your Submissions tab.

If you want to view more detailed information from your transaction, go to your Stripe account under Payments menu.

Creating a recurrent payment form

If you need to collect recurring payments for your business, you only have to change your payment type to Subscription and specify your pricing plan ID.

In case you don't have a pricing plan ID, go to your Stripe account inside Products menu and create a new product selecting Recurring products.

Now that you have created a recurring product, you can create different pricing plans associated to that parent product. In this example we are creating a fixed $20 pricing plan that will be billed monthly without a trial period.

After creating your pricing plan, now you will have a plan ID that will be used in our payment field settings.

Sometimes plan ID can be confused with product ID, you can easily differentiate them because plan IDs start with plan_XXX and product IDs start with prod_XXX.

Finally, we have the same form but instead of charging users with one-off payments, we are subscribing them to a monthly recurrent payment.

Automate actions after success payments

Sometimes you need to automate common action after users pay for a service like sending a thank you email, notify someone via Slack, create an account in your system, etc. This is also possible because inside Integrations & Notifications settings you can select which integration flow you want to execute after someone submits a form.

In this case, we have created a flow that automates three actions: creating an user account with our API using a HTTP Request flow action, notifying sales channel in Slack with payment details, and last, sending an email to the user with the account credentials using SendGrid.

Summarize

As you can see creating a payment form is very simple and doesn't require any coding skills, you can create from a simple payment form to a more complex form with different steps, validations, integrations, etc without caring about coding your backend or UI.

If you are wondering about security we only work with payment providers who comply with high security and PCI standards and credit cards details are never saved in Arengu nor passed to our servers. In this case, we are using Stripe SDK behind the scenes that replaces credit card details by a non reversible and securized token that we use to process the payment.

Author

Jacobo Vidal

Co-Founder @ Arengu. Data & Technology geek. Curious about everything.

View Comments
Previous Post

How to easily track form submissions without hacky code