Authentication
The token-based authentication approach
The Checkout requires a valid accessToken provided by the Auth API.
A middleware layer needs to be implemented on your shop backend to interact with our API.
Customer Authentication Flow
How to implement
- Provide your own login/registration views.
- Use the Checkout Authentication API internally to get an access token for the customer.
- Inject the access token into the checkout web component.
Initialize the web component
To initialize and display the web component, add the <scayle-checkout> tag at a desired place where the checkout needs to appear.
Any additional element like a header or footer must be defined in the root document.
Example code on how to set up the web component:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Your shop title</title>
<script
src="https://${tenant-space}.checkout.api.scayle.cloud/frontend/checkout-wc/js?appId=${shopId}"
defer>
</script>
</head>
<body>
<div id="header">...</div>
...
<scayle-checkout jwt="${jwt}" access-token="${accessToken}" origin="web" header-element="#header"></scayle-checkout>
...
</body>
</html>
You can retrieve your shopId in the SCAYLE Panel > Shops Dashboard.
Iframe-Authentication Handling
iframe-based authentication is deprecated in favor of
Token-Based-Authentication and should not be implemented.
