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.

html

Copy

<scayle-checkout jwt="${jwt}" access-token="${accessToken}" origin="app"></scayle-check>

Methods

The Checkout Webcomponent provides a method to update the used basket ID (string) via setBasketId:

javascript

Copy

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:

javascript

Copy

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

  // ...
});

You can find the event details in the table below. The list of event types may be extended in the future.

\