One-off payment form with HubSpot and Stripe

Willing to create custom payment forms that 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

This use case consists of a one-step form that will ask the user for an email and the payment details for a one-off payment, and a flow that sends the data to HubSpot.

Create the form in Arengu

Go to the form editor and choose the One-off 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 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 Payment field:

• 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 ‘Charge’.
• Amount and currency: customize them according to your needs.
• Customer action: choose ‘Create customer’.
• Customer email: reference the {{fields.email}} variable from 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.

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, choose the OAuth option . 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 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 and click on the Preview button to test it. You can 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.