Hosted Payment Page (HPP)
Hosted Payment Page provides a fully managed and secure checkout solution, shifting the responsibility of handling sensitive payment data away from your systems. This option allows you to get up and running quickly without handling sensitive payment data directly.
Key Features
- Prebuilt, Secure Checkout Page: All payment data is collected on a PCI-compliant page.
- Custom Branding Options: Apply your logo, colors, and styling to ensure a consistent look and feel.
- Localization & Language Support: Automatically adapts to your customer’s region with multi-language and multi-currency options.
- Multiple Payment Methods: Accept credit cards, debit cards, wallets, and alternative payment methods, depending on your needs.
- Responsive Design: Optimized for desktop, tablet, and mobile devices.
Key Benefits
- Simplified PCI DSS Compliance: SAQ A only.
- Fastest path to go live: Accept online payments with minimal development.
- Secure architecture: No sensitive data on your servers, reducing risk.
- Seamless user flow: Redirection back to your website after payment completion.
- Future-proof: Always updated with the latest compliance and payment regulations.
How it works?
The Hosted Payment Page redirects customers from your checkout to a secure payment page.
Customers fill out their payment details, and once the payment is completed, they are redirected back to your website on the forward URL that you set up.
This model ensures that your environment never touches sensitive payment data, providing the highest level of security with minimal compliance effort.
Hosted Page Workflow
Steps to complete
When choosing Hosted Payment Page as your integration type, make sure to:
-
Have redirect urls set. Those urls ensure the customer is redirected accordingly to the payment result. The urls to set are:
accept_url- redirecting the customer when the payment was successfuldecline_url- redirecting the customer when the payment was declined due to various reasonspending_url- redirecting the customer when the payment request was processed but response is not yet availablecancel_url- redirecting the customer to if the payment is cancelled (eg. the customer left the checkout)
-
Configure your webhooks and have respective triggers active, at least: authorization successful, authorization declined, authorization failed, capture successful, capture request failed, capture declined
-
Set creating checkout request to our endpoint
/payment/checkout. See an example request below and refer to our API reference for more insights.
curl --request POST \
--url https://api-sandbox.norbr.io/payment/checkout \
--header 'accept: application/json' \
--header 'content-type: application/json' \
--header 'x-api-key: your_private_api_key' \
--data '
{
"operation_type": "direct_capture",
"type": "hosted_page",
"amount": 16,
"currency": "USD",
"order_merchant_id": "123445-1abc1-1111-2222-34a56bbb789ccc",
"payment_channel": "e-commerce",
"payment_method_type": "card",
"token_type": "oneshot",
"accept_url": "https://www.yourwebsite/accepted/order_merchant_id",
"decline_url": "https://www.yourwebsite/declined/order_merchant_id",
"pending_url": "https://www.yourwebsite/pending/order_merchant_id",
"cancel_url": "https://www.yourwebsite/cancel/order_merchant_id",
"exception_url": "https://www.yourwebsite/exception/order_merchant_id",
"order_description": "New customer, plan: Premium",
"device_type": "mobile",
"customer_email": "[email protected]",
"customer_ip": "123.999.111.128",
"locale": "en_US"
}
'{
"result": {
"code": "011111",
"description": "checkout created successfully"
},
"checkout": {
"decline_url": "https://www.google.com/search?q=decline",
"checkout_id": "68f5dfae5a282ea788f88469",
"exception_url": "https://www.google.com/search?q=exception",
"currency": "USD",
"operation_type": "direct_capture",
"merchant_data": [],
"payment_method_type": "card",
"locale": "en-US",
"pending_url": "https://www.google.com/search?q=pending",
"token_type": "recurring",
"hosted_page_configuration": {
"hosted_fields": {
"display_buttons": false,
"logo_version": "logo_colorbg",
"use_auto_submit": true,
"template_version": "v3",
"display_save": true,
"version": "x.x",
"display_cardholder": true
},
"show_pci_logo": true,
"logo": "",
"host": "host",
"status": "active",
"url": "securepay.test.host.com"
},
"accept_url": "https://www.google.com/search?q=accept",
"customer_ip": "134.199.110.128",
"payment_channel": "e-commerce",
"order_description": "New customer, plan: Premium",
"customer_email": "[email protected]",
"device_type": "mobile",
"cancel_url": "https://www.google.com/search?q=cancel",
"order_merchant_id": "123445-1abc1-1111-2222-34a56bbb789ccc",
"expiration_date": "Mon Oct 20 2025 07:22:26 GMT+0000 (Coordinated Universal Time)",
"payment_method_name": [],
"status": "created",
"customer_browser_info_time_zone": "",
"type": "hosted_page",
"amount": 16
},
"redirect_url": "https://securepay.test.host.com/3927f85d3d9205fb390895520ff8e9351b2a1742171ec927f3927ba0d96f191d",
"payment_methods": {
"payment_methods_saved": [
{
"token": "a1eb111d6cec775af84h909bee0ee72489ded4f8c03e840384830bfd75c038c5a",
"display_name": "Visa",
"form_fields": [
{
"enum": [],
"display_name": "card_number",
"example": "4111 xxxx xxxx xxxx",
"label": "card_number",
"data_type": "integer",
"name": "card_number"
},
{
"enum": [],
"label": "cvc",
"example": "123",
"data_type": "integer",
"display_name": "cvc",
"name": "cvc"
},
{
"enum": [],
"data_type": "date",
"label": "card_validity",
"display_name": "card_validity",
"example": "MM/YY",
"name": "card_validity"
},
{
"enum": [],
"data_type": "name",
"display_name": "cardholder_name",
"example": "Mickael Smith",
"label": "cardholder_name",
"name": "cardholder_name"
}
],
"component_type": "card",
"logo_png": "visa.png",
"logo_whitebg": "Visa_whitebg.svg",
"logo_favicon_whitebg_png": "[email protected]",
"nb_use": 1,
"logo_favicon_whitebg": "Visa_favicon_whitebg.svg",
"required_fields": [
"payment_method_name",
"token",
"amount",
"currency"
],
"logo": "visa.svg",
"countries": [
"all"
],
"logo_white": "Visa_white.svg",
"logo_whitebg_png": "[email protected]",
"logo_favicon_colorbg_png": "[email protected]",
"logo_favicon_colorbg": "Visa_favicon_colorbg.svg",
"logo_white_png": "[email protected]",
"logo_colorbg": "Visa_colorbg.svg",
"logo_colorbg_png": "[email protected]",
"id": {},
"date_last_use": "Sun Aug 31 2025 22:01:44 GMT+0000 (Coordinated Universal Time)",
"partner": "trustpay",
"payment_details": [
{
"key": "last_4_digits",
"value": "0741"
},
{
"value": "470793",
"key": "first_6_digits"
},
{
"key": "card_validity_month",
"value": "07"
},
{
"key": "card_validity_year",
"value": "28"
},
{
"value": "Thomas farrington",
"key": "card_holder_name"
}
],
"name": "visa"
},
{
"logo_colorbg": "Mastercard_colorbg.svg",
"token": "7a64e8aba0c9eeb585d7e29e089b1ba110b5a9ff77f9053ce95ea4f9153311c9",
"logo_white": "Mastercard_white.svg",
"logo_png": "mastercard.png",
"name": "mastercard",
"logo_favicon_whitebg": "Mastercard_favicon_whitebg.svg",
"partner": "finaro",
"logo_favicon_whitebg_png": "[email protected]",
"logo": "mastercard.svg",
"display_name": "Mastercard",
"logo_favicon_colorbg": "Mastercard_favicon_colorbg.svg",
"id": {},
"required_fields": [
"payment_method_name",
"token",
"amount",
"currency"
],
"logo_white_png": "[email protected]",
"countries": [
"all"
],
"form_fields": [
{
"label": "card_number",
"data_type": "integer",
"example": "5436 xxxx xxxx xxxx",
"display_name": "card_number",
"enum": [],
"name": "card_number"
},
{
"data_type": "integer",
"label": "cvc",
"display_name": "cvc",
"enum": [],
"name": "cvc",
"example": "123"
},
{
"label": "card_validity",
"example": "MM/YY",
"enum": [],
"display_name": "card_validity",
"data_type": "date",
"name": "card_validity"
},
{
"label": "cardholder_name",
"example": "Mickael Smith",
"display_name": "cardholder_name",
"data_type": "name",
"name": "cardholder_name",
"enum": []
}
],
"nb_use": 1,
"logo_whitebg_png": "[email protected]",
"component_type": "card",
"logo_favicon_colorbg_png": "[email protected]",
"logo_whitebg": "Mastercard_whitebg.svg",
"date_last_use": "Sun Aug 31 2025 05:32:14 GMT+0000 (Coordinated Universal Time)",
"payment_details": [
{
"key": "last_4_digits",
"value": "0999"
},
{
"value": "515354",
"key": "first_6_digits"
},
{
"value": "05",
"key": "card_validity_month"
},
{
"value": "28",
"key": "card_validity_year"
},
{
"value": "Thomas farrington",
"key": "card_holder_name"
}
],
"logo_colorbg_png": "[email protected]"
}
],
"payment_methods_used": [
{
"display_name": "Mastercard",
"logo_whitebg_png": "[email protected]",
"logo_favicon_whitebg": "Mastercard_favicon_whitebg.svg",
"required_fields": [
"payment_method_name",
"token",
"amount",
"currency"
],
"component_type": "card",
"logo_favicon_whitebg_png": "[email protected]",
"nb_use": 123,
"logo_colorbg": "Mastercard_colorbg.svg",
"partner": "finaro",
"logo_favicon_colorbg": "Mastercard_favicon_colorbg.svg",
"name": "mastercard",
"logo_favicon_colorbg_png": "[email protected]",
"logo_white_png": "[email protected]",
"logo_whitebg": "Mastercard_whitebg.svg",
"logo_png": "mastercard.png",
"logo": "mastercard.svg",
"logo_colorbg_png": "[email protected]",
"countries": [
"all"
],
"logo_white": "Mastercard_white.svg",
"form_fields": [
{
"data_type": "integer",
"label": "card_number",
"enum": [],
"display_name": "card_number",
"name": "card_number",
"example": "5436 xxxx xxxx xxxx"
},
{
"data_type": "integer",
"label": "cvc",
"enum": [],
"display_name": "cvc",
"name": "cvc",
"example": "123"
},
{
"name": "card_validity",
"enum": [],
"label": "card_validity",
"display_name": "card_validity",
"example": "MM/YY",
"data_type": "date"
},
{
"enum": [],
"example": "Mickael Smith",
"label": "cardholder_name",
"name": "cardholder_name",
"data_type": "name",
"display_name": "cardholder_name"
}
],
"date_last_use": "Mon Oct 20 2025 06:48:31 GMT+0000 (Coordinated Universal Time)"
},
{
"nb_use": 35,
"date_last_use": "Sat Oct 18 2025 23:30:18 GMT+0000 (Coordinated Universal Time)",
"countries": [
"all"
],
"logo_white_png": "[email protected]",
"component_type": "card",
"logo": "visa.svg",
"logo_colorbg_png": "[email protected]",
"logo_whitebg_png": "[email protected]",
"logo_white": "Visa_white.svg",
"display_name": "Visa",
"logo_whitebg": "Visa_whitebg.svg",
"form_fields": [
{
"display_name": "card_number",
"example": "4111 xxxx xxxx xxxx",
"name": "card_number",
"label": "card_number",
"data_type": "integer",
"enum": []
},
{
"example": "123",
"display_name": "cvc",
"label": "cvc",
"enum": [],
"name": "cvc",
"data_type": "integer"
},
{
"example": "MM/YY",
"data_type": "date",
"display_name": "card_validity",
"label": "card_validity",
"enum": [],
"name": "card_validity"
},
{
"name": "cardholder_name",
"data_type": "name",
"enum": [],
"label": "cardholder_name",
"example": "Mickael Smith",
"display_name": "cardholder_name"
}
],
"logo_favicon_colorbg": "Visa_favicon_colorbg.svg",
"logo_colorbg": "Visa_colorbg.svg",
"logo_png": "visa.png",
"logo_favicon_colorbg_png": "[email protected]",
"logo_favicon_whitebg_png": "[email protected]",
"name": "visa",
"logo_favicon_whitebg": "Visa_favicon_whitebg.svg",
"partner": "trustpay",
"required_fields": [
"payment_method_name",
"token",
"amount",
"currency"
]
}
],
"payment_methods_available": [
{
"logo_colorbg": "Visa_colorbg.svg",
"required_fields": [
"payment_method_name",
"token",
"amount",
"currency"
],
"logo_png": "visa.png",
"logo": "visa.svg",
"display_name": "Visa",
"logo_white_png": "[email protected]",
"logo_whitebg": "Visa_whitebg.svg",
"logo_favicon_whitebg_png": "[email protected]",
"logo_favicon_colorbg": "Visa_favicon_colorbg.svg",
"partner": "trustpay",
"component_type": "card",
"logo_colorbg_png": "[email protected]",
"logo_white": "Visa_white.svg",
"logo_favicon_colorbg_png": "[email protected]",
"logo_favicon_whitebg": "Visa_favicon_whitebg.svg",
"logo_whitebg_png": "[email protected]",
"name": "visa",
"form_fields": [
{
"example": "4111 xxxx xxxx xxxx",
"data_type": "integer",
"display_name": "card_number",
"label": "card_number",
"name": "card_number",
"enum": []
},
{
"name": "cvc",
"data_type": "integer",
"display_name": "cvc",
"enum": [],
"example": "123",
"label": "cvc"
},
{
"name": "card_validity",
"display_name": "card_validity",
"data_type": "date",
"example": "MM/YY",
"enum": [],
"label": "card_validity"
},
{
"enum": [],
"example": "Mickael Smith",
"label": "cardholder_name",
"name": "cardholder_name",
"display_name": "cardholder_name",
"data_type": "name"
}
],
"countries": [
"all"
]
},
{
"logo_png": "mastercard.png",
"form_fields": [
{
"data_type": "integer",
"label": "card_number",
"display_name": "card_number",
"enum": [],
"name": "card_number",
"example": "5436 xxxx xxxx xxxx"
},
{
"example": "123",
"data_type": "integer",
"enum": [],
"display_name": "cvc",
"label": "cvc",
"name": "cvc"
},
{
"name": "card_validity",
"data_type": "date",
"enum": [],
"example": "MM/YY",
"label": "card_validity",
"display_name": "card_validity"
},
{
"name": "cardholder_name",
"example": "Mickael Smith",
"enum": [],
"label": "cardholder_name",
"data_type": "name",
"display_name": "cardholder_name"
}
],
"display_name": "Mastercard",
"logo_favicon_colorbg_png": "[email protected]",
"logo_whitebg": "Mastercard_whitebg.svg",
"logo_white_png": "[email protected]",
"countries": [
"all"
],
"logo_favicon_whitebg": "Mastercard_favicon_whitebg.svg",
"logo_colorbg_png": "[email protected]",
"logo": "mastercard.svg",
"logo_white": "Mastercard_white.svg",
"partner": "finaro",
"logo_colorbg": "Mastercard_colorbg.svg",
"logo_favicon_whitebg_png": "[email protected]",
"name": "mastercard",
"required_fields": [
"payment_method_name",
"token",
"amount",
"currency"
],
"logo_favicon_colorbg": "Mastercard_favicon_colorbg.svg",
"component_type": "card",
"logo_whitebg_png": "[email protected]"
},
{
"logo": "maestro.svg",
"logo_favicon_whitebg": "Maestro_favicon_whitebg.svg",
"required_fields": [
"payment_method_name",
"token",
"amount",
"currency"
],
"logo_favicon_colorbg_png": "[email protected]",
"logo_whitebg": "Maestro_whitebg.svg",
"logo_png": "maestro.png",
"logo_favicon_colorbg": "Maestro_favicon_colorbg.svg",
"name": "maestro",
"component_type": "card",
"partner": "trustpay",
"form_fields": [
{
"example": "5600 xxxx xxxx xxxx xxx",
"display_name": "card_number",
"enum": [],
"data_type": "integer",
"name": "card_number",
"label": "card_number"
},
{
"name": "cvc",
"example": "123",
"enum": [],
"data_type": "integer",
"display_name": "cvc",
"label": "cvc"
},
{
"enum": [],
"display_name": "card_validity",
"example": "MM/YY",
"data_type": "date",
"name": "card_validity",
"label": "card_validity"
},
{
"display_name": "cardholder_name",
"name": "cardholder_name",
"example": "Mickael Smith",
"label": "cardholder_name",
"data_type": "name",
"enum": []
}
],
"display_name": "Maestro",
"logo_whitebg_png": "[email protected]",
"logo_white_png": "[email protected]",
"logo_white": "Maestro_white.svg",
"logo_favicon_whitebg_png": "[email protected]",
"countries": [
"all"
],
"logo_colorbg": "Maestro_colorbg.svg",
"logo_colorbg_png": "[email protected]"
}
]
}
}HPP Example
Below you can see an example of the hosted page in its default look. You can see available payment methods that your customer can choose. These payment methods correspond with your active payment methods.
Hosted Payment Page example: default look
HPP Activation & Customization
For your HPP, you can either decide to go with the default look that you can see on the example above, you can customize some main parts of it, or you can fully customize it.
How to activate
-
Log into your account.
-
Navigate to API & Notifications in the Integration section on the left.
-
If you have more than 1 merchant account, select the merchant account to make adjustments for.
-
Go to Hosted Page - Settings.
-
Fill in: Host and URL - we will provide them.
-
Decide if you want certain things being displayed: PCI logo, pay button per payment type etc.
-
Set status to active.
How to customize
-
Log into your account.
-
Navigate to API & Notifications in the Integration section on the left.
-
If you have more than 1 merchant account, select the merchant account to make adjustments for.
-
Go to Hosted Page and:
- Settings to customize - it is also where you activate your HPP.
- Customization to fully customize the look by uploading your CSS file
In Settings you can customize: your logo, primary color, PCI button displayed or not and certain fields being displayed or not.
In Customization you can upload your CSS file to fully customize the look.
When creating a custom CSS file to upload, please do not use your generic class selectors. Reach out to Support to receive a template with our respective class selectors.
Please note that even when using custom CSS, the functional adjustments from the Settings setion apply and you still need to activate the HPP.
Prior Testing
Once you have decided to use HPP as your integration, you can start testing. Before that, however, please make sure to go over out Getting Started section where you will get to know:
- Where to get your API keys
- How to set up your webhooks
- Return codes and their meaning
- You will go over our Go-live checklist
Testing
Please visit our Testing section - Hosted Payment Page Integration to be guided through your first test payment. In this section you will find a step by step guide to completing you first transaction.
Updated 11 days ago
What’s Next