PayUI Examples

This page contains a copy-paste ready integration example to help developers get started.

Complete Integration Example

Important: Generate the one‑time token on your server and inject it into the page. Never call POST /tokens from the browser.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PayUI Integration</title>
    <script src="https://sandbox.hosted.gpaunz.com/static/pay/js/payui.js"></script>
    <!-- Production: https://hosted.gpaunz.com/static/pay/js/payui.js -->
    <style>
        .payment-container { max-width: 600px; margin: 2rem auto; padding: 1rem; }
        .status { padding: 1rem; margin: 1rem 0; border-radius: 4px; }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #cce5ff; color: #004085; }
    </style>
</head>
<body>
    <div class="payment-container">
        <h1>Secure Payment</h1>
        <div id="status" class="status info">Loading payment form...</div>
        <div id="payment-form"></div>
    </div>

    <script>
        const oneTimeToken = "YOUR_ONE_TIME_TOKEN";
        const config = {
            token: oneTimeToken,
            containerId: "payment-form",
            version: "1.0.0",
            ui: { theme: "light", variables: { colorPrimary: "#007ACC", borderRadius: "8px" }, amountDisplay: "none" }
        };
        const payUI = GPAUNZ.PayUI.initialise(config);

        payUI.on('initialise', (payload) => {
            const statusEl = document.getElementById('status');
            if (payload.result.status === 'ok') {
                statusEl.textContent = 'Payment form loaded. Enter your details below.';
                statusEl.className = 'status info';
            } else {
                const errorCode = payload.result.codes?.[0];
                const errorMsg = errorCode ? `${errorCode.message} (${errorCode.id})` : 'Unknown error';
                statusEl.textContent = 'Failed to load payment form: ' + errorMsg;
                statusEl.className = 'status error';
            }
        });

        payUI.on('surchargeUpdate', (payload) => {
            if (payload.result.status === 'ok' && payload.surcharge > 0) {
                const surcharge = (payload.surcharge / 100).toFixed(2);
                document.getElementById('status').textContent = 'A surcharge of $' + surcharge + ' will be applied';
                document.getElementById('status').className = 'status info';
            }
        });

        payUI.on('process', (payload) => {
            const statusEl = document.getElementById('status');
            if (payload.result.status === 'approved') {
                statusEl.textContent = 'Payment submitted. Transaction ID: ' + payload.transactionId;
                statusEl.className = 'status success';
                setTimeout(() => { window.location.href = '/success?txn=' + payload.transactionId; }, 2000);
            } else {
                const errorCode = payload.result.codes?.[0];
                const errorMsg = errorCode ? `${errorCode.message} (${errorCode.id})` : 'Payment failed. Please try again.';
                statusEl.textContent = errorMsg;
                statusEl.className = 'status error';
            }
        });
    </script>
</body>
</html>

Alternatively, you use our pre-built html page from the above example.

Note: The process event is for UI feedback only. Always confirm the final outcome server‑side (webhooks or polling) before fulfilment.

Recommended polling sequence: GET /paymentrequests/{paymentRequestId} (to confirm paymentRequestStatus and locate transactionResult/transactionAttempts), then GET /transactions/{transactionId}.

PayUI creates a standard purchase transaction. To refund, call POST /transactions/{id}/refunds from your server.

Payment Methods

PayUI displays available payment methods based on merchant configuration and device capabilities. For wallets, see PayUI Digital Wallets.

Credit/Debit Cards

Feature	Details
Supported Networks	Visa, MasterCard, American Express
Card Detection	Real-time BIN detection displays card brand icon
CVV Validation	3 digits (Visa/MC), 4 digits (Amex)

Digital Wallets

For Apple Pay domain registration and configuration details, see the Digital Wallets page.