Migrate to the Polaris payment icon component

The Polaris payment icon component displays logos for payment methods. It replaces the previous PaymentIcon component and is available as <s-payment-icon> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris payment icon component.

Anchor to namename

The previous PaymentIcon name prop is now called type.

Anchor to Removed propertiesRemoved properties

Anchor to accessibilityVisibilityaccessibilityVisibility

The Polaris payment icon component no longer supports accessibilityVisibility directly. To control accessibility visibility, wrap the payment icon in s-box and set accessibilityVisibility on the box.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-box accessibilityVisibility="hidden">
      <s-payment-icon type="visa" accessibilityLabel="Visa" />
    </s-box>
  );
}

import {
  reactExtension,
  PaymentIcon,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <PaymentIcon
      name="visa"
      accessibilityLabel="Visa"
      accessibilityVisibility="hidden"
    />
  );
}