Skip to main content

Payment icon

The payment icon component renders recognized payment brand marks for checkout. Use payment icons to show accepted methods, saved cards, and regional payment options.

Payment icons support the type property for major brands and accessibilityLabel for screen readers. For symbolic UI cues that aren't payment brands, use icon instead.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the payment icon component.

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the payment icon for accessibility. When set, it will be announced to users using assistive technologies such as screen readers, providing context about which payment method the icon represents.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to type
type
|
Default: ''

The payment method to display. Specify a payment method name from the available set (for example, 'visa', 'mastercard', or 'paypal'), or use an empty string to show no icon.

Anchor to ExamplesExamples

Anchor to List accepted payment method logosList accepted payment method logos

List recognized payment method logos in one row. This example renders s-payment-icon elements for PayPal, Apple Pay, Mastercard, Shop Pay, Visa, Amex, and Klarna using the type property.

List accepted payment method logos

A rendered example of the payment-icon component

html

<s-payment-icon type="paypal" />
<s-payment-icon type="apple-pay" />
<s-payment-icon type="mastercard" />
<s-payment-icon type="shop-pay" />
<s-payment-icon type="visa" />
<s-payment-icon type="amex" />
<s-payment-icon type="klarna" />

Anchor to Label payment icons for screen readersLabel payment icons for screen readers

Provide custom accessible names for payment method icons. This example uses accessibilityLabel to supply localized or descriptive names for screen readers when the default icon label isn't sufficient.

html

<s-payment-icon type="ideal" accessibilityLabel="iDEAL bank transfer"></s-payment-icon>
<s-payment-icon type="bancontact" accessibilityLabel="Bancontact"></s-payment-icon>

Anchor to Show a compact row of card brand iconsShow a compact row of card brand icons

List card brand icons in a tight horizontal layout. This example configures an s-stack with direction="inline" and gap="small-400" to render Visa, Mastercard, Amex, and Shop Pay icons side by side.

html

<s-stack direction="inline" gap="small-400">
<s-payment-icon type="visa"></s-payment-icon>
<s-payment-icon type="mastercard"></s-payment-icon>
<s-payment-icon type="amex"></s-payment-icon>
<s-payment-icon type="shop-pay"></s-payment-icon>
</s-stack>

Anchor to Best practicesBest practices

  • Add accessibility labels: Use the accessibilityLabel property so screen readers can announce icons correctly. Keep the text brief and avoid repeating surrounding copy.
  • Group icons in a row: Use s-stack with direction=”inline” for a clean horizontal layout of multiple payment icons and limit the row to 6-8 icons to avoid an overwhelming layout.
Was this page helpful?