| ⚠️ This package is deprecated. Use our latest SDK to integrate the Cashfree Payment Gateway into your application. |
| --- |
NPM PACKAGE URL: https://www.npmjs.com/package/@cashfreepayments/cashfree-js
GITHUB URL: https://github.com/cashfree/cashfree-js

CASHFREE PAYMENT GATEWAY

Documentation

→ 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.

→ Redirect is the other solution for accepting payments where we can use Cashfree’s user interface to capture payment details. You will do this by redirecting the customer to a cashfree hosted page, which can be customized for your needs.

→ Element is used for accepting payments where merchant can integrate Cashfree's Payment Gateway to build their own UI using customizable HTML code snippets

Environments

SDK is available in 2 different environments

→ Sandbox is used during your testing. No actual debit occurs. Everything is simulated. Using this environment you should be able to integrate the SDK and test payments.

→ Production is used once you have finalized your testing on the sandbox, you can use the production environment.

Prerequisite

$3

Domain name is the address used to access a website.

Merchants would be able to use the checkout only when a request comes from a whitelisted domain and other requests coming from any other domain would be blocked.

This means, merchants cannot integrate our PG on any other website other than the whitelisted one.

Example - https://www.cashfree.com => Domain name would be "cashfree.com"

$3

Domain name is the address used to access a website.

Merchants would be able to use the checkout only when a request comes from a whitelisted domain and other requests coming from any other domain would be blocked.

This means, merchants cannot integrate our PG on any other website other than the whitelisted one.

Example - https://www.cashfree.com => Domain name would be "cashfree.com"

| Along with Whitelisting, Inorder to use element you need to make sure to enable it from Cashfree's end |
| --- |

Installation

1. Using NPM package
``
npm i cashfree-pg-sdk-javascript
`
Note: add --save if you are using npm < 5.0.0

2. Using SDK URL

→ Sandbox
`

`
→ Production
`

`
Make sure only one of the above is present in your application

Integration

1. Using NPM package

→ Sandbox
`
import { cashfreeSandbox } from "cashfree-pg-sdk-javascript";
let cashfree = new cashfreeSandbox.Cashfree(paymentSessionId);
`
→ Production
`
import { cashfreeProd } from "cashfree-pg-sdk-javascript";
let cashfree = new cashfreeProd.Cashfree(paymentSessionId);
`
Make sure only one of the above is present in your application

2. Using SDK URL
`
const cashfree = new Cashfree(paymentSessionId);
`

Implementation


1. Drop
`
let parent = document.getElementById("drop_in_container");
cashfree.drop(parent, {
onSuccess: function,
onFailure: function,
components: Array, #An array that takes in the components to be rendered. Available: [order-details, card, netbanking, app, upi, paylater, creditcardemi, cardlessemi]
style: object, #override the existing dropin style
});
`

2. Redirect
`
cashfree.redirect();
`

3. Element
`
const options = {
onPaymentSuccess: function,
onPaymentFailure: function,
onError: function,
};
`
Card

→ HTML
`



Pay
`
→ JS
`
const cfCheckout = cashfree.elements(options);
cfCheckout.elements({
pay: document.getElementById('pay-card'),
type: 'card',
});
document.getElementById('pay-btn').addEventListener('click', async () => {
await cfCheckout.pay("card");
});
`

UPI Collect

→ HTML
`



Pay
`
→ JS
`
const cfCheckout = cashfree.elements(options);
cfCheckout.elements({
pay: document.getElementById('pay-collect'),
type: 'upi-collect',
});
document.getElementById('pay-collect-btn').addEventListener('click', async () => {
await cfCheckout.pay("upi-collect");
});
`

UPI QR

→ HTML
`
Pay
`
→ JS
`
const cfCheckout = cashfree.elements(options);
cfCheckout.elements({
type: 'upi-qrcode',
});
document.getElementById('pay-qr-btn').addEventListener('click', async () => {
await cfCheckout.pay("upi-qrcode");
});
`

Net Banking

→ HTML
`



Pay
`
→ JS
`
const cfCheckout = cashfree.elements(options);
cfCheckout.elements({
pay: document.getElementById("pay-nb"),
type: "netbanking",
});
document.getElementById('pay-nb-btn').addEventListener('click', async () => {
await cfCheckout.pay("netbanking");
});
`

UPI Apps

→ HTML
`



PAY
`
→ JS
`
const cfCheckout = cashfree.elements(options);
cfCheckout.elements({
pay: document.getElementById("pay-intent"),
type: "upi-intent",
});
document.getElementById('pay-intent-btn').addEventListener('click', async () => {
await cfCheckout.pay("upi-intent");
});
`

Mobile Applications / Wallets

→ HTML
`



PAY
`
→ JS
`
const cfCheckout = cashfree.elements(options);
cfCheckout.elements({
pay: document.getElementById("pay-app"),
type: "app",
});
document.getElementById('pay-app-btn').addEventListener('click', async () => {
await cfCheckout.pay("app");
});
``