How to Build a Stripe Order Form
- Go to Add-Ons -> Stripe. You will see 4 api key fields here. To find your Stripe api keys, login to Stripe dashboard, go to Account Settings -> API Keys. Enter the keys.
![](https://formcraft-wp.com/wp-content/uploads/2015/04/Stripe-937x1024.png)
Here, you will also find the option to choose between Live Mode and Test Mode. Test Mode allows you to use Stripe’s demo data to simulate transactions (read more).
- Now, let us make a form to order sandwiches online. First, we add a Dropdown field which allows users to select the sandwich they want.
In the Options box of our field, we enter our menu in this format:
10==Smoked Mushroom Spinach
Here, the part to the left of == is the value assigned to the item, and the part to the right of == is what the user sees.
![stripe-dropdown](http://formcraft-wp.com/wp-content/uploads/2015/04/stripe-dropdown-e1428061081685.png)
Also note the field ID of this field. In this case, it is field28
- Next, we add a simple One Line Input field, which allows users to enter the quantity they wish to order. Nothing fancy here. Note the field ID: field29
![stripe-one](http://formcraft-wp.com/wp-content/uploads/2015/04/stripe-one.png)
- Now, we add a Checkbox field, which allows users to select Extras. This field also has an Options column, which works similar to what we saw in Step #1. We are not greedy, so we price all are extras at $2 each. Note the field ID: field30
![stripe-extras](http://formcraft-wp.com/wp-content/uploads/2015/04/stripe-extras-e1428061139161.png)
- Lastly, we add the Stripe field. Go to Add Field -> Payments -> Stripe. So, how do we decide the final price? We add the sandwich price and the price of extras, and then multiple it by the quantity:
[ ( Sandwich Price + Extras ) * Quantity ]
Substituting the field IDs here, we get:
[ ( field28 + field30 ) * field29 ]
This is what we enter in the Amount column of our Stripe field:
![](https://formcraft-wp.com/wp-content/uploads/2015/04/stripe-options-641x1024.png)
- That’s it. Our form is ready:
![](https://formcraft-wp.com/wp-content/uploads/2015/04/final-form-1.png)