Skip to main content

For the web

Apple Pay integration to the web provides a slightly different flow in contrast to accepting Apple Pay on iOS. To integrate Apple Pay in your own checkout, you must implement Apple’s JS APIs to render the Apple Pay Button and can be done in any fashion to match the specifics of the UX of your website. This way, you have complete control and extended freedom to customise your checkout and collect billing and shipping addresses from your customers. See Apple's guide to read detailed guidelines on how to work with Apple Pay buttons.

On the web, Dibsy provides API endpoints needed by the JS APIs to create a merchant session, and process the payment.

info

You do not need to join the Apple Developer Program for this integration. To view an example implementation of client-side Apple Pay JS APIs, see here

To integrate Apple Pay with your website, follow these steps.

Step 1 - Prepare your server

  • Apple requires all websites implementing Apple Pay to be served over the HTTPS protocol. Read more about this here.
  • Download the domain validation file and place it at https://[domain]/.well-known/apple-developer-merchantid-domain-association. When you initiate a payment, Apple will verify and validate your domain before opening the payment sheet.

Step 2 - Check Apple Pay availability

Check if Apple Pay is available on the device using the canMakePayments method. If Apple Pay is available on the customer's device, you should provide Apple Pay as a payment method.

Step 3 - Create an Apple Pay Session

When your customer clicks the Apple Pay button, you must create an Apple Pay Session with the ApplePayPaymentRequest object.

Note: Your merchantCapabilities must be set to ["supports3DS"] and supportedNetworks to ["mastercard", "visa"].

Step 4 - Provide Merchant Validation

In order to present an Apple Pay payment sheet, you must validate your identity to Apple. However, Dibsy provides validation to Apple on behalf of your organisation. To perform the validation, your server must call the Dibsy Wallets API and pass the response to the Apple Pay Session. See Apple’s documentation on providing merchant validation for details.

Request

POST /wallets/applepay/session HTTP/1.1
Content-Type: application/json

{
    "domain": "example.com",
    "validationUrl": "https://apple-pay-gateway.apple.com/paymentservices/paymentSession"
}

Response

{
    "epochTimestamp": 1648302910065,
    "expiresAt": 1648306510065,
    "merchantSessionIdentifier": "SSHC1B6C08351DE499E808A7C1E5B1A6148_CCE257A9D27B42513B2C3CA67DB49F602F3450D996C0811ED462EDCA0D7477FD",
    "nonce": "bea50fef",
    "merchantIdentifier": "AF2876E4628561CE4B9FCD584D5AADA0D16F594343C8876D42F813C917CAB955",
    "domainName": "example.com",
    "displayName": "Dibsy",
    "signature": "308006092a864886...00000000000"
}

Step 5 - Process Apple Pay Payment token with Dibsy

Once the customer has authorised the payment, Apple will provide your website with the Apple Pay Payment object. You must then invoke the Create Payment API with the applePayToken parameter set to the paymentToken and the method parameter set to "applepay" to complete your payment.

Request

POST /payments HTTP/1.1
Content-Type: application/json

{
"method": "applepay",
"amount": {
    "value": "40.00",
    "currency": "QAR"
    },
"description": "Order #1337",
"applePayToken": "{\"paymentData\": {\"version\": \"EC_v1\", \"data\": \"vK3Bbr...lg==\"}}",
"redirectUrl": "https://example.com",
"metadata": {
    "order": 1755
    }
}

Response

{
    "id": "pt_6CVWLUT7fxhbWZZS88",
    "resource": "payment",
    "mode": "live",
    "amount": {
        "value": "40.00",
        "currency": "QAR"
    },
    "amountNet": {
        "value": "38.50",
        "currency": "QAR"
    },
    "amountRemaining": {
        "value": "40.00",
        "currency": "QAR"
    },
    "description": "Order #1337",
    "method": "applepay",
    "redirectUrl": "https://example.com",
    "webhookUrl": null,
    "status": "succeeded",
    "organizationId": "22858676",
    "sequenceType": "oneoff",
    "metadata": {
    "order": 1755
},
    "createdAt": "2022-03-25T21:31:15.843917",
    "paidAt": "2022-03-25T21:31:15.500235",
    "_links": {
        "self": {
            "href": "https://api.dibsy.one/v2/payments/pt_6CVWLUT7fxhbWZZS88",
            "type": "application/hal+json"
        },
        "dashboard": {
            "href": "http://dashboard.dibsy.one/payments/pt_6CVWLUT7fxhbWZZS88",
            "type": "text/html"
        },
        "documentation": {
            "href": "http://api.dibsy.dev/#operation/Create%20Payment",
            "type": "text/html"
        }
    }
}

Step 6 - Complete Payment

Parse the response from the Dibsy API and trail the outcome.