Customize payment page
Customize payment page
Comprehensive guide for personalizing your payment page

Page customization

Compared to the Guide
Understand how to integrate the payment form into your product.
Payment form
, the Payment page offers fewer customization options but simplifies the process. There is no need for CSS files, as all required parameters are included in the Payment page API

Customize the appearance and content of the Payment page using a dedicated object:

  • Public name
    Display the shop’s name on the Payment page by entering it in the HUB Public Information section.
  • Order title
    Specify the name of the goods or services being sold, which will be visible to customers on the Payment page.
  • Order description
    Provide a description of the order, limited to 100 characters.
  • Payment methods
    Include additional payment methods like PayPal by passing the method name in an array.
  • Button font color
    Change the Pay button’s font color by providing a HEX value.
  • Button color
    Customize the Pay button’s color using a HEX value.
  • Font name
    Select a font from Google Fonts to use on the Payment page.
  • Is cardholder visible
    Choose whether to display the cardholder field on the payment page by setting a boolean value.
  • Terms URL
    Attach the merchant’s Terms & Conditions URL to a checkbox.
  • Back URL
    Specify a URL to redirect customers who click the back button, adding a back button to the payment and status pages.

Structure of the payment page

It is important to remember that the Payment page can be opened both on the desktop and mobile, and the location of information, in this case, is different.

This is static information the merchant fills out within the HUB by channel.

Merchants have the option to set the public channel name (it is recommended to use a name with a length of up to 15 characters for displaying the full name on the Back to button) and public channel logo in the Channel Settings section.

If this data is included in the channel settings, both the merchant name and the merchant logo will be displayed on the Payment page.

placeholder

In the HUB Public Information section, you can define the Channel logo (JPEG, PNG or GIF up to 1024 kb).

The new logo will be updated in 10 minutes.

Currency values

The amount and currency of the payment are displayed in two places on the Payment page, using the currency sign for popular currencies instead of the ISO currency code.

cs_pg_1.1

Actual currency display depends on customer locale and is built on top of (Intl) standard. For example, if your customer needs to pay 100 euros, in Germany, they will see 100 € as the amount and currency, and in the United Kingdom - € 100, meeting the formats natural to their language.

Order information

The merchant should transmit the order title and description as part of the information sent when requesting the Payment page.

If the merchant uses the subscription flow, we also display information depending on the scenario:

  • presence or absence of a trial
  • period of charges
placeholder

Back URL

The Back URL is essential for improving the user experience during online payment processes, as it allows users to return to the merchant’s site from both the payment page and the status page after payment.
placeholder

The typical order of actions is:

  1. Open the merchant site
  2. Choose an item for payment
  3. Go to the payment page
  4. Click on the back button or link (back to the merchant’s site)

Also, note the maximum limit of 15 characters for “Back to {{merchant name}}”.

If the merchant name exceeds 15 characters, it will be displayed as “Back to website”.

Payment fields

The fields required to make card payments.

For card payments, we need the card number, the card’s expiration date, and the CVV. The form may contain other fields, such as the cardholder’s name, ZIP code, CURP, and others.

placeholder

Wallets

The Payment page can display Apple Pay/Google Pay buttons.
placeholder

Is displayed if:

  • the channel is allowed to accept payments through Apple Pay
  • if the merchant has not explicitly refused to display the button
  • the payment page is opened in Safari (the version of Safari being used is either up-to-date or at the minimum version required to support Apple Pay transactions)
Is displayed if the merchant has not explicitly refused to display the button.

Alternative payments

The Payment page is a single shell for different payment methods without separate integration for each one. In this way, the merchant (payer) selects the suitable payment method, performs the actions required for the chosen method, and confirms the payment.
placeholder

For example, you can boost your conversion rates, reach new customers, and triple purchase completion rates by integrating with Guide
Connect alternative payment methods to boost your checkout conversion.
PayPal
.

Terms and Conditions

There is an option to add a link to your policies. If the terms and conditions are not set up, we don’t display them.

The value of terms and conditions (link to them) can be set via:

The link will be attached to the checkbox.

placeholder
In the case of a subscription flow, we have to warn the customer that by clicking the payment button, they agree to the subscription.
placeholder
Example
By confirming your subscription, you allow the Merchant name to charge your card for this payment and future payments in accordance with their terms.

Language

The language in which the information is displayed on the Payment page is determined by:

  • language parameter passed
  • browser language, if the parameter is not passed

In addition, we always leave the user the option to switch to English.

placeholder
Languages available
PT, ES, UA, EN, RU, PL