Hosted payment page
The Hosted Payment Page (HPP) integration method provides web developers a quick integration to the payment gateway providing functionality for processing online card payments from a merchant website. The HPP appearance can be easily customised to match your website using options in the payment gateway portal.
The HPP features include:
- Ability to store cards (tokenise)
- Present stored cards to shoppers for a faster payment process
- Optimisation for mobile devices as standard
- Can be used in an iframe as well as a full-page redirect
- 3D Secure processing
How it works
- Shopper completes the checkout process on your website and clicks ‘Pay’
- Shopper is redirected the hosted payment page where they enter and submit card details
- CashFlows process the payment and redirect to the shopper back to your website
- You update your customer’s order depending on the payment status (successful/failed)
Refunds can be performed either manually in the gateway portal or programmatically if using the gateway API.
Hosted Payment Page example
Basic hosted payment page branded as CashFlows:
Payment processing integration
To process a payment, the first step is to create a payment job, this is an API message containing at least:
- Payment amount
- Locale (e.g. en-GB)
It is recommended that more than the mandatory fields are supplied in the payment job to help you track payments, consider including:
- Order reference (generated by you)
- Customer name
- Customer email
If you wish to include more information the API has fields for many more items including billing/shipping details and order line details.
To use the API you will need to retrieve credentials from the portal, the API key (password) and Configuration ID can be found in the Configuration section of the Portal.
The API response will provide a redirect link where you should redirect the shopper. The shopper will be presented with the payment page where they enter their card details and submit the payment, if 3D Secure is enabled the payment page will redirect them to the bank 3D secure page before submitting the payment.
Once the payment has been processed, the shopper is redirected back to your website where you can continue the processing of their order.
The documentation for the API is in the Developer Portal:
Hosted Payment Page Configuration
Use the gateway portal options to customise the appearance of the hosted payment page and set the URLs in your website where the shopper will be redirect after the payment has completed, URL values can be entered for:
- Successful payment
- Failed Payment
- Cancelled Payment (by the shopper)
If the same URL is specified in all sections, you can use a Retrieve Payment Job API call to get the payment status to enable you to update your systems with the payment status.
The configuration section also has options to customise the appearance of the hosted payment page and to enter a webhook for updating the payment status in your system.