Skip to main content

Apple Pay

Web Integration​

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 the direct API integration guide below.

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.

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.paymentToken);
  } catch (error) {
    session.completePayment({
      status: window.ApplePaySession.STATUS_FAILURE
    });
  }
};
session.begin();

Confirm the Payment​

After you have obtained the MONEI Payment Token, you can confirm the payment using the token.

function moneiTokenHandler(token) {
  return monei
    .confirmPayment({paymentId: '{{payment_id}}', paymentToken: token})
    .then(function (result) {
      // At this moment you can show a customer the payment result
      // But you should always rely on the result passed to the callback endpoint on your server
      // to update the order status
      console.log(result);
    })
    .catch(function (error) {
      console.log(error);
    });
}

Before you go live​