Dynamic Forms: Stripe Integration

Want to push payments via a Podio webform? This user guide explains you how you can integrate Stripe with your Dynamic Forms so that submissions can be "purchased".

It uses the excellent Stripe Checkout payment form to collect payments as the form is submitted. This can be used for event registrations, online donations, or even for simple products where you need to gather additional information from a user. The payment webform can have a fixed price or a price calculated dynamically based on other form components.

Stripe API Keys

Before we get started with the form builder, you need to copy-paste the Stripe API keys. 

Log in to your Stripe account and visit https://dashboard.stripe.com/account/apikeys to retrieve both the public and secret API keys.

Momentum

Launch the Stripe form builder

To start building the payment form, go to the form overview by using the following web link: 

Momentum

Then click on 'Create New Webform" to get started and create your form. 

Note: This feature is only available in the Turbo price plan and requires you to have an active subscription. If  you don't have a Turbo subscription, you will be automatically re-directed to the price plan page. 

Enter the secret key

Once you have saved your form, go to the "Customize" tab and enter the secret Stripe API key. The secret Stripe API key always starts with "sk". 

Momentum

Enter the public key

Go back to the "Builder" tab and click on the edit icon of the "Pay Now" button to open the configuration modal. 

Momentum

Enter the public key in the field "Stripe Publishable API key" and click 'Save'. The secret Stripe API key always starts with "pk". 

Momentum

Calculate the price

Example 1: Fixed price

In this example you want to set up a payment form with a fixed price. To do this, open the configuration modal, enter the fixed amount in the field "Amount" and click 'Save'. 

Important: This amount needs to be filled in cents. So if your total is price is €12.75, then you need to fill in '1275'. 

Below you can the configuration modal for our example. 

Momentum
Momentum

Example 2: Dynamic price

You can also set up a payment form with a price that is calculated dynamically based on other form components. To configure this you can write JavaScript code in the amount field in the configuration modal.

In the following example you want to calculate the total amount based on the quantities for product A (€12.95) and product B (€ 25.95). Here is the JavaScript code we have used for this example:

{{(data["product-a"]||0)*1295+(data["product-b"]||0)*2595}}

Momentum

To show the user the total amount to pay before the check-out, you can add a HTML component to calculate the total amount. Here is the HTML code we have used for this example: 

<strong>Total Amount: </strong>{{((data["product-a"]||0)*1295+(data["product-b"]||0)*2595)/100.0}}€

Momentum
Momentum