Skip to main content

Custom Checkout Theme

Customize the appearance of your Dintero Checkout.

A theme configuration can be added either to a payment session, or to a payment profile.

Example

Custom theme configuration:

{
"backdrop": "#fd79a8",
"primary": "#e84393",
"text": "#333333",
"error": "#f39c12",
"warning": "#c0392b",
"font-family": "Futura, \"Century Gothic\", CenturyGothic, sans-serif"
}

Results in a checkout session that looks like this: Themed checkout example

Colors

Supported color formats are

  • hex: #ff0000
  • rgb: rgb(255,0,0)
  • rgba: rgba(255,0,0,0.5

A custom color can be specified for these entities

  • backdrop: Color on backdrop shown in redirect desktop mode
  • primary: Primary color used on pay button and other buttons.
  • text: Default text color.
  • warning: Color used for warnings.
  • error: Color used for errors.

Fonts

Specify your own custom font stack with the font-family property.

API documentation

For more details se our API specification: