Setup/Initialization

mojoReq(js) requires jQuery to run the plug-in. The jQuery library was chosen since that it can be accessed from the web for free with minimal effort to learn the programming language.

Quick Start

Check to see if your webpage is equipped with jQuery library. If not you can use Google's served jQuery library for free by simply adding this line of code.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>

Create a Checkout Form.

To supply users data to Instamojo checkout, add form fields with unique classname's or id's to reference with. Add a button (with unique id or classname) in later will trigger (using the click event) to initialize the plugin.

<form>
  <label>Name</label>
  <input name="name" type="text"/>
  <label>Email</label>
  <input name="email" type="email"/>
  <label>Phone</label>
  <input name="phone" type="text"/>
  <button class="unique-classname" type="button">Pay with Instamojo</button>
</form>

mojoReq(js) Setup: Include Plugin.

Copy & paste mojoReq(js) plugin inside a <script> ... <script> tag in your webpage, preferably at <footer> or before </body> tag.

<script>
// include plugin in webpage
;(function($){
  'use strict'
  $.fn.mojoReq = function ( options ){

    ... plugin codes ...

  };
})(jQuery);
</script>

mojoReq(js) Setup: Secret Keys.

This secret keys is available from your Instamojo dashboard. Please do not share these keys. Highly recommended to obfuscate this section to make un-readable through the naked eyes.

<script>
// setup Instamojo unique secret keys
$(function(){

  // setup your Instamojo keys
  // highly advised to obfuscate your Instamojo secret keys
  $.fn.mojoReq.defaults.data.api_key    = 'YOUR-API-KEY';
  $.fn.mojoReq.defaults.data.auth_token = 'YOUR-AUTH-TOKEN';

});

Use dedicated secret keys assigned at your Instamojo dashboard for running test or live environment setups. Test environment shall use secret keys supplied at Instamojo test dashboard and vice versa.

mojoReq(js) Setup: Initialization & Checkout.

The minimum required setup to pass to Instamojo servers for verification & receive unique processed data(s) to further handle checkout at your page.

$(function(){

    // assign a 'click' event at a button
    $('.unique-classname').on( 'click' , function( event ){

      // prevents any default behavior
      event.preventDefault();

      // init instamojo checkout
      // setup and data to pass thru 
      $.fn.mojoReq({
          sandbox : false, // true/false enable or disable test checkout
          data: {
            amount : '1000.00', // amount to pay
            purpose  : 'Download Awesome Blogger Theme', // Purpose of payments
            redirect_url: 'https://your.domain.name/success.html' // redirect after success payments
          }
      });

  });

});
</script>

mojoReq(js) Bridge

Upon mojoReq(js) initialization, users can use the publicly accessed mojoReq(js) Bridge to allow to communicate with Instamojo servers for data verification, Read more on how to use your own hosted mojoReq(js) Bridge here.

Instamojo x Blogger