Checkout Type — Custom


Allows to create a custom checkout environment using JSON data objects retrieved from Instamojo. Works well when you require total control & use the returned data values to further customize checkout experience.

checkout_type
Specifies a checkout type to deploy. Available predefined values light, floating, custom & debug.

checkout_custom
Create a custom checkout function using data retrieved from verification.

checkout_error
Create a custom error handling function using data retrieved from verification.

Usage:


$.fn.mojoReq({

    checkout_type   : 'custom',
    checkout_custom : function( data ){ 

        // where "data" referencing JSON object returned from Instamojo verification
        // create a custom function to handle data retrieved
        // Instamojo returns/appends "payment_request" as object key

    },
    checkout_error: function( data ){ 

        // Instamojo returns/appends "success" == false when error occur

    }

});

or

$.fn.mojoReq.defaults.checkout_type = 'custom';

Example Checkout Form


Create form fields to include payer data & pass to $.fn.mojoCheckout() function & enable custom checkout.

<!-- form with checkout button -->
<form class="unique-form">
    <label>Name</label>
    <input name="buyer_name" type="text"/>
    <label>Email</label>
    <input name="email" type="email"/>
    <label>Phone</label>

    <-- checkout button -->
    <input name="phone" type="text"/>
    <button class="unique-classname" type="button">Pay with Instamojo</button>
</form>

mojoReq(js) Setup: Checkout Type - Custom


<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();

        // append instamojo checkout
        $(this).mojoReq({

            // required setup
            sandbox      : true,

            data: {
                buyer_name : $('[name=buyer_name]').val(),
                email      : $('[name=email]').val(),
                phone      : $('[name=phone]').val(),
                amount       : '1000.00',
                purpose      : 'Payment description/purpose,
                redirect_url : 'http://your.domain.name/success.html'
            },

            // specifies a custom checkout method
            checkout_type   : 'custom',
            checkout_custom : function( data ){

               // "data" is referencing JSON object returned
               // example initiate an alert when data retrieved successfully with the unique checkout URL

               var checkout_url = data.payment_request.longurl;
               alert( 'Here is the URL link to checkout: ' + checkout_url );

           },

           checkout_error: function( data ){

               // "data" is referencing JSON object returned
               // example using Instamojo error message

               var message = data.message.phone;
               alert( message );

           }

        });
    });

});
</script>

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

No comments:

Post a Comment