@xsolla/xui-icons-payment 0.150.0 → 0.152.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -151
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,104 +1,90 @@
|
|
|
1
|
-
#
|
|
1
|
+
# IconsPayment
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
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).
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-icons-payment
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-icons-payment
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
### Credit Card Icons
|
|
11
|
+
## Imports
|
|
16
12
|
|
|
17
13
|
```tsx
|
|
18
|
-
import
|
|
19
|
-
import { Visa, Mastercard, AmericanExpress, Discover } from '@xsolla/xui-icons-payment';
|
|
20
|
-
|
|
21
|
-
export default function CreditCardIcons() {
|
|
22
|
-
return (
|
|
23
|
-
<div style={{ display: 'flex', gap: 12 }}>
|
|
24
|
-
<Visa size={40} />
|
|
25
|
-
<Mastercard size={40} />
|
|
26
|
-
<AmericanExpress size={40} />
|
|
27
|
-
<Discover size={40} />
|
|
28
|
-
</div>
|
|
29
|
-
);
|
|
30
|
-
}
|
|
14
|
+
import { Visa, Mastercard, AmericanExpress, Paypal, PaymentIcon, type PaymentIconProps } from '@xsolla/xui-icons-payment';
|
|
31
15
|
```
|
|
32
16
|
|
|
33
|
-
|
|
17
|
+
## Quick start
|
|
34
18
|
|
|
35
19
|
```tsx
|
|
36
20
|
import * as React from 'react';
|
|
37
|
-
import {
|
|
21
|
+
import { Visa } from '@xsolla/xui-icons-payment';
|
|
38
22
|
|
|
39
|
-
export default function
|
|
40
|
-
return
|
|
41
|
-
<div style={{ display: 'flex', gap: 12 }}>
|
|
42
|
-
<Paypal size={40} />
|
|
43
|
-
<Unionpay size={40} />
|
|
44
|
-
<Jcb size={40} />
|
|
45
|
-
<Maestro size={40} />
|
|
46
|
-
</div>
|
|
47
|
-
);
|
|
23
|
+
export default function QuickStart() {
|
|
24
|
+
return <Visa aria-label="Visa" />;
|
|
48
25
|
}
|
|
49
26
|
```
|
|
50
27
|
|
|
51
|
-
|
|
28
|
+
The `size` prop sets the icon **height**; width is automatically computed as `round(size × 4/3)` to preserve the card aspect ratio.
|
|
52
29
|
|
|
53
|
-
|
|
54
|
-
import * as React from 'react';
|
|
55
|
-
import { Visa } from '@xsolla/xui-icons-payment';
|
|
30
|
+
## API Reference
|
|
56
31
|
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
60
|
-
<Visa size={24} />
|
|
61
|
-
<Visa size={32} />
|
|
62
|
-
<Visa size={40} />
|
|
63
|
-
<Visa size={56} />
|
|
64
|
-
</div>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
```
|
|
32
|
+
### Payment icon components (`<Visa>`, `<Mastercard>`, ...)
|
|
68
33
|
|
|
69
|
-
|
|
34
|
+
All payment icons share the same props (`PaymentIconProps`).
|
|
70
35
|
|
|
71
|
-
|
|
72
|
-
|
|
36
|
+
| Prop | Type | Default | Description |
|
|
37
|
+
| --- | --- | --- | --- |
|
|
38
|
+
| `size` | `number` | `18` | Height in pixels. Width is auto-computed as `round(size × 4/3)`. |
|
|
39
|
+
| `className` | `string` | — | CSS class on the wrapper (web only). |
|
|
40
|
+
| `style` | `CSSProperties` | — | Inline styles. |
|
|
41
|
+
| `data-testid` | `string` | — | Test ID (web). |
|
|
42
|
+
| `testID` | `string` | — | Test ID (React Native). |
|
|
43
|
+
| `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
|
|
44
|
+
| `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |
|
|
73
45
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
46
|
+
This package does not consume `ThemeOverrideProps`; payment logos render with their brand colours.
|
|
47
|
+
|
|
48
|
+
### `<PaymentIcon>`
|
|
49
|
+
|
|
50
|
+
Internal wrapper exported for advanced use (custom payment-icon components built from raw SVG strings). Most consumers should use the named icon components.
|
|
51
|
+
|
|
52
|
+
## Available icons
|
|
53
|
+
|
|
54
|
+
| Component | Method |
|
|
55
|
+
| --- | --- |
|
|
56
|
+
| `AmericanExpress` | American Express |
|
|
57
|
+
| `Aura` | Aura |
|
|
58
|
+
| `CartesBancaires` | Cartes Bancaires |
|
|
59
|
+
| `Cirrus` | Cirrus |
|
|
60
|
+
| `Dankort` | Dankort |
|
|
61
|
+
| `Dinersclub` | Diners Club |
|
|
62
|
+
| `Discover` | Discover |
|
|
63
|
+
| `Elo` | Elo |
|
|
64
|
+
| `Hipercard` | Hipercard |
|
|
65
|
+
| `Jcb` | JCB |
|
|
66
|
+
| `Maestro` | Maestro |
|
|
67
|
+
| `Mastercard` | Mastercard |
|
|
68
|
+
| `Mir` | Mir |
|
|
69
|
+
| `Naranja` | Naranja |
|
|
70
|
+
| `Paypal` | PayPal |
|
|
71
|
+
| `Sodexo` | Sodexo |
|
|
72
|
+
| `Uatp` | UATP |
|
|
73
|
+
| `Unionpay` | UnionPay |
|
|
74
|
+
| `Visa` | Visa |
|
|
81
75
|
|
|
82
76
|
## Examples
|
|
83
77
|
|
|
84
|
-
### Accepted
|
|
78
|
+
### Accepted payment methods
|
|
85
79
|
|
|
86
80
|
```tsx
|
|
87
81
|
import * as React from 'react';
|
|
88
|
-
import {
|
|
89
|
-
Visa,
|
|
90
|
-
Mastercard,
|
|
91
|
-
AmericanExpress,
|
|
92
|
-
Paypal,
|
|
93
|
-
Discover,
|
|
94
|
-
} from '@xsolla/xui-icons-payment';
|
|
82
|
+
import { Visa, Mastercard, AmericanExpress, Discover, Paypal } from '@xsolla/xui-icons-payment';
|
|
95
83
|
|
|
96
84
|
export default function AcceptedPayments() {
|
|
97
85
|
return (
|
|
98
86
|
<div>
|
|
99
|
-
<p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>
|
|
100
|
-
We accept
|
|
101
|
-
</p>
|
|
87
|
+
<p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>We accept</p>
|
|
102
88
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
103
89
|
<Visa size={32} aria-label="Visa" />
|
|
104
90
|
<Mastercard size={32} aria-label="Mastercard" />
|
|
@@ -111,7 +97,7 @@ export default function AcceptedPayments() {
|
|
|
111
97
|
}
|
|
112
98
|
```
|
|
113
99
|
|
|
114
|
-
### Payment
|
|
100
|
+
### Payment method selector
|
|
115
101
|
|
|
116
102
|
```tsx
|
|
117
103
|
import * as React from 'react';
|
|
@@ -119,20 +105,20 @@ import { Visa, Mastercard, AmericanExpress, Paypal } from '@xsolla/xui-icons-pay
|
|
|
119
105
|
|
|
120
106
|
export default function PaymentSelector() {
|
|
121
107
|
const [selected, setSelected] = React.useState('visa');
|
|
122
|
-
|
|
123
108
|
const methods = [
|
|
124
109
|
{ id: 'visa', name: 'Visa', Icon: Visa },
|
|
125
110
|
{ id: 'mastercard', name: 'Mastercard', Icon: Mastercard },
|
|
126
111
|
{ id: 'amex', name: 'American Express', Icon: AmericanExpress },
|
|
127
112
|
{ id: 'paypal', name: 'PayPal', Icon: Paypal },
|
|
128
113
|
];
|
|
129
|
-
|
|
130
114
|
return (
|
|
131
115
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
132
116
|
{methods.map(({ id, name, Icon }) => (
|
|
133
117
|
<button
|
|
134
118
|
key={id}
|
|
119
|
+
type="button"
|
|
135
120
|
onClick={() => setSelected(id)}
|
|
121
|
+
aria-pressed={selected === id}
|
|
136
122
|
style={{
|
|
137
123
|
padding: '12px 16px',
|
|
138
124
|
border: selected === id ? '2px solid #007bff' : '1px solid #ddd',
|
|
@@ -140,9 +126,8 @@ export default function PaymentSelector() {
|
|
|
140
126
|
background: 'white',
|
|
141
127
|
cursor: 'pointer',
|
|
142
128
|
}}
|
|
143
|
-
aria-pressed={selected === id}
|
|
144
129
|
>
|
|
145
|
-
<Icon size={
|
|
130
|
+
<Icon size={32} aria-label={name} />
|
|
146
131
|
</button>
|
|
147
132
|
))}
|
|
148
133
|
</div>
|
|
@@ -150,94 +135,26 @@ export default function PaymentSelector() {
|
|
|
150
135
|
}
|
|
151
136
|
```
|
|
152
137
|
|
|
153
|
-
###
|
|
138
|
+
### Sizing
|
|
154
139
|
|
|
155
140
|
```tsx
|
|
156
141
|
import * as React from 'react';
|
|
157
|
-
import { Visa
|
|
158
|
-
import { Input } from '@xsolla/xui-input';
|
|
159
|
-
|
|
160
|
-
export default function CardInputDisplay() {
|
|
161
|
-
const [cardNumber, setCardNumber] = React.useState('');
|
|
162
|
-
|
|
163
|
-
const getCardIcon = () => {
|
|
164
|
-
if (cardNumber.startsWith('4')) return <Visa size={24} />;
|
|
165
|
-
if (cardNumber.startsWith('5')) return <Mastercard size={24} />;
|
|
166
|
-
if (cardNumber.startsWith('3')) return <AmericanExpress size={24} />;
|
|
167
|
-
return null;
|
|
168
|
-
};
|
|
142
|
+
import { Visa } from '@xsolla/xui-icons-payment';
|
|
169
143
|
|
|
144
|
+
export default function Sizes() {
|
|
170
145
|
return (
|
|
171
|
-
<div style={{ display: 'flex', alignItems: 'center', gap:
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
style={{ flex: 1 }}
|
|
177
|
-
/>
|
|
178
|
-
{getCardIcon()}
|
|
146
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
147
|
+
<Visa size={18} aria-label="Visa, small" />
|
|
148
|
+
<Visa size={24} aria-label="Visa, medium" />
|
|
149
|
+
<Visa size={40} aria-label="Visa, large" />
|
|
150
|
+
<Visa size={56} aria-label="Visa, extra large" />
|
|
179
151
|
</div>
|
|
180
152
|
);
|
|
181
153
|
}
|
|
182
154
|
```
|
|
183
155
|
|
|
184
|
-
## API Reference
|
|
185
|
-
|
|
186
|
-
### Payment Icon Components
|
|
187
|
-
|
|
188
|
-
Each payment icon component accepts the same props:
|
|
189
|
-
|
|
190
|
-
**PaymentIconProps:**
|
|
191
|
-
|
|
192
|
-
| Prop | Type | Default | Description |
|
|
193
|
-
| :--- | :--- | :------ | :---------- |
|
|
194
|
-
| size | `number` | `24` | Size in pixels. |
|
|
195
|
-
| className | `string` | - | CSS class name. |
|
|
196
|
-
| style | `CSSProperties` | - | Inline styles. |
|
|
197
|
-
| data-testid | `string` | - | Test ID (web). |
|
|
198
|
-
| testID | `string` | - | Test ID (React Native). |
|
|
199
|
-
| aria-label | `string` | - | Accessible label. |
|
|
200
|
-
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
|
|
201
|
-
|
|
202
|
-
## Available Icons
|
|
203
|
-
|
|
204
|
-
| Component | Payment Method |
|
|
205
|
-
| :-------- | :------------- |
|
|
206
|
-
| `AmericanExpress` | American Express |
|
|
207
|
-
| `Aura` | Aura |
|
|
208
|
-
| `CartesBancaires` | Cartes Bancaires |
|
|
209
|
-
| `Cirrus` | Cirrus |
|
|
210
|
-
| `Dankort` | Dankort |
|
|
211
|
-
| `Dinersclub` | Diners Club |
|
|
212
|
-
| `Discover` | Discover |
|
|
213
|
-
| `Elo` | Elo |
|
|
214
|
-
| `Hipercard` | Hipercard |
|
|
215
|
-
| `Jcb` | JCB |
|
|
216
|
-
| `Maestro` | Maestro |
|
|
217
|
-
| `Mastercard` | Mastercard |
|
|
218
|
-
| `Mir` | Mir |
|
|
219
|
-
| `Naranja` | Naranja |
|
|
220
|
-
| `Paypal` | PayPal |
|
|
221
|
-
| `Sodexo` | Sodexo |
|
|
222
|
-
| `Uatp` | UATP |
|
|
223
|
-
| `Unionpay` | UnionPay |
|
|
224
|
-
| `Visa` | Visa |
|
|
225
|
-
|
|
226
|
-
## Tree Shaking
|
|
227
|
-
|
|
228
|
-
Import individual icons for optimal bundle size:
|
|
229
|
-
|
|
230
|
-
```tsx
|
|
231
|
-
// Good - only imports needed icons
|
|
232
|
-
import { Visa, Mastercard } from '@xsolla/xui-icons-payment';
|
|
233
|
-
|
|
234
|
-
// Avoid - imports all icons
|
|
235
|
-
import * as PaymentIcons from '@xsolla/xui-icons-payment';
|
|
236
|
-
```
|
|
237
|
-
|
|
238
156
|
## Accessibility
|
|
239
157
|
|
|
240
|
-
- Icons are hidden from screen readers by default
|
|
241
|
-
-
|
|
242
|
-
- For decorative
|
|
243
|
-
- When used in buttons/links, the parent element should have the accessible label
|
|
158
|
+
- Icons are hidden from screen readers by default.
|
|
159
|
+
- Set `aria-label` whenever the logo conveys meaning (e.g. listing accepted methods).
|
|
160
|
+
- For decorative badges within a labelled control, keep the default hidden behaviour and label the control instead.
|