AJAX Forms


Introduction

Overview

You can use AJAX to submit your payment form, which is helpful after the user create a payment and you need to save its payment id before redirecting the user to his bank page.

On this page

Before Starting

Before you start integrating with Moyasar API, make sure you complete these steps:

  1. Sign up for a Moyasar test account at https://dashboard.moyasar.com/session/signup
  2. Get your API Key. To authenticate your API request.

For more, refer to Get started with Moyasar.


Submitting AJAX Form

The following detailed steps simplify AJAX call to submit your payment form, with examples using jQuery:

Step 1: Implement Moyasar Payment Form.

Use our step-by-step guide here that describes all the details needed for implementation.


Step 2: Issue direct AJAX request to Moyasar API to create the payment.

For this step, you will need to :

  • Capture the form submit button so that the default action doesn’t take place.
  • Get form data.
  • Sending a POST request to Moyasar API using AJAX.
  • Handle the JSON response.
jQuery Example
// Capture the form submit button
$("#submit_button_id").click(function(event){
  event.preventDefault();
  // Get form data
  var form_data = $("#form_id").serialize();
  // Sending a POST request to Moyasar API using AJAX
  $.ajax({
  url: "https://api.moyasar.com/v1/payments",
  type: "POST",
  data: form_data,
  dataType: "json",
})
// uses `.done` callback to handle a successful AJAX request
.done(function(data) {
// Here we will handle JSON response and do step3 & step4
});
});

Step 3: Save the payment id in your System.

jQuery Example
.done(function(data){
// Save the payment id in your System
var payment_id = data.id;
});

Step 4: Redirect the user to transaction_url inside source object.

jQuery Example
.done(function(data){
// Save the payment id in your System
var payment_id = data.id;
// Redirect the user to transaction_url
var url = data.source.transaction_url;
window.location.href=url;
});

Last Modified : Jan 2019