Native Mobile App
To integrate Checkout with mobile applications, you need to embed a browser in your app. This embedded browser points to an URL which serves a separate shop page (app shop frontend) hosted within your shop environment (e.g. by integration partners or SCAYLE). Typically, this HTML site contains the Checkout Webcomponent without the header and footer so that it integrates seamlessly into you app view.
Make sure to change the origin parameter of the component to app
.
<scayle-checkout jwt="${jwt}" access-token="${accessToken}" origin="app"></scayle-check>
As the JWT is signed with the shopSecret
, please ensure that the mobile-app checkout page of your shop (similar to the desktop-page) is generated on the backend side - in order to not leak your secret.
Methods
The Checkout Webcomponent provides a method to update the used basket ID (string) via setBasketId
:
const checkoutWebComponent = document.getElementsByTagName('scayle-checkout')[0];
// Update the basket ID of the current Webcomponent instance
checkoutWebComponent.setBasketId('${newBasketId}');
Events
The Checkout Webcomponent can notify the parent shop frontend about specific events or user actions. Your application can subscribe to these events by adding a listener, as shown in the below example:
const checkoutWebComponent = document.getElementsByTagName('scayle-checkout')[0];
checkoutWebComponent.addEventListener('authenticate', evt => {
// evt.detail property contains payload data
// Use it to provide feedback to users, update app state
// ...
});
The event listener needs to be added within the page where you load your Checkout bundle.
You can find the event details in the table below. The list of event types may be extended in the future.
\
load | Use this if you want to show your own loading indicator until the component is ready | Checkout has loaded all data for initial render |
---|---|---|
error | An error state will be rendered by the Webcomponent. The load event will not be triggered in this case | Checkout has loaded all data for initial render, but there was an unrecoverable error |
intentConfirmation | Customer has made the decision to buy / intents to confirm the order | Customer clicks the "Pay Now" button |
authenticate | Deprecated This event is fired to inform the shop frontend that a user has logged in or registered during checkout | User logs in or signs up via Checkout |
The authenticate
event is deprecated, we encourage you to use the token-based authentication approach.