Skip to main content

Apple Pay

You can start accepting Apple Pay payments on the Web using Hosted Payment Page or Payment Request Component. No additional configuration is required to use Apple Pay in Hosted Payment Page.

Our Payment Request Component gives you a single integration for Apple Pay and Google Pay. Customers see a Google Pay or an Apple Pay button, depending on what their device and browser combination supports.

info

Open this page in Safari to see the Apple Pay button.

If you prefer to integrate directly against the Apple Pay API, follow our Apple Pay direct API integration guide.

Apple Pay direct API integration

Before you start, you need to:

Include monei.js on your checkout page by adding the script tag to the head of your HTML file.

checkout.html
<head>
<title>Checkout</title>
<script src="https://js.monei.com/v2/monei.js"></script>
</head>

Create Apple Pay Session

const session = new window.ApplePaySession(3, request);
session.onvalidatemerchant = async (event: any) => {
try {
const merchantSession = await monei.api.createApplePaySession({
accountId: 'MONEI_ACCOUNT_ID',
displayName: 'Test Merchant',
domainName: 'example.com',
validationUrl: event.validationURL
});
session.completeMerchantValidation(merchantSession);
} catch (error) {
session.abort();
}
};

Exchange Apple Pay token for MONEI Payment Token that can be used to confirm payment as described in step 3.

session.onpaymentauthorized = async (event) => {
// Encode Apple Pay token as a base64 string
const paymentToken = JSON.stringify(event.payment.token);
const token = window.btoa(paymentToken);
try {
const result = await monei.api.createToken({
paymentId: '{{payment_id}}',
paymentMethod: {
applePay: {token}
}
});
session.completePayment({
status: window.ApplePaySession.STATUS_SUCCESS
});
return moneiTokenHandler(result.token);
} catch (error) {
session.completePayment({
status: window.ApplePaySession.STATUS_FAILURE
});
}
};
session.begin();

Before you go live