The myPOS Embedded SDK now allows you to also add Apple Pay and Google Pay buttons directy on your website.

This page will provide information on how you can set this up.

1. Creating a payment session

First you will need to create a payment session, which will generate a SessionToken parameter that should be used when initiating the Embedded SDK.

You can find details regarding the request that should be made here:

https://developers.mypos.com/en/doc/online_payments/v1_4/431-api-call--ipcpaymentsessioncreate

The API will respond with a JSON that will contain the SessionToken key.

2. Initiate the Embedded SDK 

You can download the latest version of the SDK from here: 

https://www.npmjs.com/package/mypos-embedded-checkout

Depending on your use case to initiate the SDK you can do one of the following:

<script src="https://developers.mypos.com/repository/mypos-embedded-sdk.js" type="text/javascript"></script>

Or

import * as MyPOSEmbedded from 'mypos-embedded-checkout';

Then use the code below where you should pass the SessionToken received from the previous step as well as select the environment (Sandbox/Production).

if (MyPOSEmbedded.IS_APPLE_PAY_AVAILABLE) {
	MyPOSEmbedded.createApplePayButton(
		'embeddedButtons', //div tag ID
		sessionToken, //Received session token from IPCPaymentSessionCreate
		{
			isSandbox: true, //Is sandbox env
			merchantName: "myPOS", //Custom Merchant name
			onSuccess: function (data) {
				//On payment success
				console.log(data);
			},

			onDecline: function (err) {
				//On payment Declined
				console.error(err);
			}
		}
	).then((sessionData) => {
		//When button is loaded
	}).catch((err) => {
		//Catched error loading
		console.error(err);
	});
} else {
	MyPOSEmbedded.createGooglePayButton(
		'embeddedButtons', //div tag ID
		sessionToken, //Received session token from IPCPaymentSessionCreate
		{
			isSandbox: true, //Is sandbox env
			onSuccess: function (data) {
				//On payment Success
				console.log(data);
			},

			onDecline: function (data) {
				//On payment Declined
				console.error(data);
			}
		}
	).then((sessionData) => {
		//When button is loaded
	}).catch((err) => {
		//Catched error loading
		console.error(err);
	});
}

Now all you need to do is place the following line in your HTML where you would like the payment buttons to be displayed:

<div id="embeddedButtons"></div>

3. Validating the payment status

The status of each payment can be additionally checked by making an IPCGetPaymentStatus API request.

You can find detailed description of the endpoint here:

https://developers.mypos.com/en/doc/online_payments/v1_4/25-api-call--ipcgettxnlog

4. Store settings in the myPOS Account 

In order to make sure the Apple Pay payment buttons will be working correctly you will need to go to your Stores settings (in your myPOS Account) and make sure you enter the URL of the web page you are planning to use this setup on in the "Embedded Apple Pay button URL" field.

First you need to Download the domain association file and host it at /.well-known/apple-developer-merchantid-domain-association on your site (Example: https://yoursite.com/.well-known/apple-developer-merchantid-domain-association).

This URL must also exist in the "Request URLs" list.

After you entered the URL, please tap the "Save" button on the bottom of the page in order to complete the process.