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
| 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). |
Flag
| 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. |
Design Tokens
Nested Elements
Title
| 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 |
Flags
| 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) |
Flag
| 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-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) |
Customization
data-fs-payment-methods
data-fs-payment-methods-title
data-fs-payment-methods-flags
data-fs-payment-methods-flag