# IconsPayment

Logos for major credit cards and payment providers, rendered as scalable SVGs with a fixed 4:3 aspect ratio (width = round(size × 4/3) × height = size).

## Installation

```bash
npm install @xsolla/xui-icons-payment
```

## Imports

```tsx
import { Visa, Mastercard, AmericanExpress, Paypal, PaymentIcon, type PaymentIconProps } from '@xsolla/xui-icons-payment';
```

## Quick start

```tsx
import * as React from 'react';
import { Visa } from '@xsolla/xui-icons-payment';

export default function QuickStart() {
  return <Visa aria-label="Visa" />;
}
```

The `size` prop sets the icon **height**; width is automatically computed as `round(size × 4/3)` to preserve the card aspect ratio.

## API Reference

### Payment icon components (`<Visa>`, `<Mastercard>`, ...)

All payment icons share the same props (`PaymentIconProps`).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` | `18` | Height in pixels. Width is auto-computed as `round(size × 4/3)`. |
| `className` | `string` | — | CSS class on the wrapper (web only). |
| `style` | `CSSProperties` | — | Inline styles. |
| `data-testid` | `string` | — | Test ID (web). |
| `testID` | `string` | — | Test ID (React Native). |
| `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
| `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |

This package does not consume `ThemeOverrideProps`; payment logos render with their brand colours.

### `<PaymentIcon>`

Internal wrapper exported for advanced use (custom payment-icon components built from raw SVG strings). Most consumers should use the named icon components.

## Available icons

| Component | Method |
| --- | --- |
| `AmericanExpress` | American Express |
| `Aura` | Aura |
| `CartesBancaires` | Cartes Bancaires |
| `Cirrus` | Cirrus |
| `Dankort` | Dankort |
| `Dinersclub` | Diners Club |
| `Discover` | Discover |
| `Elo` | Elo |
| `Hipercard` | Hipercard |
| `Jcb` | JCB |
| `Maestro` | Maestro |
| `Mastercard` | Mastercard |
| `Mir` | Mir |
| `Naranja` | Naranja |
| `Paypal` | PayPal |
| `Sodexo` | Sodexo |
| `Uatp` | UATP |
| `Unionpay` | UnionPay |
| `Visa` | Visa |

## Examples

### Accepted payment methods

```tsx
import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Discover, Paypal } from '@xsolla/xui-icons-payment';

export default function AcceptedPayments() {
  return (
    <div>
      <p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>We accept</p>
      <div style={{ display: 'flex', gap: 8 }}>
        <Visa size={32} aria-label="Visa" />
        <Mastercard size={32} aria-label="Mastercard" />
        <AmericanExpress size={32} aria-label="American Express" />
        <Discover size={32} aria-label="Discover" />
        <Paypal size={32} aria-label="PayPal" />
      </div>
    </div>
  );
}
```

### Payment method selector

```tsx
import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Paypal } from '@xsolla/xui-icons-payment';

export default function PaymentSelector() {
  const [selected, setSelected] = React.useState('visa');
  const methods = [
    { id: 'visa', name: 'Visa', Icon: Visa },
    { id: 'mastercard', name: 'Mastercard', Icon: Mastercard },
    { id: 'amex', name: 'American Express', Icon: AmericanExpress },
    { id: 'paypal', name: 'PayPal', Icon: Paypal },
  ];
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {methods.map(({ id, name, Icon }) => (
        <button
          key={id}
          type="button"
          onClick={() => setSelected(id)}
          aria-pressed={selected === id}
          style={{
            padding: '12px 16px',
            border: selected === id ? '2px solid #007bff' : '1px solid #ddd',
            borderRadius: 8,
            background: 'white',
            cursor: 'pointer',
          }}
        >
          <Icon size={32} aria-label={name} />
        </button>
      ))}
    </div>
  );
}
```

### Sizing

```tsx
import * as React from 'react';
import { Visa } from '@xsolla/xui-icons-payment';

export default function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Visa size={18} aria-label="Visa, small" />
      <Visa size={24} aria-label="Visa, medium" />
      <Visa size={40} aria-label="Visa, large" />
      <Visa size={56} aria-label="Visa, extra large" />
    </div>
  );
}
```

## Accessibility

- Icons are hidden from screen readers by default.
- Set `aria-label` whenever the logo conveys meaning (e.g. listing accepted methods).
- For decorative badges within a labelled control, keep the default hidden behaviour and label the control instead.