There are two different options for an online checkout flow in Spektrix – the classic checkout flow, and the Express Checkout. In this article we’re taking a look at what the Express Checkout is, what the benefits are of using it, and how to implement it on your website.
What is it?
The Express Checkout is an alternative checkout flow designed with mobile users in mind to be quicker and simpler to navigate and easier for your web team to style. If you choose to use it, it replaces the classic checkout flow for all Events and other saleable items on your website (although, if you have multiple website domains, you can use different checkout flows for each).
Where the classic checkout flow takes customers through a range of different pages, one for each step of the process, the Express Checkout is designed to appear to display all of those steps on a single page. It is, in fact, multiple pages, so it retains the benefits of multiple iframe URLs for analytics purposes, while offering a simplified browsing experience for users. It also offers customers the opportunity to make orders without setting a password.
It’s been designed from the ground up with mobile users in mind, to take advantage of the ever-growing proportion of online bookers using mobile devices to purchase tickets and other items. The goal of the Express Checkout flow is to help you to make the most of every sales opportunity via your website, and reduce the time it takes for customers to check out[a][b].
What are the benefits?
We’ve designed the Express Checkout to offer a range of benefits over the classic checkout flow, from speeding up the overall online booking process and generally making customers’ online experience as good as possible, to helping you simply and easily implement a checkout process on your website.
Speed
The overall checkout flow is quicker using the Express Checkout, with various speed benefits including:
- The option for customers to make orders without setting passwords (the system still stores all of the information necessary to complete transactions and avoids creating duplicate customers)
- The ability for returning customers to request a login link be sent to their email address, instead of having to remember (or even set) their password
- A flexible approach to optional elements of the process, for example:
- If there’s only one delivery method available for an Event or Merchandise, customers won’t be asked to choose a delivery method and will only see the delivery details in the order summary
- If a customer pays their order completely with gift vouchers, they won’t be prompted for billing details to complete the order
- Pre-populated fields based on existing information. For example. if a customer already has a billing address against their record, this will automatically be populated by the system
Navigation
We’ve designed this checkout flow to be easier to navigate for all users, but particularly mobile users. The benefits of this single-page approach include:
- Customers can see everything they’ve input throughout the process; once each section has been completed it remains on the screen
- It’s designed to be viewed on a mobile screen, so it’s easy to scroll through
Styling
It’s easier than ever before for your web team to style the Express Checkout, which means it’s quicker and simpler to get set up. Benefits include:
- Your web team can style each element on the first section of the checkout flow, and that styling will cascade down to the rest of the flow, ensuring consistency throughout
- It’s more customisable than the classic checkout, which means that if you do want to put the time and resources into this, you have a lot of flexibility
What does it look like?
As we mentioned earlier, one of the great things about the Express Checkout is its ability to adapt to exactly what each customer is booking and only require them to complete the appropriate steps, so it will appear slightly differently depending on what each customer is purchasing, and what you have set up in your system.
Here’s an example of how it might look, from the Princes Hall website:
NOTE: the Express Checkout begins at the point when a customer clicks the Checkout button from within the basket.
Here we’ve broken down all of the possible steps in the flow:
- Start Checkout: customers have to enter their email address. Existing customers are asked to enter their password (and given the option to reset their password if needed), or login with a link, while new customers are directed to the next stage
- Personal Details: new customers are asked for their name and any other required fields you’ve set. Existing customers automatically skip this section, but can go back and edit it if needs be
- Ticket Delivery: assuming there are at least two delivery options, customers can select whichever they prefer. If only one delivery method is available, this section is skipped, and the predetermined delivery method is displayed in the Order Summary
- Merchandise Delivery: if any merchandise items are in the basket, and have more than one delivery option available, then customers can choose a delivery option here (along with a delivery address, if appropriate). Otherwise, this section will be skipped and the predetermined delivery method displayed in the Order Summary
- Additional Details: if you’ve set any Order Attributes to be visible online, they will be displayed under this section. If not, this section is skipped
- Donations: any available Funds will be displayed here, including the option to add a Recognition Name (if enabled) and the ability to make a donation anonymously. If no donations are in the basket, this section is skipped
- Gift Aid (for UK organisations): if the customer doesn’t have a valid Gift Aid declaration, they will be prompted to make a declaration here
- Contact Preferences: any Contact Preferences currently set to Not Asked will display here, along with Partner Company Contact Preferences, if applicable. If no preferences are set up or all are answered, this section is skipped
- Order Summary: this section displays a breakdown of everything in the basket and is always displayed. Customers can redeem gift vouchers here, and also choose to use credit to pay for their order – if they use credit for the whole amount, the following two sections are skipped
- Billing Details: new customers are asked to enter their billing address, while existing customers can select an existing billing address. Customers can also select the option to store their card here. This section always appears, unless the customer is paying using credit
- Payment: customers are asked to enter their card details here. This section always appears, unless the customer is paying using credit
- Order Confirmation: if this is a customer’s first order, they will be given the option to set a password here. This section is always shown
Here’s a quick GIF using the Princes Hall checkout flow to illustrate how the sections flow from one into another:
You’ll notice that this is only displaying some of the possible sections. There are no donations in the order, and the customer doesn’t have any Contact Preferences set to Not Asked or any Attributes, so those sections have not been displayed.
Passwords and accounts
When a new customer makes their first order using the Express Checkout, they’re given the option at the end of the process to set a password, allowing them to access their account online in future. It’s worth noting that even if a customer chooses not to do this, the system still generates a customer record as normal using the details collected in the order, which you can search for in exactly the same way as you would any other customer.
If a customer in this situation chooses not to set a password, they can still return to book on your website using the same email address in future. To do this, they just need to use the ‘Send me a Link to Login’ button in the first Start Checkout section.
NOTE: this is not a ‘reset password’ link, but rather a login link. It generates an email containing a link that will allow the customer to complete their booking without entering information they’ve provided in past purchases. This link remains active for ten minutes. If you would like to make any changes to the text of the email, please contact Support.
Styling
Similarly to the classic checkout, you can style the Express Checkout to match your website’s look and feel – although with much greater flexibility, consistency and stability. The example above is just one way that you could style the Express Checkout to look.
For more details on what this allows you to do, we would recommend you direct your website developer to our Developer Portal and discuss the specific options available to your website.
How do I implement it?
There are a few things you need to set up before you can start using the Express Checkout. It’s worth pointing out here that you can’t choose to use the Express Checkout for some Events and the classic checkout for others – if you enable the Express Checkout then it will apply to everything on your website. The only exception is if you have multiple domains – see step three below for more information on that.
Step one: let us know
The first thing to do is to get in touch with the Spektrix Support team to let us know you’d like to start using the Express Checkout. There are a few settings that we’ll need to enable for you, and it’s also useful to run through any questions you might have before you make a start.
Step two: talk to your web team
Get in touch with your web developer to start discussing styling options. We’ve put together developer-specific documentation for the Express Checkout, which contains everything a web developer needs to get set up, so we would recommend handing that over ASAP. You can find all of that right here.
Step three: turn it on in Spektrix
You’ll need to update a setting in the Website Admin Interface in Spektrix, so you’re going to need to have the Web Integration Administrator role on your user account in order to be able to do that.
Head to Website Admin > Domain Specific Config and look for the setting called Use Express Checkout Flow. Click the Edit button, select the checkbox, and click Save.
This tells Spektrix to use the Express Checkout on your website as opposed to the classic checkout flow. If you have more than one website, with more than one domain set up in Domain Specific Config (for example if your organisation runs multiple distinct venues), you can choose a different setting for each domain.
NOTE: if you have a staging (or test) website then you can test out your styling on that using a separate domain, in order to make sure you’re happy with it before you publish it to your main site.
Step four: Donation Recognition
Assuming you’ve got Donation Recognition set up on your system already, you can also enable this feature in the Express Checkout. You can do that in the same place as you enabled the feature in the first place: Settings Interface > Configuration > System Setup > Donations, where you’ll be able to see a toggle for Capture donation recognition on the Express Checkout.
Step five: Google Tag Manager
If you are using Google Tag Manager to send information on e-commerce conversions to Google Analytics, you'll need to change the confirmation trigger in Tag Manager to the URL of the Express Checkout's confirmation page: secure/checkout/v2/orderconfirmation.
NOTE: in order to maintain the speed of the checkout flow, the Tributes functionality is not available, as this feature is much more likely to be used on larger gifts, rather than small donations added to orders.
That’s the only feature which specifically needs enabling to work with the Express Checkout. Everything else will automatically be available – as long as you’ve got it set up elsewhere in Spektrix.
What can’t it do?
The vast majority of Spektrix’s online functionality is available to use in the Express Checkout, although there are a few features which are currently unavailable:
- Capturing customer Tags from Online Tag Groups
- Capturing Customer Attributes
- Capturing customers' date of birth
- Paying with PayPal
- Capturing questionnaire responses
- Payment commissions (Admin > Pricing > Other Commissions > Payment Commissions)
- Facebook login
- Adding snippets of code via 'Specify HTML Headers Specific To Confirmation Page' / 'Specify HTML Immediately After The Opening <body> Tag Specific To Confirmation Page' in the Website Admin interface
Please do get in touch with the Spektrix Support team if the absence of any of the above functionality would prevent you from using the Express Checkout. We’re very happy to discuss your options in that situation and are always open to feedback regarding which use cases might not be possible without some of this functionality.
***
Please don’t hesitate to get in touch with the Spektrix Support team if you’d like to discuss anything about Express Checkout in more detail.