Checkout Type — Floating

Floating checkout with Instamojo allows to create/accept payment right on your blog or webpage, no page refresh, no page redirects.

Instamojo will embed a secured checkout button which could be styled using the assigned attributes.

Allow customers to pay without leaving your website. Create an embed able checkout... — Instamojo Documentation.

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

floating_attr
Attributes to stylize floating checkout button supplied by Instamojo. View available options below.

floating_container

A webpage element object reference to append the Instamojo floating checkout button.

Available Floating Button Styles

• For light backgrounds (Green button): data-style="light"
• For dark backgrounds (Yellow button) : data-style="dark"
• Flat button for light backgrounds : data-style="flat"
• Flat button for dark backgrounds : data-style="flat-dark"
• No styling : data-style="no-style"

Usage:

$.fn.mojoReq({

    checkout_type  : 'floating',
    floating_container: $('.element-in-page'),
    floating_attr: {
      rel : 'im-checkout', // required
      'data-behaviour' : 'remote', // required
      'data-style' : 'light', // avail: light, dark, flat, flat-dark, no-style
      'data-text' : 'Checkout With Instamojo'
    }

});

or

$.fn.mojoReq.defaults.checkout_type = 'floating';
$.fn.mojoReq.defaults.floating_container = $('.element-in-page');

Example Checkout Form

Create form fields to include payer data & pass to $.fn.mojoCheckout() function and enable Instamojo floating 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>
        <input name="phone" type="text"/>
        <button class="unique-classname" type="button">Pay with Instamojo</button>
    </form>

mojoReq(js) Setup: Checkout Type - Floating

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

        // 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       : '1000.00',
                purpose      : 'Payment description/purpose,
                redirect_url : 'https://your.domain.name/success.html'
            },

            // specifies Instamojo floating checkout
            checkout_type: 'floating',
            floating_container: $('.unique-form'), // target form classname
            floating_attr: {
               rel : 'im-checkout', // required
               'data-behaviour' : 'remote', // required
               'data-style' : 'light', // avail: light, dark, flat, flat-dark, no-style
               'data-text' : 'Checkout With Instamojo'

           }

        });
    });

});
</script>

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