ApplePay

ApplePay Embedded Payment Details

Perquisite

It's required to register and verify your Domain with Apple before starting the implementation

Steps

  1. Prepare Your Website or App:
    Ensure that your website or app is ready to accept Apple Pay. This involves implementing the necessary code and APIs to support Apple Pay payments. You may need the help of a developer for this step.

  2. Create an Apple Developer Account:
    If you don't already have an Apple Developer account, you'll need to create one. Visit the Apple Developer website (developer.apple.com) and sign up for an account.

  3. Enroll in the Apple Pay Program:
    Access the Apple Pay section within your Apple Developer account. You may need to enroll in the Apple Pay program if you haven't done so already.

  4. Create an Apple Pay Merchant ID:
    Within the Apple Pay section of your developer account, create a new Apple Pay Merchant ID. This ID is used to identify your domain.

  5. Add Domain Verification File:
    To verify your domain, you'll need to add a verification file to your website. This file will be provided by Apple during the setup process. You'll typically need to upload this file to a specific location on your web server.

  6. Verify Domain in Developer Account:
    Once the verification file is uploaded to your website, go back to your Apple Developer account and verify the domain. Apple will check for the presence of the verification file on your domain to confirm ownership.

  7. Test Apple Pay:
    After your domain is verified, you can test Apple Pay on your website or app using a sandbox environment to ensure it's working correctly.

Checkout Session

Before Showing the Payment Option for ApplePay on the platform, you have to call the intiate_order_session API endpoint to generate a Checkout Session.

This session ID will be used for the creation relevant invoice on Sadad.

API endpoint

You can start the checkout session by calling the intiate_order_session endpoint.

Request

{
    "ref_Number": "xxx",
    "amount": "xxx",
    "currency_Code": "xxx",
    "customer_Name": "xxx",
    "customer_Mobile": "xxxx",
    "customer_Email": "xxxxx",
    "PaymentGatewayCode": "ApplePay"
}

{
    "ref_Number": "xxx",
    "amount": "xxx",
    "currency_Code": "xxx",
    "customer_Name": "xxx",
    "customer_Mobile": "xxxx",
    "customer_Email": "xxxxx",
    "PaymentGatewayCode": "ApplePay",
    "Items": [
      {
        "name":"xxx",
        "quantity":xx,
        "amount":xx
      },
      {
        "name":"xxx",
        "quantity":xx,
        "amount":xx
      } 
    ]
}

{
    "ref_Number": "xxx",
    "amount": "xxx",
    "currency_Code": "xxx",
    "customer_Name": "xxx",
    "customer_Mobile": "xxxx",
    "customer_Email": "xxxxx",
    "PaymentGatewayCode": "ApplePay",
    "Items": [
     {
       "name":"xxx",
       "quantity":xx,
       "amount":xx,
       "supplierId": xx
     },
      {
        "name":"xxx",
        "quantity":xx,
        "amount":xx,
        "supplierId": xx
      } 
    ]
}

Response

{  
    "isValid": true,  
    "errorKey": null,  
    "response": {  
        "session_Id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"  
    }  
}

{
  "isValid": false,
  "errorKey": "ERROR",
  "response": null
}

Usage

In order to show the ApplePay Option, you should use the returned session_Id instead of the value "CHECKOUT SESSION ID" in the below example


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">	
</head>

<body>
	<div id="sadad-applepay-element" class="apple-pay-button apple-pay-button-text-buy" lang=en></div>
	
    <!-- Adding an error message to show in case Apple Pay is not possible -->
	<p style="display:none" id="sadad-applepay-error">ApplePay is not available in this environment.</p>
  

	<script>
		
	</script>
	<script src="https://sadadpay.net/embedded/applepay/applepay-process.js"></script>
	<script>
		var session_id = "xxxxxxx";
		var options = {
			"CompanyName": 'YOUR COMPANY', //name appear on the applepay session
			"Amount": 1,		
			"buttonWidth": "80px" //apple pay button width
		}
		Sadad.Configure(session_id, options, false); //true for sandbox environment		

		//call back on error
		var SadadOnError = function (error) {			
			console.log(error);
		}

		//call back on success
		var SadadSuccess = function () {
			console.log("payment completed");
		}
	</script>
</body>

</html>

Callback

❗️

IMPORTANT

You need to verify the payment information by calling the API to get Invoice payment to confirm that the information is correct and valid before proceeding with your action.

  1. When the Sadad invoice gets paid, Sadad will redirect you back to the return URL with the invoice ID.
  2. Use the Invoice ID to request Invoice details
  3. Sadad is not responsible for proceeding without validating and verifying the payment status of the Sadad invoice.