Apply your own corporate identiy to the Payment Page using the Webadmin Tool or even dynamically per reqeust with the themeConfiguration parameter.

Style Editor in the Webadmin Tool

Using the `themeConfiguration` Parameter

Parameter descriptions

Custom styling of the payment page is possible by using the themeConfiguration parameter. The following configuration options are available:

Parameter	Description
brandColor	The color of your brand. Values: `<string (hex notation of a color)> \| <null>`
textColor	The color of the text in the header bar if no logo is given. Values: `'white' \| 'black'`
logoType	The header logo's display style.Values: `'circle' \| 'rectangle' \| 'none'`
logoBorderColor	Decides whether the logo shall be styled with a border around it, if the value is true the default background color is chosen, else the provided string is used as color value. Values: `<boolean> \| <string (hex notation of a color)>`
logoSrc	An SVG image (scalability) provided by the merchant. The image needs to be uploaded by using the Datatrans Web Administration Tool.
brandButton	Decides if the pay button should have the same color as the brandColor. Values: `<string (hex notation of a color)> \| <boolean>` If set to false the hex color `#01669F` will be used as a default.
initialView	Wheter the payment page shows the payment method selection as list (default) or as a grid. Values: `'list' \| 'grid'`

Lightbox Mode

Since the themeConfiguration parameter accepts a JSON object the data attribute has to look like:

data-theme-configuration='{
	"brandColor": "#006CA4",
	"textColor": "white",
	"logoType": "circle",
	"logoBorderColor": "#cccccc",
	"brandButton": true,
	"logoSrc": "merchant-logo.svg" 
}'

Style Editor in the Webadmin Tool

Using the themeConfiguration Parameter

Parameter descriptions

Lightbox Mode

Using the `themeConfiguration` Parameter