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

Code Pen Example

<!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

Codepen Example

<!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>

What’s Next