# 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
UPI (collect, intent, qrcode)
Credit Card EMI
The Drop SDK supports the following features-
Automatic theme detection
No PCI certification required
## How it works
From an implementation perspective, a Drop integration contains the following components.
API call which creates the order_token
API call to check the status of a payment
Receive webhook events
JS code that uses order_token to render and initiate a payment
The payment flow is listed below.
Shopper goes to checkout page
Your server makes an API call to create an order with Cashfree to get the order_token
Your server shares the order_token to your website
Your website initializes Drop SDK
Drop shows the available payment methods, makes the payment request, handles additional actions.
On payment completion Drop sends callback, use the callback data to verify payment status from your backend
Additionally you can use webhook to verify the payment status
Show thank you page to shopper
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](🔗).
## 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
### 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.
|`||✅||An array that takes in the components to be rendered. Available: `|
|`||✅||Order token returned by Cashfree|
|`||✅||Callback function triggered when payment flow is completed|
|`||✅||Callback function triggered whenever an error happens|
|`||||Custom styling for components. Available: `|
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.
|`||Use this component to show order and customer details|
|`||Use this component to show card as a payment method|
|`||Use this component to Net Banking as a payment method|
|`||Use this component to show wallets as a payment method|
|`||Use this component to show upi as a payment method|
|`||Use this component to show paylater as a payment method|
|`||Use this component to show Credit Card EMI as a payment method for orders above 2500|
|`||Use this component to show Cardless EMI as a payment method for orders|
You can style the components by providing some specific parameters as part of the `
|`||Can be used to modify the background color of the drop. Default is `|
|`||Can be used to set theme color of the drop. Default is `|
|`||Can be used to set the font-family to match your website, Default is `|
|`||Can be used to set the base font size. Default is `|
|`||Can be used to modify the color of error text. Default is `|
|`||Can be used to set `|
### Initiate Drop
You would be using `
initialiseDropin` function to render the Drop. The function takes in two parameters
First parameter is the **HTML element** where there drop will be rendered
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 `
## 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
For further steps please visit the [official npm package](🔗)