Moyasar Payment Form


Introduction

Overview

In this guide, we’ll see how to set up the payment form for 3-D Secure credit card\Mada and Sadad 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 https://dashboard.moyasar.com/
  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="https://api.moyasar.com/v1/payments.html" method="POST">
<button type="submit">Purchase</button>
</form>

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:

callback_url

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="https://www.my-store.com/payments_redirect" />
publishable_api_key

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.

amount

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">
source[type]

Specify the payment method whether it’s Sadad or 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
  • creditcard
<input type="hidden" name="source[type]" value="creditcard">
  • Sadad
<input type="hidden" name="source[type]" value="sadad">

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].
  • source[year].
  • source[cvc].

<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]" />

For Sadad you will need to add only one field for the username and set the input’s name to source[username]

 <input type="text" name="source[username]" />

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
https://www.my-store.com/payments_redirect?id=79cced57-9deb-4c4b-8f48-59c124f79688&status=paid&message=Succeeded

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 : Jan 2019