WebElementGroup Options

Parameters

Parameter	Required/Optional	Type	Description
options	optional	object	Initialization Options

options

Parameter	Required/Optional	Type	Description
mode	required	string	Options are `"payment"` or `"setup"`.
currency	required	string	The three-letter ISO currency code in lowercase. E.g. `"usd"`.
amount	conditionally required - required when `mode` is `"payment"`	decimal	This amount is shown in Apple Pay and Google Pay Payment Sheets when enabling digital wallets.
setupFutureUsage	optional	string	Options are `"on_session"` or`"off_session"`. Indicates that the payment details will be saved for later use. `"on_session"`: The saved payment details will be used when the customer is present on the checkout page. `"off_session"`: The saved payment details will be used when the customer may or may not be present on the checkout page.
paymentMethodTypes	optional	array	Payment methods to be shown. Options for the array are: `"card"` and `"us_bank_account"`. If not provided or empty, it defaults to `["card","us_bank_account"]`.
fonts	optional	object	Fonts to be shown.
appearance	optional	object	Object to specify colors, fonts, borders, padding, and more.

fonts.cssFontSource

Parameter	Required/Optional	Type	Description
src	required	string	A relative or absolute URL pointing to a CSS file with @font-face definitions.
family	required	string	The name of the font.

fonts.customFontSource

Parameter	Required/Optional	Type	Description
src	required	string	A valid src value pointing to your font file. This could be a link to a file with a .wof, .otf, or .svg suffix.
family	required	string	The name of the font.
display	optional	string	A valid font-display value.
style	optional	string	One of `normal`, `italic`, `oblique`. Defaults to `normal`.
unicodeRange	optional	string	A valid unicode-range value.
weight	optional	string	A valid font-weight.

appearance

Parameter	Required/Optional	Type	Description
labels	optional	string	Labels can be set to either `"above"` or `"floating"`: `"above"`: Displays labels above the form fields. `"floating"`: Displays labels within the form fields, floating above the input when it is focused or filled.
variables	optional	object	Variables to customize the appearance of the components.

appearance.variables

Commonly used variables

Variable	Description
`gtrColorPrimary`	This variable sets the primary border color for UI elements when focused, as well as the color of scrollbars. e.g., Input focus, select focus, and select dropdown scrollbar color. Variables that use this as their default value: `gtrNavColorBorderActive` `gtrNavBorderRightActive` `gtrNavBorderLeftActive` `gtrNavBorderTopActive` `gtrNavBorderBottomActive` `gtrNavBorderBottomActive`
`gtrColorBackground`	This variable sets the background color for input and select elements. Variables that use this as their default value: `gtrNavColorBackgroundActive` `gtrNavColorBackground`
`gtrColorText`	This variable sets the color for text fields in input and select elements, as well as the chevron icon color in select boxes. It also defines the color for the terms area and text inside Google and Apple buttons. By default, it also controls the color of icons. Variables that use this as their default value: `gtrIconChevronDownColor` `gtrIconChevronDownHoverColor`
`gtrColorDanger`	This variable sets the color for validation error messages in forms. It also changes the color of the inner input card icons when there is an error in the field.
`gtrColorTextPlaceholder`	This variable sets the placeholder colors for all elements in the payment SDK. It also applies the same color to placeholder icons.
`gtrContainerBackgroundColor`	This variable sets the background color of the iframe container.
`gtrBorderRight`	This variable sets the right border for form elements, excluding navigation and accordion elements. It also defines the right border of the accordion's outer border.
`gtrBorderLeft`	This variable sets the left border for form elements, excluding navigation and accordion elements. It also defines the left border of the accordion’s outer border.
`gtrBorderTop`	This variable sets the top border for all form elements, except for navigation (nav) and accordion components. For the accordion, it specifically defines the outer top border.
`gtrBorderBottom`	This variable sets the bottom border for all form elements, except for navigation (nav) and accordion components. For the accordion, it specifically defines the outer bottom border.
`gtrBorderTopLeftRadius`	This variable sets the top-left border radius for form elements like input and select.
`gtrBorderTopRightRadius`	This variable sets the top-right border radius for form elements like input and select.
`gtrBorderBottomRightRadius`	This variable sets the bottom-right border radius for form elements like input and select.
`gtrBorderBottomLeftRadius`	This variable sets the bottom-left border radius for form elements like input and select.
`gtrNavBorderTopLeftRadius`	This variable defines the top-left border radius for the navbar and accordion components.
`gtrNavBorderTopRightRadius`	This variable defines the top-right border radius for the navbar and accordion components.
`gtrNavBorderBottomRightRadius`	This variable defines the bottom-right border radius for the navbar and accordion components.
`gtrNavBorderBottomLeftRadius`	This variable defines the bottom-left border radius for the navbar and accordion components.
`gtrNavLinkBorderTop`	This variable sets the top border for navbar links, using gtrBorderWidth and gtrBorderColor as default settings to define the gtrNavLinkBorderTop.
`gtrNavLinkBorderRight`	This variable sets the right border for navbar links, using gtrBorderWidth and gtrBorderColor as default settings to define the gtrNavLinkBorderRight.
`gtrNavLinkBorderBottom`	This variable sets the bottom border for navbar links, using gtrBorderWidth and gtrBorderColor as default settings to define the gtrNavLinkBorderBottom.
`gtrNavLinkBorderLeft`	This variable sets the left border for navbar links, using gtrBorderWidth and gtrBorderColor as default settings to define the gtrNavLinkBorderLeft.
`gtrNavColorBorderActive`	This variable is used in the navbar to set the border color for the active state. By default, it uses the value from the gtrColorPrimary variable.