Apple Pay

Introduction

To provide a better user experience to your Apple Pay users, MyFatoorah is providing the Apple Pay embedded payment.

MyFatoorah Apple Pay embedded payment is a Javascript library that provides the Apple Pay button to your website. This button can be placed on your checkout page. When your customers click the button, MyFatoorah will direct the customers to the Apple Pay payment sheet page to authorize the payment. Then you can smoothly complete the payment using ExecutePayment endpoint by following the below steps.

Verify your domain with Apple Pay

🚧

Note

This step is not required in the case of integrating using MyFatoorah IOS SDK.

To use Apple Pay Button, you need to register with Apple all of your web domains that will show an Apple Pay button. This includes both top-level domains and subdomains. You need to do this for domains you use in both demo and live servers.

1. Host your domain verification file.
2. Register your domain with Myfatoorah.

Step1: Host your domain verification file

Create a folder named “.well-known“ in the root path and copy the apple-developer-merchantid-domain-association file which you received from MyFatoorah support team ([email protected]). Replace only the {example.com} with your site URL.

https://{example.com}/.well-known/apple-developer-merchantid-domain-association

❗️

SSL

Domain should be TLS (HTTPS) enabled.

Step2: Register your domain with Myfatoorah

To register your domain with Myfatoorah and Apple Pay, you need to call v2/RegisterApplePayDomain endpoint. The request is a POST request with the following parameters.

{ 
 "DomainName": "example.com" 
}

{
  "IsSuccess": true,
  "Message": "OK",
  "ValidationErrors": null,
  "Data": null
}

{
  "IsSuccess": false,
  "Message": "Please make sure that domain verification file in the following path 'https://<YourDomainName>/.well-known/apple-developer-merchantid-domain-association' is valid and accessible",
  "ValidationErrors": null,
  "Data": null
}

End Point:

https://apitest.myfatoorah.com/v2/RegisterApplePayDomain

https://api.myfatoorah.com/v2/RegisterApplePayDomain

https://api-sa.myfatoorah.com/v2/RegisterApplePayDomain

📘

Notes

• Domain name in the request JSON should be domain name without a scheme (HTTPS)
• Header should have a valid token to access it.
• You may receive failed response with error detail in case of an invalid request.

How it Works

👍

Before You start

Kindly refer to the prerequisite section in the Embedded Payment.

The following detailed steps will explain how to add MyFatoorah Apple Pay embedded payment form to your checkout page.

1. Include the Javascript library

// Test Environment
<script src="https://demo.myfatoorah.com/applepay/v2/applepay.js"></script>

// Live Environment Except Saudi Arabia
<script src="https://portal.myfatoorah.com/applepay/v2/applepay.js"></script>

// Live Environment for Saudi Arabia
<script src="https://sa.myfatoorah.com/applepay/v2/applepay.js"></script>

2. Add the form

You need to define a div element with a unique id attribute. The form will be loaded inside this div after passing the div id to the configuration variable.

<div id="card-element"></div>

3. Apple Pay Configration

Now you need to add the configuration variables. Place the following snippet in a new script tag after loading the library in step 1, replace the sessionId parameter with the "SessionId" you receive from InitiateSession Endpoint. Moreover, you need to add the countery code, currency code, and invoice amount.

For the currencyCode parameter check our list of ISO Lookups.

var config = {
    sessionId: "", // Here you add the "SessionId" you receive from InitiateSession Endpoint.
    countryCode: "KWT", // Here, add your Country Code. 
    currencyCode: "KWD", // Here, add your Currency Code.
    amount: "10", // Add the invoice amount.
    cardViewId: "card-element",
    callback: payment,
    sessionStarted: sessionStarted,
    sessionCanceled: sessionCanceled   
};

myFatoorahAP.init(config);

This will load the Apple Pay button on your page. When customers click the button, they will be redirected to the Apple Pay payment sheet to authorize the payment.

4. Call the payment function to load the response

In the response to the payment function, you will receive the SessionId and CardBrand.

function payment(response) {
    // Here you need to pass session id to you backend here 
    var sessionId = response.sessionId;
    var cardBrand = response.cardBrand;
}

5. Call the ExecutePayment Endpoint

Then, you need to send the SessionId to your server to process the actual transaction, which should be done in your backend environment using ExecutePayment endpoint.

❗️

Parameters conflict

Do not pass the PaymentMethodId parameter in the ExecutePayment request and use the SessionId parameter instead. As PaymentMethodId overwrite SessionId.

The "SessionId" you receive from InitiateSession Endpoint can not be used directly in ExecutePayment Endpoint.