API Reference
Log In
Seamless Checkout

Seamless Checkout

Render Instamojo checkout form and collect payments on your webpage with just the instamojo-payment-url.

Integration

You can begin integrating Checkout with as little as the below code: 

<script src="https://js.instamojo.com/v1/checkout.js"></script>
<script>
  Instamojo.open("YOUR_INSTAMOJO_LINK_HERE");
</script>

You can refer to the checkout demo here

🚧

Note

Checkout must be loaded directly from https://js.instamojo.com/v1/checkout.js.
Using a local copy of Checkout is unsupported, and may result into user-visible errors when we push new changes.

Methods

Once checkout.js file is loaded in the browser, we have the following methods available in the global scope:

  1. Instamojo.open()
    Call this method to open any instamojo link in checkout form.
    It requires instamojo-payment-url to be passed as the first parameter to render checkout form.

  2. Instamojo.close()
    Call this method to close the checkout form manually.

  3. Instamojo.configure()
    Call this method to set callback Handlers for the checkout form.

MethodExample
open(paymentUrl)Instamojo.open('https://www.instamojo.com/@sampad')
close()Instamojo.close()
configure(options)Instamojo.configure({
handlers: {
onOpen: function() { alert('Modal is Opened') },
onClose: function() { alert('Modal is Closed') }
}
});

Options

Direct Payment Mode

Fast-forward your customers to a specified Payment Mode using this option.

<script src="https://js.instamojo.com/v1/checkout.js"></script>
<script>
  Instamojo.configure({
    directPaymentMode: 'net banking'
  });
</script>

Handlers

<script src="https://js.instamojo.com/v1/checkout.js"></script>
<script>
  Instamojo.configure({
    handlers: {
      onOpen: function() {},
      onClose: function() {},
      onSuccess: function(response) {},
      onFailure: function(response) {}
    }
  });
</script>

Note: All handler functions are optional.

  1. onOpen
    This function is invoked when the checkout form is opened.

  2. onClose
    This function is invoked when the checkout form is closed.

  3. onSuccess
    This function is invoked after a successful payment. It has payment response as first argument.

  4. onFailure
    This function is invoked after a failed payment. It has payment response as first argument.

FunctionArguments
onOpen: function () {}none
onClose: function () {}none
onSuccess: function (response) {}response: Payment Response Data
onFailure: function (response) {}response: Payment Response Data

Examples

Opening Checkout Form with Button Click

<html>
  <head>
  	<script src="https://js.instamojo.com/v1/checkout.js"></script>
    <script>
      function onButtonClick() {
        Instamojo.open('http://www.instamojo.com/@sampad');
      }
    </script>   
  </head>
  <body>
    <button onclick="onButtonClick()">
      Open Instapay
    </button>
  </body>
</html>

Demo here

Adding Callbacks

<html>
  <head>
    <script src="https://js.instamojo.com/v1/checkout.js"></script>
    <script>
      /* Start client-defined Callback Handler Functions */
      function onOpenHandler () {
        alert('Payments Modal is Opened');
      }

      function onCloseHandler () {
        alert('Payments Modal is Closed');
      }

      function onPaymentSuccessHandler (response) {
        alert('Payment Success');
        console.log('Payment Success Response', response);
      }

      function onPaymentFailureHandler (response) {
        alert('Payment Failure');
        console.log('Payment Failure Response', response);
      }
      /* End client-defined Callback Handler Functions */

      /* Configuring Handlers */
      Instamojo.configure({
        handlers: {
          onOpen: onOpenHandler,
          onClose: onCloseHandler,
          onSuccess: onPaymentSuccessHandler,
          onFailure: onPaymentFailureHandler
        }
      });
      
      function onButtonClick() {
        Instamojo.open('http://www.instamojo.com/@sampad');
      }
    </script>
  </head>
  <body>
    <button onclick="onButtonClick()">
      Open Instapay
    </button>
  </body>
</html>

Demo with callbacks here

Supported Browsers

Checkout supports all the recent versions of majority browsers. For providing the best user experience to our customers we do not support outdated browser versions which are no longer receiving security updates and represent a small minority of traffic.

  • We support Edge and Internet Explorer 10 and above.
  • We support Safari, Chrome and Firefox on all platforms.
  • We support Opera/Opera Mini on Android, IOS and desktop platforms.
  • We support Android Native Browsers on Android 4.4 and later.

Changelog

3/10/17
Added Support for directPaymentMode Option

27/07/17
Added Callback Handlers

19/05/17
Initial Release