Skip to main content

Save Card During a Payment

The simplest way to tokenize a card: charge the customer and save the card in one step. Moyasar runs 3DS for the actual payment amount, and the resulting token is immediately active for future use.

note

save_card is supported on creditcard, applepay, and samsungpay sources. Add "save_card": true inside the source object on any of these payment types.

How it works​

  1. Create a payment with source.save_card: true.
  2. The response includes a source.token (the new token ID). For creditcard, a source.transaction_url is also returned for 3DS. For device payments (Apple Pay, Samsung Pay), authentication happens on the device before the payment reaches Moyasar.
  3. For creditcard: redirect the cardholder to source.transaction_url to complete 3DS.
  4. After authentication, the token becomes active.
  5. Your backend receives the payment at callback_url — save the token from source.token.
tip

Save the token from the initial payment response, before the 3DS redirect. It appears even when the payment status is still initiated.

Via the payment form​

The easiest option if you already use Moyasar's payment form. Add credit_card.save_card: true to your Moyasar.init 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,
    },
    on_completed: async function (payment) {
      // Save payment.source.token to your backend before the 3DS redirect.
      await saveTokenOnBackend(payment.source.token);
    },
  });
</script>

The on_completed callback fires after the payment is created but before the 3DS redirect, giving you a window to persist the token.

Via the direct API​

If you have a custom card input UI, call POST /v1/payments directly from the frontend with source.save_card: true.

Endpoint: POST /v1/payments

Authentication: Publishable key

POST /v1/payments
{
  "amount": 10000,
  "currency": "SAR",
  "callback_url": "https://merchant.example/return",
  "source": {
    "type": "creditcard",
    "name": "John Doe",
    "number": "4111111111111111",
    "month": "12",
    "year": "2030",
    "cvc": "123",
    "save_card": true
  }
}

Response​

The payment is returned as initiated. The token ID is already present in source.token — save it before redirecting the customer.

POST /v1/payments — initiated response
{
  "id": "760878ec-d1d3-5f72-9056-191683faa872",
  "status": "initiated",
  "amount": 10000,
  "currency": "SAR",
  "callback_url": "https://merchant.example/return",
  "source": {
    "type": "creditcard",
    "company": "visa",
    "name": "John Doe",
    "number": "XXXX-XXXX-XXXX-1111",
    "token": "token_qbmmXzo97AESrZLS6KpWvof6uK2hAKcQGfEcKg",
    "transaction_url": "https://api.moyasar.com/v1/transaction_auths/..."
  }
}

Redirect the cardholder to source.transaction_url. After 3DS, they are sent to your callback_url with the payment ID. Fetch the payment to confirm it is paid, then the saved token is active and ready for future charges.

Using the token​

See Charge with a Token for how to use an active token for recurring payments.

Last updated on