With the prebuilt Hosted Checkout solution, you can easily manage the payment methods offered to customers and customise the checkout to match your company branding.
We'll always start you off with a default set up of the checkout that allows you to take payments; but by configuring your payment methods and customising the page design you can make the most of your Hosted Checkout.
You can define what payment methods you want to enable and how they will be displayed to the end user from within the Hub. By default, Cards and Apple Pay will be enabled.
- Log into the Hub.
- Go to Settings > Hosted Checkout
- Enable the required payment methods by the tickbox.
- Configure each individual payment method and how they are displayed to users.
In the Cards Settings, you have the option to configure additional settings.
- 3-D Secure: enter a link to the contact page of your website, i.e. the contact URL. This link will be included in payment requests made from the checkout, unless a different URL is provided in the payment-links request.
- Save Cards: turn this on to ensure that customers can opt in to storing their card details. This will enable the one-click checkout flow at the customer's next purchase.
- Block Credit Cards: turn this on to block customers attempting payment with a credit card. When a customer enters a credit card number into the checkout, they will be presented with a helpful error message. This block will apply to Apple Pay and Google Pay payment attempts as well.
- Additional Fields [COMING SOON]: select from the dropdown menu which optional additional fields of information you want to include in your Hosted Checkout and capture about customers; like Email, Date of Birth, Postcode, etc.
For Apple Pay, you have the ability to define how the Apple Pay button will appear to your customers.
- Type: the text that will be displayed with the Apple Pay button i.e. Pay with Apple Pay, Checkout with Apple Pay, etc.
- Colour: the Apple Pay button colour.
Apple Pay Integration Options
Hosted Checkout offers the easiest way to offer customers the Apple Pay payment method but via a direct Apple Pay integration you can include Apple Pay earlier in the checkout journey.
Once enabled, you have the same customisation options as with Apple Pay.
- Type: the text that will be displayed with the Google Pay button i.e. Pay with Google Pay, Checkout with Google Pay, etc.
- Colour: the Google Pay button colour.
Nothing more is required to offer Pay by Bank in your checkout, simply turn the payment method on.
You can customise your Hosted Checkout page design to present your logo and adjust the colour scheme to match your branding.
- Log into the Hub
- Go to Settings > Hosted Checkout
- Click on + Customise
- Enter a Template Name
- Add custom elements, including logo, background colour and header colour
- Save the template! It will then be visible in the Customisation table.
Accepted logo size
The logo size accepted for the checkout customisation is limited to 40px height. Any logo submitted with greater height will be shrunk to 40px.
Once you've created a template, it can be set as the Default Template via the Actions options in the Customisation table.
There is no limit to the number of custom templates that you can create but the Default Template will be applied to the Checkout page unless otherwise specified.
If you require more than one custom template for different customer groups, then you can specify which template you wish to display by passing the
template_id parameter in your payment-link request and populating this field with the
template_id value generated for your desired template.
template_id is a GUID value obtained from the customisation section within the Hub.
See below example:
- In the Hub, go to Settings > Hosted Checkout
- In the Customisation table, click on the action ellipsis on the template that you want to use and select Set as Default Template
Updated 3 months ago