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 Payment confirmation
4. Select Next page for what your customer sees after a successful checkout
5. Select or type to search your second page

6. Click Save

7. 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. Enter the edit view of your checkout page
2. Navigate to Checkout from the top tabs, and then Checkout fields from the left-side tabs

3. Click a field to edit it

4. When a field is open, click More

5. Locate the Reference, and copy it

6. 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. Enter the edit view of your first checkout page
3. Under After payment from the top tabs, click Payment confirmation from the left-side tabs
4. Select Next page for what your customer sees after successful checkout
5. Select your second checkout from the dropdown or search it in the search bar

6. Click Save

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

Edit Checkout 1

1. Navigate to Checkout from the top tabs, and then Checkout fields from the left-side tabs
2. Click a field to edit it

3. When the field is open, click More

4. Locate the Reference and copy it

Edit Checkout 2

1. Click the field to edit it
2. When the field is open, click More
3. Paste Reference from Checkout 1 into your Email Reference
4. 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. Enter the edit view of your checkout page
2. Navigate to Checkout from the top tabs, and then Checkout fields from the left-side tabs
3. Click a field to edit it

4. When the field is open, click More

5. 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)

Pre-filling variants when linking your checkout to another checkout

You can store the information of which variant option is selected from your first checkout onto your second checkout.

You can do this by creating the exact same variants (and variant options) with the same SKU on the second checkout as the first.

Although you will need to create the same variant again on the second checkout, you can hide it so customers will not see them, but they will be pre-selected on the second checkout.

Here are the steps to do this:

Edit Checkout 1

1. Enter the edit view of your first checkout.
2. Select Variants from the left-side menu.
3. Add your variant options.
4. Open up Additional settings and add an SKU to each variant option.

4. Now link checkout 1 to checkout 2 by going to After payment, Payment confirmation and then select Next page. Choose your second checkout.

Edit Checkout 2

Enter the edit view of your second checkout page.

1. Add the same variants and same variant options with the same SKU. The SKU will "remember" the variants selected from the first checkout.
2. Enable to hide this variant by selecting the option Hide variant. The variant will be grayed out in your page preview to indicate that it's hidden, but your customers will not see it on the live page.

Adding conditional variants to checkout 2

If you'd like to add more variants to your second checkout that are conditional to your first variant that's already pre-selected in the first checkout, you can do so, and the conditional logic will still work.

If you'd like to learn more about how to apply conditional logic to variants, click here.

Payment confirmation & 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.

From Email confirmation from the left-side menu, 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?