Examples
Card Payment Example
See Live Demo in Code Pen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<style>
.card {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
padding-bottom: 0px;
border-radius: 14px;
}
.container{
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;border: 1px solid #ddd;
}
</style>
</head>
<body>
<main class="container">
<div class="row">
<div class="col ">
<div class="row">
<h1>Demo of Card Payment</h1>
</div>
</div>
<hr>
</div>
<div class="row">
<div class="col col-lg-6 col-sm-12">
<div class="row">
<h4>Payment Session ID</h4>
<div class="col">
<textarea name="" id="paymentSessionId" class="form-control"></textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<h4>Return URL <span class="badge h6 bg-danger">Required</span></h4>
<div class="col">
<textarea name="" id="returnUrl" class="form-control">https://test.cashfree.com/pgappsdemos/v3success.php?myorder={order_id}</textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<div class="col ">
<p class="alert" id="paymentMessage">
</p>
</div>
</div>
</div>
<div class="col col-lg-6 col-sm-10">
<div class="card" style="width: 24rem;">
<div class="card-body pb-0">
<div class="row">
<h4></h4>
<div class="col">
<div id="card-number" class="card-number form-control"></div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div id="cardHolder" class="card-holder form-control"></div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div id="cardExpiry" class="form-control"></div>
</div>
<div class="col">
<div class="col">
<div id="cardCvv" class="form-control"></div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-block w-100 pull-right" id="pay-card" type="button">
Pay By Card
</button>
</div>
</div>
<br>
</div>
</div>
</div>
</div>
</main>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
let paymentBtn = document.getElementById("pay-card");
paymentBtn.disabled = true;
let paymentMessage = document.getElementById("paymentMessage");
let cashfree = Cashfree({mode: "sandbox"});
let cardOptions = {
values: {
placeholder: "Enter Card Number"
}
};
let cardComponent = cashfree.create("cardNumber", cardOptions);
cardComponent.mount("#card-number");
let cvvOptions = {};
let cvvComponent = cashfree.create("cardCvv", cvvOptions);
cvvComponent.mount("#cardCvv");
let cardHolderOptions = {};
let cardHolder = cashfree.create("cardHolder", cardHolderOptions);
let cardHolderValid = false;
cardHolder.mount("#cardHolder");
let cardExpiryOptions = {};
let cardExpiry = cashfree.create("cardExpiry", cardExpiryOptions);
cardExpiry.mount("#cardExpiry");
function toggleBtn() {
if (cardExpiry.isComplete() && cardHolder.isComplete() && cardComponent.isComplete() && cvvComponent.isComplete()) {
paymentBtn.disabled = false;
} else {
paymentBtn.disabled = true;
}
}
cardExpiry.on('change', function (data) {
toggleBtn();
})
cardHolder.on('change', function (data) {
toggleBtn();
})
cardComponent.on('change', function (data) {
toggleBtn();
})
cvvComponent.on('change', function (data) {
toggleBtn();
})
paymentBtn.addEventListener('click', function () {
paymentBtn.disabled = true;
paymentBtn.innerText = "Please wait ...";
paymentMessage.innerText = "";
paymentMessage.classList.remove("alert-danger");
paymentMessage.classList.remove("alert-success");
cashfree.pay({
paymentMethod: cardComponent,
paymentSessionId: document.getElementById("paymentSessionId").value,
returnUrl: document.getElementById("returnUrl").value,
}).then(function (data) {
if(data != null && data.error) {
paymentMessage.innerHTML = data.error.message;
paymentMessage.classList.add("alert-danger");
}
paymentBtn.innerText = "Pay";
paymentBtn.disabled = false;
});
})
</script>
</body>
</html>
UPI Intent Example
See Live Demo in Code Pen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPI Banking</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.card {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
padding-bottom: 0px;
border-radius: 14px;
}
.bank {
text-align: center;
padding: 20px;
border-top: 1px solid #efefef;
}
.bank:nth-child(3) {
border-right: 1px solid #efefef;
}
.bank:nth-child(1) {
border-right: 1px solid #efefef;
}
.bank:nth-child(5) {
border-right: 1px solid #efefef;
}
.bank:nth-child(4) {
border-bottom: 1px solid #efefef;
}
.icon {
width: 34px;
margin: 0 auto;
}
.btext {
margin-top: 10px
}
.bank {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container ">
<div class="row">
<div class="col ">
<div class="row">
<h1>Demo of UPI Intent (Mobile only)</h1>
</div>
</div>
<hr>
<div class="col offset-1 col-10">
</div>
</div>
<div class="row">
<div class="col col-lg-8 col-sm-12">
<div class="row">
<h4>Payment Session ID</h4>
<div class="col">
<textarea name="" id="paymentSessionId" class="form-control"></textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<h4>Return URL <span class="badge h6 bg-danger">Required</span></h4>
<div class="col">
<textarea name="" id="returnUrl" class="form-control">https://test.cashfree.com/pgappsdemos/v3success.php?myorder={order_id}</textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<div class="col ">
<p class="alert" id="paymentMessage">
</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-sm-10">
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body pb-0">
<h5 class="card-title">Select APP</h5>
<div class="row">
<div class="col-6 bank col" bfor="phonepe">
<div id="phonepe" class="icon upimount"></div>
<div class="btext">PhonePe</div>
</div>
<div class="col-6 bank col" bfor="paytm">
<div id="paytm" class="icon upimount"></div>
<div class="btext">Paytm</div>
</div>
<div class="col-6 bank col" bfor="gpay">
<div id="gpay" class="icon upimount"></div>
<div class="btext">Google Pay</div>
</div>
<div class="col-6 bank col" bfor="default">
<div id="default" class="icon upimount"></div>
<div class="btext">Intent</div>
</div>
<div class="col-6 bank col" bfor="web">
<div id="web" class="icon upimount"></div>
<div class="btext">Link</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
const cashfree = Cashfree({mode:"sandbox"});
const paymentMessage = document.getElementById("paymentMessage");
let style = {
base: {
fontSize: "22px"
}
}
const allAppNodes = document.getElementsByClassName("icon");
for (let i = 0; i < allAppNodes.length; i++) {
const element = allAppNodes[i];
let upiApp = element.getAttribute("id");
let component = cashfree.create('upiApp', {
values: {
upiApp: upiApp,
},
style
});
component.mount("#"+upiApp);
component.on("click", function(){
initPay(component)
});
component.on("loaderror", function(data){
console.log(data.error.message);
});
element.parentNode.addEventListener('click', function(){
initPay(component)
})
}
function initPay(comp){
paymentMessage.innerText = "";
paymentMessage.classList.remove("alert-danger");
paymentMessage.classList.remove("alert-success");
comp.disable();
cashfree.pay({
paymentMethod: comp,
paymentSessionId: document.getElementById("paymentSessionId").value,
returnUrl: document.getElementById("returnUrl").value,
redirect: "if_required"
}).then(function (data) {
comp.enable();
console.log(data);
//data.paymentDetails -> payment message success
//data.error -> payment error
// data.redirect -> is redirected
if(data.error) {
paymentMessage.innerHTML = data.error.message;
paymentMessage.classList.add("alert-danger");
}
if(data.paymentDetails) {
paymentMessage.innerHTML = data.paymentDetails.paymentMessage;
paymentMessage.classList.add("alert-success");
}
if(data.redirect){
console.log("We are redirtion");
}
});
}
</script>
</body>
</html>
Net Banking Example
See Live Demo in Code Pen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Net Banking</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.card {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
padding-bottom: 0px;
border-radius: 14px;
}
.bank {
text-align: center;
padding: 20px;
border-top: 1px solid #efefef;
}
.bank:nth-child(3) {
border-right: 1px solid #efefef;
}
.bank:nth-child(1) {
border-right: 1px solid #efefef;
}
.icon {
width: 34px;
margin: 0 auto;
}
.btext {
margin-top: 10px
}
.bank{
cursor: pointer;
}
.container{
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container ">
<div class="row">
<div class="col ">
<div class="row">
<h1>Demo of Netbanking Payment</h1>
</div>
</div>
<hr>
<div class="col offset-1 col-10">
</div>
</div>
<div class="row">
<div class="col col-lg-8 col-sm-12">
<div class="row">
<h4>Payment Session ID</h4>
<div class="col">
<textarea name="" id="paymentSessionId" class="form-control"></textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<h4>Return URL <span class="badge h6 bg-danger">Required</span></h4>
<div class="col">
<textarea name="" id="returnUrl" class="form-control">https://test.cashfree.com/pgappsdemos/v3success.php?myorder={order_id}</textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<div class="col ">
<p class="alert" id="paymentMessage">
</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-sm-10">
<div class="">
<div class="card" style="width: 18rem;">
<div class="card-body pb-0">
<h5 class="card-title">Select Bank</h5>
<div class="row">
<div class="col-6 bank col" bfor="hdfc">
<div id="hdfcr" class="icon"></div>
<div class="btext">HDFC Bank</div>
</div>
<div class="col-6 bank col" bfor="kotak">
<div id="kotak" class="icon"></div>
<div class="btext">Kotak Bank</div>
</div>
<div class="col-6 bank col" bfor="sbi">
<div id="sbi" class="icon"></div>
<div class="btext">SBI Bank</div>
</div>
<div class="col-6 bank col" bfor="icici">
<div id="icici" class="icon"></div>
<div class="btext">ICICI Bank</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
const cashfree = Cashfree({mode:"sandbox"});
const paymentMessage = document.getElementById("paymentMessage");
let style = {
base: {
fontSize: "22px"
}
}
let hdfc = cashfree.create('netbanking', {
values: {
netbankingBankName: 'HDFCR'
},
style
});
hdfc.mount("#hdfcr");
hdfc.on('click', function(){
initPay(hdfc)
});
hdfc.on('paymentrequested', function(){
console.log("waiting for cs");
});
let icici = cashfree.create('netbanking', {
values: {
netbankingBankName: 'ICICR'
},
style
});
icici.mount("#icici");
icici.on('click', function(){
initPay(icici)
})
let sbi = cashfree.create('netbanking', {
values: {
netbankingBankName: 'SBINR'
},
style
});
sbi.mount("#sbi");
sbi.on('click', function(){
initPay(sbi)
})
let kotak = cashfree.create('netbanking', {
values: {
netbankingBankName: 'KKBKR'
},
style
});
kotak.mount("#kotak");
kotak.on('click', function(){
initPay(kotak)
})
let bankObj = {
kotak: kotak,
sbi:sbi,
icici: icici,
hdfc: hdfc
}
function initPay(comp){
paymentMessage.innerText = "";
paymentMessage.classList.remove("alert-danger");
paymentMessage.classList.remove("alert-success");
comp.disable();
cashfree.pay({
paymentMethod: comp,
paymentSessionId: document.getElementById("paymentSessionId").value,
returnUrl: document.getElementById("returnUrl").value,
}).then(function (data) {
comp.enable();
if(data.error) {
paymentMessage.innerHTML = data.error.message;
paymentMessage.classList.add("alert-danger");
}
if(data.paymentDetails) {
paymentMessage.innerHTML = data.paymentDetails.paymentMessage;
paymentMessage.classList.add("alert-success");
}
if(data.redirect){
console.log("We are redirtion");
}
});
}
const allBanks = document.getElementsByClassName("bank");
for (let i = 0; i < allBanks.length; i++) {
const element = allBanks[i];
element.addEventListener('click', function(e){
e.preventDefault();
initPay(bankObj[e.target.getAttribute("bfor")])
})
}
</script>
</body>
</html>
Wallet Example
See Live Demo in Code Pen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wallet</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.card {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
padding-bottom: 0px;
border-radius: 14px;
float: right;
}
.bank {
text-align: center;
padding: 20px;
border-top: 1px solid #efefef;
}
.bank:nth-child(3) {
border-right: 1px solid #efefef;
}
.bank:nth-child(1) {
border-right: 1px solid #efefef;
}
.bank:nth-child(5) {
border-right: 1px solid #efefef;
}
.bank:nth-child(7) {
border-right: 1px solid #efefef;
}
.icon {
width: 34px;
margin: 0 auto;
}
.btext {
margin-top: 10px
}
.bank {
cursor: pointer;
}
.gradient{
background-image: linear-gradient( 83.2deg, rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3% );
}
.container{
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ddd;
}
h1{
/* color:#efefef; */
}
h4{
color: rgba(0, 0, 0, 0.5);
}
.text-muted{
/* color:#efefef !important; */
}
.text-muted a{
/* color:#444 !important; */
}
</style>
</head>
<body>
<div class="container ">
<div class="row">
<div class="col ">
<div class="row">
<h1>Demo of Wallet</h1>
</div>
</div>
<hr>
<div class="col offset-1 col-10">
</div>
</div>
<div class="row">
<div class="col col-lg-8 col-sm-12">
<div class="row">
<h4>Payment Session ID</h4>
<div class="col">
<textarea name="" id="paymentSessionId" class="form-control"></textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<h4>Return URL <span class="badge h6 bg-danger">Required</span></h4>
<div class="col">
<textarea name="" id="returnUrl" class="form-control">https://test.cashfree.com/pgappsdemos/v3success.php?myorder={order_id}</textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<div class="col ">
<p class="alert" id="paymentMessage">
</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-sm-10">
<div class=" ">
<div class="card" style="width: 18rem;">
<div class="card-body pb-0">
<h5 class="card-title">Select Wallet</h5>
<div class="row">
<div class="col-6 bank col" bfor="phonepe">
<div id="phonepe" class="icon walletmount"></div>
<div class="btext">PhonePe</div>
</div>
<div class="col-6 bank col" bfor="paytm">
<div id="paytm" class="icon walletmount"></div>
<div class="btext">Paytm</div>
</div>
<div class="col-6 bank col" bfor="amazon">
<div id="amazon" class="icon walletmount"></div>
<div class="btext">Amzaon</div>
</div>
<div class="col-6 bank col" bfor="airtel">
<div id="airtel" class="icon walletmount"></div>
<div class="btext">Airtel</div>
</div>
<div class="col-6 bank col" bfor="ola">
<div id="ola" class="icon walletmount"></div>
<div class="btext">Ola</div>
</div>
<div class="col-6 bank col" bfor="freecharge">
<div id="freecharge" class="icon walletmount"></div>
<div class="btext">Freecharge</div>
</div>
<div class="col-6 bank col" bfor="mobikwik">
<div id="mobikwik" class="icon walletmount"></div>
<div class="btext">Mobikwik</div>
</div>
<div class="col-6 bank col" bfor="jio">
<div id="jio" class="icon walletmount"></div>
<div class="btext">Jio</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
const cashfree = Cashfree({mode:"sandbox"});
const paymentMessage = document.getElementById("paymentMessage");
let style = {
base: {
fontSize: "22px"
}
}
const allWalletnodes = document.getElementsByClassName("icon");
for (let i = 0; i < allWalletnodes.length; i++) {
const element = allWalletnodes[i];
let provider = element.getAttribute("id");
let component = cashfree.create('wallet', {
values: {
provider: provider,
phone: "8474090589"
},
style
});
component.mount("#"+provider);
component.on("click", function(){
initPay(component)
});
element.parentNode.addEventListener('click', function(){
initPay(component)
})
}
function initPay(comp){
paymentMessage.innerText = "";
paymentMessage.classList.remove("alert-danger");
paymentMessage.classList.remove("alert-success");
comp.disable();
cashfree.pay({
paymentMethod: comp,
paymentSessionId: document.getElementById("paymentSessionId").value,
returnUrl: document.getElementById("returnUrl").value,
}).then(function (data) {
comp.enable();
if(data.error) {
paymentMessage.innerHTML = data.error.message;
paymentMessage.classList.add("alert-danger");
}
if(data.paymentDetails) {
paymentMessage.innerHTML = data.paymentDetails.paymentMessage;
paymentMessage.classList.add("alert-success");
}
if(data.redirect){
console.log("We are redirtion");
}
});
}
</script>
</body>
</html>
UPI QR Example
See Live Demo in Code Pen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.card {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
padding-bottom: 0px;
border-radius: 14px;
float: right;
}
.bank {
text-align: center;
padding: 20px;
border-top: 1px solid #efefef;
}
.bank:nth-child(3) {
border-right: 1px solid #efefef;
}
.bank:nth-child(1) {
/* border-right: 1px solid #efefef; */
}
.bank:nth-child(5) {
border-right: 1px solid #efefef;
}
.bank:nth-child(7) {
border-right: 1px solid #efefef;
}
.icon {
margin: 0 auto;
}
.btext {
margin-top: 10px
}
.bank {
cursor: pointer;
}
.gradient{
background-image: linear-gradient( 83.2deg, rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3% );
}
.container{
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ddd;
}
h1{
/* color:#efefef; */
}
h4{
color: rgba(0, 0, 0, 0.5);
}
.text-muted{
/* color:#efefef !important; */
}
.text-muted a{
color:#444 !important;
}
.float-right{
float: right;
margin-top: -4px;
}
</style>
</head>
<body>
<div class="container ">
<div class="row">
<div class="col ">
<div class="row">
<h1>Demo of QR</h1>
</div>
</div>
<hr>
<div class="col offset-1 col-10">
</div>
</div>
<div class="row">
<div class="col col-lg-8 col-sm-12">
<div class="row">
<h4>Payment Session ID</h4>
<div class="col">
<textarea name="" id="paymentSessionId" class="form-control"></textarea>
<span class="form-text ">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<h4>Return URL <span class="badge h6 bg-danger">Required</span></h4>
<div class="col">
<textarea name="" id="returnUrl" class="form-control">https://test.cashfree.com/pgappsdemos/v3success.php?myorder={order_id}</textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<div class="col ">
<p class="alert" id="paymentMessage">
</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-sm-10">
<div class=" ">
<div class="card" style="width: 18rem;">
<div class="card-body pb-0">
<h5 class="card-title">
QR
<button class="btn btn-primary btn-sm float-right" id="showqr" type="button">Show QR</button>
</h5>
<div class="row">
<div class="col-12 bank col" bfor="qr">
<div id="qr" class="icon qrmount"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
const paymentBtn = document.getElementById("showqr");
const cashfree = Cashfree({mode:"sandbox"});
const paymentMessage = document.getElementById("paymentMessage");
let qr = cashfree.create("upiQr", {
values: {
size: "220px",
}
});
qr.mount("#qr");
qr.on('paymentrequested', function(){
paymentBtn.disabled = true
})
paymentBtn.addEventListener("click", function(e){
paymentMessage.innerText = "";
paymentMessage.classList.remove("alert-danger");
paymentMessage.classList.remove("alert-success");
cashfree.pay({
paymentMethod: qr,
paymentSessionId: document.getElementById("paymentSessionId").value,
returnUrl: document.getElementById("returnUrl").value,
}).then(function (data) {
paymentBtn.disabled = false
if(data.error) {
paymentMessage.innerHTML = data.error.message;
paymentMessage.classList.add("alert-danger");
}
if(data.paymentDetails) {
paymentMessage.innerHTML = data.paymentDetails.paymentMessage;
paymentMessage.classList.add("alert-success");
}
if(data.redirect){
console.log("We are redirtion");
}
});
})
</script>
</body>
</html>
UPI Collect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPI Collect Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<style>
.card {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
padding-bottom: 0px;
border-radius: 14px;
}
.container{
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;border: 1px solid #ddd;
}
</style>
</head>
<body>
<main class="container">
<div class="row">
<div class="col ">
<div class="row">
<h1>Demo of UPI Collect</h1>
</div>
</div>
<hr>
</div>
<div class="row">
<div class="col col-lg-6 col-sm-12">
<div class="row">
<h4>Payment Session ID</h4>
<div class="col">
<textarea name="" id="paymentSessionId" class="form-control"></textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<h4>Return URL <span class="badge h6 bg-danger">Required</span></h4>
<div class="col">
<textarea name="" id="returnUrl" class="form-control">https://test.cashfree.com/pgappsdemos/v3success.php?myorder={order_id}</textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<div class="col ">
<p class="alert" id="paymentMessage">
</p>
</div>
</div>
</div>
<div class="col col-lg-6 col-sm-10">
<div class="card" style="width: 24rem;">
<div class="card-body pb-0">
<div class="row">
<h4></h4>
<div class="col">
<div id="vpainput" class="form-control"></div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-block w-100 pull-right" id="pay-collect" type="button">
Send Collect Request
</button>
</div>
</div>
<br>
</div>
</div>
</div>
</div>
</main>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
let paymentBtn = document.getElementById("pay-collect");
paymentBtn.disabled = true;
let paymentMessage = document.getElementById("paymentMessage");
let cashfree = Cashfree({mode:"sandbox"});
let opt = {
values: {
placeholder: "Enter UPI ID"
}
};
let component = cashfree.create("upiCollect", opt);
// component.mount("#vpainput");
component.mount(document.getElementById("vpainput"));
function toggleBtn() {
if (component.isComplete()) {
paymentBtn.disabled = false;
} else {
paymentBtn.disabled = true;
}
}
component.on('change', function (data) {
toggleBtn();
})
paymentBtn.addEventListener('click', function () {
paymentBtn.disabled = true;
paymentBtn.innerText = "Please wait ...";
paymentMessage.innerText = "";
paymentMessage.classList.remove("alert-danger");
paymentMessage.classList.remove("alert-success");
cashfree.pay({
paymentMethod: component,
paymentSessionId: document.getElementById("paymentSessionId").value,
returnUrl: document.getElementById("returnUrl").value,
}).then(function (data) {
if(data.error) {
paymentMessage.innerHTML = data.error.message;
paymentMessage.classList.add("alert-danger");
}
paymentBtn.innerText = "Retry";
paymentBtn.disabled = false;
});
})
</script>
</body>
</html>
Hosted Checkout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.card {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
padding-bottom: 0px;
border-radius: 14px;
float: right;
}
.bank {
text-align: center;
padding: 20px;
border-top: 1px solid #efefef;
}
.bank:nth-child(3) {
border-right: 1px solid #efefef;
}
.bank:nth-child(1) {
/* border-right: 1px solid #efefef; */
}
.bank:nth-child(5) {
border-right: 1px solid #efefef;
}
.bank:nth-child(7) {
border-right: 1px solid #efefef;
}
.icon {
margin: 0 auto;
}
.btext {
margin-top: 10px
}
.bank {
cursor: pointer;
}
.gradient{
background-image: linear-gradient( 83.2deg, rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3% );
}
.container{
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ddd;
}
h4{
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container ">
<div class="row">
<div class="col ">
<div class="row">
<h1>Demo of Cashfree Hosted Checkout</h1>
</div>
</div>
<hr>
<div class="col offset-1 col-10">
</div>
</div>
<div class="row">
<div class="col col-lg-8 col-sm-12">
<div class="row">
<h4>Payment Session ID</h4>
<div class="col">
<textarea name="" id="paymentSessionId" class="form-control"></textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-3">
<h4>Return URL <span class="badge h6 bg-danger">Required</span></h4>
<div class="col">
<textarea name="" id="returnUrl" class="form-control">https://test.cashfree.com/pgappsdemos/v3success.php?myorder={order_id}</textarea>
<span class="form-text text-muted">Don't have a paymentSessionId? Get a sample one <a href="https://test.cashfree.com/pgappsdemos/sample-psi.php" target="_blank">here</a> for sandbox mode</span>
</div>
</div>
<div class="row mt-4">
<div class="col ">
<p class="alert" id="paymentMessage">
</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-sm-10">
<div class=" ">
<div class="card w-100" >
<div class="card-body w-100 pb-0" style="">
<h5 class="card-title">
Checkout
</h5>
<div class="row">
<div class="col-12 bank col" bfor="qr">
<button class="btn btn-block btn-full w-100 btn-primary" id="checkout">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
const cashfree = Cashfree({mode:"sandbox"});
const paymentMessage = document.getElementById("paymentMessage");
document.getElementById("checkout").addEventListener("click", function(){
paymentMessage.innerText = "";
paymentMessage.classList.remove("alert-danger");
paymentMessage.classList.remove("alert-success");
cashfree.checkout({
paymentSessionId: document.getElementById("paymentSessionId").value,
returnUrl: document.getElementById("returnUrl").value,
redirectTarget: "_blank"
}).then(function(){
console.log("on going redirection");
});
})
</script>
</body>
</html>
INTEGRATION TOOLKIT
Try our Integration Try the API's using PostmanUpdated 12 months ago
What’s Next