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.Example
Code
Payment Methods
- Amex
- Visa
- Diners Club
- Mastercard
- Elo Card
- PayPal
- Pix
- Stripe
- GooglePay
- ApplePay
Usage
Import the component
_10import { PaymentMethods } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/PaymentMethods/styles.scss";
For details, see Importing FastStore UI component styles.
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-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 attributes
You can target and override
PaymentMethods styles using the following data attributes:
data-fs-payment-methodsdata-fs-payment-methods-titledata-fs-payment-methods-flagsdata-fs-payment-methods-flagProps
| 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. |