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

Lib Power Tech August 15, 2024

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.



Lib Power Tech

Posted by Lib Power Tech

This situation will change

Post a Comment

18 Comments

  1. TechyMarch 16, 2022 at 11:40 PM

    This comment has been removed by the author.

    ReplyDelete
  2. dharmishitechnologiesMarch 17, 2022 at 4:18 PM

    Hey thanks for write this content on your website keep posting more content.digital marketing agency
    static website cost
    software companies in kanpur

    ReplyDelete
  3. Shonu MishraApril 22, 2022 at 4:56 PM

    thank you for sharing this wonderfull article we also provide (SEO, Digital Marketing, business, Affiliate Marketing, Earn Money Online, Instagram marketing, blogging or blogger Couses for free) and much more like news andall other tech things, i wish that you will wonder here.

    ReplyDelete
  4. MobibizJune 10, 2022 at 2:42 PM

    Nice blog. Thank you for sharing.
    hire Android App Developer
    Mobile app development company

    ReplyDelete
  5. KellyAugust 3, 2022 at 6:49 PM

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

    ReplyDelete
  6. shahreeAugust 13, 2022 at 7:16 PM

    want to learn more about tech check out Shahreecoder

    ReplyDelete
  7. VinceAugust 19, 2022 at 12:18 PM

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

    ReplyDelete
  8. arafat rahmanAugust 23, 2022 at 10:36 AM

    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
  9. AnonymousAugust 30, 2022 at 11:37 AM

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

    ReplyDelete
  10. MahayojanaaSeptember 16, 2022 at 11:17 AM

    very good work sir I like this information

    ReplyDelete
  11. AnonymousDecember 28, 2022 at 7:11 PM

    Latest Discuss Digital Media

    ReplyDelete
  12. KellyApril 23, 2023 at 6:18 PM

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

    ReplyDelete
  13. ilanMay 17, 2023 at 11:33 PM

    nice thanks!
    ilan

    ReplyDelete
  14. FinacusJune 28, 2023 at 2:14 PM

    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
  15. MYMAHAINFOJuly 21, 2023 at 2:15 PM

    great information, thank you sir

    ReplyDelete
  16. Maven TechnologySeptember 12, 2023 at 12:30 PM

    This comment has been removed by the author.

    ReplyDelete
  17. Maven TechnologyApril 15, 2024 at 2:34 PM

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

    Maven Technology excels as an IoT App Development Agency, offering a range of innovative solutions that streamline processes and enhance connectivity.

    Our experience lies in creating smart and efficient IoT solutions is evident in apps and software development approaches.

    Please follow us or connect us now at : maventechie.com.

    ReplyDelete