# Apple Pay

import { Aside } from "@astrojs/starlight/components";
import Image from "@components/content/Image.astro";

In this guide, you will learn how to directly integrate Apple Pay with SumUp, so that you can retain your own UI/UX flow. Please note that you can also offer Apple Pay through our Payment Widget (see [Payment Widget documentation](/online-payments/checkouts/card-widget#alternative-payment-methods)).

## Prerequisites

- You have a SumUp merchant account and have already filled in your [account details](https://me.sumup.com/account).
- Get familiar with [Apple Pay on the Web guide](https://developer.apple.com/documentation/apple_pay_on_the_web).
- Offering Apple Pay requires registering with Apple on all web domains that will expose an Apple Pay button (includes TLD and subdomains). This is a requirement for production AND test environments.
- If you want to test payments without involving real funds, [create a sandbox merchant account](/online-payments/#getting-a-sandbox-merchant-account).
- Complete the domain onboarding setup steps described in your Dashboard under **Settings** > **For developers** > **Payment wallets**.

<Image
  alt="Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay"
  src="/img/guides/find_payment_wallets.png"
  width="80%"
/>

## Accepting Apple Pay Payments with SumUp

To begin your implementation, follow these steps:

1. [Create a checkout](https://developer.sumup.com/api/checkouts/create#create-a-checkout)
2. Create an [Apple Payment request](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest)

```js
const applePaymentRequest = {
  currencyCode: "EUR",
  countryCode: "DE",
  merchantCapabilities: ["supports3DS"],
  supportedNetworks: ["masterCard", "visa"],
  total: {
    label: "Demo",
    amount: "0.00",
    type: "final",
  },
};
```

3. Initiate an [Apple Pay session](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/2320659-applepaysession) and call the [begin method](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778001-begin)
4. Listen for the `onvalidatemerchant` callback and collect the `validateUrl` property. Create the following payload

```json
{
  "target": "https://apple-pay-gateway-cert.apple.com/paymentservices/startSession",
  "context": "your_domain_name"
}
```

and initiate a merchant session by calling

```http
PUT https://api.sumup.com/v0.1/checkouts/${checkoutId}/apple-pay-session
```

5. The response from the previous step is needed to complete the merchant validation with the [`completeMerchantValidation`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778015-completemerchantvalidation/) method

6. Submitting the payment dialogue triggers the `onpaymentauthorized` callback, this is when you need to [process the checkout](https://developer.sumup.com/api/checkouts/process#process-a-checkout). The process checkout request body needs to include a `payment_type` of `apple_pay` and an `apple_pay` object, containing the response from step 7

```json
{
  "payment_type": "apple_pay",
  "id": "9be2da07-a7bd-4877-bc0a-e16cd909a876",
  "amount": 12,
  "currency": "EUR",
  "apple_pay": {
    "token": {
      "paymentData": {
        "data": "si2xuT2ArQo689SfE-long-token",
        "signature": "MIAGCSqGSIb3DQEHA-long-signature",
        "header": {
          "publicKeyHash": "PWfjDi3TSwgZ20TY/A7f3V6J/1rhHyRDCspbeljM0io=",
          "ephemeralPublicKey": "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEaBtz7UN2MNV0qInJVEEhXy10PU0KfO6KxFjXm93oKWL6lCsxZZGDl/EKioUHVSlKgpsKGin0xvgldfxeJVgy0g==",
          "transactionId": "62e0568bc9258e9d0e059d745650fc8211d05ef7a7a1589a6411bf9b12cdfd04"
        },
        "version": "EC_v1"
      },
      "paymentMethod": {
        "displayName": "MasterCard 8837",
        "network": "MasterCard",
        "type": "debit"
      },
      "transactionIdentifier": "62E0568BC9258E9D0E059D745650FC8211D05EF7A7A1589A6411BF9B12CDFD04"
    }
  }
}
```

<Aside type="tip">
  Handling the responses from the API calls should be according to our public{" "}
  <a href="https://developer.sumup.com/api">API contract & guidelines</a>
</Aside>