Setup Hosts & Domains

General

SCAYLE embeds its checkout component within the shop’s web application. To avoid Cross-Origin Resource Sharing (CORS) issues, it’s crucial to set up hosts for your checkout and whitelist domains for access. This tutorial will guide you through configuring your checkout hosts for seamless integration with your shop.

In the SCAYLE Panel

Configure your hosts

As you set up your shop's checkout hosts, you'll find different tabs for each device: desktop, mobile, and app. Keep in mind, mobile and app configurations are being phased out and will not be supported in the future. You only need to focus on the desktop configuration.

You can tailor your checkout hosts through the SCAYLE Panel. While this guide won't cover every detail, we'll highlight typical scenarios and essential settings.

For a step-by-step guide on creating a host, check our User Guide.

Use a generic host

A generic host is used if multiple shop countries share the same domain. Common scenarios include multilingual country shops, like those in Switzerland or Belgium, or using a single domain (e.g., a ".com" domain) where country shops are differentiated by paths, not subdomains.

In such cases, you’ll need to configure a generic host. A key point here is that a generic host always necessitates a default shop, set up as a custom host, while the rest are configured as generic hosts.

To clarify, let’s use an example. Consider your shop, Fashion Store with the domain fashion-store.com. For each shop country, the pattern would be:

Copy

fashion-store.com/<country-de>/<language-code>

Example

All these variations would use a shared checkout domain, such as checkout.fashion-store.com established as a subdomain.

If the German shop checkout is your default, configure its host as non-generic. This default checkout determines the shop country's checkout used when the system can't directly resolve the request. Your configuration might look something like this:

Pay special attention to the Is Generic toggle when setting up hosts. For your default shop, this option needs to be deactivated. For any other shops sharing the same checkout domain, use the same settings but ensure that Is Generic toggle is active.

Your configuration for these shops might look like this:

Using a non-generic host

If your shop has country-specific domains, you can add a host configuration per shop country with non-generic domains. Using our Fashion Store example, your domain setup might appear as follows:

Ensure the Is Generic toggle is off for these host configurations. For instance, the Italian shop's configuration should be clearly marked as non-generic:

You can also combine both approaches. This is common when you have country-specific domains but want to use a generic host for shops in multilingual settings, like a Swiss shop using the same domain for different languages. In that case, you primarily need non-generic hosts, with an exception for the secondary language in a multilingual setup, which would use a generic host.

Checkout domains

When you choose SCAYLE's checkout, it automatically generates a checkout domain following this pattern:

http

Copy

<tenant-short-key>-<environment>.checkout.api.scayle.cloud

Example

With SCAYLE’s three environments (Prev, Test, Live) you’ll have three corresponding domains, one per environment. If your shop “Fashion Store” has the tenant-short-key “fas”, your domains would look something like this:

Before Go-Live

As you approach your launch, coordinate with the domain owner for your live/production environment to set up these essential DNS records.

1. Create a CNAME record:
   checkout.<production-domain>.<tld> IN CNAME <tenant-short-key>-live.checkout.api.scayle.cloud
   For instance, if your shop is “Fashion Store” with the checkout subdomain checkout.fashion-store.com, your DNS record should be:
   checkout.fashion.store.com IN CNAME fas-live.checkout.api.scayle.cloud
2. Establish a DNS record for the ACME challenge:
   Along with the first DNS record, a second is required to fulfill an ACME challenge. Similar to the first one the owner of the live/production domain should create the following DNS records:
   _acme-challenge.checkout.<production-domain>.<tld> ->
   _acme-challenge.acme.scayle.cloud
   Taking “Fashion Store” as an example again with the checkout subdomain checkout.fashion-store.com, your DNS record should look as follows:
   _acme-challenge.checkout.fashion-store.com ->
   _acme-challenge.acme.scayle.cloud

After setting up these DNS records, inform your SCAYLE Account Manager to initiate the ACME challenge (only required for the live environment.) While optional for Preview and Test phases, completing this step helps avoid CORS-related issues.

Whitelist your domains

Finalize your setup by determining which domains can access your configured host. For Preview and Test settings, you can generally use an asterisk (*) to allow any domain. Your config should look like this

These usually include the shop domain and the temporary shop domain (e.g. prd.fashion-store.com) used if the shop is relaunched and the domain is already in use. Occasionally, domains of payment service providers might also need whitelisting (however this must be checked in detail.) If there's any uncertainty, don't hesitate to contact your SCAYLE representative for guidance.