Skip to content
payrocdevelopers

Hosted Payment Page

Learn how the Hosted Payment Page works and follow the integration journey to run a sale, then extend your integration with optional features.

An AI skill is available for this guide, get it on the Skills Marketplace (GitHub).

Use our Hosted Payment Page solution to add a secure payment page to your checkout.

When a customer is ready to pay, redirect them to an external payment page that we host where they can submit their payment details. We then securely process the transaction and return the transaction response.

Because we host the payment page and handle the sensitive payment details, your integration does not need to process or store the payment details. This reduces the merchant's PCI compliance scope while still allowing them to accept payments online.

How it works

Mermaid diagram
Mermaid source
sequenceDiagram
    participant W as Website
    participant GW as Gateway
    participant HPP as Hosted Payment Page

    rect rgba(0, 81, 194, 0.4)
        Note over W: 1. Customer selects button to pay
        W->>GW: 2. Send transaction request
        Note over GW: 3. Authenticate the request
        GW->>HPP: 4. Load the Hosted Payment Page
        Note over HPP: 5. Customer submits their payment details
        HPP->>GW: 6. Send transaction details
        Note over GW: 7. Send transaction details to the processor
        Note over GW: 8. Processor returns a response for the transaction
        GW-->>W: 9. Send transaction response
        Note over W: 10. Display transaction response to the customer
    end
  1. Customer selects button to pay on the merchant's website.
  2. Button sends a transaction request to our gateway for authentication and to load the Hosted Payment Page.
  3. Gateway validates the request.
  4. Gateway loads the Hosted Payment Page and redirects the customer.
  5. Customer submits their payment details on the Hosted Payment Page.
  6. Hosted Payment Page sends the transaction details to our gateway.
  7. Gateway sends the transaction details to the processor.
  8. Processor returns a response for the transaction.
  9. Gateway sends the transaction response to the merchant's website.
  10. Merchant's website displays the transaction response to the customer.

Your integration journey

To run a sale with the Hosted Payments Page, complete the following steps:

  • Authenticate your requests - Create a SHA-512 hash that you send in your request to load the Hosted Payment Page. This authenticates that you can send transactions to our gateway.
  • Add a button to load the page - Send a request that loads the Hosted Payment Page. The request contains all the transaction details that you need to complete the sale, for example, amount and payment method.
  • Build your receipt page - Provide us with a URL for the merchant's receipt page that you want us to send the transaction response to and to redirect customers to.

Important: If your integration accepts card payments, we strongly recommend that you implement background validation. It confirms if our gateway processed the payment even if there's a communication issue between our gateway and the Hosted Payment Page. For more information about background validation, go to Implement Background Validation.

Extend your integration

After you integrate with Hosted Payment Page to run a sale, you can extend your integration to include the following:

  • Implement background validation.
  • Run pre-authorizations.
  • Save a customer's payment details.
  • Set up repeat payments.
  • Add optional parameters to your requests.
  • Run refunds and reversals.
  • Re-present an ACH payment.

For more information about how to extend your integration, go to Extend your integration.

Browse guides

Search documentation

API reference169
Guides118
Knowledge38
legal1
Solutions32
Workflows74
↑↓highlight↵openView all search results

Menu

Theme

Sign out

Your saved plans remain in your organization. This browser’s private draft and account view will be cleared.

Talk to an engineer