How to Create an Email Receipt Template for Payment in Koha (Online Bill Copy)

It is an HTML5 & CSS payment receipt template that automatically emails receipts for payments made by koha patrons. 

Step - 1

Go to: Tools/Notices & slips/ACCOUNT_PAYMENT ( Edit or  create New notes)

Copy and paste the below HTML5 & CSS Coding. 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Koha Receipt</title>
    <style>
        body{
            background-color: #F6F6F6; 
            margin: 0;
            padding: 0; 
        }
        h1,h2,h3,h4,h5,h6{
            margin: 0;
            padding: 0;
        }
        p{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 90%;
            margin-right: auto;
            margin-left: auto;
        }
        .brand-section{
           background-color: #aa1f34;
           padding: 10px 20px;
        }
        .logo{
            width: 50%;
        }
        .row{
            display: flex;
            flex-wrap: wrap;
        }
        .col-6{
            width: 50%;
            flex: 0 0 auto;
        }
        .text-white{
            color: #fff;
        }
        .company-details{
            float: right;
            text-align: right;
        }
        .body-section{
            padding: 16px;
            border: 1px solid gray;
        }
        .heading{
            font-size: 20px;
            margin-bottom: 08px;
        }
        .sub-heading{
            color: #262626;
            margin-bottom: 05px;
        }
        table{
            background-color: #fff;
            width: 80%;
            border-collapse: collapse;
        }
        table thead tr{
            border: 1px solid #111;
            background-color: #f2f2f2;
        }
        table td {
            vertical-align: middle !important;
            text-align: left;
        }
        table th, table td {
            padding-top: 08px;
            padding-bottom: 08px;
        }
        .table-bordered{
            box-shadow: 0px 0px 5px 0.5px gray;
        }
        .table-bordered td, .table-bordered th {
            border: 1px solid #dee2e6;
        }
        .text-right{
            text-align: end;
        }
        .w-20{
            width: 20%;
        }
        .float-right{
            float: right;
        }
</style>
</head>
<body>
    <div class="container">
        <div class="brand-section"><center><h2 class="text-white"><u>YOUR COLLEGE NAME</h2></u></center>
            <div class="row">
                <div class="col-6">
                    <h2 class="text-white"><img src="https:your college logo link.png" alt=" libpowertech" width="55" height="65">   <<branches.branchname>> </h2>
                </div>
                <div class="col-6">
                    <div class="company-details">
                        <p class="text-white">Your College Address- 1</p>
                        <p class="text-white">Your College Address- 2</p>
                        <p class="text-white">Your College Address- 3</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-section">
            <div class="row">
                <div class="col-6">                  
                    <h3><p class="sub-heading">Full Name &nbsp; &nbsp; : &nbsp;   
 <<borrowers.title>>. <<borrowers.surname>> </p>
                    <p class="sub-heading">Roll No &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; : &nbsp; 
 <<borrowers.cardnumber>> </p>
                    <p class="sub-heading">Department &nbsp; : &nbsp; <<borrowers.borrowernotes>> </p>                  
 <p class="sub-heading">DATE  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; <<today>> <span id="date"></span></p></h3> </script></div>
  
 <div class="col-6">
 <h2 class="heading">Address:-</h2><b><p>  <<borrowers.address>> <p> 
 <<borrowers.phone>> <p>
 <<borrowers.other>> <p> 
 <<borrowers.email>> <p>
<<issues.lastreneweddate>> </p></b>
<hr><b><i><h3>
 <p class="sub-heading">Receipt No     &nbsp; &nbsp; : &nbsp; <u> [% credit.credit_number %] </u></h3></i></b></p></div></div></div> 
<div class="body-section"><h1 class="heading"><center><u><i>RECEIPT</i></u></center></h1>
<h3 class="sub-heading">[%- USE Price -%]
[%- USE AuthorisedValues -%]
A payment of Rs. [% credit.amount * -1 | $Price %] via  has been applied to your library account, payment details below.</h3>       
<table class="table-bordered">
             <head>
                        <th>Description of charges</th>
                        <th class="w-20">Amount Paid Rs.</th>
                     </tr>
                 </thead>
             <tbody>
                         <td><p>[%- FOREACH o IN offsets %] [% o.debit.description %]   </p></td>
                        <td><p><center> [% o.amount * -1 | $Price %] </p></td>
             </tr><tr> [% END %] </tr>
 <thead>
 <td><p><b><h3><center>Total</td></p></b></h3>
 <td><p><b><h3><center> [% credit.amount * -1 | $Price %] </center></td></p></b></h3></tbody></table></center></tr>
 <h3 class="heading"> Balance Payable &nbsp; : [% o.debit.amountoutstanding | $Price %]
 </h3>      
<h3 class="heading"> [% IF ( o.credit.note == 'PayPal' ) %] Payment Mode &nbsp; : [% o.credit.note %] [% ELSE%] Payment Mode &nbsp; &nbsp; &nbsp; : [% AuthorisedValues.GetByCode('PAYMENT_TYPE', o.credit.payment_type) %]  [% END %]</h3></br><div>     
<p>This is computer generated Receipt. No Signature required. Thanking you for payment.</p> </div></div>
<div class="body-section">
            <p>More information visit your account 
                <a href="http://Your OPAC Link" class="float-right"><<branches.branchname>> </a>
            </p>
        </div>              
</body>
</html>

Finally, Save.

Step - 2

Go to: Fine Payable Patrons Account and Pay the Amount.

Check the patron's Notices option. (Email Status Send or Pending )

Step - 3

If the email status of the patron's notice has been send. Go to your Gmail account and view, have been receipt received successfully.



Post a Comment

17 Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Window management is essential to improve your productivity. I found Rectangle Mac very useful. Check it out guys!

    ReplyDelete
  3. want to learn more about tech check out Shahreecoder

    ReplyDelete
  4. Thanks for sharing useful information. Keep it up!! Also visit Technician Scheduling Software

    ReplyDelete
  5. I am really impressed read your blog. Actually, your blog article is very helpful and more informative.Thank for sharing your valuable information. Such an insightful and long post almost intimidating for us newbie bloggers. Grateful for the effort you took to write this post. Lot’s to think about and get going with. Thank you.
    We provide a variety of hacking services, such as social media account hacks, mobile phones / PC hacking, email accounts hacking or anything else customer may want. Details check AwakenCybers

    ReplyDelete
  6. Thank You Sir, This is Really Great and Very Informative sir, thank you sir for providing this information to us. Punjab

    ReplyDelete
  7. I've just started using Rectangle Mac on my MacBook, and it's impressed me with its simplicity and practicality.

    ReplyDelete
  8. I am grateful for the effort you invested in crafting this article. Your compelling argument for Finacus as the optimal banking solution has convinced me to give them a try. Their intuitive platform and exceptional services align perfectly with my requirements.
    Financial Software Companies

    ReplyDelete
  9. great information, thank you sir

    ReplyDelete
  10. I just read your blog and I must say, it's truly remarkable! Keep up the great work!

    Experience the Power of Innovation with Maven Technology's Web and Mobile Solutions- as we named as Best Mobile App and Web Development Company. Join us over the call today : +91 8851223376 , +1 3145144152

    ReplyDelete