User Interface Configuration

You can configure the look and feel of the payment page from the UIConfiguration tab.

In order to create or edit new skins or change the merchant logo, the user needs to have assigned a role with at least the following access rights: UIConfiguration-View and UIConfiguration-Update.

75

Upload default logo

You have the possibility to upload the default logo that the customers will see on the payment page. For a new logo, click Browse, navigate to where the logo is stored on your disk, select the logo, click Open button in the File Upload modal window, then Upload button in the UIConfiguration page.

The logo displayed under Default logo section changes to the new logo.

Generate new skin

By specifying in the initial POST a value for the SkinID parameter, you have the possibility to dynamically instruct GlobalPay to display a certain skin. The skins are created in the UIConfiguration page by clicking Generate new skin button.

76

Skin editor controls

The following table describes the various options which you can use to customize the look and feel of the payment page.

Option Description Default values
Underlay iframe src An URL of a webpage which appears in the background, so you can easily match the payment page design with your online shop. http://www.youronlineshop.com
Payment page layout Defines the appearance of the payment page. You can choose from: Lightbox no mask, no shadow; Lightbox type overlay mask, Lightbox type border – No overlay mask, standalone page, compact iframe. lightbox no mask no shadow (default)
Merchant logo position Specifies the position of your logo on the payment page, left or right. Right (default)
Merchant logo max-size Specifies the max-size constraints of the logo image. No value means that the actual logo size will be displayed. 85-width x 85-height (default)
Background Defines the color of the payment page background. #FFFFFF (default)
Accents’ color Defines the color of the accents. #771705 (default)
Page title text Defines the message displayed on top of the payment page. Please select your payment method (default)
Amount font Specifies the size, font-family and color of the amount font. 30, Arial, #000000 (default)
Currency and conversion rate font Specifies the size, font-family and color of the currency and conversion rate font. 16, Arial, #000000 (default)
Conversion rate color Specifies the color of the conversion rate 15, Arial, #666666 (default)
Title, buttons font Specifies the size, font-family and color of the payment page title and buttons. 15, Arial, #666666 (default)
Product details labels color Specifies the color of the product labels: amount, description. #777777 (default)
Product description color Specifies the color of the product description. #333333 (default)
Payment method options form layout Specifies the number of columns for the payment method specific fields that need to be filled by customers. 1 column (default)
Inputs – not focused – border color Specifies the color of the inputs when they do not have the focus #D0D0D0 (default)
Inputs – focused – border color Specifies the color of the inputs when they have the focus #D0D0D0 (default)
Selectors/buttons corner roundness Specifies the roundness level for selectors and buttons. 0 (default)
Payment methods logos layout Specifies the arrangement of the logos in page. Grid layout (default)
Payment methods logo size Specifies the size of the logos. 34 (default)
Custom CSS You can copy-paste custom css code here to change other components of the payment page. Empty (default)

Lightbox no mask, no shadow layout:

77

Lightbox type overlay mask:

78

Lightbox type border – NO overlay mask:

79

Standalone page:

80

Compact iframe:

81

By pressing the Save button a new skin will be generated. You can see the id of the skin in the top-right (e.g. 98). By sending in the initial post SkinId=98, the new skin will be used for the current payment.

82

The other possible actions available on a skin are: Set as default (the skin will be used as default skin for the payments for which you do not specify a skinID), Preview, Edit, Delete.

83