AppPaymentIcon

Átomos

Abrir no Storybook

Ícone da bandeira de um cartão de pagamento (Visa, Mastercard, Amex, Diners, Discover).

Quando usar: indicar bandeiras aceitas ou a bandeira detectada em um formulário de pagamento.

Quando não usar: ícones de interface genéricos (use os de Foundations/Ícones); métodos de pagamento sem bandeira, como Pix ou boleto.

Importar

import { AppPaymentIcon } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppPaymentIcon.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppPaymentIcon.css';

Exemplos

Default

Exemplo: AppPaymentIcon, Default

const Default = () => <AppPaymentIcon method="visa" />;

Mastercard

Exemplo: AppPaymentIcon, Mastercard

const Mastercard = () => <AppPaymentIcon method="mastercard" />;

Custom Label

Exemplo: AppPaymentIcon, Custom Label

const CustomLabel = () => <AppPaymentIcon method="amex" label="Cartão American Express aceito" />;

All Methods

Exemplo: AppPaymentIcon, All Methods

const AllMethods = () => (
  <div style={{ display: 'flex', gap: 12 }}>
    {methods.map((method) => <AppPaymentIcon key={method} method={method} />)}
  </div>
);

Sizes

Exemplo: AppPaymentIcon, Sizes

const Sizes = () => (
  <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
    {(['sm', 'md', 'lg'] as const).map((size) => <AppPaymentIcon key={size} method="mastercard" size={size} />)}
  </div>
);

Methods By Size

Exemplo: AppPaymentIcon, Methods By Size

const MethodsBySize = () => (
  <div style={{ display: 'grid', gap: 12 }}>
    {(['sm', 'md', 'lg'] as const).map((size) => (
      <div key={size} style={{ display: 'flex', gap: 12 }}>
        {methods.map((method) => <AppPaymentIcon key={method} method={method} size={size} />)}
      </div>
    ))}
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
method*	"visa" | "mastercard" | "amex" | "diners" | "discover"	—	Bandeira do cartão: visa, mastercard, amex, diners ou discover.
label	string	—	Nome acessível. Padrão: nome da bandeira (ex.: Visa).
size	"sm" | "md" | "lg"	—	34×24 (sm), 46×32 (md) ou 58×40 (lg). Padrão: sm.