# FixPay QR Code Generator
FixPay is an elegant QR code generator for UPI payments that allows users to create and customize QR codes quickly. With options for amount, merchant details, and notes, FixPay simplifies secure UPI transactions for both businesses and individuals. This module can be easily integrated into any JavaScript project.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [API Reference](#api-reference)
- [Example](#example)
- [Contributing](#contributing)
- [License](#license)
## Features
- Generate UPI QR codes with customizable options
- Simple and user-friendly interface
- Supports integration into various projects
- Easy error handling for invalid input
## Installation
To use the FixPay module, include the `fixPay.js` file in your project. You can download it or link it directly:
```html
<script type="module" src="path/to/fixPay.js"></script>Make sure to also include a QR code generation library. The example provided uses jQuery and the jQuery QR code plugin:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>-
Create an instance of the FixPay class:
const fixPay = new FixPay();
-
Set the parameters:
- Amount: Set the amount for the transaction (must be a positive number).
- Merchant Details: Provide merchant details (must be a non-empty string).
- Notes: Optional notes for the transaction.
Example:
fixPay.setAmount(100); fixPay.setMerchantDetails('merchant@example.com'); fixPay.setNotes('Payment for services');
-
Generate the QR code: Call the
generateQRCode()method to create the QR code, which will be rendered in the specified container in your HTML.Example:
fixPay.generateQRCode();
Sets the transaction amount.
- Parameters:
amount: A positive number representing the transaction amount.
Sets the merchant details.
- Parameters:
details: A non-empty string containing the merchant's information.
Sets the notes for the transaction.
- Parameters:
notes: A string containing any notes (optional).
Generates the UPI link required for the QR code. Throws an error if the required fields are not set.
Generates and renders the QR code based on the set parameters. Ensure you have a container in your HTML to display the QR code.
Here’s a complete example of how to use the FixPay module:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FixPay QR Code Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="module">
import FixPay from './fixPay.js';
$(document).ready(function () {
const fixPay = new FixPay();
$('#generate-qr').on('click', function () {
try {
const amount = parseFloat($('#amount').val());
const merchantDetails = $('#merchant-details').val();
const notes = $('#notes').val();
fixPay.setAmount(amount);
fixPay.setMerchantDetails(merchantDetails);
fixPay.setNotes(notes);
fixPay.generateQRCode();
} catch (error) {
alert(error.message);
}
});
});
</script>
</head>
<body>
<h1>FixPay - UPI QR Code Generator</h1>
<div>
<label for="amount">Amount (INR): </label>
<input type="number" id="amount" required>
</div>
<div>
<label for="merchant-details">Merchant Details: </label>
<input type="text" id="merchant-details" required>
</div>
<div>
<label for="notes">Notes: </label>
<input type="text" id="notes">
</div>
<button id="generate-qr">Generate QR Code</button>
<div id="qr-code-container" style="margin-top: 20px;"></div>
</body>
</html>Contributions are welcome! If you'd like to contribute to the FixPay module, please fork the repository and submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
### Notes:
- Ensure to replace the paths with actual paths if the files are hosted elsewhere.
- Modify any sections according to the specific requirements or features of your project.
- This `README.md` provides a comprehensive overview for developers to understand how to set up and use the FixPay module effectively.