Moyasar Payment Form



In this guide, we’ll see how to set up the payment form for 3-D Secure credit card\Mada transactions.

We’ll also ensure successful integration between our client system and Moyasar API. It’s an easy process that will get you up and running quickly!

On this page

Before Starting

Before you start integrating with Moyasar API, make sure you complete these steps:

  1. Sign up for a Moyasar test account at
  2. Get your API Key. To authenticate your API request.

For more, refer to Get started with Moyasar.

Integrate Your Payment Form

Moyasar Payment Form is a simple HTML form having two different sets of input fields:

  • Hidden input fields for endpoint required arguments.
  • Visible input fields for user related data.

and it sends the request directly to Moyasar.

Here is the specification of the required data and fields to be included in the submission:

Step 1: Connect your payment form

First, set your form’s action attribute to be Moyasar payment create endpoint URL, and method attribute to be POST

<form accept-charset="UTF-8" action="" method="POST">
<button type="submit">Purchase</button>

Step 2: Include the endpoint required arguments

Next, you have to include all the attributes required for making a payment in the shape of hidden tags as follows:


After completing a transaction, the user will be redirected back to your site via this custom URL you specified.

  1. Add input of type hidden
  2. Set the input’s name to callback_url
  3. Set the value to the URL you want to redirect users to.
<input type="hidden" name="callback_url" value="" />

If you don’t include your Publishable API key your request to the Moyasar API will not authenticate and will fail.

  1. Add input of type hidden
  2. Set the input’s name to publishable_api_key
  3. Set the value to your publishable api key
<input type="hidden" name="publishable_api_key" value="`your publishable api key here`" />

NOTE : The only operation can be performed by the key is creating a payment, so it’s ok to attach it in public web forms.


The amount should be in the smallest currency unit. Means, ( 100 Halals to charges 1 Riyal )

  1. Add input of type hidden
  2. Set the input’s name to amount
  3. Set the value to amount that needs to be charged
<input type="hidden" name="amount" value="10000" />

Specify the payment method, creditcard for payments in Visa, Mastercard, or Mada.

  1. Add input of type hidden
  2. Set the input’s name to source[type]
  3. Set the value to type of payment method
<input type="hidden" name="source[type]" value="creditcard" />
description optional

This is an optional field where you can put any value (order reference, customer email, product name) as a description to add to the payment object.

  1. Add input of type hidden
  2. Set the input’s name to description
  3. Set the value of description
<input type="hidden" name="description" value="Order id 1234 by guest" />

Step 3: Include the user-data required arguments

Finally, add visible elements ( <input>, <select> ) to your form where the users can enter their details. For credit cards (Visa\Mastercard) and Mada card you will need to add five fields and specify name attribute such that:

  • source[name] for card’s holder name.
  • source[number] for card’s number.
  • source[month] for card’s expiry month.
  • source[year] for card’s expiry year.
  • source[cvc] for card’s CVC.

Final code

<form accept-charset="UTF-8" action="" method="POST">

<input type="hidden" name="callback_url" value="" />
<input type="hidden" name="publishable_api_key" value="your publishable api key here" />
<input type="hidden" name="amount" value="10000" />
<input type="hidden" name="source[type]" value="creditcard" />
<input type="hidden" name="description" value="Order id 1234 by guest" />

<input type="text" name="source[name]" />
<input type="text" name="source[number]" />
<input type="text" name="source[month]" />
<input type="text" name="source[year]" />
<input type="text" name="source[cvc]" />

<button type="submit">Purchase</button>

Verify the payment

Once the user has completed the payment, they are redirected back to your website or app using the callback_url you provided earlier. This will be appended with:

  • id
  • status
  • message

Fetch the payment using its id by making a GET request to the API, to verify its status and amount paid before placing the order.

Next up, update the payment status on your system and present the payment result to the user.

Last Modified : Dec 2020