Embed Theming
Embed can be customized to match your brand using the theme property. The
theme property allows you to set common styles such as the font, color and
border styles.
Overview
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.
Usage
To apply a theme, embed can be passed an Object containing Theme Options.
The theme options will override the default theme.
Options
Fonts
Fonts can be customized with a valid CSS property.
{
fonts: {
/**
* Body - Used for all text
*/
body: "google:Lato, Tahoma, Arial";
}
}
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
400, 600 and 700.
Colors
Colors are named semantically, for example primary or 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 ‘Default Card’ button at
a later stage that would be based on the danger set of colors.
{
colors: {
/**
* Text - Main body text, labels and headers
*/
text: "#0f0f0f",
/**
* Subtle Text - Hints and Smaller text, e.g. Card Expiry
*/
subtleText: "#434343",
/**
* Label Text - Labels for inputs can be a different color
*/
labelText: "#0f0f0f",
/**
* Primary - Interactive elements or Brand
*/
primary: "#006cd0",
/**
* Page - The main body/page of the Embed iFrame
*/
pageBackground: "#ffffff",
/**
* Container - Used for bounding elements, e.g. an individual payment option
*/
containerBackgroundUnchecked: "#fcfcfc",
containerBackgroundHover: "#eeeeee",
containerBackground: "#ffffff",
containerBorder: "#f2f2f2",
/**
* Input - Used for inputs
*/
inputBorder: "#b6b6b6",
inputBackground: "#ffffff",
inputText: "#0f0f0f",
inputRadioBorder: "#ddd", // defaults to containerBorder
inputRadioBorderChecked: "#ddd", // default to primary
/**
* Danger - Used for Error states or Destructive Action
*/
danger: "#d82121",
dangerBackground: "#fbf7f7",
dangerText: "#b81010"
/**
* Info - Used for information / loading states
*/
info: "#3ea2ff",
infoBackground: "#e7f2fb",
infoText: "#0367c4",
/**
* Focus - Color of the focus ring if shadows.focus is not set.
*/
focus: "#4844ff",
/**
* Badge - Color of badge background.
*/
badgeBackground: "transparent",
}
}
Borders Widths
Borders can be set using an alias of thin for a 1px border width or thick
for a 2px border width.
{
borderWidths: {
/**
* Container - A bounding layout element
*/
container: 'thin', // 'thin', 'thick' or 'none'
/**
* Input - A Form Input, e.g. Card Number
*/
input: 'thin' // 'thin' or 'thick'
}
}
Radii
Radii can be set to either none, subtle or rounded. These aliases
correspond to 0, 2px and 4px. Setting the radii to none will remove it
entirely.
{
radii: {
/**
* Container - A bounding layout element
*/
container: "subtle"; // 'subtle', 'rounded' or 'none'
/**
* Input - A Form Input, e.g. Card Number
*/
input: "subtle"; // 'subtle', 'rounded' or 'none'
}
}
Focus Ring
The focus ring is set using a CSS box-shadow instead of the default browser
focus ring. It can be overridden, but we advise at least keeping a visible focus
ring for accessibility. This will override any focus styles set elsewhere in the
theme.
{
shadows: {
/**
* Focus Ring - Surrounds an element that is currently focused
*/
focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #4844ff";
}
}