Documentation
Feedback
Guides
Storefront Development

Storefront Development
PaymentMethods

Payment Methods display 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

_10
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:

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

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

Usage

Example
Code

Payment Methods

  • Visa
  • Diners Club
  • Mastercard
  • Elo Card
  • PayPal
  • Stripe
  • GooglePay
  • ApplePay

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page