Here is a list of acceptable configuration values/options for the form.
The element must be a valid CSS selector for the target element for the form to be mounted. Or can be an instance of a DOM element Element. Here is an example:
This option can be used to set the display language for the form. If left empty, language will be inferred from <html> element then fallback to en if it cannot be inferred. Here is an example
This option is used to add more translations to the form. Here is an example:
The publishable API key is required in order to communicate with Moyasar's API and complete the payment request. Here is an example:
You can get both keys from your account at Moyasar Dashboard
This is used to enable and disable payment methods on the form. By default, all the methods are enabled, which are:
- Credit Card (creditcard)
- Apple Pay (applepay)
- stc pay (stcpay)
This sets the amount for the user to pay. The amount must be in a minor unit of selected currency, e.g. if we want to get a payment of $10 then we must represent the amount in cents 1000.
This sets which currency is used for the amount to be paid.
The currency must be in ISO 3166-1 alpha-3 country code format.
This option is used to set a description to be sent along with other payment information to Moyasar's API.
The description can be any string you want.
This URL is used by Moyasar to redirect the user back after the payment is either successful, or the user has completed the 3D Secure stage.
Adds searchable key/value pairs to the payments.
This optional configuration option is used to set accepted card networks in the form. The default value is all networks except amex.
- Mada (mada)
- Visa (visa)
- Mastercard (mastercard)
- American Express (amex)
This option is used to limit the form width to only 360px and it is enabled by default. To disable this just set it to false.
This callback is used to handle the event when a user starts a payment method and before any information is sent to Moyasar's API. You can use this to perform any last-second validations or to prepare something.
When you handle this event, you can return a false to stop the payment process, or a dictionary that is either empty or contains a description or callback_url values to update the form configurations if you need to.
If you need to do a long-running process, you can return a Promise that returns either of the mentioned values before.
Here is an example to stop the form from submitting:
Using a Promise:
Make the form proceed:
Using a Promise:
This event is fired when a payment is created by Moyasar's API. You can intercept the payment to save it or do any other processing.
This option can either take a URL and the payment object will be posted to. The endpoint must return 201 for the form to proceed, or the form will be aborted.
You can also provide a callback that returns a void or a Promise if you need a long-running task.
Using a Promise:
This event is used to handle payment failure, you will get a string if there is an error.
When the form finishes its work and is about to redirect the user, you can intercept this action and handle redirection manually. Here is an example:
This option allows you to tokenize credit card information after successfully completing the transaction.
This option allows you to only authorize payments without capturing them. To capture the payment, you need to make an API call to the capture endpoint later on. Please review the API section for more details.
Allows the merchant to add a statement descriptor for the payment that will show in the card statement.
Only required if apple pay is enabled
This is an object that contains Apple Pay specific configurations. Here is an example:
This is used to specify the Apple Pay JS version. The default is 6. Here is an example:
Apple Pay merchant country.
Merchant capabilities to activate this Apple Pay session. Default is:
Label to be displayed in the payment modal.
This URL is used to initiate the Apple Pay session. A POST request will be made to the specified endpoint with a JSON object containing the URL. Here is the JSON snippet:
The endpoint must return a response with the header Content-Type: application/json and the session object obtained from Apple.
Here is the configuration example:
In order to perform merchant validation, you need to register for an Apple Developer Account and sign up for the Apple Developer program.
Now you must use the provided URL to perform the merchant validation
An array of countries that cards are allowed from.
Default: ['SA']. Only Saudi Arabia is enabled by default to prevent fraudulent transactions, you may enable more countries at your own risk.
If the form does not satisfy your needs, you can always build your own integration solution, and try our manual integration.