Guides & tutorials

Subscription payment form with HubSpot and Stripe

Table of contents

Willing to create custom subscription forms and automatically send the data to your HubSpot account? Learn how to easily build them using Arengu and Stripe.

Previous requirements

  • A HubSpot account, in which we will store user and payment data.
  • A Stripe account, to manage the payments.
  • An Arengu account, to create the form and its logic.

Overview

It consists of a one-step form that will ask the user for an email, the pricing option and the payment details, plus a flow that sends the data to HubSpot after form submission.

Create the form in Arengu

Go to the form editor and choose the Subscription payment template. All the templates are fully editable, so you can add the fields you need, edit the texts, CSS styles, etc.

This template will create a one-step form with an Email field, a Choice field and a Payment details field, like the one you see in the image below.

If you have used the template, the email field will already be configured. If you are building it from scratch, just drag and drop an Email field to the form and configure it as follows:

  • ID: change it to ‘email’ to make it easier to reference.
  • Required: enable this checkbox to make it mandatory.

To configure the Choice field:

  • ID: change it to ‘plan’ to make it easier to reference.
  • Required: enable this checkbox to make it mandatory.
  • Options: write the name and price of each subscription option.

Then click on Advanced > Internal values and paste the pricing plan ID for each pricing option from your Stripe account. You will find it in the preview of the subscription plan, in the 'Details' section.

Finally, configure the Payment field with these settings:

  • ID: change it to ‘payment’ to simplify it.
  • Required: enable this checkbox to make it mandatory.
  • Publishable and Secret key: paste the keys from your Stripe account. You will find them in your Stripe account under Developers > API keys menu.
  • Payment type: choose ‘Subscription’.
  • Price ID: reference the {{fields.plan}} variable to automatically get the price of the payment option that the user has chosen in the previous field. If you have used the template, it will already be referenced. If not, just click on the plus button to get it from the variable autocomplete menu.
  • Customer action: choose ‘Create customer’.
  • Customer email: reference the {{fields.email}} variable from the previous field. Again,  if you have used the template, it will already be referenced. If not, just click on the plus button and get it from the menu.

Once the fields are set up, go to the Design tab and customize the styles.

Finally, go to the Flows tab in the light gray menu and create an after-submission flow by clicking on the plus button. Give it a name and publish the changes.

Build the after-submission flow

Open the flow you just created in a new tab and add the Create or update contact in HubSpot action by clicking on the plus button.

Configure the action as follows:

  • Connection: to connect this action to HubSpot, simply copy and paste your HubSpot account API key. Save this connection to use it in the future by clicking on the plus button. If you already have a connection created, just choose it from the selector.
  • Email: reference the {{input.body.email}} variable from the first step of the form.
  • Contact properties: list here the data that you want to send to HubSpot. In this case, we have included a custom property that we have previously created in HubSpot, ‘isPaidUser’, and set it as ‘true’. To configure these fields, just remember that the key of the first input has to match the Internal name defined in HubSpot and the second input has to reference the field ID of the form.

Finally, publish the changes.

Preview, test and debug it

Go back to the form editor, click on the Preview button to open it in a new tab and test it. Check if everything has worked correctly in the Executions tab of each of the flows.

Want to try it by yourself? Sign up free or book a demo with our team.

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.