Apple Pay

In JS SDK, Apple Pay can process payments with a smooth and native experience.

We'll discuss how to generate an Apple Pay receipt first, then submit the receipt later (no intentId initially required).

1. Apple Pay JS SDK must be loaded into your app

https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js

use your preferred way to load the script

<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>

2. TypeScript projects (optional)

install @types/applepayjs for type safety.

3. Render ApplePay button

Render your button with your styles or you can render the Apple Pay button through their guide.

4. Generate an Apple Pay receipt

ApplePaySession is the entry point for Apple Pay on the web. All the steps of the payment process for a single transaction occur in a session.

Add the click handler on the button with the following code to generate an Apple Pay receipt

applePayNativeData can be found with each express method under nativePayData property
Get available methods

// Create apple pay session
const session = new ApplePaySession(3, {
  countryCode: applePayNativeData.country_code,
  currencyCode: applePayNativeData.currency_code,
  supportedNetworks: applePayNativeData.supported_networks,
  merchantCapabilities: ["supports3DS"],
  total: {
    label: "Apple Pay",
    type: "final",
    amount: `${applePayNativeData.amount}`,
  },
  requiredShippingContactFields: ["email"], // collect email while paying with ApplePay
});

// Validate the merchant
session.onvalidatemerchant = e =>
moneyHash
  .validateApplePayMerchantSession({
  methodId: applePayNativeData.method_id,
  validationUrl: e.validationURL,
})
  .then(merchantSession =>
        session.completeMerchantValidation(merchantSession),
       )
  .catch(error => {
  console.log(error); // merchant validation request failed
  session.completeMerchantValidation({}); // fallback to show payment failed and close the sheet
});

// Get the receipt from ApplePay
session.onpaymentauthorized = e => {
  const applePayReceipt = {
    receipt: JSON.stringify({ token: e.payment.token }),
    receiptBillingData: {
      email: e.payment.shippingContact?.emailAddress,
    },
  };
  session.completePayment(ApplePaySession.STATUS_SUCCESS);
  console.log(applePayReceipt);
};

// Optional - Listen to cancelling the sheet
session.oncancel = () => {
  console.log("ApplePay Sheet was closed.");
};

// start the ApplePay session and show the sheet
session.begin();

After that, you will have applePayReceipt which you can use to pay with for the intent

5. Submit the receipt

// select ApplePay method for the intent
await moneyHash.proceedWith({
  type: 'method',
  id: 'APPLE_PAY',
  intentId,
});
// Submit ApplePay receipt collected before
const intentDetails = await moneyHash.submitPaymentReceipt({
  nativeReceiptData: applePayReceipt,
  intentId,
});
console.log({ intentDetails });

Full Code

const session = new ApplePaySession(3, {
  countryCode: applePayNativeData.country_code,
  currencyCode: applePayNativeData.currency_code,
  supportedNetworks: applePayNativeData.supported_networks,
  merchantCapabilities: ["supports3DS"],
  total: {
    label: "Apple Pay",
    type: "final",
    amount: `${applePayNativeData.amount}`,
  },
  requiredShippingContactFields: ["email"],
});

session.onvalidatemerchant = e =>
moneyHash
  .validateApplePayMerchantSession({
  methodId: applePayNativeData.method_id,
  validationUrl: e.validationURL,
})
  .then(merchantSession =>
        session.completeMerchantValidation(merchantSession),
       )
  .catch(() => {
  session.completeMerchantValidation({});
});

session.onpaymentauthorized = async e => {
  const applePayReceipt = {
    receipt: JSON.stringify({ token: e.payment.token }),
    receiptBillingData: {
      email: e.payment.shippingContact?.emailAddress,
    },
  };
  session.completePayment(ApplePaySession.STATUS_SUCCESS);

  await moneyHash.proceedWith({
    type: "method",
    id: "APPLE_PAY",
    intentId,
  });

  const intentDetails = await moneyHash.submitPaymentReceipt({
    nativeReceiptData: applePayReceipt,
    intentId,
  });
  console.log({ intentDetails });
};

session.oncancel = () => {
  console.log("ApplePay Sheet was closed");
};

session.begin();

To Accept Apple Pay Recurring Payments Please Check this Guide