Checkout integration for mobile app
To integrate Checkout on your mobile shop app follow these steps:
Webcomponent
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.
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.
Your SCAYLE Account Manager can provide you with different use cases implemented by our other clients.
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.
