Apple Pay on web without Embed

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.

https://{domain}/.well-known/apple-developer-merchantid-domain-association

​

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.

...
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();

​

Create a transaction

Finally, once the Apple Pay transaction has been authorized by Apple, create a transaction with our API.

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