---
description: >-
  Embed a secure, white-label checkout into your website via iframe — the Hosted Payment Page handles card tokenization, 3D Secure, and ACH so you never touch raw card data or carry PCI scope. Your backend creates an OAuth-authenticated session; your frontend mounts the iframe with the returned session token.
---

# Hosted Payment Page

The Hosted Payment Page (HPP) is a secure, white-label checkout that you embed into your own website through an **iframe**. It collects and tokenizes card data inside an isolated security context, so your servers and pages never handle raw card numbers — keeping you out of PCI scope while preserving your branding and user experience.

Your **backend** creates a short-lived payment session (authenticated via OAuth 2.0); your **frontend** loads a small SDK and mounts the iframe using the returned session token. The customer pays inside the iframe, and you receive the result via JavaScript callback or server-side redirect.

***

### How It Works

```
1. Your backend creates a session   →  POST /api/sessions/create (OAuth) → sessionToken
2. Your frontend loads the SDK       →  <script src=".../iframe.min.js">
3. SDK mounts the iframe             →  Token sent via postMessage (never in the URL)
4. Customer pays inside the iframe   →  Card tokenized + processed by the gateway
5. Result returned to your page      →  onSuccess / onError callback (or redirect)
6. Your backend confirms the result  →  Verify status before fulfilling the order
```

***

### Key Features

| Feature | Description |
|---|---|
| **PCI Scope Reduction** | Card data is entered and tokenized inside the iframe — your servers never see raw PAN/CVC |
| **White-Label** | Custom CSS, tenant logo, brand color, and configurable billing fields keep the checkout on-brand |
| **OAuth-Secured Sessions** | Sessions are created server-side with OAuth 2.0 Client Credentials; the secret never reaches the browser |
| **Short-Lived Session Tokens** | JWT session tokens expire in 15 minutes by default and are passed via `postMessage`, never in the URL |
| **Card & ACH** | Supports card payments and ACH bank transfers (via Plaid bank linking) |
| **3D Secure** | When a `CHALLENGE` is returned, the iframe handles the ACS redirect and re-verification automatically |
| **Auto-Resizing** | The iframe reports its own height (`RESIZE_IFRAME`) so it fits your layout without a fixed height |

***

### Use Cases

- **E-commerce checkout** — Drop a compliant payment form into your existing cart flow without building or hosting card fields
- **Subscriptions & saved cards** — Collect a card for one-time or recurring use with the optional "save card" prompt
- **Card or account validation** — Run a zero-amount card check or bank-account validation before a later charge
- **Branded payment pages** — Apply your own CSS and branding for a seamless, on-brand checkout experience

***

### Better Together

The Hosted Payment Page works alongside the [Payments Gateway](../README.md), [Payment Link](../payment-link.md), and [Smart Terminal](../smart-terminal.md) to cover every payment channel:

| Channel | Solution |
|---|---|
| **API / Online (your own UI)** | Payments Gateway API |
| **Embedded checkout (iframe)** | Hosted Payment Page |
| **Remote / Mobile** | Payment Link |
| **In-person / Card present** | Smart Terminal |

Using these products on the same platform increases authorization rates by sharing routing intelligence, fraud prevention, and transaction data across channels.

***

### Getting Started

Follow the [Iframe Integration](iframe-integration.md) guide for a step-by-step walkthrough — creating a session, loading the SDK, mounting the iframe, and confirming the result on your backend. Contact [support@inyoglobal.com](mailto:support@inyoglobal.com) to request HPP credentials.