docs
  1. SCAYLE Resource Center
  2. Integration
  3. Native Mobile App

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.

\

loadUse this if you want to show your own loading indicator until the component is readyCheckout has loaded all data for initial render
errorAn error state will be rendered by the Webcomponent. The load event will not be triggered in this caseCheckout has loaded all data for initial render, but there was an unrecoverable error
intentConfirmationCustomer has made the decision to buy / intents to confirm the orderCustomer clicks the "Pay Now" button
authenticateDeprecated This event is fired to inform the shop frontend that a user has logged in or registered during checkoutUser logs in or signs up via Checkout

The authenticate event is deprecated, we encourage you to use the token-based authentication approach.