How do I create a multi-step checkout?

Let your customer move to the next checkout by linking your checkouts together or splitting your checkouts into multiple steps.

Linking your checkouts together to create multi-step checkouts opens up a number of advantages not possible with one-page checkouts:

• Break up longer checkouts into steps
• Build complex sales funnels
• Display upsells after successful checkout
• Track cart abandonment

Linking checkouts together to create a multi-step checkout

1. Create two or more one-page checkouts
2. Edit your first checkout
3. Under After payment, open Checkout confirmation & redirect
4. Check Next checkout for what your customer sees after a successful checkout
5. Select your second checkout from the dropdown

1. Click Save
2. Repeat for every checkout being linked together

That’s it, you’ve just created a multi-step checkout!

There is no limit to the number of one-page checkouts in a multi-step checkout.

When linking checkouts, it’s possible to pre-fill fields between checkouts.

Pro tip!

We recommend duplicating your first checkout as a starting point for your second checkout, and so on. This will save you time adding duplicate fields and make pre-filling fields between your checkouts less error-prone.

Transitioning your customer between checkouts

Every subsequent checkout will always be displayed in the same way as your previous checkout.

Let’s say the first step of your multi-step checkout was displayed to your customers in a pop-up on your landing page.

The next checkout step your customer will see will also be displayed in a pop-up.

This is true for payment links, checkout pop-ups, and responsive embeds.

Pre-filling checkout fields when linking your checkout to another checkout

When linking one-page checkouts, fields with the same Reference will be pre-filled (except your card field).

1. Edit your checkout
2. Navigate to Fields
3. Click the pencil icon to edit your field

1. Scroll down & click Additional settings
2. Copy Reference

1. Paste Reference into the field in your linked checkout that you want to pre-fill

Linking two checkouts & pre-filling your customer’s email address example

In the following example, you’ll create two checkouts, link Checkout 1 to Checkout 2, and pre-fill your customer email address in Checkout 2 from Checkout 1.

1. Create two checkouts
2. Edit your first checkout
3. Under After payment, open Checkout confirmation & redirect
4. Check Next checkout for what your customer sees after successful checkout
5. Select your second checkout from the dropdown

1. Click Save

For the following, we recommend working with two browser tabs open and copying/pasting between them.

1. Edit Checkout 1
2. Navigate to Fields
3. Click the pencil icon to edit your Email field

1. Scroll down & click Additional settings
2. Copy Reference

1. Edit Checkout 2
2. Click the pencil icon to edit your Email field
3. Scroll down & click Additional settings
4. Paste Reference from Checkout 1 into your Email Reference
5. Click Save

That’s it, you’ve linked Checkout 1 to Checkout 2, pre-filling your customer’s email address in Checkout 2 from Checkout 1.

There is no limit to the type and number of fields you can pre-fill when linking a checkout to a checkout (except your card field).

Pro tip!

We recommend duplicating your first checkout as a starting point for your second checkout, and so on. This will save you time adding duplicate fields and make pre-filling fields between your checkouts less error-prone because your field Reference will be exactly the same.

Hiding checkout fields

Why hide checkout fields

Hiding pre-filled checkout fields is a great way to improve your customer checkout experience by reducing barriers and speeding up their checkout.

How to hide checkout fields

1. Edit a checkout
2. Navigate to Fields
3. Click the pencil icon to edit any field

1. Scroll down & open Additional settings
2. Check Hide field

That’s it, you’ve hidden this field in your checkout.

In your preview, your hidden field will be greyed out. Don’t worry though, your field is only visible to you.

Exceptions to hidden fields

• Hidden fields will be visible to your customers if there is no pre-filled value & the field is required
• For email fields, if the pre-filled value is not a valid email address (display current value)

Confirmation message & email confirmation

No confirmation message is displayed to your customer in-between checkouts.

However, you can choose to send a confirmation email after each successful checkout.

Choose from the following options:

• Default email
• Custom email
• No email

Learn more about confirmation emails

Testing linking your checkout to another checkout

We recommend testing linking your checkout to another checkout to make sure everything is working as expected.

1. Edit your first checkout
2. From the Preview, complete your checkout fields and submit
3. The preview should display the next checkout
4. For a checkout that requires payment, use the Test card details to complete the test payment
5. Check to make sure that fields with the same Reference in Checkout 1 are being pre-filled in Checkout 2

Testing checklist

• Does each checkout break up your customer’s journey into logical steps?
• Are your checkout links in the correct order?
• Are your checkouts missing information, variants, downloads, or fields?
• Do duplicate fields have exactly the same field reference?
• Are the appropriate fields hidden?