Welcome to the UPI Payment Integration project! This project showcases a simple and efficient way to integrate UPI payment functionality using a QR code and a "Make Payment" button.
- QR Code Generation: Automatically generates a QR code for UPI payments.
- Responsive Design: Ensures a modern, user-friendly experience on all devices.
- Payment Button Functionality: Redirects users to their UPI app with pre-filled payment details.
- Custom SVG Icon: Integrated UPI logo adds a polished touch to the payment button.
.
├── index.html # Main HTML file
├── styles.css # CSS file for styling
├── script.js # JavaScript for functionality
└── README.md # Project documentation (you are here!)
Follow these steps to set up and run the project on your local machine:
- A modern web browser (e.g., Google Chrome, Firefox).
- Basic knowledge of HTML, CSS, and JavaScript.
-
Clone the Repository
git clone https://github.com/SupratimRK/upi_qr_genarator.git cd upi-payment-integration -
Open the Project
Open
index.htmlin your favorite web browser to view the project. -
Test the Payment Button
- Click the Make Payment button.
- The button will redirect you to a UPI app if your device is configured properly.
Update the following variables in the script.js file to personalize UPI payment details:
const upiID = "your-upi-id@bank";
const payeeName = "Your Name";
const transactionNote = "Payment for services";
const transactionAmount = "100.00"; // Specify your desired amountYou can customize the UI by editing the styles.css file. For example, to change the button color:
.Btn {
background-color: #028c3c; /* Replace with your preferred color */
color: white;
}Contributions are welcome! Follow these steps to contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch-name). - Commit your changes (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature-branch-name). - Open a Pull Request.
This project is licensed under the MIT License. Feel free to use, modify, and distribute it as per the license terms.
For questions or feedback, feel free to reach out:
- Email: supratimrk@outlook.com
- GitHub: SupratimRK
Built with ❤️ by Supratim