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.

  • 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 File

Before 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

​
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

Was this page helpful?

Web with EmbediOS with SDK