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 direct styling of these is not supported. The following diagram shows an example of how basic theming is applied. Embed styles are derived from the theme values you provide.

When customizing the visual appearance using theming options, please ensure your design meets accessibility standards set by the European Accessibility Act (EAA). Make sure your color choices have enough contrast and your text is easy to read for all users.

Usage

To apply a theme, embed can be passed an Object containing Theme Options. The theme options override the default theme.

<Embed
  currency="AUD"
  amount="2300"
  theme={{
    colors: {
      primary: "green",
      text: "black",
    },
    borderWidths: {
      input: "thick",
    },
    radii: {
      input: "none",
    },
  }}
/>

setup({
  gr4vyId: "example",
  element: ".container",
  amount: 1299,
  country='AU'
  currency: "AUD",
  token: token,
  theme: {
    colors: {
      primary: "green",
      text: "black",
    },
    borderWidths: {
      input: "thick",
    },
    radii: {
      input: "none",
    },
  }
});
/>

Options

Fonts

Fonts can be customized with a valid CSS property.

{
  fonts: {
    /**
     * Body - Used for all text
     */
    body: "google:Lato, Tahoma, Arial";
  }
}

Using Google FontsFonts 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 new features or UI elements to be introduced without explicitly requiring you to update your theme. As an example, a ‘Default Card’ button may be introduced 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, for example 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, for example 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, for example 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 removes it entirely.

{
  radii: {
    /**
     * Container - A bounding layout element
     */
    container: "subtle"; // 'subtle', 'rounded' or 'none'
    /**
     * Input - A Form Input, for example 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 keeping a visible focus ring for accessibility is advised. This overrides 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";
  }
}

FAQ

How do I load my own CSS files?

Adding your own styles directly via CSS is currently not supported. Using a theme allows updates to be rolled out and ensures compatibility with new features.

What browsers are supported?

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 is used.

What values can be set?

Values can be a valid CSS property value. for example colors.primary could be a hex, RGB or HSL. You can also have multiple shadows for a focus ring, for example 0 0 0 2px white, 0 0 0 4px green

​Overview

​Usage

​Options

​Fonts

​Colors

​Borders Widths

​Radii

​Focus Ring

​FAQ

Overview

Usage

Options

Fonts

Colors

Borders Widths

Radii

Focus Ring

FAQ