Our Checkout library provides a simple integration with your website to accept payments. You can open our checkout either as a popup 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 popup modal window and redirect experiences are available for you to try out.
- Works for all modern browsers
npm i nimbbl_sonicImport the Nimbbl's Checkout JSSDK in your HTML file within the <head> tag using the defer attribute to ensure it loads asynchronously in each place where you intent to launch the checkout.
import Checkout from 'nimbbl_sonic';Initialize the Checkout class by providing your unique token obtained from previous step. This step should be performed on the same page where you intend to launch the checkout.
| Option Properties | Type | Mandatory? | Description |
|---|---|---|---|
| token | string |
true |
Token generated from V3 create-order API |
<script>
const checkout = new Checkout({ token: 'your_token_here' });
</script>Read more about options object and its properties below.
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 popup modal window, alternative to this we have callback_url where the Checkout opens in the same window by redirecting users away from your page.
| Option Properties | Type | Mandatory? | Description |
|---|---|---|---|
| callback_handler | string |
Required if callback_url is not passed. |
Handler Function will open Nimbbl checkout in a popup 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 if callback_url is passed. |
redirect = true is required to be passed if callback_url is passed |
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 |
Set all the relevant properties for your use case in the options object as shown below
var options = {
// pass `callback_handler` if you want to open the Checkout in a popup modal.
callback_handler: function (response) {
alert(response);
},
redirect: false,
// 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,
};var options = {
// pass `callback_url` if you want to open Checkout in the same window.
callback_url: string,
redirect: true,
// 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,
};Finally, after setting up the options object with respective parameters, we can now invoke checkout by accessing checkout method.
checkout.open(options);The final step in completing the client integration is capturing the response and sending it to your server
If you used the sample code with the handler function, then:
"handler": function (response){
// Process the response here and
// send the response to your server for processing
}Provided below is a detailed example that demonstrates all the code that you need to do to accept payments on your web page. Please note this example covers the popup modal flow using the callback_handler.
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
Contributions are always welcome! If you have any suggestions or issues, please open an issue or a pull request.
This project is licensed under the (ISC) license.