@xsolla/xui-icons-payment 0.99.0 → 0.100.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 +231 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,48 +1,249 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Icons Payment
|
|
3
|
+
subtitle: Payment method brand icons.
|
|
4
|
+
description: A cross-platform React payment icons package with major credit card and payment provider logos.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Icons Payment
|
|
8
|
+
|
|
9
|
+
A cross-platform React payment icons package containing logos for major credit cards and payment providers. Renders as scalable SVGs.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-icons-payment
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-icons-payment
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Credit Card Icons
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Visa, Mastercard, AmericanExpress, Discover } from '@xsolla/xui-icons-payment';
|
|
26
|
+
|
|
27
|
+
export default function CreditCardIcons() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', gap: 12 }}>
|
|
30
|
+
<Visa size={40} />
|
|
31
|
+
<Mastercard size={40} />
|
|
32
|
+
<AmericanExpress size={40} />
|
|
33
|
+
<Discover size={40} />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Payment Providers
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import * as React from 'react';
|
|
43
|
+
import { Paypal, Unionpay, Jcb, Maestro } from '@xsolla/xui-icons-payment';
|
|
44
|
+
|
|
45
|
+
export default function PaymentProviders() {
|
|
46
|
+
return (
|
|
47
|
+
<div style={{ display: 'flex', gap: 12 }}>
|
|
48
|
+
<Paypal size={40} />
|
|
49
|
+
<Unionpay size={40} />
|
|
50
|
+
<Jcb size={40} />
|
|
51
|
+
<Maestro size={40} />
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Icon Sizes
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import * as React from 'react';
|
|
61
|
+
import { Visa } from '@xsolla/xui-icons-payment';
|
|
62
|
+
|
|
63
|
+
export default function PaymentSizes() {
|
|
64
|
+
return (
|
|
65
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
66
|
+
<Visa size={24} />
|
|
67
|
+
<Visa size={32} />
|
|
68
|
+
<Visa size={40} />
|
|
69
|
+
<Visa size={56} />
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Anatomy
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
78
|
+
import { Visa } from '@xsolla/xui-icons-payment';
|
|
79
|
+
|
|
80
|
+
<Visa
|
|
81
|
+
size={40} // Size in pixels
|
|
82
|
+
className="payment-icon" // CSS class
|
|
83
|
+
style={{ margin: 4 }} // Inline styles
|
|
84
|
+
aria-label="Visa" // Accessible label
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Examples
|
|
89
|
+
|
|
90
|
+
### Accepted Payment Methods
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import * as React from 'react';
|
|
94
|
+
import {
|
|
95
|
+
Visa,
|
|
96
|
+
Mastercard,
|
|
97
|
+
AmericanExpress,
|
|
98
|
+
Paypal,
|
|
99
|
+
Discover,
|
|
100
|
+
} from '@xsolla/xui-icons-payment';
|
|
101
|
+
|
|
102
|
+
export default function AcceptedPayments() {
|
|
103
|
+
return (
|
|
104
|
+
<div>
|
|
105
|
+
<p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>
|
|
106
|
+
We accept
|
|
107
|
+
</p>
|
|
108
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
109
|
+
<Visa size={32} aria-label="Visa" />
|
|
110
|
+
<Mastercard size={32} aria-label="Mastercard" />
|
|
111
|
+
<AmericanExpress size={32} aria-label="American Express" />
|
|
112
|
+
<Discover size={32} aria-label="Discover" />
|
|
113
|
+
<Paypal size={32} aria-label="PayPal" />
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Payment Method Selector
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import * as React from 'react';
|
|
124
|
+
import { Visa, Mastercard, AmericanExpress, Paypal } from '@xsolla/xui-icons-payment';
|
|
125
|
+
|
|
126
|
+
export default function PaymentSelector() {
|
|
127
|
+
const [selected, setSelected] = React.useState('visa');
|
|
128
|
+
|
|
129
|
+
const methods = [
|
|
130
|
+
{ id: 'visa', name: 'Visa', Icon: Visa },
|
|
131
|
+
{ id: 'mastercard', name: 'Mastercard', Icon: Mastercard },
|
|
132
|
+
{ id: 'amex', name: 'American Express', Icon: AmericanExpress },
|
|
133
|
+
{ id: 'paypal', name: 'PayPal', Icon: Paypal },
|
|
134
|
+
];
|
|
135
|
+
|
|
136
|
+
return (
|
|
137
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
138
|
+
{methods.map(({ id, name, Icon }) => (
|
|
139
|
+
<button
|
|
140
|
+
key={id}
|
|
141
|
+
onClick={() => setSelected(id)}
|
|
142
|
+
style={{
|
|
143
|
+
padding: '12px 16px',
|
|
144
|
+
border: selected === id ? '2px solid #007bff' : '1px solid #ddd',
|
|
145
|
+
borderRadius: 8,
|
|
146
|
+
background: 'white',
|
|
147
|
+
cursor: 'pointer',
|
|
148
|
+
}}
|
|
149
|
+
aria-pressed={selected === id}
|
|
150
|
+
>
|
|
151
|
+
<Icon size={40} aria-label={name} />
|
|
152
|
+
</button>
|
|
153
|
+
))}
|
|
154
|
+
</div>
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Card Input Display
|
|
12
160
|
|
|
13
161
|
```tsx
|
|
14
|
-
import
|
|
162
|
+
import * as React from 'react';
|
|
163
|
+
import { Visa, Mastercard, AmericanExpress } from '@xsolla/xui-icons-payment';
|
|
164
|
+
import { Input } from '@xsolla/xui-input';
|
|
165
|
+
|
|
166
|
+
export default function CardInputDisplay() {
|
|
167
|
+
const [cardNumber, setCardNumber] = React.useState('');
|
|
168
|
+
|
|
169
|
+
const getCardIcon = () => {
|
|
170
|
+
if (cardNumber.startsWith('4')) return <Visa size={24} />;
|
|
171
|
+
if (cardNumber.startsWith('5')) return <Mastercard size={24} />;
|
|
172
|
+
if (cardNumber.startsWith('3')) return <AmericanExpress size={24} />;
|
|
173
|
+
return null;
|
|
174
|
+
};
|
|
15
175
|
|
|
16
|
-
function App() {
|
|
17
176
|
return (
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
177
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
178
|
+
<Input
|
|
179
|
+
value={cardNumber}
|
|
180
|
+
onChange={(e) => setCardNumber(e.target.value)}
|
|
181
|
+
placeholder="Card number"
|
|
182
|
+
style={{ flex: 1 }}
|
|
183
|
+
/>
|
|
184
|
+
{getCardIcon()}
|
|
185
|
+
</div>
|
|
23
186
|
);
|
|
24
187
|
}
|
|
25
188
|
```
|
|
26
189
|
|
|
190
|
+
## API Reference
|
|
191
|
+
|
|
192
|
+
### Payment Icon Components
|
|
193
|
+
|
|
194
|
+
Each payment icon component accepts the same props:
|
|
195
|
+
|
|
196
|
+
**PaymentIconProps:**
|
|
197
|
+
|
|
198
|
+
| Prop | Type | Default | Description |
|
|
199
|
+
| :--- | :--- | :------ | :---------- |
|
|
200
|
+
| size | `number` | `24` | Size in pixels. |
|
|
201
|
+
| className | `string` | - | CSS class name. |
|
|
202
|
+
| style | `CSSProperties` | - | Inline styles. |
|
|
203
|
+
| data-testid | `string` | - | Test ID (web). |
|
|
204
|
+
| testID | `string` | - | Test ID (React Native). |
|
|
205
|
+
| aria-label | `string` | - | Accessible label. |
|
|
206
|
+
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
|
|
207
|
+
|
|
27
208
|
## Available Icons
|
|
28
209
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
210
|
+
| Component | Payment Method |
|
|
211
|
+
| :-------- | :------------- |
|
|
212
|
+
| `AmericanExpress` | American Express |
|
|
213
|
+
| `Aura` | Aura |
|
|
214
|
+
| `CartesBancaires` | Cartes Bancaires |
|
|
215
|
+
| `Cirrus` | Cirrus |
|
|
216
|
+
| `Dankort` | Dankort |
|
|
217
|
+
| `Dinersclub` | Diners Club |
|
|
218
|
+
| `Discover` | Discover |
|
|
219
|
+
| `Elo` | Elo |
|
|
220
|
+
| `Hipercard` | Hipercard |
|
|
221
|
+
| `Jcb` | JCB |
|
|
222
|
+
| `Maestro` | Maestro |
|
|
223
|
+
| `Mastercard` | Mastercard |
|
|
224
|
+
| `Mir` | Mir |
|
|
225
|
+
| `Naranja` | Naranja |
|
|
226
|
+
| `Paypal` | PayPal |
|
|
227
|
+
| `Sodexo` | Sodexo |
|
|
228
|
+
| `Uatp` | UATP |
|
|
229
|
+
| `Unionpay` | UnionPay |
|
|
230
|
+
| `Visa` | Visa |
|
|
231
|
+
|
|
232
|
+
## Tree Shaking
|
|
233
|
+
|
|
234
|
+
Import individual icons for optimal bundle size:
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
// Good - only imports needed icons
|
|
238
|
+
import { Visa, Mastercard } from '@xsolla/xui-icons-payment';
|
|
239
|
+
|
|
240
|
+
// Avoid - imports all icons
|
|
241
|
+
import * as PaymentIcons from '@xsolla/xui-icons-payment';
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
## Accessibility
|
|
245
|
+
|
|
246
|
+
- Icons are hidden from screen readers by default
|
|
247
|
+
- Use `aria-label` when the icon conveys meaningful information
|
|
248
|
+
- For decorative payment badges, keep the default hidden behavior
|
|
249
|
+
- When used in buttons/links, the parent element should have the accessible label
|