Apple Pay

Apple Pay is triggered via a wallet button component: shift4.js renders an Apple Pay button into the element you mount it on. There is no continue() call — the payment flow starts when the customer taps the button, and the customer's email (and, when the Checkout Session collects them, billing/shipping addresses) is extracted from the wallet response automatically.

Apple only shows the payment sheet on registered merchant domains, so your domains must be registered before the button will work. This is a joint process with Shift4 support.

Support provides Apple's verification file. Publish it at /.well-known/apple-developer-merchantid-domain-association on each domain that will render the button. Each subdomain counts as a separate domain and wildcards (for example *.example.com) are not supported, so every subdomain must be listed explicitly and verified individually.

Once the files are in place, contact support with the full list of domains and subdomains. Shift4 handles everything on the Apple side — you don't need an Apple Developer account or your own certificates.

Apple restricts certain business categories — see the Apple Pay Acceptable Use Guidelines. If your merchant category code falls into one, the wallet is suppressed and no button is shown.

• HTTPS is mandatory — Apple Pay does not work on plain HTTP origins.

In addition to the baseline Payment components policy, Apple Pay needs Apple's script allowed:

script-src https://applepay.cdn-apple.com

No additional 3D Secure challenge is performed for Apple Pay. The wallet supplies its own cryptographic authentication data with the payment — there is no separate challenge for the customer to complete, and nothing for you to handle.

<script src="https://js.shift4.com/v1/shift4.js"></script>

<div id="apple-pay-button"></div>
<div id="result"></div>
<div id="error"></div>

<script>
  (async function () {
    var shift4 = Shift4('pk_sandbox_XXXXXXXXXXXXXXXXXXXX');
    var checkout = await shift4.createCheckout('{{clientSecret}}');

    checkout.addEventListener('checkout_session.succeeded', function () {
      document.getElementById('result').textContent = 'Payment successful';
    });
    checkout.addEventListener('payment.failed', function (event) {
      document.getElementById('error').textContent = event.error.message;
    });

    checkout.createComponent('apple-pay-button').mount('#apple-pay-button');
  })();
</script>

The wallet SDK manages its own confirmation sheet. If the customer dismisses it without authorising, no payment is initiated and no event fires — the checkout stays mounted and they can try again. See Events & error handling for the full interruption matrix.