Generating a Ticket PDF After Payment using RazorPay & jsPDF – Coding Shiksha

Generating a Ticket PDF After Payment using RazorPay & jsPDF – Coding Shiksha

Welcome Folks I am back with another blog post. In this blog post we will be generating a ticket PDF using the library called as jsPDF and RazorPay These are the libraries which will be used in this application so in this application first of all the user will be granted the user interface where the user can enter his the email address and name and after entering the details the user can issue a payment using any of the credit card net banking or PayTM etc so these all are the payment method that are available in this application for the user can pay the payment and after the Payment payment is successful made this application a ticket PDF will be generated for the user and you PDF file be generated using razor pay and jspdf library for the user to see this PDF file After result of this payment for the users can see all is all is details such as first name and email address in the PDF file. The demo of the application is given below you can see the screenshots and also a demo video of this application and all the source code of this application is also there in the description just copy paste the source code and also try to extend the source code as much as possible.

READ  PDF Generator in Javascript - JSPDF Tutorial

 

Screenshots

 

 

 

 

 

 

 

 

Demo Video

 

 

 

Full Source Code

 

<!DOCTYPE html>
<html>
<head>
    <title>PaytoPDF</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div id="box-container">
    <div class="ui raised very padded text container segment">
        <h2 class="ui header">Event Name</h2>
        <form class="ui form" action="./confirmation.html">
            <div class="field">
                <label>Name</label>
                <input id="name" name="name" placeholder="Name" type="text">
            </div>
            <div class="field">
                <label>E-mail</label>
                <input id="email" name="email" placeholder="E-mail" type="email">
            </div>
            <button id="submit" class="ui purple basic button" type="submit">Submit</button>
        </form>
    </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="assets/js/script.js"></script>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <title>Confirmation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div id="box-container">
    <div class="ui raised very padded text container segment">
        <h2 class="ui huge header">Thank You for Showing Interest</h2>
        <p>Please click the below button to pay</p>
        <button id="rzp-button1" class="ui purple basic button" type="submit">Pay with Razorpay</button>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

 

#box-container {
    margin-top: 150px;
}

 

let submit = document.querySelector('#submit');

if(submit != null){
    submit.onclick = function (e) {
        let form_name = document.querySelector('#name').value;
        let form_email = document.querySelector('#email').value;
        window.localStorage.setItem("name", form_name);
        window.localStorage.setItem("email", form_email);
    }
}

function pdf() {
    let name = window.localStorage.getItem("name");
    let email = window.localStorage.getItem("email");
    let doc = new jsPDF();
    doc.setFontSize(26);
    doc.setTextColor(92, 76, 76);
    doc.text(23, 12, "EVENT!")
    doc.text(23, 81, name);
    doc.text(23, 101, email);
    doc.save('payment_details.pdf');
    window.localStorage.clear();
}

(function () {
        let name = window.localStorage.getItem("name");
        let email = window.localStorage.getItem("email");
        let options = {
            "key": "rzp_test_Y3ZqWJHAv7fVti",
            "amount": "20000",
            "name": "Organization name",
            "description": "Event Name",
            "image": "/your_logo.png",
            "handler": (response) => {
                setTimeout(function () {
                    pdf();
                    window.location = "./index.html";
                }, 2000);
            },
            "prefill": {
                "email": email
            },
            "theme": {
                "color": "#222"
            }
        };
        let rzp1 = new Razorpay(options);

        let rzpBtn1 = document.getElementById('rzp-button1');

if(rzpBtn1 != null){
            rzpBtn1.onclick = function (e) {
                rzp1.open();
                e.preventDefault();
            }
        }
    })();

 

READ  React Hooks Simple Calculator From Scratch

DOWNLOAD CODE IN ZIP FILE

Leave a Reply

Close Menu

Indian Desi Tools - Ultimate Tools Website

Demo Description


This will close in 20 seconds