How to Create a Stripe Payment Form
In this tutorial, we will learn how to create a hosted form to accept payments via Stripe. We will be selling cupcakes.
Our Stripe payment form can be shared with a direct link:
We can also embed the payment form on any website inline or as a popup form.
1. Create a new form
Create a free account on FormCrafts. On your dashboard click on New form → Blank form.
Now we will add some basic fields to our payment form.
- a one-line-text field labelled Name
- an email field labelled Email
- a one-line-text field labelled Address
- a one-line-text field labelled Zip Code
- a dropdown field labelled Country
- a checkbox field labelled Choose cupcakes with these options:
- a checkbox field labelled cupcake quantity with these options:
- a checkbox field labelled express with one option
10==Include Express Delivery ($10)
- a Stripe field, via Add Fields → Payments → Stripe.
Our Stripe payment form should look like this:
2. Setup the price formula
We have the fields but we need to tell Stripe how much to charge. We use FormCrafts' math formulas for that. When you edit the Stripe field you will see a Charge Amount column. For our payment form the charge amount is the product of cupcakes selected, and quantity, plus the express delivery.
( Choose cupcakes * Cupcake quantity ) + Express Delivery
However, we have to use field IDs. We note the respective field IDs for each of those fields, and put them in square brackets to arrive at our math formula:
[ (field21*field22) + field26 ]
We can click on Preview on the top-right corner to preview our form in action.
3. Connect to Stripe
Lastly, we need to connect our payment form to Stripe.
On the form edit page, go to Addons on the top-left corner → Payments and click Enable next to Stripe.
Enable Test Mode for the time being.
Remember the personal info fields we added - like name, email etc? FormCrafts will store those fields but it is also a good idea to store that information against the charge in Stripe.
Click on Charge Details. Here you can map Stripe columns to their respective form fields, by using the field label, enclosed in square brackets.
If you want to create customers in Stripe you would edit the Stripe field, and check the option Save Customer Info in Stripe. Next go back to Addons → Payments → Stripe and click on Customer Details to map form fields to Stripe customer columns.
4. Test the payment form
Our Stripe payment form is ready. Click on Preview (top-right corner). Since the Stripe addon is in test mode we can simulate a payment using a test card number: 4242 4242 4242 4242
You can learn more about card testing here.
Once you are ready to go live, head back to the form edit page, go to Addons → Payments → Stripe and uncheck Enable Test Mode.
5. Stripe payment form templates
There is so much more you can do with payment forms. View our template gallery for inspiration on Stripe payment forms.