Discuss

Stripe Custom Checkout Forms

On this page

Intro

You can create your own custom checkout forms for Stripe. Custom forms allow you to fully customize your checkout, branding and style of the page, while the whole payment is securely handled by Stripe. Custom forms are also useful if you want to use additional/custom fields in your checkout form such as address or other user details - which for example you can store in your database.

Stripe Component

The first thing we need to do is to add the Stripe component on the page. R Right click App:

Screenshot_3|690x430

Select Stripe:

Screenshot_4|690x430

And add your publishable key, which can be found on https://dashboard.stripe.com/apikeys

Screenshot_5|690x430

Set the Flow Type to Server Side:

Screenshot_7|690x430

Checkout Form

Now, let's create our custom checkout form. Add a new element on your page:

Screenshot_8|690x430

Select Form:

Screenshot_9|690x430

And click the Make Stripe Checkout Form button:

Screenshot_10|690x430

Make sure to set the Form Method to POST:

Screenshot_12|690x430

You can add any custom field you need for your form, the same way as you do for regular forms. In our example we added a few inputs - first and last name, address, city and country. Note that these are not required - it's just an example:

Screenshot_13|690x430

The next thing you need to do is to add a Payment Method to your form. You can add a single method, or you can let your users chose between multiple payment methods which you add in the form. Both are explained below.

Single Payment Option

In this example we will show you how to add a single payment method to your form - card payment. Add a new element in the form:

Screenshot_14|690x430

You can select the layout style of the input - horizontal or vertical (just as for any other form elements):

Screenshot_15|690x430

Then we select the Stripe Card Form Group - this will add the card payment method in our form:

Screenshot_16|690x430

You can see it in Design View:

Screenshot_17|690x430

You can customize the input options:

Screenshot_1|690x430

And then add a submit button to your form:

Screenshot_18|690x430

Multiple Payment Options

The other option is using multiple payment methods to your form.

Add a new element in the form:

Screenshot_14|690x430

You can select the layout style of the input - horizontal or vertical (just as for any other form elements):

Screenshot_15|690x430

Select Stripe Payment Method Form Group:

Screenshot_19|690x430

The element has been added on the page. Open the Payment Methods dropdown:

Screenshot_20|690x430

Select the Payment Methods you want to allow your users to use:

Screenshot_21|690x430

Select which payment method should be set as default in your form:

Screenshot_22|690x430

Open the Display menu:

Screenshot_23|690x430

And select the layout of the payment method options - select menu, pills, tabs or buttons:

Screenshot_24|690x430

Customize the input icon options:

Screenshot_26|690x430

And then add a Submit button to the form:

Screenshot_27|690x430

Server Side

Now let's setup the server side part.

Open the Server Connect panel and add new API Action:

Screenshot_2|690x430

Right click steps:

Screenshot_3|690x430

Under the Stripe Category select Payment Intents and click Create Payment Intent Template. This will add all the steps required for payment intent as well as error handling, so no need to add them manually one by one:

Screenshot_4|690x430

You can see the steps added:

Screenshot_5|690x430

Select the Payment Intent step:

Screenshot_6|690x430

And add the amount you want to charge the customers, or select a dynamic value for it. In our example we will show how to do this using a static value. Note that the prices used here are zero-decimal and represent the smallest currency unit. So entering 100 means 100 cents i.e. $1.00.

We enter 1000 which equals $10.00:

Screenshot_7|690x430

Then enter your currency - this is the 3-letter ISO code (usd, eur etc.). We add usd here :

Screenshot_8|690x430

And select the Payment Methods you want to use:

Screenshot_9|690x430

Depending on how you set up your custom form - using single or multiple payment methods, select the same one(s) here:

Screenshot_10|690x430

Save your API Action:

Screenshot_11|690x430

You can use the custom form inputs in this server action to store the user details, or do any other action you need. Just import the form inputs under Inpuit > $_POST and add the required steps in this API Acton.

Adding API Action to the Form

The last thing we need to is to add the API Action we created to our Custom Checkout Form. Open the App Connect Panel and select your form:

Screenshot_12|690x430

Select an Action for it:

Screenshot_13|690x430

We select the API Action we just created:

Screenshot_14|690x430

You can select a Success Url, where the users should be redirected after the payment is completed:

Screenshot_15|690x430

Screenshot_16|690x430

Your checkout form is done.

Error Handling

You can use the Dynamic Events to show a notification, or run any other dynamic action on success or on error events.

You can use the toast component to display the error messages to the users. First click the add new button in the App Structure:

Screenshot_2|690x431

Then under components select Toasts:

Screenshot_3|690x431

The toasts component has been added on the page. Now, select your checkout form:

Screenshot_4|690x431

Add new dynamic event:

Screenshot_5|690x431

Select Stripe > Error:

Screenshot_6|690x431

And click the dynamic action picker button:

Screenshot_7|690x431

Select Toasts > Show:

Screenshot_8|690x431

And enter the message you want to show your users. We enter Error: and click the dynamic data picker to select the error text:

Screenshot_9|690x431

Select error under the Form:

Screenshot_10|690x431

Click Select and you are done. If there's an error it will be displayed in a toast message. 1Don't forget to save your page:

Screenshot_11|690x431

That's how to create a custom checkout form for your site.