👑 QRIS Payment Widget

Modern, secure QRIS payment integration for your website

🚀 Quick Installation

Add these two lines to your website's HTML:

<!-- Add to your <head> section -->
<link rel="stylesheet" href="http://localhost:11000/widget/qris-payment.css">

<!-- Add before closing </body> tag -->
<!-- Replace YOUR_WEBNAME with your actual website identifier -->
<script src="http://localhost:11000/widget/qris-payment.js?web=YOUR_WEBNAME"></script>

📋 Requirements

Your website must have:

An element with class .username containing the user's username
A form with ID deposit_form
A payment selection container with ID payment_method_selection

✨ Features

Automatic QRIS QR code generation
Real-time payment status checking
Mobile-responsive design
Amount recommendations
Success animations with confetti
Currency formatting (Indonesian Rupiah)
Input validation and error handling
Event tracking for analytics

🔗 Widget URLs

CSS File:

http://localhost:11000/widget/qris-payment.css

JavaScript File:

http://localhost:11000/widget/qris-payment.js?web=YOUR_WEBNAME

Note: Replace YOUR_WEBNAME with your website identifier (e.g., hoki69, mysite, etc.). This parameter is used for tracking and analytics purposes.

⚠️ Important: This widget modifies your payment form and adds a new QRIS payment method. Make sure to test thoroughly in a development environment before deploying to production.

🎮 Demo

See the widget in action:

View Live Demo

📝 Example HTML Structure

<!-- Your existing HTML -->
<div class="user-info">
    <span class="username">john_doe</span>
</div>

<form id="deposit_form">
    <div id="payment_method_selection">
        <!-- Existing payment methods -->
    </div>
</form>

<!-- Widget will automatically inject QRIS option -->