---
page_title: Integration Steps
product: Hosted Payment Page
platform: Web
page_source: https://docs.bpl.eu5.sandbox.juspay.io/hosted-payment-page/web/hosted-payment-page/integration-steps
llms_txt: https://docs.bpl.eu5.sandbox.juspay.io/llms.txt
product_llms_txt: https://docs.bpl.eu5.sandbox.juspay.io/hosted-payment-page/llms.txt
---


# Integration Steps   




## Overview



The Hosted Payment Page (HPP) is the fastest way to accept payments — Barclaycard Payments hosts a secure, PCI-compliant checkout page, so you never need to build or store a card form yourself.


## Before you Start



Pre-requisites:

* You must have a sandbox account and test credentials.
* Read [Getting Started](/getting-started/docs/overview/about-barclaycard-payments#About-Barclaycard-Payments) to ensure you understand how to connect securely and manage the transaction lifecyle.


## Integration Steps



![Image](https://d199tbgws2bl02.cloudfront.net/tesseract/assets/hosted-payment-page/Hosted_Payment_Page_Steps-hjRmb.png)
*Hosted Payment Page Steps*



The process starts when your customer checks out their shopping cart on your online store or selects your **Pay** button or equivalent option on your website:

1. Your systems call the Barclaycard Payments **Create Checkout Session**  API, to establish a secure session.
   
   Barclaycard Payments returns a response which contains the redirect URL to use, to redirect the customer to the Hosted Payment Page.
2. Your systems redirect the customer’s browser to the Hosted Payment Page.
   
   The customer completes the payment details on the Hosted Payment page: they select their preferred payment method, enter their card or bank details, and are authenticated with their card issuer or bank. All details are managed securely by Barclaycard Payments
   
   When the payment request is approved (or declined), our systems redirect the customer’s browser to the results page you have configured  for a successful or declined transaction.
3. We will send a callback event to the URL you have requested, confirming details of the transaction. 
   
   You should  always use the details in the callback to drive the behaviour of your systems, for example: storing details in your database, confirming the order with the customer and arranging for fulfilment and delivery.


## Calling the Session API



Use `POST /v1/sessions` (`api.barclaycardpayments.com/v1/checkout-sessions`) to create a session. 

In the payload of your request, set the mode to: `mode: "payment"`.

For more information, see [Step 1. Calling the Session API](/hosted-payment-page/web/hosted-payment-page/step-1-calling-the-session-api#Step-1.-Calling-the-Session-API).


## Redirecting to the Hosted Payment Page 



Use the `checkout.url` returned in the session response to redirect the customer to the Hosted Payment Page. 

At this stage the customer selects their preferred payment method and complete the requested details on the Hosted Payment Page, which may include authentication with their card issuer or bank.

For more information, see [Step 2. Redirecting to the Hosted Payment Page.](/hosted-payment-page/web/hosted-payment-page/step-2-redirecting-to-the-hosted-payment-page#Step-2.-Redirecting-to-the-Hosted-Payment-Page)


## Handling the Response



Once checkout is complete, depending on the result, our server redirects the customer to either the success or failure URL you provided in `return_urls`.

If you did not provide URLs, they are redirected to a default Barclaycard Payments response page. 

> **Note**
> Always treat this redirect as a summary  to the customer only — confirm the final outcome via [webhook](#44-using-webhooks) or a `GET /v1/payments/{payment_id}` call.



For more information, see [Step 3. Handling the Response](/hosted-payment-page/web/hosted-payment-page/step-3-handling-the-response#Handling-the-Response).

---

## See Also

- [Step 1. Calling the Session API](https://docs.bpl.eu5.sandbox.juspay.io/hosted-payment-page/web/hosted-payment-page/step-1-calling-the-session-api)