Configure your Checkout

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.

Configure your payment methods

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.

1. Log into the Hub.
2. Go to Settings > Hosted Checkout
3. Enable the required payment methods by the tickbox.
4. Configure each individual payment method and how they are displayed to users.

Cards

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.

Apple Pay

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.

Google Pay

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.

Pay by Bank

Nothing more is required to offer Pay by Bank in your checkout, simply turn the payment method on.

Customise your Checkout page design

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. ThenSave 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.

Setting your default template

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.

The template_id is a GUID value obtained from the customisation section within the Hub.

See below example:

{
  "transaction": {
    "order_id": "your_unique_reference_1",
     "amount": 14.99,
     "currency": "gbp"
  },
  "template_id": "92351a6c-45b1-456e-8430-0969dce843ea"
}

Update your default template

1. In the Hub, go to Settings > Hosted Checkout
2. In the Customisation table, click on the action ellipsis on the template that you want to use and select Set as Default Template

Configuring the payment submit button

The text displayed in the payment submit button can be customised to better match the transaction type. While the default will be “Pay Now”, it can be changed to Buy, Checkout, Donate, Register or Subscribe on each individual checkout page. See the submit_type parameter in the API docs.

Using the submit_type parameter will also update the text displayed in the Apple Pay and Google Pay buttons, overriding the default display option set in Hosted Checkout settings.