Checkout

Overview

The SCAYLE Storefront Application utilizes the SCAYLE Checkout web component to provide a robust, customizable, and secure checkout experience. By integrating this self-contained component, you can seamlessly manage the entire checkout process, from basket review to order confirmation, ensuring consistency and compliance.

Key Features

The SCAYLE Checkout web component offers comprehensive features to manage the full checkout flow:

Customizable UI: Leverage dynamic slots to inject custom components, messages, or banners (e.g., loyalty program notices, custom fields) without modifying the core template.
Secure Transactions: Handles sensitive payment information and user data with built-in security measures.
Comprehensive Data Handling: Manages basket contents, user authentication, and order-level custom data.
Tracking Integration: Sends essential e-commerce events to your configured Google Tag Manager (GTM) instance, allowing for seamless analytics.
Event-Driven Communication: Dispatches events (e.g., load, error, invalid-access-token) to allow your storefront to react to changes in the checkout's state or user actions.

Guest Checkout

The Checkout web component supports a "guest checkout" workflow where users can complete their purchase without logging in or registering an account - they simply must enter a name and email address. To use this feature, enable "Guest Checkout" under "Sign-in Step" within the Checkout Settings in the SCAYLE Panel.

Integration and Customization

For detailed instructions on integrating the SCAYLE Checkout web component into your Storefront Application, including loading the JavaScript bundle, initializing the component, and setting its attributes, please refer to the Checkout documentation.

Information on using dynamic slots to further customize the checkout UI, including examples of injecting custom components, can be found in the Dynamic Checkout Slots guide.

For configuration options managed via the SCAYLE Panel, refer to the Checkout Configuration section.

Order Custom Data

The Storefront Application supports handling order custom data, which can be used in the SCAYLE Panel for additional configuration — for example, enabling customer group–based promotions.

Data Format

Order custom data must be provided in JSON format.
It is sent to the Storefront API in all Basket-related requests for Promotions
The data will also be included in the Checkout JWT returned by getCheckoutToken RPC in customData attribute.
See more #jwt-attribute

How to Provide Order Custom Data

The recommended way of defining the Order Custom Data is to override the getOrderCustomData RPC, which is then called by other RPCs to retrieve custom data for a given user.

This allows you to implement order custom data consistently, ensuring that all endpoints receive it. It also ensures that external parties can't tamper with or modify it.

Example: Overriding the RPC

The following example associates user groups with the custom data of an order, allowing you to use Customer groups, for example, within Promotion Conditions.