It is possible to use Apple Pay on the web without our SDK. To learn how to integrate Apple Pay we recommend following Apple’s documentation. The steps below will highlight the basics and focus on the interaction with our API. A full code sample is available that shows this integration in action.

​
About this integration

Similar to our standard Embed integration, there is minimal configuration to get set up to process Apple Pay on the web. There is no need to sign up for an Apple Developer account with this integration.
  • Upload our Domain Association File to your website.
  • Enable Apple Pay in your merchant dashboard.
Additionally, you will then need to implement the following.
  • Load the Apple Pay JS SDK.
  • Render an Apple Pay button.
  • Handle the click of the button.
  • Verify the Apple Pay session.
  • Catch the Apple Pay token and pass it to our API for processing.

​
Enable Apple Pay

To enable Apple Pay, head over to your dashboard and then go to Connections -> Catalog -> Apple Pay. Next, complete and submit the form to create a new Apple Pay service.

​
Registering a domain

To process Apple Pay via the web you will need to register all the domains where the buyer can checkout. In order to do this, navigate to your Apple Pay service via the dashboard, Connections -> Apple Pay -> Domains -> Add domain name.
Domain Association FileBefore submitting a domain name, please download the Domain Association File from the dashboard and upload it to every domain you wish to support.The file needs to be added to every domain in a predefined location.
https://{domain}/.well-known/apple-developer-merchantid-domain-association
This file is checked by Apple in the production environment to verify that you have granted us permission to perform Apple Pay transactions on your dashboard.

​
Integrate Apple Pay

​
Load the Apple Pay JS SDK

Since iOS 18, users can shop with Apple Pay on devices other than Macs and non-Safari browsers. On submit, a popup will display asking users to scan a code with their iOS 18+ device and complete the payment there. Third-party browser popup To enable Apple Pay in browsers besides Safari you will need to load the Apple Pay JS SDK into your application. It is safe to load this same library in Safari as well. 
<head>
    <script crossorigin 
      src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"> 
    </script>
</head>

​
Content Security Policy

Make sure to allow the Apple Pay JS SDK domain in your CSP if you’re using one, otherwise the script won’t load and the Apple Pay option will not show in third-party browsers. 
default-src 'self' applepay.cdn-apple.com ...; script-src 'self' applepay.cdn-apple.com ...
Please see the Pay with Apple Pay in third-party browsers documentation for more information.

​
Render an Apple Pay button

An Apple Pay button can be displayed and customized with Apple specific CSS. 
<style>
  .button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: pay;
    cursor: pointer;
  }
</style>

<button class="button"></button>

​
Handle button click

When a button is clicked, start an Apple Pay Session. 
  const onClick = async () => {
    const session = new ApplePaySession(3, {
      countryCode: 'AU',
      currencyCode: 'AUD',
      merchantCapabilities: ["supports3DS"],
      supportedNetworks: ["visa", "masterCard", "amex", "discover"],
      total: {
        label: "Demo (Card is not charged)",
        type: "final",
        amount: '12.99',
      },
    });

    ...

    session.begin();
  };

​
Verify session

Next, this is the bit that’s specific to our API. Make an API call to our Apple Pay session endpoint to verify the Apple Pay session for your domain. This checks if we are allowed to accept Apple Pay on your domain.
For this to work it’s important to register the domain your domain for use with Apple Pay in our dashboard.
...
session.onvalidatemerchant = async (event) => {
  const response = await fetch(`http://api.sandbox.example.gr4vy.app/digital-wallets/apple/session`, {
    method: "POST",
    headers: {
      "Authorization": `bearer [JWT]`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      validation_url: event.validationURL,
      domain_name: document.location.hostname,
    }),
  });
  const merchantSession = await response.json();
  session.completeMerchantValidation(merchantSession);
};

session.begin();
When using a real card in a sandbox environment the validation URL will be rejected by the POST /digital-wallets/apple/session endpoint. Please only use test cards in the sandbox environment.

​
Create a transaction

Finally, once the Apple Pay transaction has been authorized by Apple, create a transaction with our API.
This API call could be made in your frontend code, or the token could be sent to your backend for processing.
session.onpaymentauthorized = (event) => {
  await fetch(`http://api.sandbox.example.gr4vy.app/transactions`, {
    method: "POST",
    headers: {
      "Authorization": `bearer [JWT]`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      amount: 1299,
      currency: "AUD",
      country: "AU",
      payment_method: {
        method: "applepay",
        token: event.payment.token,
      },
    }),
  });
  

  session.completePayment({
    status: ApplePaySession.STATUS_SUCCESS,
  });
};

session.begin();

​
Common issues