# 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](https://sandbox.payout.one/developers/keys) or [Production](https://app.payout.one/developers/keys).
- An API key and a Bearer token on your server, as in [Simple payment](https://developers.payout.tech/guides/payment-gateway-use-cases-simple-payment.html#step-1), 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.

> [!NOTE]
> Payout handles Apple's merchant validation for you. You don't need an Apple Merchant ID or a certificate signing request (CSR), even though Apple's documentation for Apple Pay on the Web describes them.

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](https://developers.payout.tech/guides/payment-gateway-use-cases-simple-payment.html#step-3); the request needs your API secret, so never send it from the browser. You can also use one of the [integrations](https://developers.payout.tech/guides/payment-gateway-integrations.html).

   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.

   ```js
   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.

   ```js
   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](https://developers.payout.tech/guides/payment-gateway-use-cases-simple-payment.html#step-7), 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](https://developer.apple.com/apple-pay/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](https://developers.payout.tech/guides/payment-gateway-use-cases-checkout-payment-methods.html).