Customize payment page

[ { "title":"Testing", "link":"https://docs.solidgate.com/payments/testing/", "text":"Simulate payments to test your integration before launching in production.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-customizable.svg" } , { "title":"Create your payment form", "link":"https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/", "text":"Understand how to integrate the payment form into your product.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-payments.svg" } , { "title":"Subscriptions", "link":"https://docs.solidgate.com/subscriptions/", "text":"Create and maintain a stable and healthy business subscription model.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-global.svg" } ]

Get in touch
Sign in
Customize payment page
Comprehensive guide for personalizing your payment page

Compared to the Guide
Understand how to integrate the payment form into your product. Payment Form , the Solidgate 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 .

Preview the Payments Page main features and customization options with an interactive demo to explore its adaptable design.
Demo Payment Page

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

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

It is important to remember that customers open the payment page on both desktop and mobile devices, and the location of information, in this case, is different.

Merchant name and logo
anchor

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

Merchants can set the public channel name, ensuring it is up to 15 characters for full display on the Back to button, and public channel logo in the Channel Settings section.

If the channel settings contain this data, both the merchant name and merchant logo appear on the payment page.

 Channel name example

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

The new logo gets updated in 10 minutes.

Currency values
anchor

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

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
anchor

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, there is also information about it depending on the scenario:

  • Presence or absence of a trial
  • Period of charges
 Order information example

Back URL
anchor

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

The typical order of actions is:

  1. Open the merchant site.
  2. Choose an item for purchase.
  3. Go to the payment page.
  4. Click on the back button or link to return to the merchant site.

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

If the merchant name exceeds 15 characters, it is displayed as Back to website.

Payment fields
anchor

These fields are required to make card payments.

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

 Payment fields example

Wallets
anchor

The Payment Page can display Apple Pay and Google Pay buttons.

The Apple Pay buttons are displayed if the payment page is opened in Safari, provided that the version of Safari being used is either up-to-date or meets the minimum version required to support pay transactions.
 Wallets display example

Alternative payments
anchor

The Payment Page serves as a unified portal that streamlines the process of online transactions by offering multiple payment methods without the need for separate integrations.

With easy integration, the platform provides a seamless transaction experience, increasing conversion rates, especially when using popular methods such as PayPal.

Supported payment methods, which are available according to customer locale, include:

 APMs example

Our payment methods are tailored to customer locales, offering region-specific options for a familiar and seamless checkout experience. Here is a breakdown of the payment methods and their availability by country code:

Alternative methods Currency code Country code
iDEAL EUR NLD
Blik PLN POL
MB WAY EUR PRT
SEPA EUR AUT, BEL, BGR, HRV, CYP, CZE, DNK, EST, FIN, FRA, DEU, GRC, HUN, IRL, ITA, LVA, LTU, LUX, MLT, NLD, POL, PRT, ROU, SVK, SVN, ESP, SWE, GBR

Terms and conditions
anchor

There is an option to add a link to your policies. If the terms and conditions are not set up, the payment page does not contain the block about them.

The link to terms and conditions can be set:

The link is attached to the checkbox.

 Terms and conditions example

Legal information
anchor

In a subscription flow, it is necessary to inform the customer that clicking the payment button implies agreement to the subscription. Legal information example
Example
By confirming your subscription, you allow merchant name to charge your card for this payment and future payments in accordance with their terms.

Language
anchor

The language of the information on the payment page is determined by:

  • Language parameter passed
  • Browser language, if no parameter

In addition, customers always have an option to switch to English.

 Language example
Danish da, Dutch nl, English en, Greek el, Finnish fi, French fr, German de, Italian it, Norwegian no, Polish pl, Portuguese pt, Romanian ro, Swedish sv, Spanish es, Ukrainian uk
Looking for help? Contact us
Stay informed with Changelog