Skip to content

Colour scheme

Helena Vitásková edited this page Oct 18, 2022 · 2 revisions

The gateway allows you further personalization by setting a colour scheme, which changes colours of several elements to better match your branding. You will need to choose six colours and pay attention to dependencies among the colours that slightly limit your options.

Colour #1 = Merchant details text and cancel button background text

Colour #2 = Merchant column background / Cart background on the mobile

Colour #3 = Line dividing the items in the cart

Colour #4 = Total amount ribbon colour

Colour #5 = Arrow opening / closing the cart on the mobile

Colour #6 = Transaction cancel button background

Please note the following dependencies:

  1. Please always test your schemes on a desktop as well as smartphone. The responsiveness solution uses colours differently (see e.g. the next point)

  2. Colours #4 and #5 can not be identical or similar to ensure visibility of the arrow button that opens/closes the cart on mobile. We recommend using the same colour for #5 and #6.

  3. The total amount text is always white. Use a contrasting colour #4 for the ribbon. The total amount is visually the most important information you want to show the customer.

  4. Colour #6 is the cancel button background, please use a light colour to ensure readability of the text, which inherits the colour #1.

  5. Please choose the text colour #1 in a way that is visible on the white background of the cart on the desktop, as well as on the #2 background that the mobile cart is using.

  6. Combine the text colour (#1) and background colour (#2) in a contrasting way to make the text stand out. Please note that the colour #1 sets also the text colour in the basket, which has always a white background on desktop, but has background colour #2 on mobile.

  7. Combine the background colour (#2) and the cancel button colour (#6) to make sure the cancel button is visible.

Guide for upload and activation of colour scheme in the integration environment

We strongly recommend that you test the logo in the integration environment (called on https://iapi.iplatebnibrana.csob.cz) and fine-tune e.g. the size and position of the logo. You can try multiple strategies and select the best option for you. Logos are not subject to approval in the integration environment - therefore you can iterate fast. Please do not forget to test on desktop as well as on a smartphone.

  1. Log into the ČSOB POS Merchant - Integration environment.
  2. Set all six colours and save the scheme. The system will automatically name the scheme (assigns a version number).
  3. You will see your scheme in the list, including a colour preview.
  4. Activate the scheme (it will not be shown on the gateway unless you activate it).
  5. The scheme will be shown on the gateway page within 5 minutes from activation in step 4.

Guide for upload, approval and activation of colour scheme in the production environment

  1. Log into the ČSOB POS Merchant.
  2. Set all six colours and save the scheme. The system will automatically name the scheme (assigns a version number).
  3. You will see your scheme in the list, including a colour preview.
  4. Please wait for scheme approval.
  5. Activate the scheme (it will not be shown on the gateway unless you activate it).
  6. The scheme will be shown on the gateway page within 5 minutes from activation in step 5.

Colour scheme approval

All colour schemes for the production system are subject to approval by the bank. We will reject mainly those schemes that do not ensure sufficient contrast of the text on the background, mainly on the cancel button and merchant information.

Multibranding

Shops selling under multiple brands (the seller being one entity) can use the multibranding feature of the gateway. Starting with eAPI 1.6, you can set the colour scheme in the payment/init call (using the parameter colorSchemeVersion). Your logo can be set in the same way (parameter logoVersion). Please note you always need to use approved versions. The merchant can thus have several logos and colour schemes approved, while by default (when calling without specifying the required logo version or colour scheme) the one in the ČSOB POS Merchant system marked as "active" will be used. If a logo or colour scheme is requested in the transaction call that is in the "approved" state, it will be displayed to the client at the payment gateway. If a logo or colour scheme that is not approved is called, the client at the payment gateway will see a logo or colour scheme that is "active".

Clone this wiki locally