Styling
You can style the payment page by either manually writing a CSS directly in our Merchant Center or by uploading an own CSS that overrides the default styling of the payment page.
Overview
The CSS can be written/uploaded in the Merchant Center -> Settings -> Custom Styles -> Create custom styles.
Once the CSS is uploaded, a styleID will be generated which needs to be included in the transaction request in the parameter customStyleId.
Below you will find examples of the CSS that by default are used for our different solutions.
Inline widget and Widget as a Bridge
To apply changes to the whole widget the .inline-Container object has to be modified.
Inline container
.inline-container{ background: #f5f5f5; border: none; width: 100%;
In order to adjust individual sections all parts of the widget can be directly accessed, as shown below:
widget part
.inline-container .form-group .cc-image-inline { margin-top: -37px; margin-right: 10px; }
Model widget
The model widget has a different approach when it comes to styling as it only supports a light or dark styling.
The styling for this widget is managed with the parameter optionalParameters.theme which can have the value "light" or “dark”.
There is no styling possible via CSS.