Payments

Apple Pay

12min

Introduction
Overview
This section will guide you through the process of accepting payments using Apple Pay on your website.
Before Starting
Before you start accepting Apple Pay, make sure you complete these steps first:
Sign up for a Moyasar account on our dashboard.﻿
﻿Get your publishable API key to authenticate your form payment requests.
Register your domain with Moyasar by following this guide.﻿
﻿
Setting Up Moyasar's Form
Moyasar Form is a lightweight Javascript library, that can get you up and running quickly.
Step 1: Include Moyasar's Scripts
The current up-to-date version of the library is 1.14.0 which can be used through the official Moyasar CDN server:
https://cdn.moyasar.com/mpf/1.14.0/moyasar.js
https://cdn.moyasar.com/mpf/1.14.0/moyasar.css
You can start the integration by including the previous URLs in the head section of your website as follows:
HTML
<head>
  <!-- Other Tags -->

  <!-- Moyasar Styles -->
  <link rel="stylesheet" href="https://cdn.moyasar.com/mpf/1.14.0/moyasar.css" />

  <!-- Moyasar Scripts -->
  <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=fetch"></script>
  <script src="https://cdn.moyasar.com/mpf/1.14.0/moyasar.js"></script>

  <!-- Download CSS and JS files in case you want to test it locally, but use CDN in production -->
</head>
<head>
  <!-- Other Tags -->

  <!-- Moyasar Styles -->
  <link rel="stylesheet" href="https://cdn.moyasar.com/mpf/1.14.0/moyasar.css" />

  <!-- Moyasar Scripts -->
  <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=fetch"></script>
  <script src="https://cdn.moyasar.com/mpf/1.14.0/moyasar.js"></script>

  <!-- Download CSS and JS files in case you want to test it locally, but use CDN in production -->
</head>
﻿
Step 2: Instantiating The Payment Form
Once you decide on a good place for the form, add an empty <div> tag and then invoke the init method on our global Moyasar class.
HTML
<div class="mysr-form"></div>
<script>
    Moyasar.init({
        element: '.mysr-form',

        // Amount in the smallest currency unit.
        // For example:
        // 10 SAR = 10 * 100 Halalas
        // 10 KWD = 10 * 1000 Fils
        // 10 JPY = 10 JPY (Japanese Yen does not have fractions)
        amount: 1000,
        currency: 'SAR',
        description: 'Coffee Order #1',
        publishable_api_key: 'pk_test_AQpxBV31a29qhkhUYFYUFjhwllaDVrxSq5ydVNui',
        callback_url: 'https://moyasar.com/thanks',
        methods: ['applepay'],
        apple_pay: {
            country: 'SA',
            label: 'Awesome Cookie Store',
            validate_merchant_url: 'https://api.moyasar.com/v1/applepay/initiate',
        },
    });
</script>
<div class="mysr-form"></div>
<script>
    Moyasar.init({
        element: '.mysr-form',

        // Amount in the smallest currency unit.
        // For example:
        // 10 SAR = 10 * 100 Halalas
        // 10 KWD = 10 * 1000 Fils
        // 10 JPY = 10 JPY (Japanese Yen does not have fractions)
        amount: 1000,
        currency: 'SAR',
        description: 'Coffee Order #1',
        publishable_api_key: 'pk_test_AQpxBV31a29qhkhUYFYUFjhwllaDVrxSq5ydVNui',
        callback_url: 'https://moyasar.com/thanks',
        methods: ['applepay'],
        apple_pay: {
            country: 'SA',
            label: 'Awesome Cookie Store',
            validate_merchant_url: 'https://api.moyasar.com/v1/applepay/initiate',
        },
    });
</script>
﻿
. Configuration Keys
Field
Description
amount
Amount intended to be collected by this payment. A positive integer represents how much to charge in the smallest currency unit (e.g., 100 Halala to charge 1.00 SAR or 100 to charge ¥100, a zero-decimal currency). The minimum amount is 1 SAR or equivalent in charge currency. 
currency
3-letter ISO code for currency. E.g., SAR, CAD.
description
An arbitrary string that you can attach to a payment object. Payment description is only for your reference and it is NOT displayed to users.
publishable_api_key
Your publishable API key, learn more on how to get the key here.﻿
supported_networks
This optional configuration option is used to set accepted card networks, in the form. The default value is all networks except amex.
methods
This is used to enable and disable payment methods on the form. By default, all the methods are enabled(creditcard, applepay, stcpay). 
Learn more about available configuration keys here form configuration.﻿
For Apple Pay Button to show, the following requirements must be met:
Safari browser.
HTTPS connection.
You're in a country that supports Apple Pay, learn more here.﻿
﻿
. Payment Lifecycle
The user clicks on the Apple Pay button.
The user verifies their identity with Apple Pay using Touch ID or Face ID.
Payment details are sent securely to Moyasar servers and then processed.
Step 3: Save The Payment ID
This step is optional but highly recommended to save the payment ID before displaying the user, which grants you the ability to verify payment details in case your user's connection drops.
To save the payment ID after the transaction finishes you can provide the on_completed configuration option with a URL, or a callback function.
Option 1: URL
When providing a URL the library will make a POST request containing the payment object, here is an example:
JS
Moyasar.init({
  element: '.mysr-form',
  amount: 1000,
  currency: 'SAR',
  description: 'Coffee Order #1',
  publishable_api_key: 'pk_test_AQpxBV31a29qhkhUYFYUFjhwllaDVrxSq5ydVNui',
  methods: ['applepay'],
  apple_pay: {
    country: 'SA',
    label: 'YOUR_STORES_NAME_IN_ENGLISH',
    validate_merchant_url: 'https://api.moyasar.com/v1/applepay/initiate',
  },
  on_completed: 'https://mystore.com/checkout/savepayment',
})
Moyasar.init({
  element: '.mysr-form',
  amount: 1000,
  currency: 'SAR',
  description: 'Coffee Order #1',
  publishable_api_key: 'pk_test_AQpxBV31a29qhkhUYFYUFjhwllaDVrxSq5ydVNui',
  methods: ['applepay'],
  apple_pay: {
    country: 'SA',
    label: 'YOUR_STORES_NAME_IN_ENGLISH',
    validate_merchant_url: 'https://api.moyasar.com/v1/applepay/initiate',
  },
  on_completed: 'https://mystore.com/checkout/savepayment',
})
﻿
The URL can be anything you choose.
Option 2: Callback Function
The other option is to provide a callback function, and due to the asynchronous nature of JavaScript, you need to return a Promise object which lets the form wait until your task is completed.
JS
Moyasar.init({
  element: '.mysr-form',
  amount: 1000,
  currency: 'SAR',
  description: 'Coffee Order #1',
  publishable_api_key: 'pk_test_AQpxBV31a29qhkhUYFYUFjhwllaDVrxSq5ydVNui',
  methods: ['applepay'],
  apple_pay: {
    country: 'SA',
    label: 'Awesome Cookie Store',
    validate_merchant_url: 'https://api.moyasar.com/v1/applepay/initiate',
  },
  on_completed: function (payment) {
    return new Promise(function (resolve, reject) {
        // savePayment is just an example, your usage may vary.
        if (savePayment(payment)) {
            resolve({});
        } else {
            reject();
        }
    });
  },
})
Moyasar.init({
  element: '.mysr-form',
  amount: 1000,
  currency: 'SAR',
  description: 'Coffee Order #1',
  publishable_api_key: 'pk_test_AQpxBV31a29qhkhUYFYUFjhwllaDVrxSq5ydVNui',
  methods: ['applepay'],
  apple_pay: {
    country: 'SA',
    label: 'Awesome Cookie Store',
    validate_merchant_url: 'https://api.moyasar.com/v1/applepay/initiate',
  },
  on_completed: function (payment) {
    return new Promise(function (resolve, reject) {
        // savePayment is just an example, your usage may vary.
        if (savePayment(payment)) {
            resolve({});
        } else {
            reject();
        }
    });
  },
})
﻿
Step 4: Verify Payment
To verify if the payment has been completed, use our webhooks to receive an alert when the payment is paid.

Field	Description
amount	Amount intended to be collected by this payment. A positive integer represents how much to charge in the smallest currency unit (e.g., 100 Halala to charge 1.00 SAR or 100 to charge ¥100, a zero-decimal currency). The minimum amount is 1 SAR or equivalent in charge currency.
currency	3-letter ISO code for currency. E.g., SAR, CAD.
description	An arbitrary string that you can attach to a payment object. Payment description is only for your reference and it is NOT displayed to users.
publishable_api_key	Your publishable API key, learn more on how to get the key here.
supported_networks	This optional configuration option is used to set accepted card networks, in the form. The default value is all networks except amex.
methods	This is used to enable and disable payment methods on the form. By default, all the methods are enabled(creditcard, applepay, stcpay).

Updated 07 Sep 2024

Did this page help you?

Credit Card

STC Pay