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 bellow HTML5 & CSS Coding. 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lib Power Tech Koha payment 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: center;
        }
        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">
            <div class="row">
                <div class="col-6">
                    <h1 class="text-white"><img src="https://your college logo image link" alt="Trulli" width="35" height="40">   <<branches.branchname>> </h1>
                </div>
                <div class="col-6">
                    <div class="company-details">
                        <p class="text-white">Your Address - 1</p>
                        <p class="text-white">Your Address - 2</p>
                        <p class="text-white">Your 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></h3>
                    
                </div>
                <div class="col-6">
                    
                   <h2 class="heading">Address:-</h2><b><p>  <<borrowers.address>> <p> 
 <<borrowers.phone>> <p> 
 <<borrowers.email>> </p></b>
                 </div>
            </div>
        </div>

        <div class="body-section"><h1 class="heading"><center><u>RECEIPT</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.</h3>
         
            <table class="table-bordered">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th class="w-20">Paid Rs.</th>
                        <th class="w-20">Remaining Rs.</th>
                       
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><p>[%- FOREACH o IN offsets %]
 [% o.debit.description %]
 </p></td>
                        <td><p> [% o.amount * -1 | $Price %] </p></td>
                        <td><p> [% o.debit.amountoutstanding | $Price %]
[% END %] </p></td>
                      
                    </tr>
                    <tr>
                       
                </tbody>
            </table>
            <br>
            <h3 class="heading">Payment Status: Paid</h3>
            <h3 class="heading"> [% IF ( o.credit.note == 'PayPal' ) %] Payment Mode: [% o.credit.note %] [% ELSE%] Payment Mode: [% AuthorisedValues.GetByCode('PAYMENT_TYPE', o.credit.payment_type) %]  [% END %]</h3>
       
       <p>This is computer generated Receipt. No Signature required. Thanking you for payment.</p>
                </div>
        

        <div class="body-section">
            <p>More information visit your account 
                <a href="http://OPAC IP address or domain " class="float-right"><<branches.branchname>> </a>
            </p>
        </div>      
    </div>      

</body>
</html>

Finally Save.

Step - 2

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

Check the patrons Notices option. (Email Status Send or Pending )

Step - 3

If the email status of the patrons notice has been send. Go to your Gmail account and view, have been receipt received successful.



Post a Comment

4 Comments