Checkout Managed Component

The Managed Component for Checkout offers streamlined, mobile-optimised checkout flows that can be activated within your existing Express Checkout iframe.

This article covers how the Checkout Managed Component works, the customer journey online and how you can configure the behaviour.

Before starting, you should be familiar with:

• What are Managed Components?
• The Express Checkout

TIP: Managed Components are a new feature that is in progress and updates will be released on an ongoing basis. The Checkout Managed Component currently supports Direct Checkout and One-Click Checkout for non-logged in customers only. This article will be continuously updated with the latest information as new features and functionality are introduced.

Before starting

To mount the Checkout Managed Component on your existing Express Checkout iframe, your website integration must have Spektrix Payments (Adyen) configured as your primary Web Payment Channel.

TIP: Documentation your web developer can use to mount Managed Components onto your website will be available soon on the Integrate Portal. 

What is the Checkout Managed Component?

The Checkout Managed Component intercepts your existing Express Checkout iframe with a streamlined checkout experience.

Currently, there are two checkout options available through the Managed Component for customers who are not logged in. As we extend the checkout component, additional flows will become available - including authenticated checkout for logged in customers.

1. Direct Checkout: A guest-style checkout where there is no login and the customer does not create an account before purchasing. The customer can enter their email, name, delivery and payment details on a single page.

2. One-Click Checkout: A single-tap purchase using Apple Pay. The customer is not required to complete any details. Apple Pay provides the customer's name, email, billing address and payment card. One-Click Checkout is currently not available unless Direct Checkout is enabled. 

   TIP: Google Pay is supported in Direct Checkout only. It is not currently available for One-Click Checkout.

New checkout flows will inherit your existing CSS styling and work with your existing Google Analytics and Tag Manager integrations. If you need to make adjustments to your checkout styling, your web developer can update the page's elements using standard CSS.

The Checkout Managed Component will only intercept the Express Checkout iframe on eligible Basket / Carts. For non-eligible Basket / Carts, the system bypasses the Managed Component and falls back to the base Express Checkout iframe.

The table below outlines capabilities of the Checkout Managed Component, some of which are available now, and some which will be possible in the future.

How does the Checkout Managed Component work?

The Checkout Managed Component supports the Direct Checkout with the option of One-Click checkout on the same page. The Direct Checkout setting must be enabled against an Event Instance, Fund or Merchandise item for it to be eligible for the Checkout Managed Component. Currently, One-Click Checkout is only available in scenarios where Direct Checkout is possible and enabled.

Basket / Carts that contain other items, or Event Instances, Funds or Merchandise items where the Direct Checkout has not been enabled, will fall back to the Express Checkout. 

If any single item in a customer's Basket / Cart is not eligible for the checkout flow, the entire Basket / Cart will fall back to the base Express Checkout flow.

As we expand the Checkout Managed Component, more items will become eligible for different checkout flows, including those for logged-in customers. 
 

Example

If a Basket / Cart contains tickets for three different Event Instances which all have the Direct Checkout Allowed box checked. The customer will see the Direct Checkout flow in the Checkout Managed Component.

If one of those instances doesn't have the Direct Checkout Allowed box checked, the customer will see the Express Checkout.
 

What is Direct Checkout?

Direct Checkout is a guest-style checkout flow where your customers can complete a purchase without needing to log in or create an account before making a payment.

Even though Direct Checkout offers a guest-like experience, if the email address provided by the customer matches, the Order is attached to their existing Customer Record. This means that no data is lost from a CRM perspective.

On a single page, Customers provide their:

• Email
• Name
• Billing address (optional based on on your per-item configuration)
• Payment 
• Contact Preferences
• Gift Aid declaration

Configurable Billing Address

By default, a billing address is required for Direct Checkout. Within the Direct Checkout configuration, you can choose to make the billing address optional on a per-item basis.

You can toggle whether a billing address is required for:

• Event Instances
• Donation Funds
• Merchandise items

TIP: You do not need to configure the Billing Address requirement for One-Click Checkout. Apple Pay already provides the billing address so no manual entry is required.

If you have a custom API integration, your web developer can use the extended checkout-options endpoint to determine whether a billing address is required for a given Basket / Cart and render their forms accordingly.

Considerations

By default, the billing address on transactions is required as an additional layer of fraud protection. For Direct Checkout, you can configure the billing address as optional on certain transactions to create an even more frictionless experience. 

When deciding whether to make the billing address optional, consider the trade-off between reducing friction in the checkout and the risk of increasing chargebacks.

Because the setting is configurable per item, you can make the billing address required for higher-risk items like tickets, while streamlining the customer experience for lower-risk items such as Supplementary Events or Merchandise. 

Customer Record Matching Logic

To maintain clean database records, customers who make a purchase using Direct Checkout are matched on an existing email address.

• If the email address matches an existing record: The Order is automatically attached to that customer's existing record. Any new customer details (such as a new billing address) provided during Direct Checkout will not overwrite the customer's existing details.
• If the email address does not match an existing record:  A new Customer Record is created. This also occurs if an existing customer checks out using a different email address than the one registered to their account.

Direct Checkout Customer Journey

In the Direct Checkout flow, a customer will:

1. Enter their email address, first name and last name
2. Select a delivery method (COBO / Will Call or E-ticket delivery)
3. Select Contact Preferences and set Gift Aid declaration (if applicable)
4. Enter a billing address (if required, based on your per-item configuration)
5. Pay by card, Apple Pay or Google Pay

After the payment is confirmed, the system matches the customer by email address. If a matching record is found, the Order is attached to it. If no match is found, a new Customer Record is created.

What is One-Click Checkout?

Currently the Checkout Managed Component displays the One-Click option in the same scenarios as Direct Checkout. This means that the only way customers can experience One-Click Check out is when Direct Checkout is enabled. In the future when the functionality expands, One-Click journeys will be decoupled from Direct Checkout and offer different possible scenarios.

When a customer reaches the checkout iframe, if their Basket / Cart is eligible, they can complete the purchase using the One-Click Checkout flow.

Currently One-Click Checkout only supports Apple Pay. Apple Pay provides the customer's name, email, billing address and payment card. The customer does not need to enter any of their details.

As with Direct Checkout, if the email address provided by the customer matches, the Order is attached to their existing Customer Record.

WARNING: One-Click Checkout is not available unless Direct Checkout is enabled.

One-Click Checkout Customer Journey

If a Basket / Cart qualifies, a Buy with Apple Pay button appears at the top of the checkout page.

If both COBO / Will Call and E-ticket delivery methods are available., the customer can select a delivery method. If only one delivery method is available, it will be selected by default.

The customer taps the button, authorises the payment using Face ID or Touch ID, and the Order is instantly processed.

How to enable the Checkout Managed Component

There are three steps to enable the Checkout Managed Component.

Step 1: Contact Support

If you’d like to get started contact our Support team to request that the Checkout Managed Component features be activated on your system.

Step 2: Configure Website Admin Interface settings

To enable the Checkout Managed Component, navigate to the Website Admin Interface. The domain where you want to activate the Managed Component must be explicitly listed in the Website Admin Interface under Domain Specific Config. A Default domain entry alone is not sufficient.

If your website or Subsite domain is not listed, you will need to add it in order to proceed. Follow the instructions in How to list a new Domain Specific Config in the Website Admin Interface article.

TIP: To access Website Admin, you’ll need the Web Integration Administrator Role. If you don’t have this Role, ask the Settings Administrator in your organisation to add this Role to your User Account.

1. Within the Website Admin Interface, select the domain where you’d like to activate the Managed Component.
2. In the Website Configuration page, scroll down until you reach the Use Express Checkout Flow setting.

3. Click Edit and then check the Use Checkout Managed Component box:

   

4. Click Save.

Step 3: Make Items Eligible

To set items as eligible for Direct and One-Click checkout, or to configure the Billing Address, follow these steps:

1. Navigate to the Admin Interface. 

   TIP: To access the Admin Interface, you’ll need the General Administrator Role. If you don’t have this Role, ask the Settings Administrator in your organisation to add this Role to your User Account.

2. Navigate to the specific Event Instance, Donation Fund, or Merchandise item where you want to enable the Checkout Managed Component.
3. Check the Direct Checkout Allowed and/or One-Click Checkout Allowed and/or Billing Address Required boxes.
4. Click Save.

TIP: You can use the Bulk Instance Update tool to change the Checkout Managed Component settings across multiple Instances.

These checkboxes are located in:

• Event Instances: Under the Basic Details tab tab of individual Instances.
• Donation Funds: Within the Fund settings.
• Merchandise Items: Within the Merchandise setup pages.

The checkbox is available on:

• Event Instances

  You can update the Checkout Managed Component settings on the Basic Details tab of each Instance: 

  

• Donation Funds

  You can update the Checkout Managed Component settings on the Basic Details tab of each Fund:

  

• Merchandise Items

  You can update the Checkout Managed Component settings on the Basic Details tab of each Merchandise item: