# Collect a payment with the Hosted Payment Page

Redirect your customer to Payroc's hosted checkout; sale, pre-auth, and tokenize variants.

Redirect your customer to Payroc's hosted checkout. Card entry, 3-D Secure, and receipt happen on the hosted page — keeping your PCI scope at SAQ A. The result comes back to your return URL and webhook.

<a id="how-it-works"></a>
## How it works

1. **Load the hosted payment page** — Your site → gateway
   
   Your site sends a signed form POST that redirects the customer to the HPP.

2. **Customer pays** — Customer → hosted page
   
   Card entry and 3-D Secure on the Payroc-hosted page.

3. **Result comes back** — Gateway → your webhook
   
   Return URL for the customer; webhook as source of truth.

<a id="load-the-hosted-payment-page"></a>
## Load the hosted payment page

Add a payment button that sends a signed form POST to the gateway — the [Load the Hosted Payment Page](/guides/payments/hosted-payment-page/load-payment-page) guide walks through every parameter and the [hash](/guides/payments/hosted-payment-page/authenticate-requests) that signs it.

```html
<form action="https://payments.uat.payroc.com/merchant/paymentpage" method="post">
  <input type="hidden" name="TERMINALID" value="3204004" />
  <input type="hidden" name="ORDERID" value="HPP874417810" />
  <input type="hidden" name="CURRENCY" value="USD" />
  <input type="hidden" name="AMOUNT" value="10.00" />
  <input type="hidden" name="DATETIME" value="09-02-2026:14:37:58:558" />
  <input type="hidden" name="HASH" value="…SHA-512 signature…" />
  <input type="submit" value="Pay Now" />
</form>
```

> **Gotcha — from the workflow spec**
>
> For a plain sale, do not call `capturePayment` afterward — the redirect and webhook already settled it. The capture step applies only to the pre-authorization variant.

> **Every request needs a fresh Idempotency-Key**
>
> Send a unique UUID v4 per request; reusing a key replays the original response instead of charging twice.