Our Checkout library provides a simple integration with your website to accept payments. You can open our checkout either as a modal window above your page or can simply redirect to our checkout and get control back using a callback URL.

SAMPLE EXPERIENCE

• To see our checkout in action you can click here and perform a live transaction.
• Both the modal window and redirect experiences are available for you to try out.

Compatibilities and Dependencies

1. Works for all modern browsers

Import / Add the Checkout library

Import the Nimbbl's checkout.js script inside the head tag of your respective HTML where checkout will be initiated / launched.

<script src="https://api.nimbbl.tech/static/assets/js/checkout.js"></script>;

Launching the Nimbbl Checkout

Nimbbl Checkout offers a versatile range of options, allowing you to tailor the checkout experience to your specific needs. By simply configuring the relevant options and properties within the JavaScript checkout method, you can seamlessly integrate Nimbbl into your platform.

Launching Nimbbl Checkout will require options as parameters to be passed to new NimbblCheckout(options); method.

<script>
    var options = {...};
    window.checkout = new NimbblCheckout(options);
</script>

Understanding Checkout Options

Read more about options object and its properties below.

Properties to Identify Yourself

These two properties are always required to launch the checkout

Option Properties	Type	Mandatory?	Description
access_key	string	true	Access Key generated from the Nimbbl Dashboard.
order_id	string	true	Order ID generated via Creating an Order step.

Properties related to Callback Mode

Nimbbl provides you with two ways of receiving the response from SDK. This mode also determines the way in which your checkout is launched. One of the mode is, callback_handler which launches the Nimbbl Checkout within a modal window, alternative to this we have callback_url where the Checkout opens in the same window by redirecting users away from your page.

The redirect parameter lets you choose between posting a response to an event handler after payment or directing customers to a Callback URL, however, this method mandates passing a callback_url.

Option Properties	Type	Mandatory?	Description
callback_handler	string	Required if callback_url is not passed.	Handler Function will open Nimbbl checkout in a modal window. On successful or failure payment, customer will get the json response with status.
callback_url	string	Required if callback_handler is not passed.	Checkout opens in the same window by redirecting away from your page. On successful or failure payment, customer will be redirected to the specified Callback URL, for example, a payment success page.
redirect	boolean	Required to be passed as true when callback_url is passed	Determines whether to post a response to the event handler post payment completion or redirect to Callback URL.

Properties related to Custom Parameters

Furthermore, you can utilize custom property to store additional information as key-value pairs.

Option Properties	Type	Mandatory?	Description
custom	object	false	Key-value pair that can be used to store additional information.

Properties related to Payment Mode

Nimbbl lets you enforce a payment mode on the Checkout. This can be done by passing the payment_mode_code property.There are other related properties in to each different payment mode, you can read it in the table below. If you don't pass payment_mode_code the consumer is shown the full Checkout with all available payment modes.

Option Properties	Type	Mandatory?	Description
payment_mode_code	string	false	In case of specific payment mode, this property is mandatory. Possible values net_banking, card, upi, wallet. If you don't pass payment_mode_code the consumer is shown the full Checkout with all available payment modes.
bank_code	string	false	Only to be passed in case of net_banking. Example: hdfc. To get the full list of banks supported for you, please use this API. If it isn't passed, Checkout will open with a page for the user to choose their bank from enabled banks
wallet_code	string	false	Only to be passed in case of wallet. Example: jio_money. To get the full list of wallets supported for you, please use this API. If it isn't passed, Checkout will open with a page for the user to choose their wallet from enabled wallets
payment_flow	string	false	Only to be passed in case of upi to determine the flow. Possible values collect, intent. If it isn't passed, Checkout will open with page for the user to enter their UPI ID or pay using a QR or choose a UPI app
upi_id	string	false	Only to be passed in case of upi and payment_flow is collect. It is the UPI ID of the customer. Example:wonderwoman@ybl. Checkout will open with the transaction initiated for the upi id passed in the upi_id field. If it isn't passed, Checkout will open with page for the user to enter their UPI ID
upi_app_code	string	false	Only to be passed in case of upi and payment_flow is intent. Possible values phonepe, gpay. Checkout will open with the transaction initiated for the upi app passed in the upi_app_code field. If it isn't passed, Checkout will show a UPI QR or prompt user to choose a UPI app

Setting the Checkout Options

Set all the relevant properties for your use case in the options object as shown below

Callback Handler

var options = {
    "access_key": "your_access_key",
    "order_id": order_id,
    // here callback_handler as you want to open the Checkout in a modal
    "callback_handler": function (response) { 
        alert(response);
    },
    // only if you want to add any custom parameters
    "custom": { 
        "key_1": "val_1",
        "key_2": "val_2"
    },
    // only if you want to enforce a specific payment method
    payment_mode_code: string,
    bank_code: string,
    wallet_code: string,
    payment_flow: string,
    upi_id: string,
    upi_app_code: string,

};

Callback URL

var options = {
    "access_key": "your_access_key",
    "order_id": order_id,
    // here callback_url and redirect as true as you want to open the Checkout in redirect mode
    "callback_url": "${var.callbackurl}",
    "redirect":true,
    // only if you want to add any custom parameters
    "custom": { 
        "key_1": "val_1",
        "key_2": "val_2"
    },
    // only if you want to enforce a specific payment method
    payment_mode_code: string,
    bank_code: string,
    wallet_code: string,
    payment_flow: string,
    upi_id: string,
    upi_app_code: string,
};

Invoking the Checkout

Finally, after setting up the options object with respective parameters, we can now invoke checkout by accessing checkout method in global window object.

window.checkout = new NimbblCheckout(options);
window.checkout.open(order_id);

IMPORTANT

checkout method will be available in global window object only if the library is included on the page, as explained above.

Capture Transaction Response

The final step in completing the client integration is capturing the response and sending it to your server

Checkout with Handler Function

If you used the sample code with the handler function, then:

"handler": function (response){
    /**
     *  send  the response to your server for processing
     * /
}

Checkout with Callback URL

When you use a Callback URL with redirect true, you will redirected to that callback_url with a base64 encoded payload response appended to it.

callback_url?response=base64_payload

You will need to decode the base64 payload. To learn how to decode the payload, you can refer here. The decoded response will need to be sent to your server.

IMPORTANT

• Share the response parameters received to your server
• This will need to be validated on your server before you decide to provide goods or services
• More details available on processing the response in Completing the Integration