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.