...
https://www.computop-paygate.com/payssl.aspx
Visualization
Features & Functionalities
...
The user will be automatically redirected to the specific URL of the chosen payment method (please refer to each payment method guide).
Visualization
HPP available payment methods
...
https://www.computop-paygate.com/paysdd.aspx
Visualization
Templates customization overview
...
Visualization of customization using all Custom fields
Merchant’s customization using variables
...
Configuration happens via changes in a .css-file called “overrides.css” which can be found in the “css” folder of the template. It is required that you have a basic understanding / knowledge of CSS.
Image: Default Template without any customization.
...
Possible Changes
The file “override“overrides.css” is included in the template by default and can be used to add custom CSS-changes. There are 2 ways of adding changes:
...
The following variables allow changing the appearance of text in the payment template:
Variable name | Default value | Purpose |
--font-size-base | 12px | All font- & element-sizes are derived from this value. It defines the size of regular text and scales all other elements (headlines, side-bars, inputs) proportionally. |
--font-family-headline | 'Ubuntu', monospace | The font family used for headlines (A). |
--font-family-copy | 'NotoSans', sans-serif | The font family used for all other texts. |
--text-color-base | #606060 | Default color of text. |
--text-color-link | #4b61a5 | Default color of links (B). |
...
Customize the following background colors of the layout:
CSS variable name | Default value | Purpose |
--background-page | #697272 | Sets the background-color of area A |
--background-header | #ffffff | Sets the background-color of area B |
--background-content | #eaecec | Sets the background-color of area C |
--background-cart | #f7f7f7 | Sets the background-color of area D |
...
The following customization-options can be applied to payment-forms:
Variable name | Default value | Purpose |
--input-highlight | var(--ui-color) | The border-color of a currently active text-input (A). |
--input-text | var(--ui-color) | The text-color of text-inputs (B). |
--input-background | #ffffff | The background-color of text-inputs (C). |
--submit-background | var(--ui-color) | The background-color of submit (pay) buttons (D). |
--submit-text | #ffffff | The text color of submit (pay) buttons (E). |
Other Changes
Logo Exchange (A)
...
The footer-links & copyright are part of the footer-section in the “translations.json“ file which can be found inside of the “data” folder of the template. Adjust as needed.
