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.

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; }