Passing Amount & Purpose Data

Dynamically include amount & purpose (description) data to pass with $.fn.mojoReq() function for Instamojo checkout. Used to include shopping cart or dynamic generated purpose & amount data.

Both parameter amount & purpose is required.

amount
Accepts integers preferably in 2 decimal places.
If > 2 decimal places, plugin will convert to the nearest 2 decimal places.

purpose
Accepts alpha/numeric chars preferably < 30 chars.
If > 30 chars, plugin will shorten string to the last line spacing.

Usage:

$.fn.mojoReq({

  data: {
    amount  : '1000.00',
    purpose : 'Payment purpose/description'
  }

});

or

$.fn.mojoReq.defaults.data.amount = '1000.00';
$.fn.mojoReq.defaults.data.purpose = 'Payment purpose/description';

Example Checkout Form with Amount & Purpose

Create form fields to include a description (purpose) , price (amount), users data & pass to $.fn.mojoReq() function for Instamojo checkout.

    <!-- assign a unique class for purpose -->
    <h3 class="mojo-purpose">My Product description</h3>

    <!-- assign a unique class for amount -->
    <p class="mojo-amount">R1,500.00</p>

    <!-- the form with checkout button -->
    <form>
        <label>Name</label>
        <input name="buyer_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: Dynamically include amount & purpose.

<script>
// your secret keys (please obfuscate)
$(function(){
    $.fn.mojoReq.defaults.data.api_key    = 'YOUR-API-KEY';
    $.fn.mojoReq.defaults.data.auth_token = 'YOUR-AUTH-TOKEN';
});
</script>
<script>
$(function(){

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

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

        // get the purpose text in a variable
        var purpose_text = $('.mojo-purpose').text(); // '.mojo-purpose' = the assigned unique classname

        // get the amount text in a variable
        // format & get integers & decimal
        var amount = $('.mojo-amount').text(); // '.mojo-amount' = the assigned unique classname
        var amount_num = amount.replace(/[^\d.,]/g,"")  // remove spaces & unwanted chars 

        // init instamojo checkout
        $.fn.mojoReq({

            // required setup
            sandbox      : true,
            data: {
                buyer_name   : $('[name=buyer_name]').val(),
                email        : $('[name=email]').val(),
                phone        : $('[name=phone]').val(),
                amount       : amount_num,     // add amount_num var here
            	purpose      : purpose_text,   // add purpose_text var here
            	redirect_url : 'http://your.domain.name/success.html',
            }

        });
    });

});
</script>

$.fn.mojReq() says... buyer_name , email, phone are reserved nested data objects.