docs

CORS Configuration(hidden)

CORS Configuration

Cross-Origin Resource Sharing (CORS) is a vital browser security mechanism that governs how web pages can request resources from a different domain than the one that served the original page. For your SCAYLE Checkout integration, proper CORS configuration is absolutely crucial to enable your shop's frontend to communicate securely and effectively with the SCAYLE Checkout API.

Understanding the Checkout Host

Your SCAYLE Checkout API operates from a dedicated host:

Note: {{tenant-space}} is a unique placeholder representing your specific SCAYLE tenant identifier. Always replace this with your actual tenant space URL.

Recommendation for Implementation

We highly recommend utilizing this default host for all your custom SCAYLE Checkout implementations.

Using this host ensures optimal performance, robust security, and seamless compatibility with future updates to the SCAYLE platform.

Whitelisting Your Storefront Domain

A fundamental aspect of CORS for your integration is whitelisting your shop's storefront domain.

  • Why it's necessary: Your SCAYLE Checkout will be accessed and interacted with directly from your shop's website (your frontend storefront). For the browser to allow these cross-origin requests to the SCAYLE API, your storefront's domain must be explicitly approved.
  • The consequence: Without proper whitelisting, your browser will block the communication between your shop and the SCAYLE API, leading to checkout failures and an unusable experience for your customers.

Critical Step: If your storefront domain is not whitelisted, the browser's security policies will prevent the SCAYLE Checkout from functioning, resulting in errors.

Adjusting the Configuration

The necessary CORS configuration, specifically the whitelisting of your storefront domain(s), can be conveniently adjusted within the SCAYLE Panel.

  1. Locate Checkout Host Settings: Navigate to Settings -> Checkout -> Hosts\
  2. Select your default host and navigate to Whitelisted Domains\
  3. Add Your Origin(s): Add your shop's storefront domain(s) to the list of allowed origins.
    • Always include the full origin, including the protocol. For example: https://www.your-shop.com
    • If your checkout can be accessed from multiple domains or subdomains (e.g., https://dev.your-shop.com and https://www.yourshop.com), ensure all relevant origins are added to the whitelist.