Manage your Hosted Payments Page

On this page, find out how to:

• Create a Hosted Payments Page
• Check the status of a Hosted Payments Page

• Have you registered to begin using Hosted Payments Page? Contact your Solution Engineer or support@checkout.com. During integration, you'll be able to specify your payment capture and 3D Secure settings.
• Create your secret and public API keys in the Dashboard.
• Set up webhooks to be notified when the payment has been approved, so you can continue the sales fulfilment flow.

When a customer purchases something from you, you can create a Hosted Payments Page session by using the

post

To get a detailed view of all required and optional fields, see our API reference.

We've listed the available payment methods for the Hosted Payments Page below.

Different payment methods have different required and optional fields when making a request. We've listed these below.

You can view a request example with all of these fields on our API reference.

json
1{
2  "amount": 1000,
3  "currency": "GBP",
4  "reference": "ORD-123A",
5  "billing": {
6    "address": {
7      "country": "GB"
8    }
9  },
10  "customer": {
11    "name": "John Smith",
12    "email": "john.smith@example.com"
13  },
14  "success_url": "https://example.com/payments/success",
15  "failure_url": "https://example.com/payments/failure",
16  "cancel_url": "https://example.com/payments/cancel"
17}

The response will include the redirect link to which you should redirect your customer to finalize the payment.

json
1{
2  "id": "hpp_xGQBg0AXl3cM",
3  "reference": "ORD-123A",
4   "_links": {
5    "self": {
6      "href": "https://api.checkout.com/hosted-payments/hpp_xGQBg0AXl3cM"
7    },
8     "redirect": {
9       "href": "https://pay.checkout.com/page/hpp_xGQBg0AXl3cM"
10     }
11   }
12 }

Redirect the customer to the _links.redirect URL you received in the response above, using either a server-side or client-side call.

js
1res.redirect(hostedPaymentsResponse._links.redirect.href);

If loading the Hosted Payments Page in an iframe, you will need to add allow="payment" as an attribute on the iframe.

When your customer completes the payment, they will be redirected to the success URL. The session ID (cko-session-id) or payment ID (cko-payment-id) is provided in the query parameter included in the redirect URL. It will look something this:

• https://example.com/success?cko-session-id=sid_ubj2q76miwundwlk72vxt2i7
• https://example.com/success?cko-payment-id=pay_mbabizu24mvu3mela5njyhpit4

You can set up webhooks to be notified when the payment has been approved, so you can continue the sales fulfilment flow.

To keep track of the payments you request as a Hosted Payments Page, you can check the status using the id returned when you created the session. It will look like hpp_xGQBg0AXl3cM.

There are three statuses:

• Payment Pending: The Hosted Payments Page can accept a payment from the customer. A payment may have been attempted by the customer but not completed successfully.
• Payment Received: A payment has been received successfully using this Hosted Payments Page.
• Expired: The Hosted Payments Page has expired and can no longer be accessed.

For a full explanation of the fields, see our API reference.

json
1{
2  "id": "hpp_xGQBg0AXl3cM",
3  "status": "Payment Pending",
4  "payment_id": "undefined",
5  "amount": 200,
6  "currency": "GBP",
7  "reference": "ORD-123A",
8  "description": "Payment for Gold Necklace",
9  "expires_on": "2021-08-20T20:25:28+08:00",
10  "customer": {
11    "name": "John Smith",
12    "email": "john.smith@example.com"
13  },
14  "billing": {
15    "address": {
16      "address_line1": "123 High St.",
17      "address_line2": "Flat 456",
18      "city": "London",
19      "zip": "SW1A 1AA",
20      "country": "GB"
21    },
22    "phone": {
23      "country_code": "+44",
24      "number": "1234567890"
25    }
26  },
27  "products": [
28    {
29      "name": "Gold Necklace",
30      "quantity": 1,
31      "price": 200
32    }
33  ],
34  "_links": {
35    "self": {
36      "href": "https://api.sandbox.checkout.com/hosted-payments/hpp_xGQBg0AXl3cM"
37    },
38    "redirect": {
39      "href": "https://pay.sandbox.checkout.com/page/hpp_xGQBg0AXl3cM"
40    }
41  }
42}

Customize your Hosted Payments Page

Find out how your Hosted Payments Page can be customized.