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
- Create two or more one-page checkouts
- Edit your first checkout
- Under After payment, open Checkout confirmation & redirect
- Check Next checkout for what your customer sees after a successful checkout
- Select your second checkout from the dropdown
![image-fc9b.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2Fdbdf1c7f88cc3ebd69e6d26216e477ab246eb008-1300x864.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Click Save
- 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.
![image-a76e.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F23aede38727925ca8ebaf478e1e33fad4e5a57be-2862x606.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
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).
- Edit your checkout
- Navigate to Fields
- Click the pencil icon to edit your field
![image-e7a6.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F177e902b28854d4a1663f325c23ed8e4849fa49f-1296x718.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Scroll down & click Additional settings
- Copy Reference
![image-a960.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F811a78e982ce0c04ec82fec04f5f6bdbaa429d18-1062x702.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- 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.
- Create two checkouts
- Edit your first checkout
- Under After payment, open Checkout confirmation & redirect
- Check Next checkout for what your customer sees after successful checkout
- Select your second checkout from the dropdown
![image-edaa.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2Fdbdf1c7f88cc3ebd69e6d26216e477ab246eb008-1300x864.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Click Save
For the following, we recommend working with two browser tabs open and copying/pasting between them.
- Edit Checkout 1
- Navigate to Fields
- Click the pencil icon to edit your Email field
![image-a48f.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F177e902b28854d4a1663f325c23ed8e4849fa49f-1296x718.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Scroll down & click Additional settings
- Copy Reference
![image-982c.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F811a78e982ce0c04ec82fec04f5f6bdbaa429d18-1062x702.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Edit Checkout 2
- Click the pencil icon to edit your Email field
- Scroll down & click Additional settings
- Paste Reference from Checkout 1 into your Email Reference
- 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.
![image-7ed8.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F23aede38727925ca8ebaf478e1e33fad4e5a57be-2862x606.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
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
- Edit a checkout
- Navigate to Fields
- Click the pencil icon to edit any field
![image-bb0d.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F177e902b28854d4a1663f325c23ed8e4849fa49f-1296x718.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Scroll down & open Additional settings
- Check Hide field
![image-3307.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F3369c3bb73624c2c0030b5ab9f47fdb16069641c-1064x268.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
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
![image-982d.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F4e3d81593e6dbd7ca1a4e25811360adb1f76959f-1300x878.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
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.
- Edit your first checkout
- From the Preview, complete your checkout fields and submit
- The preview should display the next checkout
- For a checkout that requires payment, use the Test card details to complete the test payment
- 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?