Component: Initiate Checkout Button

Available from: Release 106

Purpose: The Initiate Checkout Button can be used to guide customers from a Cart page to a Checkout page, ensuring a seamless transition from browsing to purchasing. It preserves all items in the basket and retains tracking information.

Button with default colour and button label.

How navigation is determined: 

The destination of the checkout navigation is determined in one of two ways:

1. Checkout URL Prop: If a URL is provided in the Checkout URL property of the component, the button navigates customers to this URL when clicked. 
2. Offers in the Basket: If no URL is defined in the Checkout URL property, the button navigates based on the checkout configuration of the offers present in the basket:
   • Single offer in the basket: The button redirects customers to the checkout configuration on the offer. 
   • Multiple offers in the basket: The button redirects customers to the checkout configuratino of the first offer in the basket. 

If there are no offers in the basket, the button is disabled and non-clickable to prevent unnecessary actions. 

Note: The Checkout URL property takes precedence. If this URL is defined, it overrides navigation based on the basket contents.

Props

Prop ID	Prop Label	Type	Default Value	Info
buttonLabel	Button Label	string	Continue to checkout	Defines the call-to-action (CTA) text displayed on the button.
checkoutURL	Checkout URL	string		If you don't want the button to navigate to the checkout URL from the offer configuration, specify the desired destination here.