PaymentMethodElementInitConfig
PaymentMethodElementInitConfig object
Configuration options for initializing the PaymentMethodElement, including appearance customization, error handling, and element reference.
| Property | Type | Required | Description |
|---|
type | string | required | Supported payment method types for payment buttons. |
ref | any | string | required | Reference to the HTML element where the payment methods selector will be mounted. |
appearance | object | optional | Appearance customization for a single payment method button. |
▶ 4 properties| Property | Type | Required | Description |
|---|
settings | object | optional | Component-level behavioural configuration that is not expressible through CSS. | ▶ 7 properties| Property | Type | Required | Description |
|---|
googlePayButtonConfig | object | optional | Options passed to Google’s own button, applied only when googlePayStyle is ‘google’. Google renders and owns this button, so these are the only customisations available — its logo and card art placement are theirs and cannot be changed, and it always fills the payment method it sits in. See https://developers.google.com/pay/api/web/guides/brand-guidelines#custom-button | ▶ 3 properties| Property | Type | Required | Description |
|---|
buttonColor | string | optional | Which of Google’s two button styles to render. ‘black’ is the dark button, ‘white’ the light one, and ‘default’ lets Google choose (currently the dark button). Google’s brand guidelines ask for whichever contrasts with the surface behind it — dark on light backgrounds, light on dark or colourful ones. Left unset, the button follows the background it is painted on. | buttonRadius | number | optional | Corner radius in pixels. Google’s brand guidelines allow the roundness to be tuned to match your other buttons, but not the button’s proportions. | buttonType | string | optional | The button’s caption. ‘plain’ is the Google Pay mark on its own with no wording; every other value pairs the mark with that call to action. Google translates the caption to the shopper’s browser language. Defaults to ‘plain’. |
| googlePayFlow | string | optional | How Google Pay opens its payment sheet. ‘handoff’ (the default) opens a gateway-hosted window that makes the call from an already-registered origin, so it works for any merchant domain at the cost of a popup and an extra click. ‘in-page’ calls Google directly from the merchant’s page — one click and no popup, but it requires that domain to be registered against the gateway’s Google Pay merchant ID, and otherwise fails with OR_BIBED_11. | googlePayStyle | string | optional | How Google Pay is presented in the payment method list. ’tile’ renders a themed tile matching the other payment methods, styled by your appearance configuration. ‘google’ renders Google’s own payment button, which takes no styling beyond Google’s supported options but is what Google’s brand guidelines require. | hideDetailedInfo | boolean | optional | Hides the info icon and popup content giving additional details about the payment method. | hideHeader | boolean | optional | Hides the payment method header text/logo. | hideLogos | boolean | optional | Hides logos displayed adjacent to the payment method header i.e. supported banks or card types. | hideSummary | boolean | optional | Hides the payment method summary text thats below the header. |
| styles | object | optional | Per-component CSS overrides keyed by selector name. | ▶ 15 properties| Property | Type | Required | Description |
|---|
PaymentMethod | Styles | optional | | PaymentMethodApplePayHeaderIcon | Styles | optional | | PaymentMethodBody | Styles | optional | | PaymentMethodCardLogoIcon | Styles | optional | | PaymentMethodGooglePayHeaderIcon | Styles | optional | | PaymentMethodHeader | Styles | optional | | PaymentMethodHovered | Styles | optional | | PaymentMethodInfoIcon | Styles | optional | | PaymentMethodMasterPassHeaderIcon | Styles | optional | | PaymentMethodMobicredHeaderIcon | Styles | optional | | PaymentMethodOttVoucherHeaderIcon | Styles | optional | | PaymentMethodOzowBankLogoIcon | Styles | optional | | PaymentMethodOzowHeaderIcon | Styles | optional | | PaymentMethodSummary | Styles | optional | | PaymentMethodZapperHeaderIcon | Styles | optional | |
| theme | "light" | "dark" | optional | Built-in theme to use as a baseline. Explicit variables, styles, and settings override theme defaults. | variables | object | optional | Global design tokens exposed as CSS custom properties on the element container. | ▶ 16 properties| Property | Type | Required | Description |
|---|
borderRadius | string | number | optional | Global corner radius applied to inputs, buttons, and cards. | boxShadow | string | optional | Default box shadow. | colorBackgroundPrimary | string | optional | Primary surface/background colour. | colorBackgroundSecondary | string | optional | Secondary surface colour used for cards and grouped areas. | colorError | string | optional | Colour applied to error states and validation messages. | colorFocused | string | optional | Colour applied to focused input borders and focus rings. | colorLabel | string | optional | Default colour for input labels. | colorOutline | string | optional | Outline/border colour for inputs. | colorPlaceholder | string | optional | Colour for input placeholder text. | colorPrimary | string | optional | Primary brand accent colour used for buttons and interactive elements. | colorSelected | string | optional | Colour applied to selected/active elements. | colorText | string | optional | Default text colour. | fontFamily | string | optional | Font stack for all text. | fontSizeBase | string | optional | Base font size. | paddingHorizontalInput | string | number | optional | Horizontal padding inside input fields. | spacingUnit | string | number | optional | Base spacing unit used for consistent margins and gaps between elements. |
|
|
onError | (message: string) => void | optional | Callback function invoked when an error occurs during payment method operations. |