Checkout integration for mobile app

To integrate Checkout on your mobile shop app follow these steps:

1. Web component
2. Customer Authentication
3. Order Success Page
4. Account area

Web component

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 web component 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>

Customer Authentication

As you need a backend-middleware layer to interact with the Checkout Authentication API, you will need to have proxy-endpoints for your mobile app as well. You can't connect you app directly with the Checkout Authentication API as those endpoints are basic-auth protected and you need to be able to change the credentials on the fly without having to ship a new app version through the app stores.

Order Success Page

You can use the same middleware layer to communicate which checkout APIs as described for normal browser client, but you need to expose it via APIs for your app to not expose your secrets in the app build.

Use the Checkout configuration, to configure different shop URLs for the device types.

Account area

As described for the desktop account area, you need to expose endpoints for your app that handle the backend-to-backend communication with our Account API equally.