Initial Checkout Setup

SCAYLE's checkout web component acts as our window in your website or app to provide a bulletproof yet fully customisable checkout-experience.

Follow these steps to start the integration:

Refer to Native Mobile App for details on how to set up Checkout on mobile devices.

Access to the SCAYLE Panel

To start integrating the checkout, ensure you have access to your SCAYLE Panel in the desired environment, to get a valid shop ID (same as appId).

Note: A SCAYLE Account Manager must activate your Checkout. You can access Checkout on a test environment and on public/internal domains where the shop is hosted (see Endpoint URLs).

Your SCAYLE Account Manager must add the IP addresses of users involved in the migration or your company VPN to SCAYLE’s allow-list. Contact your SCAYLE Account Manager with the required IPs

For most Checkout interactions, you'll need appId parameter (same as shopId)

Get shop ID in the SCAYLE Panel

Go to Shops and select your shop.

Shop Data & Configuration

Before the checkout systems can be used, you need to have shops and products in your environment. For further information, see the getting started guide.

For most Checkout interactions, you'll need:

appId parameter (same as shopId)

To sign tokens, you'll need:

shopToken and shopSecret

Note: Never expose shop tokens/secrets via frontend code, Git repositories, or other public places. This may pose a major security risk.

Before integrating the checkout in your shop frontend, you'll need to add a backend middleware layer within the same origin as your shop. This middleware should then handle all interactions with the Checkout APIs, validate signatures with the shopSecret, etc.

To avoid CORS issues it's recommended that the middleware (e.g. /api/checkout/ ) is served from the same domain as the main shop.
When using multiple shops, e.g. for different locales, keep in mind that you have to either pass the information (shopId) via API or deploy a shop-specfic middleware instance which is aware of the config.
Never expose secrets to your frontend

Authentication Service integration

Make sure to have your integration with the Checkout Authentication API ready, because you will need to authenticate customers and pass the accessToken later to the web component.

Baskets

To proceed with the checkout integration, you need to have a basket integrated.

Endpoint URLs

Below, we provide the URL to load our frontend JavaScript bundle for the Checkout. For backend-to-backend server requests, you will use a dedicated API hostname.

Frontend Bundle Preloader URL

https://{{tenant-space}}.checkout.api.scayle.cloud/frontend/checkout-wc/js?appId={{shop}}

API URL: https://{{tenant-space}}.checkout.api.scayle.cloud

Your SCAYLE Account Manager will provide you with the exact hostnames for your environments. How to use these is described in the corresponding sections of this manual.

CORS Settings

In order to allow requests from the embedded web components to the Checkout API, your shop hostnames will need to be added to the list of allowed CORS hosts.

See hosts configuration for more detailed information.