Skip to main content

Apple Pay Basic Integration

This page will guide you to Apple Pay payments on supported Apple devices using our Payment Form Javascript library.

Before Starting​

Before you start accepting credit/debit card payments, make sure you complete these steps first:

  1. Sign up for a Moyasar account on our dashboard.
  2. Get your publishable API key to authenticate your form payment requests.

Supported Hardware​

Apple Pay is only supported on Apple devices that has the T1 security chip which stores the card details and provide encryption during the payment authorization process.

Including Moyasar Form​

Moyasar Form is a lightweight Javascript library that will take care of creating the payment components within your website using a modern and responsive design.

You can start the integration by including the following tags within the <head> tag of your page:

HTML
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/moyasar.css" />
<script src="https://unpkg.com/[email protected]/dist/moyasar.umd.js"></script>

Initiating 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 the global Moyasar class.

HTML
<div class="mysr-form"></div>
<script>
  window.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​

Learn more about available configuration keys here form configuration.

Payment Form​

Apple Pay Payment Flow​

Save Payment ID​

This step is optional but highly recommended to save the payment ID, which grants you the ability to verify payment details in case your user's connection drops.

To save the payment ID you can provide the on_completed configuration option with an async function.

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: async function (payment) {
    await savePaymentOnBackend(payment);
  },
});

The method savePaymentOnBackend is a placeholder, and you must provide your own custom logic.

Step 4: Verify Payment​

Once the user has completed the payment and got redirected to your website or app using the callback_url you provided earlier, the following HTTP query parameters will be appended:

  • id
  • status
  • message

Here is an example:

Callback URL
https://www.my-store.com/payments_redirect?id=79cced57-9deb-4c4b-8f48-59c124f79688&status=paid&message=Succeeded

Now fetch the payment using its id through our fetch API, and verify its status, amount, and currency before accepting your user's order or completing any business action.

Next, just show success or failure according to the previous validation.