Integrating Apple Pay into website guide


Apple Pay JS API initiates Apple Pay request on client-side of the merchant website. The API is built-in for Safari iOS 10 and later, and Safari macOS 10.12 and later. It can provide and display Apple Pay button on any supporting browser.

To start preparing user interface for Apple Pay, note that Apple Pay button should not be displayed before checking the Availability of Apple Pay in the current user device. If the user is capable of using Apple Pay, display the button.

Apple Pay button also does not work without explicit user gesture, so when the user clicks the button, a click event should be able to invoke the payment sheet.

Moyasar Apple Pay integration workflow

Using ApplePay JS API on your website, do the following step by step:

  1. Check ApplePay JS API availability on current browser.
  2. Check if user is capable of using Apple Pay and has an active card.
  3. Create Payment Request object and make sure to fill all required properties.
  4. When user explicitly asks to pay, start Apple Pay Session passing Apple Pay version,5 or later, and the payment request object you created at step3.
  5. Call begin() to show the payment sheet and to begin the merchant validation.
  6. In this step, onvalidatemerchant event handler gets called to request merchant session from Apple providing —in the request— MerchantID certificate and key in TLS 1.2 enabled communication and one of the Cipher Suites mentioned in step two, Set up your server. Apple then responses with merchant session object to complete merchant validation.
  7. Complete all event handlers listed here in Handling Payment Method Updates, Handling Shipping Contact Updates and Handling Shipping Method Updates sections.
  8. Lastly onpaymentauthorized event handler gets called to provide the payment token as an event attribute event.payment.token. Stringify the value of event.payment.token.paymentData then send it to Moyasar to complete the payment.

Moyasar Apple Pay request is as follows:


    "amount": <amount>,
    "description": "<description>",
    "currency": "<currency>",
    "source": {
          "type": "applepay",
          "token": "<token object stringified>"

Upon success, Moyasar will return the following response:

     "id": "<Payment ID>",
     "status": "paid",
     "amount": 100,
     "fee": 0,
     "currency": "SAR",
     "refunded": 0,
     "refunded_at": null,
     "captured": 0,
     "captured_at": null,
     "voided_at": null,
     "description": null,
     "amount_format": "1.00 SAR",
     "fee_format": "0.00 SAR",
     "refunded_format": "0.00 SAR",
     "captured_format": "0.00 SAR",
     "invoice_id": null,
     "ip": "",
     "callback_url": null,
     "created_at": "2019-10-06T18:07:56.015Z",
     "updated_at": "2019-10-06T18:07:56.015Z",
     "source": {
           "type": "applepay",
           "company": "visa",
           "name": null,
           "number": "XXXX-XXXX-XXXX-3729",
           "message": "APPROVED"

For more information on Apple Pay development, please visit Apple Developer Documentation.

For businesses that intend to establish Apple Pay, please visit Acceptable Use Guidelines.

Last Modified : May 2021