Create Account

# Cashfree Drop SDK

Drop is our pre-built UI solution for accepting payments. Drop works by displaying payment components we call as drops at any place you want in your page. It can either display all the payment components at one place or different places depending on your need. Currently Drop supports the following payment components

  • Card

  • UPI (collect, intent, qrcode)

  • Wallets

  • Netbanking

  • Paylater

  • Credit Card EMI

  • Cardless EMI

## Features

The Drop SDK supports the following features-

  • No Redirection

  • Highly Customizable

  • Pure Javascript

  • Automatic theme detection

  • No PCI certification required

## How it works

From an implementation perspective, a Drop integration contains the following components.

  • **Server side**:

    • API call which creates the order_token

    • API call to check the status of a payment

    • Receive webhook events

  • **Client side**

    • JS code that uses order_token to render and initiate a payment

The payment flow is listed below.

  1. Shopper goes to checkout page

  2. Your server makes an API call to create an order with Cashfree to get the order_token

  3. Your server shares the order_token to your website

  4. Your website initializes Drop SDK

  5. Drop shows the available payment methods, makes the payment request, handles additional actions.

  6. On payment completion Drop sends callback, use the callback data to verify payment status from your backend

  7. Additionally you can use webhook to verify the payment status

  8. Show thank you page to shopper

## Demo

Here is a codepen demo. You can play around with the different options. The demo uses an order_token, which can be easily generated using [Create Order API](🔗).

(Script tags will be stripped)

## Before you begin
Before you begin please make sure 
  • You have Cashfree's Test Account created
  • Your client-id and client-secret obtained from the dashboard
  • You have a backend server 
## Step 1 (Create order)
As a first step you need to create an order with Cashfree from your backend server. Once you have created an order, you will receive an `order_token` in the API response. This `order_token` shall be used in the Drop JS sdk. View details to [Create Order](🔗). 
## Step 2 (Drop SDK)
### Include our Drop sdk in your client code
Current stable version is **1.0.26**
Sandbox

Production

### Drop Configuration Object
The configuration object will help you build a custom flow. For instance if you only need to display a card element, you can specify that in the components array. The details about each of these parameters is listed below. 

The following objects can be part of the drop configuration. This configuration will get passed to the Drop SDK. 
Parameter NameRequiredDescription
`components`✅An array that takes in the components to be rendered. Available: `order-details` `card` `netbanking` `app` `upi-collect`    `upi-intent` `upi-qrcode`
`orderToken`✅Order token returned by Cashfree
`onSuccess`✅Callback function triggered when payment flow is completed
`onFailure `✅Callback function triggered whenever an error happens
`style `
Custom styling for components. Available:  `backgroundColor` `color` `fontFamily` `fontSize` `errorColor` `theme`
#### Components
Components represents specific blocks each used to display a specific part of the payment UI. You can think of components as pre-built react components which can be easily imported in your payment page. These components handle different workflows and their lifecycle is managed by the Drop library. 
NameDescription
`order-details`Use this component to show order and customer details
`card`Use this component to show card as a payment method
`netbanking`Use this component to Net Banking as a payment method
`app`Use this component to show wallets as a payment method
`upi`Use this component to show upi as a payment method
`paylater`Use this component to show paylater as a payment method
`creditcardemi`Use this component to show Credit Card EMI as a payment method for orders above 2500
`cardlessemi`Use this component to show Cardless EMI as a payment method for orders
above 500
#### Style
You can style the components by providing some specific parameters as part of the `style` object. 
NameDescription
`backgroundColor`Can be used to modify the background color of the drop. Default is `#fafafa`
`color`Can be used to set theme color of the drop. Default is `#6933D3`
`fontFamily`Can be used to set the font-family to match your website, Default is `Lato`
`fontSize`Can be used to set the base font size. Default is `14px`
`errorColor`Can be used to modify the color of error text. Default is `#ff0000`
`theme`Can be used to set `dark` or `light` theme. Default is `light`
### Initiate Drop
You would be using `initialiseDropin` function to render the Drop. The function takes in two parameters
  1. First parameter is the **HTML element** where there drop will be rendered
  2. Second parameter is your drop config

## Step 3 (Handle response)
Once you have presented the payment form to the customer they will be able to attempt a payment. After completion you might need to redirect the user to a thank-you page or an error page (in case of failures). To handle this workflow, Drop emits events which need to be handled by you.
You can provide two different event handlers `onSuccess` and `onFailure` to handle these two scenarios. 
### Handle `onSuccess` and `onFailure`

## Step 4 (Verify Payment)
As a final step you need to verify your order status with Cashfree from your backend server. You must first verify this order in your system and ensure that it is the correct order_id. Then you must make an API call to Cashfree's server to fetch the order status. Based on Cashfree's response, you can update your system and share the same information with your client code.
Use the following api to get the order status - https://docs.cashfree.com/reference/getorder
## Complete Demo code

## NPM

For further steps please visit the [official npm package](🔗)