Options
All
  • Public
  • Public/Protected
  • All
Menu

Namespace PaymentSheet

Index

Interfaces

Type aliases

Type aliases

AppearanceParams

AppearanceParams: RecursivePartial<{ colors: GlobalColorConfig | { dark: GlobalColorConfig; light: GlobalColorConfig }; font: FontConfig; primaryButton: PrimaryButtonConfig; shapes: { borderRadius: number; borderWidth: number; shadow: ShadowConfig } }>

Used to customize the appearance of your PaymentSheet

FontConfig

FontConfig: { family: string; scale: number }

Type declaration

  • family: string

    The font used for regular text. PaymentSheet will attempt to use medium and bold versions of this font if they exist.

    On iOS, this should be the "PostScript name" found in Font Book after installing the font. On Android, this should be the name of the font file (containing only lowercase alphanumeric characters) in android/app/src/main/res/font

    default

    The OS's system font

  • scale: number

    The scale factor for all fonts in your PaymentSheet. This value is required to be greater than 0. Font sizes are multiplied by this value before being displayed. For example, setting this to 1.2 increases the size of all text by 20%.

    default

    1.0

GlobalColorConfig

GlobalColorConfig: { background: string; componentBackground: string; componentBorder: string; componentDivider: string; componentText: string; error: string; icon: string; placeholderText: string; primary: string; primaryText: string; secondaryText: string }

Type declaration

  • background: string

    The color used for the background of your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System background color on iOS, and "#ffffff" (light) / "#2e2e2e" (dark) on Android.

  • componentBackground: string

    The color used for the background of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System background color (light) / System secondary background color (dark) on iOS, and "#ffffff" (light) / "#a9a9a9" (dark) on Android.

  • componentBorder: string

    The color used for the external border of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.

  • componentDivider: string

    The color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.

  • componentText: string

    The color of the input text in your PaymentSheet components, such as the user's card number or zip code, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    "#000000"

  • error: string

    The color used to indicate errors or destructive actions in your Payment Sheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System red color on iOS, and "#ff0000" (light) / "#ff0000" (dark) on Android.

  • icon: string

    The color used for icons in your Payment Sheet, such as the close or back icons, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System seconday label color on iOS, and "#99000000" (light) / "#ffffff" (dark) on Android.

  • placeholderText: string

    The color of the placeholder text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System label color on iOS, and "#99000000" (light) / "#99ffffff" (dark) on Android.

  • primary: string

    A primary color used throughout your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System blue color on iOS, and "#007AFF" (light) / "#0074D4" (dark) on Android.

  • primaryText: string

    The color of the header text in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.

  • secondaryText: string

    The color of the label text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System seconday label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.

PrimaryButtonColorConfig

PrimaryButtonColorConfig: { background: string; border: string; text: string }

Type declaration

  • background: string

    The background color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The root appearance.colors.primary

  • border: string

    The border color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    The System quaternary label on iOS, transparent on Android.

  • text: string

    The color of the text for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.

    default

    White or black, depending on the color of the button.

PrimaryButtonConfig

PrimaryButtonConfig: { colors: PrimaryButtonColorConfig | { dark: PrimaryButtonColorConfig; light: PrimaryButtonColorConfig }; font: Pick<FontConfig, "family">; shapes: { borderRadius: number; borderWidth: number; shadow: ShadowConfig } }

Type declaration

  • colors: PrimaryButtonColorConfig | { dark: PrimaryButtonColorConfig; light: PrimaryButtonColorConfig }

    The colors used specifically for the primary button. Provide either a base config, or both light and dark configs, which will be useed based on whether the user is in Light or Dark mode.

  • font: Pick<FontConfig, "family">

    The font family used specifically for the primary button.

    default

    The root appearance.font.family

  • shapes: { borderRadius: number; borderWidth: number; shadow: ShadowConfig }

    Describes the border and shadow of the primary button.

    • borderRadius: number

      The border radius used for the primary button in your PaymentSheet

      default

      The root appearance.shapes.borderRadius

    • borderWidth: number

      The border width used for the primary button in your PaymentSheet

      default

      The root appearance.shapes.borderWidth

    • shadow: ShadowConfig

      iOS only. The shadow used for the primary button in your PaymentSheet

      default

      The root appearance.shapes.shadow

SetupParams

SetupParams: ClientSecretParams & GooglePayParams & ApplePayParams & { allowsDelayedPaymentMethods?: boolean; customFlow?: boolean; customerEphemeralKeySecret?: string; customerId?: string; defaultBillingDetails?: BillingDetails; merchantDisplayName?: string; returnURL?: string; style?: "alwaysLight" | "alwaysDark" | "automatic" } & { appearance?: AppearanceParams }

ShadowConfig

ShadowConfig: { blurRadius: number; color: string; offset: { x: number; y: number }; opacity: number }

Type declaration

  • blurRadius: number

    The blur radius of the shadow.

    default

    4

  • color: string

    The color of the shadow.

    default

    "#000000"

  • offset: { x: number; y: number }

    The positioning of the shadow relative to the component. For example, a negative x and y will result in a shadow placed below and to the left of the component.

    default

    {x: 0, y: 2}

    • x: number
    • y: number
  • opacity: number

    The alpha or opacity of the shadow.

    default

    0.05

Generated using TypeDoc