Q Payment Gateway Integration Demo

Just add the script and create a button with data attributes. Q handles everything else!

<!-- Include Q Payment SDK -->
<script src="https://api.qqweb.net/static/js/q-pay.js"></script>

<!-- Initialize Q Payment -->
<script>
    window.Q_PAY_CONFIG = {
        publicKey: 'YOUR_PUBLIC_KEY',
        baseUrl: 'https://api.qqweb.net'
    };
</script>

<!-- Add Payment Button -->
<button class="q-payment-button"
        data-amount="5000"
        data-email="customer@example.com"
        data-callback-url="https://api.qqweb.net/api/gateways/payments/example/1"
        data-reference="ORDER123"
        data-meta='{"order_id": "123"}'>
    Pay with Q
</button>

More control over the payment flow with direct API integration.

const qpay = new QPay('YOUR_PUBLIC_KEY', {
    baseUrl: 'https://api.qqweb.net',
    onSuccess: function(response) {
        console.log('Payment successful:', response);
    },
    onError: function(error) {
        console.error('Payment failed:', error);
    },
    onClose: function() {
        console.log('Payment modal closed');
    }
});

// Initialize payment
await qpay.initializePayment({
    amount: 5,
    reference: 'ORDER' + Math.random().toString(36).substr(2, 9),
    callbackUrl: 'https://api.qqweb.net/api/gateways/payments/example/1',
    customerEmail: 'customer@example.com',
    customerName: 'John Doe',
    metadata: {
        order_id: '123',
        custom_field: 'Custom value'
    }
});

Response will appear here...