OutsideHireBook a discovery call
← All posts
5 min readHosted payment pages, PCI, Product

How to build a hosted payment page (and why it wins merchants)

A hosted payment page completes your offering, keeps card data out of your systems, and gives merchants a fast way to get paid. Here is what one needs and how to build it well.

If you process payments, sell payment software, or refer merchants to a gateway, sooner or later a customer asks the same question: where do my buyers actually pay? For a lot of processors and ISVs, the honest answer used to be "wherever you can build it yourself." A hosted payment page changes that answer. It is a ready, secure, brand-matched place to take a payment, and it is one of the highest-leverage things you can put in front of a merchant.

What a hosted payment page actually is

A hosted payment page is a checkout or pay-now page that you serve to the cardholder, where the sensitive card entry happens on infrastructure designed to handle it. The merchant sends a customer to the page (or embeds it), the customer enters card details, and the page talks to the gateway to authorize, capture, or store the card. The merchant never has to build a card form, and in most architectures the raw card number never touches the merchant's own servers.

That last point is the whole game. Because the card data is captured on the hosted page rather than in the merchant's application, the page absorbs the riskiest part of the flow. The merchant gets a token back instead of a card number, and works with that token from then on.

Why it matters

A hosted payment page does three things at once.

It completes the offering. A processor or ISV that can authorize transactions but cannot show a merchant a working pay page has a gap, and merchants feel it on day one. Shipping a page closes that gap and makes onboarding feel finished.

It wins and keeps merchants. Merchants do not want to hire engineers to build checkout. If you hand them a page that looks like their brand and works on the first try, you remove the single biggest reason they would shop around. The page becomes a reason to stay.

It offloads PCI scope to the page. When card entry lives on the hosted page instead of the merchant's site, the merchant's own PCI burden drops, often to one of the simpler self-assessment paths. That is a real, dollar-denominated benefit you can put in a sales conversation. For the deeper architecture behind this, see our write-up on PCI scope reduction for ISVs.

Core requirements

A hosted payment page that merchants will actually adopt needs to cover the following.

  • Brand customization. Logo, colors, fonts, and copy that match the merchant. A page that looks like a generic third party erodes buyer trust and hurts conversion.
  • Tokenization. The page returns a token, and the card data is vaulted on secure infrastructure. The merchant stores the token, never the PAN.
  • A secure gateway connection. Server-to-server calls for authorization and capture, with secrets that never reach the browser.
  • Level 2 and Level 3 data. B2B and government merchants need line-item and tax detail to qualify for better interchange. Build the fields and pass-through from the start.
  • Recurring and subscriptions. Stored credentials, scheduled billing, retries, and clear handling of expirations and updates.
  • Mobile-responsive layout. A large share of payments happen on phones. The page has to be fast and usable on a small screen.
  • 3-D Secure. Support the current 3DS flow for the authentication step, including the challenge and frictionless paths.
  • Reporting. Transactions, settlement status, refunds, and exportable records the merchant can reconcile against.

Build considerations and common pitfalls

The most common mistake is treating the page as a form. It is not a form, it is a payments product, and the hard parts are the ones you cannot see: idempotency so a double-click does not double-charge, clean handling of declines and partial approvals, retry logic on recurring billing, and webhook delivery the merchant can trust. Get these wrong and the page will technically "work" while quietly costing the merchant money.

A few specifics worth planning for:

  • Keep card data out of your stack. Use hosted fields or a redirect so the PAN is captured in an isolated context. This is what keeps both you and the merchant out of the worst of PCI scope.
  • Design for declines. Most checkout failures are not bugs, they are soft declines, AVS mismatches, and 3DS challenges. Show the customer a clear next step instead of a dead end.
  • Make tokenization the default. Even one-time payments benefit from a token, because it powers refunds, repeat purchases, and dispute handling later.
  • Instrument conversion. You cannot improve what you cannot see. Track where customers drop, and treat the page as something you tune over time, not ship once.

We have built this at scale

This is not a hypothetical for us. We built the hosted payment forms used by a Top-10 US processor, covering the brand customization, tokenization, Level 2 and Level 3 data, recurring billing, and 3-D Secure flows described above. You can read the details in our hosted payment forms case study, and see how we package this work in our hosted forms and invoicing service.

If you are a processor or ISV who needs a hosted payment page that matches your brand, reduces scope, and converts, that is squarely the kind of build we do. The discovery call is free, so tell us what you are trying to ship and we will tell you how we would approach it.


Let's scope your payments build.

Book a discovery call with engineers who already speak gateways, processing, settlement, and compliance. We'll talk through your goals and the right way to build it.