Cashfree Drop CheckoutLast updated: 2022-11-11
Drop is our pre-built UI solution for accepting payments. Drop works by displaying payment components we call drops at any place you want in your page. This integration will let you render our drop(pre-built UI elements) components to capture payment details and complete the payment. For this integration you’ll be using our latest nextgen APIs and Javascript SDK. Integrate our Drop JS checkout in following easy steps.
Setup
API URL
https://sandbox.cashfree.com/pg
SDK SOURCE
<script type="text/javascript" src="https://sdk.cashfree.com/js/ui/2.0.0/cashfree.sandbox.js"></script>Create Order
To process any payment on Cashfree PG, the merchant needs to create an order in the cashfree system. This order must be created from your backend (as it uses your secret key). Read more
POST /orders
Order Recipe
Response will come here
Initialize JS SDK
Once you receive payment_session_id from create order response, you need to use Cashfree’s JS SDK 2.0.0 to render our drop components. Read more
const paymentSessionId = "";
const cashfree = new Cashfree(paymentSessionId);Theming
You can style the components by providing some specific parameters as part of the ‘style’ object.
🤡 Examples
Light
Dark
Bubble Gum
Dark Blue
Gray
Pastel
🤖 Custom
👾 Payment Mode
👽 Order Details
Drop Components
You can view cashfree’s pre-built UI components (drop) here
const dropinConfig = {
components: [ "order-details",
"card",
"netbanking",
"app",
"upi", ],
onSuccess: function(data){
},
onFailure: function(data){
},
style: { backgroundColor: "#ffffff",
color: "#11385b",
fontFamily: "Lato",
fontSize: "14px",
errorColor: "#ff0000",
theme: "light", }
}
cashfree.drop(document.getElementById("paymentForm"),dropinConfig);CallBack will come here
