This section explains how to start accepting Mada, Visa, Mastercard, and American Express payments on your website using Moyasar's payment form.
Before you start accepting credit/debit card Payments, make sure you complete these steps first:
The current up-to-date version of the library is 1.12.0 which can be used through the official Moyasar CDN server:
You can start the integration by including the previous URLs in the head section of your website as follows:
Once you decide on a good place for the form, add an empty <div> tag and then invoke the init method on our global Moyasar class.
Amount intended to be collected by this payment. A positive integer represents how much to charge in the smallest currency unit (e.g., 100 Halala to charge 1.00 SAR or 100 to charge ¥100, a zero-decimal currency). The minimum amount is 1 SAR or equivalent in charge currency.
3-letter ISO code for currency. E.g., SAR, CAD,
An arbitrary string that you can attach to a payment object. Payment description is only for your reference and it is NOT displayed to users.
Your publishable API key, learn more on how to get the key here.
URL of your website page to be redirected to after the customer completes a transaction. (e.g., https://example.com/orders).
This optional configuration option is used to set accepted card networks, in the form. The default value is all networks except amex.
This is used to enable and disable payment methods on the form. By default, all the methods are enabled(creditcard, applepay, stcpay).
Learn more about available configuration keys here Form Configuration
The form uses our Payment APIs to perform required actions, you can learn more about it on Moyasar API Docs
- The user clicks on the pay button.
- Payment details are sent securely to Moyasar servers and then processed.
- The user is then redirected to the 3-D Secure page for validation.
- The user is redirected back to the URL specified in callback_url when the payment succeeds or fails.
This step is optional but highly recommended to save the payment ID before redirecting the user to 3-D Secure, which grants you the ability to verify payment details in case your user's connection drops.
To save the payment ID you can provide the on_completed configuration option with a URL, or a callback function.
When providing a URL the library will make a POST request containing the payment object, here is an example:
The URL can be anything you choose, but keep in mind your endpoint must return a 201 Created HTTP status code for the form to proceed.
If any other status code is returned, a Network connection error will appear, and redirection to 3D Secure will be aborted.
Once the user has completed the payment and got redirected to your website or app using the callback_url you provided earlier, the following HTTP query parameters will be appended:
Here is an example:
Now fetch the payment using its id through our Fetch API, and verify its status, amount, and currency before accepting your user's order or completing any business action.
Next, just show success or failure according to the previous validation.