🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Payment Methods

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

Import

Import the component from @faststore/ui

import { PaymentMethods } from '@faststore/ui'

Import Styles into your FastStore project

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

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

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


Usage


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-payment-methods
titlestring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalTitle of the payment methods section (e.g.: "Payment methods", "Accepted Cards").
aria-labelstringDefines 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).

Flag

NameTypeDescriptionDefault
icon{ icon: string }An object with the icon name to display the flag image.
altstringDescription of the flag image to be also used for accessibility purposes.

Design Tokens

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-payment-methods-title-sizevar(--fs-text-size-body)
--fs-payment-methods-title-weightvar(--fs-text-weight-bold)
--fs-payment-methods-title-line-height1.25

Flags

Local tokenDefault value/Global token linked
--fs-payment-methods-flags-row-gapvar(--fs-spacing-1)
--fs-payment-methods-flags-margin-topvar(--fs-spacing-3)

Flag

Local tokenDefault value/Global token linked
--fs-payment-methods-flag-widthvar(--fs-spacing-5)
--fs-payment-methods-flag-heightvar(--fs-spacing-4)
--fs-payment-methods-flag-border-widthvar(--fs-border-width)
--fs-payment-methods-flag-border-color
var(--fs-color-neutral-3)
--fs-payment-methods-flag-border-radiusvar(--fs-border-radius-small)

Customization

data-fs-payment-methods

data-fs-payment-methods-title

data-fs-payment-methods-flags

data-fs-payment-methods-flag