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 today (with digital wallets coming soon), 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	Status	Notes
CNP — Once-Off	Supported	Once-off customer-initiated payments processed via PayUI
CNP — Surcharging	Supported	Applies if merchant has surcharging enabled
Wallet — Apple Pay	Coming soon	Browser/platform dependent, Requires domain registration to support Apple Pay via GP API
Wallet — Google Pay	Coming soon	Browser/platform dependent
Wallet — Surcharging	Coming soon	Planned support for surcharging on wallet transactions
CNP — Card-on-file	Coming soon	Card stored during transaction from PayUI for use in future for recurring transactions (requires consent + token handling)
CNP — 3DS	Coming soon	3DS integration planned 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