Custom Payments
Apple Pay on Websites

10min
Introduction
This guide will go through how to integrate Apple Pay JS API with Moyasar, we will go step by step through the process of including Apple Pay's scripts, Creating the payment request, Validating the merchant's URL, and finally Authorizing the payment.
Who is this guide for?
Advanced Users
Users who are building their own Apple Pay integration 
Before Starting
﻿Create an account with Moyasar, if you haven't already.
To start integration with Apple Pay, we advise you to visit Apple Developer Documentation.
Follow this this guide﻿ to register your domain with Moyasar. 
it's highly recommended you read this guide first: Apple Pay Demo.﻿
Step 1: Displaying the Apple Pay Button
Add Apple Pay's Script 
First, you need to include Apple Pay's CDN
HTML
<head>
  <!---other scripts--->
  <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
</head>
<head>
  <!---other scripts--->
  <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
</head>
﻿
Customizing the Apple Pay button 
In this step, you need to set the styles for the Apple Pay button and include the button in your HTML
HTML
<style>
apple-pay-button {
  --apple-pay-button-width: 150px;
  --apple-pay-button-height: 30px;
  --apple-pay-button-border-radius: 3px;
  --apple-pay-button-padding: 0px 0px;
  --apple-pay-button-box-sizing: border-box;
}
</style>

<apple-pay-button buttonstyle="black" onclick="onApplePayButtonClicked()"  type="plain" locale="en"></apple-pay-button>
<style>
apple-pay-button {
  --apple-pay-button-width: 150px;
  --apple-pay-button-height: 30px;
  --apple-pay-button-border-radius: 3px;
  --apple-pay-button-padding: 0px 0px;
  --apple-pay-button-box-sizing: border-box;
}
</style>

<apple-pay-button buttonstyle="black" onclick="onApplePayButtonClicked()"  type="plain" locale="en"></apple-pay-button>
﻿
 for more customization options check the Apple Pay Demo.
Step 2: Starting the session
JS
function onApplePayButtonClicked() { 

      if (!ApplePaySession) {
          return;
      }
    
      // Define ApplePayPaymentRequest
      const applePayPaymentRequest = {
        countryCode: 'SR',
        currencyCode: 'SAR',
        // make sure amex is enabled on your moyasar account, remove it otherwise.
        supportedNetworks: ['mada','visa', 'masterCard', 'amex'],
        merchantCapabilities: ['supports3DS'],
        total: { label: 'Abdullah Store', amount: '6.00' },
      }
      
      // Starting the Apple Pay Session      
      const session = new ApplePaySession(3, applePayPaymentRequest);

}
function onApplePayButtonClicked() { 

      if (!ApplePaySession) {
          return;
      }
    
      // Define ApplePayPaymentRequest
      const applePayPaymentRequest = {
        countryCode: 'SR',
        currencyCode: 'SAR',
        // make sure amex is enabled on your moyasar account, remove it otherwise.
        supportedNetworks: ['mada','visa', 'masterCard', 'amex'],
        merchantCapabilities: ['supports3DS'],
        total: { label: 'Abdullah Store', amount: '6.00' },
      }
      
      // Starting the Apple Pay Session      
      const session = new ApplePaySession(3, applePayPaymentRequest);

}
﻿
Step 3: Validating Merchant
JS
function onApplePayButtonClicked() { 

      if (!ApplePaySession) {
          return;
      }
    
      // Define ApplePayPaymentRequest ...
      
      // Starting the Apple Pay Session ...
      
      // Validating Merchant  
      session.onvalidatemerchant = async event => {
        // Calling Moyasar's servers to initiate a new Merchant Validation Seaaion.
        
        const body = {
          "validation_url": event.validationURL,
          "display_name": "STORE_NAME_EN",
          "domain_name": "THE_DOMAIN_REGISTERED_WITH_MOYASAR",
          "publishable_api_key": "pk_test_FIND_IT_IN_MOYASAR_DASHBOARD",
        }

        fetch("https://api.moyasar.com/v1/applepay/initiate",{
          method: 'post',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body)
        })
          .then(res => res.json()) // Parse response as JSON.
          .then(merchantSession => {
            session.completeMerchantValidation(merchantSession);
          })
          .catch(err => {
            console.error("Error fetching merchant session", err);
          });          
    }

}
function onApplePayButtonClicked() { 

      if (!ApplePaySession) {
          return;
      }
    
      // Define ApplePayPaymentRequest ...
      
      // Starting the Apple Pay Session ...
      
      // Validating Merchant  
      session.onvalidatemerchant = async event => {
        // Calling Moyasar's servers to initiate a new Merchant Validation Seaaion.
        
        const body = {
          "validation_url": event.validationURL,
          "display_name": "STORE_NAME_EN",
          "domain_name": "THE_DOMAIN_REGISTERED_WITH_MOYASAR",
          "publishable_api_key": "pk_test_FIND_IT_IN_MOYASAR_DASHBOARD",
        }

        fetch("https://api.moyasar.com/v1/applepay/initiate",{
          method: 'post',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body)
        })
          .then(res => res.json()) // Parse response as JSON.
          .then(merchantSession => {
            session.completeMerchantValidation(merchantSession);
          })
          .catch(err => {
            console.error("Error fetching merchant session", err);
          });          
    }

}
﻿
Step 3: Authorizing Payment
In the onpaymentauthorized event, you will receive the encrypted payment token, which will be sent to Moyasar to complete the transaction. We will be using Moyasar API for this.
Create the request body to send to Moyasar
JS
function onApplePayButtonClicked() { 

   if (!ApplePaySession) {
        return;
   }
   
  // Define ApplePayPaymentRequest ...
      
  // Starting the Apple Pay Session ...
  
  // Validating Merchant ...
      
   session.onpaymentauthorized = event => {
    const token = event.payment.token;
    
    // prepare request for moyasar
    let body = {
        'amount': applePayPaymentRequest.total.amount * 100,
        'currency': applePayPaymentRequest.currencyCode,
        'description': 'My Awsome Order #1234',
        'publishable_api_key': 'pk_test_FIND_IT_IN_MOYASAR_DASHBOARD',
        'source': {
            'type': 'applepay',
            'token': token
        },
        'metadata':{
          'order': '1234'
        }
    };
    
    // send the request
    fetch('https://api.moyasar.com/v1/payments', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    })
    .then(response => response.json())
    .then(payment => {
    
      if (!payment.id) {
          // TODO: Handle validation or API authorization error
      }
        
      if (payment.status != 'paid') {
            session.completePayment({
              status: ApplePaySession.STATUS_FAILURE,
              errors: [
                  payment.source.message
              ]
            });
      
            return;
        }

        // TODO: Save payment to your backend and complete your business logic
        
        // Compleate payment with success
        session.completePayment({
            status: ApplePaySession.STATUS_SUCCESS
        });
    })
    .catch(error => {
        session.completePayment({
            status: ApplePaySession.STATUS_FAILURE,
            errors: [
                error.toString()
            ]
        });
    });
  };
    
  session.begin();   
}
function onApplePayButtonClicked() { 

   if (!ApplePaySession) {
        return;
   }
   
  // Define ApplePayPaymentRequest ...
      
  // Starting the Apple Pay Session ...
  
  // Validating Merchant ...
      
   session.onpaymentauthorized = event => {
    const token = event.payment.token;
    
    // prepare request for moyasar
    let body = {
        'amount': applePayPaymentRequest.total.amount * 100,
        'currency': applePayPaymentRequest.currencyCode,
        'description': 'My Awsome Order #1234',
        'publishable_api_key': 'pk_test_FIND_IT_IN_MOYASAR_DASHBOARD',
        'source': {
            'type': 'applepay',
            'token': token
        },
        'metadata':{
          'order': '1234'
        }
    };
    
    // send the request
    fetch('https://api.moyasar.com/v1/payments', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    })
    .then(response => response.json())
    .then(payment => {
    
      if (!payment.id) {
          // TODO: Handle validation or API authorization error
      }
        
      if (payment.status != 'paid') {
            session.completePayment({
              status: ApplePaySession.STATUS_FAILURE,
              errors: [
                  payment.source.message
              ]
            });
      
            return;
        }

        // TODO: Save payment to your backend and complete your business logic
        
        // Compleate payment with success
        session.completePayment({
            status: ApplePaySession.STATUS_SUCCESS
        });
    })
    .catch(error => {
        session.completePayment({
            status: ApplePaySession.STATUS_FAILURE,
            errors: [
                error.toString()
            ]
        });
    });
  };
    
  session.begin();   
}
﻿
oncancel [optional]
Handling what happens when the user clicks on cancel on the Apple Pay payment sheet 
JS
 function onApplePayButtonClicked() { 

   if (!ApplePaySession) {
        return;
   }
   
  // Define ApplePayPaymentRequest ...
      
  // Starting the Apple Pay Session ...
  
  // Validating Merchant ...
  
  // Authorizing Payment ...
   
   session.oncancel = event => {
      // Handle Payment cancelled by WebKit
   };
 
   session.session.begin();
 }
 function onApplePayButtonClicked() { 

   if (!ApplePaySession) {
        return;
   }
   
  // Define ApplePayPaymentRequest ...
      
  // Starting the Apple Pay Session ...
  
  // Validating Merchant ...
  
  // Authorizing Payment ...
   
   session.oncancel = event => {
      // Handle Payment cancelled by WebKit
   };
 
   session.session.begin();
 }
﻿
﻿
Updated 23 Nov 2023
Did this page help you?
STC Pay
Apple Pay on Apps