Skip to main content

Payment icon

The payment icon component displays icons representing payment methods. Use payment icon to visually communicate available or saved payment options so customers can quickly identify their payment instruments.

Payment icons render branded logos for common payment methods like Visa, Mastercard, and PayPal, maintaining consistent sizing and styling across different payment providers.

Support
Targets (24)

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 Display payment iconsDisplay payment icons

Show available payment method icons in a row. This example displays icons for common payment providers using an inline stack layout.

Display payment icons

A row of payment method icons including Visa, Mastercard, and PayPal.

html

<s-stack direction="inline" gap="base">
<s-payment-icon type="visa" />
<s-payment-icon type="mastercard" />
<s-payment-icon type="amex" />
<s-payment-icon type="paypal" />
<s-payment-icon type="apple-pay" />
<s-payment-icon type="shop-pay" />
</s-stack>

Anchor to Show a saved cardShow a saved card

Pair a payment icon with card details for quick identification. This example displays a Visa icon next to the last four digits of a saved card.

html

<s-stack direction="inline" gap="small" alignItems="center">
<s-payment-icon type="visa" />
<s-text>Visa ending in 4242</s-text>
</s-stack>

Anchor to Display order payment methodDisplay order payment method

Show the payment method used for an order within a section. This example combines a payment icon with card number and expiry details.

html

<s-section>
<s-heading>Payment method</s-heading>
<s-stack gap="base">
<s-stack direction="inline" gap="small" alignItems="center">
<s-payment-icon type="mastercard" />
<s-stack gap="small-400">
<s-text type="strong">Mastercard ending in 5678</s-text>
<s-text color="subdued">Expires 12/2026</s-text>
</s-stack>
</s-stack>
</s-stack>
</s-section>

Anchor to List saved payment methodsList saved payment methods

Display multiple saved payment methods in a vertical list. This example shows cards and wallets with their identifying details alongside the payment icon.

html

<s-stack gap="base">
<s-stack direction="inline" gap="small" alignItems="center">
<s-payment-icon type="visa" />
<s-text>Visa ending in 4242</s-text>
</s-stack>
<s-stack direction="inline" gap="small" alignItems="center">
<s-payment-icon type="mastercard" />
<s-text>Mastercard ending in 5678</s-text>
</s-stack>
<s-stack direction="inline" gap="small" alignItems="center">
<s-payment-icon type="paypal" />
<s-text>PayPal — customer@example.com</s-text>
</s-stack>
</s-stack>

Anchor to Best practicesBest practices

  • Maintain the interior appearance of the icon: The branded portion of the payment icon meets the brand guidelines of the payment provider. Don't alter or overlay the icon content.
  • Maintain the border property of the icon: The border is designed to adapt to merchant branding and ensures a consistent appearance across the customer experience.
  • Use consistent sizing: The icon size is designed to display consistently across customer account pages. Avoid overriding the default dimensions.
  • Pair with identifying text: Display the payment method name or last four digits alongside the icon so customers can distinguish between multiple saved payment methods.
Was this page helpful?