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:
- Add a card to your Wallet for Safari.
- Serve your application over HTTPS. This is a requirement both in development and in production. One way to get up and running is to use a service like ngrok.
- Register your domain with Apple Pay, both in development and production.
- Follow Apples’s instructions.
Include monei.js on your checkout page by adding the script tag to the head of your HTML file.
<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
- Make sure that you are using live (production) mode Account ID and API Key.
- Make sure that you have at least one enabled card processor.
- Contact our Support Team to configure Apple Pay in production.