PaymentMethods

Displays the logos of the available payment options in a store.

The PaymentMethods component displays the logos of the available payment options in a store.

Import

Import the component from @faststore/ui


_10import { PaymentMethods } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10@import '@faststore/ui/src/components/organisms/PaymentMethods/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Example

Code

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-payment-methods`
title	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Title of the payment methods section (e.g.: "Payment methods", "Accepted Cards").
aria-label	`string`	Defines a string value that labels the current element when title is not used.
flagList*	`Flag[]`	List of flags to be displayed in the payment methods section (e.g.:, visa, mastercard, etc).

Name	Type	Description	Default
icon	`{ icon: string }`	An object with the icon name to display the flag image.
alt	`string`	Description of the flag image to be also used for accessibility purposes.

Local token	Default value/Global token linked
`--fs-payment-methods-title-size`	`var(--fs-text-size-body)`
`--fs-payment-methods-title-weight`	`var(--fs-text-weight-bold)`
`--fs-payment-methods-title-line-height`	`1.25`

Local token	Default value/Global token linked
`--fs-payment-methods-flags-row-gap`	`var(--fs-spacing-1)`
`--fs-payment-methods-flags-margin-top`	`var(--fs-spacing-3)`

Local token	Default value/Global token linked
`--fs-payment-methods-flag-width`	`var(--fs-spacing-5)`
`--fs-payment-methods-flag-height`	`var(--fs-spacing-4)`
`--fs-payment-methods-flag-bkg-color`	`var(--fs-color-neutral-0)`
`--fs-payment-methods-flag-border-width`	`var(--fs-border-width)`
`--fs-payment-methods-flag-border-color`	`var(--fs-color-neutral-3)`
`--fs-payment-methods-flag-border-radius`	`var(--fs-border-radius-small)`

data-fs-payment-methods

data-fs-payment-methods-title

data-fs-payment-methods-flags

data-fs-payment-methods-flag