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:

example.formcrafts.com/donate

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.

  1. a one-line-text field labelled Name
  2. an email field labelled Email
  3. a one-line-text field labelled Address
  4. a one-line-text field labelled Zip Code
  5. a dropdown field labelled Country
  6. a checkbox field labelled Choose cupcakes with these options:
    2==Chocolate
    2.25==Vanilla
    3==Blueberry
    2.5==Surprise Me
  7. a checkbox field labelled cupcake quantity with these options:
    6
    12
    18
    24
  8. a checkbox field labelled express with one option
    10==Include Express Delivery ($10)
  9. a Stripe field, via Add Fields → Payments → Stripe.

Our Stripe payment form should look like this:

Stripe payment form to sell cupcakes
Stripe payment form to sell cupcakes

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 ]
Set price for Stripe payment forms
Calculate price for the payment form

We can click on Preview on the top-right corner to preview our form in action.

Stripe payment form with price calculation
Stripe payment form with price calculation

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 stripe form
Enable stripe addon

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.

Map form fields to Stripe charge info
Map form fields to Stripe charge info

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

Using Stripe test card info
Using Stripe test card info

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.