Skip to main content

Your First Payment

This page will guide you to complete your first card payment using Moyasar Form.

Before Starting​

  1. Sign up for a Moyasar account on our dashboard.
  2. Get your publishable API key from Get your API keys.
  3. Review form configuration here.

Include Moyasar Form​

Add these tags inside your page <head>:

Initialize the Payment Form​

HTML
<div class="mysr-form"></div>
<script>
  Moyasar.init({
    element: '.mysr-form',
    amount: 1000,
    currency: 'SAR',
    description: 'Coffee Order #1',
    publishable_api_key: 'pk_test_xxxxxxxxxxxxxxxxx',
    callback_url: 'https://example.com/thanks',
    supported_networks: ['visa', 'mastercard', 'mada'],
    methods: ['creditcard'],
  });
</script>

Complete a Test Payment​

Use one of the test cards to complete the flow.

After payment, user will be redirected to your callback_url with payment id.

Verify on Backend​

Fetch payment by id using Fetch Payment API, then verify:

  • status is paid
  • amount and currency match your order

Only after backend verification, mark order as paid.