Embed can be customized to match your brand using the
The theme property allows you to set common styles such as the font, color and border styles.
Embed is a composition of UI components such as a Payment Header, Content and Lists. These components can change over time and so we therefore do not support direct styling of these. The following diagram shows an example of how basic theming is applied. Embed styles are derived from the theme values you provide.
To apply a theme, embed can be passed an Object containing Theme Options.
The theme options will override the default theme.
Fonts can be customized with a valid CSS property.
Using Google Fonts
Fonts prefixed with
google: are downloaded automatically from Google Fonts. This allows you to choose the closest font to your brand. We recommend choosing a font with support for the weights
Colors are named semanticly, for example
danger. This allows us to update introduce new features or UI elements without explicitly requiring you to update your theme. As an example, we may introduce a 'Remove Card' button at a later stage that would be based on the
danger set of colors.
Borders can be set using an alias of
thin for a 1px border width or
thick for a 2px border width.
Radii can be set to either
rounded. These aliases correspond to
Setting the radii to
none will remove it entirely.
The focus ring is set using a CSS
box-shadow instead of the default browser focus ring. It can be overriden, but we advise at least keeping a visible focus ring for accessibility.
This will override any focus styles set elsewhere in the theme.
We currently do not support adding your own styles directly via CSS. Using a theme allows us to roll out updates and ensure compatibility with new features.
Theming is currently supported in all modern browsers including Microsoft Edge. Some browsers like Internet Explorer 11 are not supported, and in these the default theme will be used.
Values can be a valid CSS property value. e.g.
colors.primary could be a hex, rgb or hsl. You can also have multiple shadows for a focus ring, e.g.
0 0 0 2px white, 0 0 0 4px green