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">
                    <h4>Mode</h4>
                    <div class="col">
                        <select class="form-control" id="mode">
                            <option value="sandbox">sandbox</option>
                            <option value="production">production</option>
                        </select>
                    </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();
        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,
                mode: document.getElementById("mode").value,
                returnUrl: document.getElementById("returnUrl").value,
                redirectTarget: "_blank",
            }).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">
                    <h4>Mode</h4>
                    <div class="col">
                        <select class="form-control" id="mode">
                            <option value="sandbox">sandbox</option>
                            <option value="production">production</option>
                        </select>
                    </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();
        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,
                mode: document.getElementById("mode").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">
                    <h4>Mode</h4>
                    <div class="col">
                        <select class="form-control" id="mode">
                            <option value="sandbox">sandbox</option>
                            <option value="production">production</option>
                        </select>
                    </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();
        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,
                mode: document.getElementById("mode").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">
                    <h4>Mode</h4>
                    <div class="col">
                        <select class="form-control" id="mode">
                            <option value="sandbox">sandbox</option>
                            <option value="production">production</option>
                        </select>
                    </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();
        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,
                mode: document.getElementById("mode").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">
                    <h4>Mode</h4>
                    <div class="col">
                        <select class="form-control" id="mode">
                            <option value="sandbox">sandbox</option>
                            <option value="production">production</option>
                        </select>
                    </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();
        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,
                mode: document.getElementById("mode").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">
                    <h4>Mode</h4>
                    <div class="col">
                        <select class="form-control" id="mode">
                            <option value="sandbox">sandbox</option>
                            <option value="production">production</option>
                        </select>
                    </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();
        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,
                mode: document.getElementById("mode").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>Mode</h4>
                    <div class="col">
                        <select class="form-control" id="mode">
                            <option value="sandbox">sandbox</option>
                            <option value="production">production</option>
                        </select>
                    </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();
        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,
                mode: document.getElementById("mode").value,
                returnUrl: document.getElementById("returnUrl").value,
                redirectTarget: "_blank"
            }).then(function(){
                console.log("on going redirection");
            }, function(err){
                paymentMessage.innerHTML = err.error.message;
                paymentMessage.classList.add("alert-danger");
            });
            
            

        })
    </script>
</body>

</html>

What’s Next