Apple Pay JS

Show an Apple Pay button on your own website with the Payout JS library and pay a checkout with it.

Before you begin

• Apple Pay must be enabled for your account; contact support.
• Your public key. It is in the Public Key column of the API keys page in the backoffice: Sandbox or Production.
• An API key and a Bearer token on your server, as in Simple payment, steps 1 and 2.
• Your site must be served over HTTPS, in development too. For local testing, use a tunnel such as ngrok.
• Your domains must be verified with Apple Pay, as described below.

Verify your domain with Apple Pay

Register with Apple every domain that shows the Apple Pay button, both top-level domains (for example payout.one) and subdomains (for example shop.payout.one). Do this for your production and test domains.

1. Ask Payout to register your domain

   Send the domains to Payout support. Payout registers them with Apple and sends you a domain association file.

2. Host the domain association file

   Make the file available at /.well-known/apple-developer-merchantid-domain-association on each domain. For https://example.com, the URL is https://example.com/.well-known/apple-developer-merchantid-domain-association.

Steps

1. Create the checkout on your server

   Create the checkout from your server as in Simple payment; the request needs your API secret, so never send it from the browser. You can also use one of the integrations.

   The response contains payment_token. Pass it to the page that shows the Apple Pay button, for example in a data attribute of the button container:

   HTML

   <div id="payment-request-button" data-payment-token="U0ZNeU5UWS5FWEFNUExFLUNIRUNLT1VULVRPS0VOLm5vdC1hLXJlYWwtc2lnbmF0dXJl"></div>
   

   The Apple Pay button is inserted into this container.

2. Load the library

   The Payout JS library is an ES module that exports the Payout class. Replace <payout.js URL> with the URL of the library that you get from Payout support. Create the client with the environment (TEST for the sandbox, PROD for production) and your public key:

   HTML

   <script type="module">
   import Payout from "<payout.js URL>";
   
   const payout = new Payout({
       env: "TEST",
       api_key: "YOUR_PUBLIC_KEY"
   });
   
   const container = document.querySelector("#payment-request-button");
   const paymentToken = container.dataset.paymentToken;
   
   // the code from the next steps goes here
   </script>
   

3. Show the Apple Pay button

   Check that Apple Pay is available, then create the button with an Apple Pay payment request. total.amount is in whole currency units ("3.00" for a checkout amount of 300) and should match the checkout; total.label is the name shown to the customer.

   JavaScript

   const request = {
       countryCode: "SK",
       currencyCode: "EUR",
       merchantCapabilities: ["supports3DS"],
       supportedNetworks: ["visa", "masterCard"],
       total: { label: "Your shop", amount: "3.00" }
   };
   
   payout.applePay.canMakePayments().then(function (canPay) {
       if (canPay) {
           payout.applePay.createButton("#payment-request-button", request);
       }
   }).catch(function (error) {
       console.error(error);
   });
   

   Style the button with Apple's CSS:

   CSS

   #payment-request-button button.js-apple-pay-button {
       -webkit-appearance: -apple-pay-button;
       -apple-pay-button-type: buy;
       -apple-pay-button-style: black;
       cursor: pointer;
   }
   

4. Confirm the payment

   When the customer authorizes the payment, the library fires completePayment. Confirm the payment with the checkout's payment_token; confirmPayment also closes the Apple Pay sheet with the result.

   JavaScript

   payout.applePay.on("completePayment", function () {
       payout.applePay.confirmPayment(paymentToken).then(function (result) {
           if (result.status === "paid") {
               // show the confirmation page
           } else {
               // show an error
           }
       });
   });
   

   Mark the order as paid only after the checkout.succeeded webhook, as in Simple payment, steps 7 to 9.

Test your integration

Test over HTTPS, on a domain verified with Apple Pay, with one of these setups:

• Safari on macOS Sierra or later, on a Mac with Touch ID or with an iPhone that has a card in Wallet and is paired with the Mac through Handoff
• Safari on iOS 10.1 or later, with a card in Wallet (Settings → Wallet & Apple Pay)

Use Apple's sandbox test cards, for example 5204 2477 5000 1471 or 4761 1200 1000 0492. Apple's sandbox testing page lists more cards and explains the setup.

Next steps

• Send customers straight to Apple Pay on the Payout payment page instead: Checkout payment methods.