Hi Guys, hope you are in good health and spirit. Today, I am going to share the very useful thing with you. Nowadays eCommerce market is growing very fast and in every eCommerce websites, we need the payment receipts.
When any customer buys your online products even that is the digital product or shippable products, you need to send the payment receipt for his purchases. In this tutorial, I will share how to create payment receipt using bootstrap.
Let’s start creating the payment receipt using bootstrap framework. If youhave just started with Bootstrap, Read:
you need to include the bootstrap JS & CSS files before head tag close in payment receipt page. Copy paste below code in your HTML page.
|
1 2 3 |
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> |
After including the bootstrap JS and CSS files in your HTML page, copy below HTML code and paste it after the body start. You can modify the HTML contents as per your requirements and also you can make it dynamically using the loop in below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<div class="container"> <div class="row"> <div class="well col-xs-10 col-sm-10 col-md-6 col-xs-offset-1 col-sm-offset-1 col-md-offset-3"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <address> <strong>Elf Cafe</strong> <br /> 2135 Sunset Blvd <br /> Los Angeles, CA 90026 <br /> <abbr title="Phone">P:</abbr> (213) 484-6829 </address> </div> <div class="col-xs-6 col-sm-6 col-md-6 text-right"> <p> <em>Date: 1st November, 2013</em> </p> <p> <em>Receipt #: 34522677W</em> </p> </div> </div> <div class="row"> <div class="text-center"> <h1>Receipt</h1> </div> <table class="table table-hover"> <thead> <tr> <th>Product</th> <th>#</th> <th class="text-center">Price</th> <th class="text-center">Total</th> </tr> </thead> <tbody> <tr> <td class="col-md-9"><em>Baked Rodopa Sheep Feta</em></td> <td class="col-md-1" style="text-align: center"> 2 </td> <td class="col-md-1 text-center">$13</td> <td class="col-md-1 text-center">$26</td> </tr> <tr> <td class="col-md-9"><em>Lebanese Cabbage Salad</em></td> <td class="col-md-1" style="text-align: center"> 1 </td> <td class="col-md-1 text-center">$8</td> <td class="col-md-1 text-center">$8</td> </tr> <tr> <td class="col-md-9"><em>Baked Tart with Thyme and Garlic</em></td> <td class="col-md-1" style="text-align: center"> 3 </td> <td class="col-md-1 text-center">$16</td> <td class="col-md-1 text-center">$48</td> </tr> <tr> <td> </td> <td> </td> <td class="text-right"> <p> <strong>Subtotal: </strong> </p> <p> <strong>Tax: </strong> </p></td> <td class="text-center"> <p> <strong>$6.94</strong> </p> <p> <strong>$6.94</strong> </p></td> </tr> <tr> <td> </td> <td> </td> <td class="text-right"><h4><strong>Total: </strong></h4></td> <td class="text-center text-danger"><h4><strong>$31.53</strong></h4></td> </tr> </tbody> </table> <button type="button" class="btn btn-success btn-lg btn-block"> Pay Now <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </div> </div> |
You can download the complete script from below link and also you can see the live demo before download.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: Bootstrap, bootstrap payment form, bootstrap payment form example, bootstrap payment receipt, bootstrap payment receipt example
