Apple Pay | SumUp Developer

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

Prerequisites

You have a SumUp merchant account and have already filled in your account details(Opens in a new tab).
Get familiar with Apple Pay on the Web guide(Opens in a new tab).
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.
Complete the domain onboarding setup steps described in your Dashboard under Settings > For developers > Payment wallets.

Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay

Accepting Apple Pay Payments with SumUp

To begin your implementation, follow these steps:

Create a checkout
Create an Apple Payment request(Opens in a new tab)

1const applePaymentRequest = {
2  currencyCode: "EUR",
3  countryCode: "DE",
4  merchantCapabilities: ["supports3DS"],
5  supportedNetworks: ["masterCard", "visa"],
6  total: {
7    label: "Demo",
8    amount: "0.00",
9    type: "final",
10  },
11};

Initiate an Apple Pay session(Opens in a new tab) and call the begin method(Opens in a new tab)
Listen for the onvalidatemerchant callback and collect the validation URL from the event. Create the following payload and pass the validation URL you received from Apple as the target value:

1{
2  "target": "https://apple-pay-gateway-cert.apple.com/paymentservices/startSession",
3  "context": "your_domain_name"
4}

and initiate a merchant session by calling

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

Use the response from the previous step to complete merchant validation with the completeMerchantValidation(Opens in a new tab) method.
Submitting the payment sheet triggers the onpaymentauthorized callback. At that point, process the checkout. The process-checkout request body needs to include a payment_type of apple_pay and an apple_pay object containing the Apple Pay payment token returned by the callback.

1{
2  "payment_type": "apple_pay",
3  "id": "9be2da07-a7bd-4877-bc0a-e16cd909a876",
4  "amount": 12,
5  "currency": "EUR",
6  "apple_pay": {
7    "token": {
8      "paymentData": {
9        "data": "si2xuT2ArQo689SfE-long-token",
10        "signature": "MIAGCSqGSIb3DQEHA-long-signature",
11        "header": {
12          "publicKeyHash": "PWfjDi3TSwgZ20TY/A7f3V6J/1rhHyRDCspbeljM0io=",
13          "ephemeralPublicKey": "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEaBtz7UN2MNV0qInJVEEhXy10PU0KfO6KxFjXm93oKWL6lCsxZZGDl/EKioUHVSlKgpsKGin0xvgldfxeJVgy0g==",
14          "transactionId": "62e0568bc9258e9d0e059d745650fc8211d05ef7a7a1589a6411bf9b12cdfd04"
15        },
16        "version": "EC_v1"
17      },
18      "paymentMethod": {
19        "displayName": "MasterCard 8837",
20        "network": "MasterCard",
21        "type": "debit"
22      },
23      "transactionIdentifier": "62E0568BC9258E9D0E059D745650FC8211D05EF7A7A1589A6411BF9B12CDFD04"
24    }
25  }
26}