Skip to main content

Theming and Styling

info

Theming and Styling configuration will be provided as part of request payload in /POST sessions

Button Theming

Typography/Font

  • Include open source font families like google fonts or custom fonts from your domain

Merchant Logo

  • Merchants have the option to include their logo by utilizing this designated field. The provided logo should reference a valid URL, as exemplified in the preceding POST example.

  • The merchant logo serves the exclusive purpose of email templates and will undergo automatic resizing to achieve a height of 32px. The width will be dynamically adjusted for optimal presentation.

/*
 * Appearance type for font and theming
 */
export type Appearance = {
  font: {
    fontSources: (CssFontSource | CustomFontSource)[];
    fontFamily: string;
  };
  palette?: {
    primary?: PaletteColors;
    secondary?: PaletteColors;
  };
  visibility?: {
    headerLogo?: boolean; // defaults to true
  };
  border?: {
    alertBoxBorderRadius?: string,

  /**
   * Apply border radius for 'apple pay' and 'google pay' buttons
   * defaults to 8px
   */
    buttonBorderRadius?: string;
  };
  height?: {
    
  /**
   * Apply button height for 'apple pay' and 'google pay' buttons
   * defaults to 48px
   * valid range: 40-55
   */
    button?: number;
};
  merchantLogo: string;
};

export type CssFontSource = {
  /**
   * A relative or absolute URL pointing to a CSS file with [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face) definitions, for example:
   *
   *     https://fonts.googleapis.com/css?family=Open+Sans
   *
   */
  CssSrc: string;
};

export type CustomFontSource = {
  /**
   * The name to give the font
   */
  family: string;

  /**
   * A valid [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) value pointing to your custom font file.
   * This is usually (though not always) a link to a file with a `.woff` , `.otf`, or `.svg` suffix.
   */
  src: string;

  /**
   * Defaults to `normal`.
   */
  style?: "normal" | "italic" | "oblique";

  /**
   * A valid [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight), as a string.
   */
  weight?: string;
};

/*
 * @docs https://mui.com/material-ui/customization/palette/#customization
 */
export type PaletteColors = {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
};
Example: customize button style
const appearance = {
  palette: {
    primary: {
      dark: "#3e561a",
      main: "#5a7c26",
      light: "#7b9651",
      contrastText: "#ffffff",
    },
    secondary: {
      dark: "#b26e59",
      main: "#ff9e80",
      light: "#ffb199",
      contrastText: "#ffffff",
    },
  },
};
Example include open source font (Dosis)
const appearance = {
  font: {
    fontFamily: "Dosis, Arial, sans-serif",
    fontSources: [
      {
        cssSrc: "https://fonts.googleapis.com/css?family=Dosis",
      },
    ],
  },
};
Example: include custom font ("Optum Sans")
const appearance = {
  font: {
    fontFamily: "'Optum Sans', Arial, sans-serif",
    fontSources: [
      {
        family: "Optum Sans",
        src: "url('https://wallet.healthsafepay.com/optum-sans.woff2')",
        style: "normal",
        weight: "700",
      },
      {
        family: "Optum Sans",
        src: "url('https://wallet.healthsafepay.com/optum-sans.woff2')",
        style: "normal",
        weight: "400",
      },
    ],
  },
};