How to create multi-step checkouts

Today we’re announcing a completely new checkout experience for you to experiment with.

You can now link your checkouts together to create multi-step checkouts so your customers can complete their payments in steps!

Whilst single-page checkouts are great for driving high conversion rates, there are times when multi-step checkouts have a number of benefits.

• Break up complex checkouts into more manageable steps
• Create checkout flows
• Offer upsells

Simple but powerful ways you can make use of multi-step checkouts

• Capture your customer's contact details & then take payment on a second step, logging checkout abandonment to your CRM
• Take payment & then offer an upsell on a second step, increasing your average order value
• Take payment & then swap to asking questions & capturing the data you need, making managing your business needs easier

Let’s take a detailed look at how you can create a multi-step checkout today.

Breaking up your checkouts into steps

If you’re selling a product or service that requires you to capture a lot of customer information, breaking your checkout into steps can reduce checkout abandonment and increase your conversion rate.

Let’s imagine you’re selling a blog post writing service that requires your customer to provide you with a lot of information about their needs.

You decide that a single-page checkout would be overwhelming and instead choose to break up your customer's journey across 3 checkouts.

Steps to create a multi-step checkout

1. Plan your checkout steps
2. Create a checkout for each step
3. Link your checkout steps together
4. Set your checkout confirmation message
5. Add your multi-step checkout to your site
6. Test your multi-step checkouts

Step 1 - Plan your checkout steps

When planning your multi-step checkout you should break up your customer's journey into logical steps.

For selling your blog writing service, you’ve decided to try out three checkout steps:

1. Contact details
2. Blog post requirements
3. Payment

Your last checkout step will be followed by a payment confirmation message and email.

Important!

Every checkout step must have an email address that is used to connect it with the same customer.

Pro tip!

There is no limit to the number of checkout steps in a multi-step checkout.

Plan Checkout 1: Contact details

Ask your customer to complete their contact details.

• Name
• Email

Plan Checkout 2: Blog post requirements

Find out what your customer needs from your service.

• Name (pre-filled & hidden)
• Email (pre-filled & hidden)
• Blog URL
• Type of blog?
  • Lifestyle
  • Business
  • News
• Draft title
• What will your reader learn?

Plan Checkout 3: Payment

Set the price and let your customer complete their payment.

• Name (pre-filled & hidden)
• Email (pre-filled & hidden)
• Product variant for word count
  • Under 1000 words - $50
  • 1000 to 2000 words - $100
  • Over 2000 words - $100
• Card details

Step 2 - Create a checkout for each step

Once you’ve planned out your customer’s journey in logical steps, let's create your three checkouts.

Create Checkout 1: Contact details

• Create Checkout 1
• Type the name of this step (Contact details) under the Product name
• Select Lead capture
• Under Fields, choose to Add a custom field to capture your customer's name
• Click on the Custom labels section under Design and rename the label of Submit button as Continue
• Under After payment, click on **Email confirmation **and select No email
• Untick Receive emails about new payments below Payment notifications

Create Checkout 2: Blog post requirements

Instead of creating Checkout 2 from scratch, we recommend you duplicate Checkout 1 and add fields to it.

Duplicating checkouts as you go will make sure that your last checkout includes every step's data.

• Duplicate Checkout 1 by clicking on the drop-down arrow next to the checkout from your dashboard
• Change the name of this step (Blog post requirements) under the Product name
• Under Fields, click on the pencil icon next to each of the fields from the previous step
• Scroll to Additional settings and tick to Hide field
• Hide all the fields from the previous step
• Add new fields to capture your customer's requirements

Important!

In your preview, your hidden field will be greyed out (50% opacity). Don’t worry, your hidden field is only visible to you.

Create Checkout 3: Payment

Adjust your last step to enable payments.

• Duplicate Checkout 2 by clicking on the drop-down arrow next to the checkout from your dashboard
• Change the name of this step (Payment) under the Product name
• Swap Pricing from Lead Capture to One-time payment and set your price
• Add variant for any customizable options (like Word count)
• Under Fields, click on the pencil icon next to each of the fields from the previous step
• Scroll to Additional settings and tick to Hide field
• Hide all the fields from the previous step
• Under After payment, tick Receive emails about new payments below Payment notifications

Step 3 - Link your checkouts together

Now it’s time to link your checkouts together.

• Edit Checkout 1
• Under After payment, click on Checkout confirmation & redirect and select Next checkout
• Choose Checkout 2 from the dropdown
• Click Save

Repeat the above for Checkout 2 to link it to Checkout 3.

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

Important!

If you choose not to duplicate the checkouts, make sure to use the exact same field labels/data types throughout your multi-step checkout to pre-fill your fields.

Step 4 - Set your checkout confirmation message

Let your customer know that the checkout has been successful.

Choose between the following:

• Display a confirmation message & send a confirmation email
• Redirect to a website URL

Display a confirmation message & send a confirmation email

Confirm payment, thank your customer for their purchase, and let them know about any next steps.

Redirect to a website URL

Redirect your customer to your own Thank You page.

Step 5 - Add your multi-step checkout to your site

From your dashboard, click Share next to Checkout 1 to add your checkout to your site.

You can choose to add it as a pop-up or as a responsive embed on your page.

Step 6 - Test your multi-step checkout

The best way to make sure everything is working as expected is to make a test payment.

• Edit your Checkout 1
• From the Preview, complete your checkout fields and submit
• Check if the preview displays the next checkout and goes through all the steps
• Use the test card details to complete the test payment
• Make sure that repeating fields are pre-filled and hidden

Testing checklist

• Does each checkout break up your customer's journey into logical steps?
• Are your checkouts linked together in the right order?
• Are your checkouts missing any information, variants, downloads, or fields?
• Are you making your customer complete any details twice?
• Are unnecessary fields hidden?