Skip to main content

Tokenization

This page covers saving a card via the Moyasar payment form. For the full tokenization guide — including all approaches, token statuses, and how to charge with a saved token — see the Tokenization guides.

Step 1: Include Moyasar Form​

Add the following tags inside the <head> of your page:

Step 2: Instantiate the payment form​

Add an empty <div> and call Moyasar.init:

HTML
<div class="mysr-form"></div>
<script>
  window.Moyasar.init({
    element: '.mysr-form',
    amount: 10000,
    currency: 'SAR',
    description: 'Order #123',
    publishable_api_key: 'pk_test_YOUR_PUBLISHABLE_KEY',
    callback_url: 'https://merchant.example/return',
    supported_networks: ['visa', 'mastercard', 'mada', 'unionpay'],
    methods: ['creditcard'],
  });
</script>

Step 3: Enable tokenization​

Add credit_card.save_card: true to your config:

HTML
<script>
  Moyasar.init({
    element: '.mysr-form',
    amount: 10000,
    currency: 'SAR',
    description: 'Order #123',
    publishable_api_key: 'pk_test_YOUR_PUBLISHABLE_KEY',
    callback_url: 'https://merchant.example/return',
    supported_networks: ['visa', 'mastercard', 'mada', 'unionpay'],
    methods: ['creditcard'],
    credit_card: {
      save_card: true,
    },
  });
</script>

Payment Form​

Step 4: Save the token​

Use on_completed to capture the token before the 3DS redirect:

JS
Moyasar.init({
  element: '.mysr-form',
  amount: 10000,
  currency: 'SAR',
  description: 'Order #123',
  publishable_api_key: 'pk_test_YOUR_PUBLISHABLE_KEY',
  callback_url: 'https://merchant.example/return',
  supported_networks: ['visa', 'mastercard', 'mada', 'unionpay'],
  methods: ['creditcard'],
  credit_card: {
    save_card: true,
  },
  on_completed: async function (payment) {
    await saveTokenOnBackend(payment.source.token);
  },
});

The token ID is in payment.source.token. It appears in the initiated response — save it before the 3DS redirect. The token becomes active after the cardholder completes 3DS.

Next steps​

Last updated on