Skip to content


    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.


    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

        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.

    Was this helpful?

    What was your feeling about it?