5-Minute Integration

Use this guide to accept mada, Visa, Mastercard, and American Express in minutes using Moyasar Form.

Before You Start

Before integration, prepare these requirements:

Moyasar account and test mode
- Create an account on the dashboard.
- Start with test mode first so you can validate your flow safely before going live.
API keys (important difference)
- Copy your publishable key (pk_test_...) for frontend form initialization.
- Keep your secret key (sk_test_...) for backend verification only.
- Never expose sk_* in browser code, HTML, or mobile apps.
- Learn more here: Get your API keys.
Callback URL
- Prepare a callback page on your website (for example: https://example.com/payment-result).
- This page receives the payment id in the query string after redirect.
- Your backend should use this id to fetch and verify payment details before confirming the order.
Basic security checklist
- Use HTTPS.
- Verify payment server-side (status, amount, currency) and do not trust redirect alone.
- Save payment IDs for reconciliation and support.

Step 1: Add Moyasar Form Assets

Place the following tags in your page <head>:

Step 2: Add Payment Container

HTML
<div class="mysr-form"></div>

Step 3: Initialize the Form

HTML
<script>
  Moyasar.init({
    element: '.mysr-form',
    amount: 1000, // 10.00 SAR (smallest currency unit)
    currency: 'SAR',
    description: 'Order #1001',
    publishable_api_key: 'pk_test_xxxxxxxxxxxxxxxxx',
    callback_url: 'https://example.com/payment-result',
    methods: ['creditcard'],
    supported_networks: ['mada', 'visa', 'mastercard', 'amex'],
  });
</script>

Step 4: Verify Payment on Callback

After redirect, read the id query parameter from your callback URL, then fetch the payment from your backend and verify:

status is paid
amount matches your order amount
currency matches your order currency

Use the payment API here: Fetch payment

Example backend verification:

JavaScript (Node.js)
Python
PHP
Ruby

const paymentId = req.query.id;

const response = await fetch(`https://api.moyasar.com/v1/payments/${paymentId}`, {
  headers: {
    Authorization: `Basic ${Buffer.from('sk_test_xxx:').toString('base64')}`,
  },
});

const payment = await response.json();

if (payment.status === 'paid' && payment.amount === 1000 && payment.currency === 'SAR') {
  // Mark order as paid
}

import requests

payment_id = request.args.get("id")
response = requests.get(
    f"https://api.moyasar.com/v1/payments/{payment_id}",
    auth=("sk_test_xxx", ""),
)
payment = response.json()

if payment["status"] == "paid" and payment["amount"] == 1000 and payment["currency"] == "SAR":
    # Mark order as paid
    pass

<?php
$paymentId = $_GET['id'] ?? null;

$ch = curl_init("https://api.moyasar.com/v1/payments/" . $paymentId);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERPWD, "sk_test_xxx:");
$result = curl_exec($ch);
curl_close($ch);

$payment = json_decode($result, true);

if (
  $payment['status'] === 'paid' &&
  $payment['amount'] === 1000 &&
  $payment['currency'] === 'SAR'
) {
  // Mark order as paid
}

require "net/http"
require "json"

payment_id = params[:id]
uri = URI("https://api.moyasar.com/v1/payments/#{payment_id}")
request = Net::HTTP::Get.new(uri)
request.basic_auth("sk_test_xxx", "")

response = Net::HTTP.start(uri.hostname, uri.port, use_ssl: true) { |http| http.request(request) }
payment = JSON.parse(response.body)

if payment["status"] == "paid" && payment["amount"] == 1000 && payment["currency"] == "SAR"
  # Mark order as paid
end

Go Live Checklist

Replace pk_test_... with your live key pk_live_...
Make sure your website runs on HTTPS
Never trust frontend redirect alone; always verify server-side
Store payment IDs in your order records for auditing and support

Before You Start​

Step 1: Add Moyasar Form Assets​

Step 2: Add Payment Container​

Step 3: Initialize the Form​

Step 4: Verify Payment on Callback​

Go Live Checklist​