Manage your Hosted Payments Page
Last updated: September 11, 2024
On this page, find out how to:
- Have you registered to begin using Hosted Payments Page? Contact your Solution Engineer or [email protected]. 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 fulfillment flow.
When a customer purchases something from you, you can create a Hosted Payments Page session by using the
post
/hosted-payments
endpoint and providing us with details of the purchase.To get a detailed view of all required and optional fields, see our API reference.
Note
Checkout.com does not support Hosted Payments Pages embedded within an iframe.
Note
http://localhost/ can only be used for the URL fields during testing and will not work in production.
post
https://api.checkout.com/hosted-payments
Some payment methods may require you to provide additional fields or specific values when you perform a payment request. Refer to the API reference for more details.
Payment method | Field requirements |
---|---|
Card payments | No additional requirements. |
Apple Pay | Apple Pay is processed as a card transaction. |
Google Pay | Google Pay is processed as a card transaction. |
AliPay CN |
|
AliPay HK |
|
Bancontact |
|
Dana |
|
EPS |
|
GCash |
|
iDEAL |
|
Kakao Pay |
|
Klarna |
|
KNET |
|
Multibanco |
|
Przelewy24 |
|
Sofort |
|
Touch'n Go |
|
True Money |
|
Venmo |
|
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": "[email protected]"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.
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.
1res.redirect(hostedPaymentsResponse._links.redirect.href);
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 fulfillment 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.
get
https://api.checkout.com/hosted-payments/{id}
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": "[email protected]"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": 20032}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}