Optional configurations

Features that can be configured per merchant needs.

If you want to align our embedded checkout with your website look, it is possible by setting up the colours and radius for various iFrame elements using CSS styling options that we offer.

Below you will find a list of parameters that are available for customisation:

1. Font colour for all the texts
2. Background colour for the whole drop-in
3. Font colour for texts in input fields
4. Border and background colour, radius for input fields
5. Font colour for texts on pay button
6. Border and background colour, radius for pay button
7. Font colour for links
8. Colour for icons (tooltip, icons in inputs)

When using any of the above, please keep in mind that our terms and conditions and QR code components must be visible to the user. The contrast between the background and text colour needs to be high enough to keep both components explicit, so that the user does not have any issues with seeing them.

autoHeight: boolean

Default value: true

The component always occupies the full available width and adapts the layout to provide the best experience depending on the available space.

The height of the payment component content varies (it depends i.e. on the number of banks available in the country). By default, the payment component will adjust its height to fit the iFrame content height. It prevents displaying scrollbars, which is a more user friendly solution, but this feature can be disabled, if needed.

Possible configuration: enabled/disabled

• When enabled (true):

The height of the component will change automatically, depending on the content of the iFrame.

• When disabled (false):

The height of the component is restricted by the height of the wrapper, heightChange event can be used to implement the size adjustment.

displayPayButton: boolean

Default value: true

Possible configuration: enabled/disabled

• When enabled (true):

The pay button is visible inside the iFrame and its state is controlled by a Payment Component.

• When disabled (false):

The pay button is hidden inside the iFrame. In this case, the merchant should use their own pay button which should be triggered by calling paymentContainer.checkout().