Skip to main content

Hosted Payment Page

The Hosted Payment Page is a secure portal that allows you to accept payments from your consumers without having to build and manage your own payment gateway.

For Checkout Hosted Payment Page integration via Commerce Center, there are two options for configuring how to handle transaction completion:

  • Use the provided order confirmation success and error pages.
  • Redirect to merchant-provided success and error pages.
Tip

Commerce Center is a self-serve portal that allows you to configure checkout settings, search for transactions, and more. For additional information, reach out to your implementation manager.

How it works

Here's a diagram that illustrates the Hosted Payment Page redirect process flow to help you better understand the flow of information between the components.

Hosted payments page process flow image
  1. The browser initiates a checkout with the merchant server.
  2. The merchant server sends an authentication request via the checkout backend.
  3. If authentication is successful, an accessToken is sent in response to the merchant server.
  4. The merchant server creates a checkout session by sending a POST request to the /checkout/intent endpoint, using the accessToken received from the checkout backend, the merchant ID, an order reference, and a cart object.
  5. The checkout backend sends checkoutRedirectUrl as a response to the merchant server.
  6. The merchant server sends checkoutRedirectUrl to the browser.
  7. The merchant webpage redirects the consumer to checkoutRedirectUrl.
  8. The Hosted Payment Page renders the Hosted Payment checkout form on the browser.
  9. The consumer clicks Place Order / Pay on the pay form.
  10. The Hosted Payment Page initiates Pay (checkout form data) with the Hosted Payment checkout backend.
  11. The Hosted Payment checkout backend sends the payResult to the Checkout Hosted Page.
  12. The Hosted Payment Page redirects the consumer back to the merchant's configured success or failure redirect URL.

Configure using Commerce Center

You can use the Checkout Settings page in the Commerce Center portal to configure the Checkout experience.

Perform the following steps to configure Checkout settings:

  1. Log in to the Commerce Center.
  2. Go to Settings.
  3. Click on Checkout from the drop-down list.
  4. Select the configuration settings as per your business needs. The available options are:
    • Order confirmation page
    • Merchant-defined success and failure pages
  5. Once you are done, click Publish.

Order confirmation page

If you choose to use the Order confirmation page, the consumer is sent to the success or failure page on the Checkout application when Continue Shopping is clicked.

Perform the following steps to enable this feature:

  • Set the Order confirmation page toggle to On.
  • Enter the URL of the page in Back to merchant Url. This URL will only support a domain and a path. Query parameters are not supported.
Hosted payments page toggle to enable on Commerce Center.

Sample success page:

Hosted payments page successful checkout image.

Merchant-defined success and failure pages

You can also redirect your consumers to a success or failure page of your choosing.

Perform the following steps to enable this feature:

  1. Set the Order confirmation page toggle to Off.
  2. Enter both URLs in Success redirection Url and Failure redirection Url. These URLs will only support a domain and a path. Query parameters are not supported.
Hosted payments page toggle to enable failure message customization via Commerce Center.

When a consumer is sent to the success or failure page, more query parameters are added with the key merchantOrderNumber, which will have the value of the order ID you provided when creating the checkout session token via the /checkout/intent endpoint.

Create a checkout session