PayUI

PayUI is the hosted checkout UI that can be embedded in your checkout experience, designed for merchants who want a fast, low‑risk way to accept payments without handling sensitive card data directly. It exists to reduce PCI scope, speed up integration, and improve conversion by delivering a modern, mobile‑friendly payment experience that you can still customize and control.

Use PayUI when you want a single drop‑in form that supports cards and digital wallets, works across devices, and keeps payment data inside a secure iframe while your application focuses on the order and customer experience.

Requirements

Browser Support

Desktop Browsers:

• Chrome 60+
• Safari 17+
• Firefox 60+
• Edge 79+

Mobile Browsers:

• iOS Safari 17+
• Android Chrome 60+
• Samsung Browser 10+

TLS 1.2 must be supported by the browser.

Before You Start

To integrate PayUI, you need:

• Server-side access to the API to create Payment Requests and mint One‑Time Tokens (do not call /tokens from the browser).
• Card Not Present API Capability enabled on your merchant account during onboarding.
• Apple Pay domain registration if you plan to offer Apple Pay when wallets are available (see PayUI Digital Wallets).

Script Include

Sandbox:

<script src="https://sandbox.hosted.gpaunz.com/static/pay/js/payui.js"></script>

Production:

<script src="https://hosted.gpaunz.com/static/pay/js/payui.js"></script>

Note: The script URL is version-agnostic; specify the version in the configuration object.

Integration Summary

Integrating PayUI involves following main steps:

Steps (quick reference)

Step	Where	What	API / Event	Output
1	Backend	Create Payment Request	POST /paymentrequests	paymentRequestId
2	Backend	Generate One‑Time Token (OTT), scope=payui	POST /tokens	token (OTT)
3	Frontend	Include script + initialise PayUI	GPAUNZ.PayUI.initialise(config)	PayUI ready
4	Customer	Enter details and submit payment	PayUI hosted iframe	Attempt submitted
5	Frontend	Show immediate processing result	process event	Processing outcome
6a	Backend (recommended)	Receive final state and update database	Webhooks: transactions + payment requests	Final state
6b	Backend (fallback)	Fetch final state and update database	GET /paymentrequests/{id}, then GET /transactions/{id}	Final state

Transactions & refunds

• PayUI supports standard once-off transactions “purchase” or “authorize”.
• When it is time to capture an authorized transaction, use the standard API: POST /transactions/{id}/capture.
• Refunds follow the standard API flow: POST /transactions/{id}/refunds.

Customisation (visual only)

• Use ui.theme for light/dark modes.
• Use ui.variables to customise colors, spacing, and typography.
• Customisation is visual only (no field order or layout changes).
• Only system fonts are supported; external web fonts are not loaded.

For the full list of variables and examples, see PayUI Customisation.

For the full step-by-step integration, architecture diagrams, and event/error handling, see the Integration Guide: PayUI Integration or, for a quick start refer to PayUI Examples.

Features Support

PayUI Feature Matrix

A snapshot of current and upcoming PayUI capabilities.

Feature	Notes
CNP — Once-Off	Once-off customer-initiated payments processed via PayUI
CNP — Surcharging	Applies if merchant has surcharging enabled
Wallet — Apple Pay	Browser/platform dependent, Requires domain registration to support Apple Pay via GP API
Wallet — Google Pay	Browser/platform dependent
Wallet — Surcharging	Supports surcharging on wallet transactions
CNP — Card-on-file	Card stored during transaction from PayUI for use in future for recurring transactions (requires consent + token handling)
CNP — 3DS	3DS integration for stronger authentication

Terms

Term	Definition	Notes
CNP	Card Not Present	Transactions where the card is not physically presented (online/in-app)
3DS	3D Secure	Strong customer authentication protocol

Quick links

• Integration Guide: PayUI Integration
• Examples: PayUI Examples
• Customisation: PayUI Customisation
• Digital Wallets: PayUI Digital Wallets