@xsolla/xui-input-payment 0.158.0 → 0.159.0-pr290.1779453807

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.
Files changed (10) hide show
  1. package/README.md +112 -100
  2. package/native/index.js +7 -11
  3. package/native/index.js.map +1 -1
  4. package/native/index.mjs +7 -11
  5. package/native/index.mjs.map +1 -1
  6. package/package.json +4 -4
  7. package/web/index.js +9 -11
  8. package/web/index.js.map +1 -1
  9. package/web/index.mjs +9 -11
  10. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -13,11 +13,11 @@ npm install @xsolla/xui-input-payment
13
13
  ### Basic Payment Input
14
14
 
15
15
  ```tsx
16
- import * as React from 'react';
17
- import { InputPayment } from '@xsolla/xui-input-payment';
16
+ import * as React from "react";
17
+ import { InputPayment } from "@xsolla/xui-input-payment";
18
18
 
19
19
  export default function BasicPayment() {
20
- const [cardNumber, setCardNumber] = React.useState('');
20
+ const [cardNumber, setCardNumber] = React.useState("");
21
21
 
22
22
  return (
23
23
  <InputPayment
@@ -32,11 +32,11 @@ export default function BasicPayment() {
32
32
  ### With Auto-Detection Callback
33
33
 
34
34
  ```tsx
35
- import * as React from 'react';
36
- import { InputPayment } from '@xsolla/xui-input-payment';
35
+ import * as React from "react";
36
+ import { InputPayment } from "@xsolla/xui-input-payment";
37
37
 
38
38
  export default function WithDetection() {
39
- const [cardNumber, setCardNumber] = React.useState('');
39
+ const [cardNumber, setCardNumber] = React.useState("");
40
40
  const [cardType, setCardType] = React.useState<string | null>(null);
41
41
 
42
42
  return (
@@ -55,12 +55,12 @@ export default function WithDetection() {
55
55
  ### Different Sizes
56
56
 
57
57
  ```tsx
58
- import * as React from 'react';
59
- import { InputPayment } from '@xsolla/xui-input-payment';
58
+ import * as React from "react";
59
+ import { InputPayment } from "@xsolla/xui-input-payment";
60
60
 
61
61
  export default function Sizes() {
62
62
  return (
63
- <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
63
+ <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
64
64
  <InputPayment size="sm" placeholder="Small" />
65
65
  <InputPayment size="md" placeholder="Medium" />
66
66
  <InputPayment size="lg" placeholder="Large" />
@@ -72,20 +72,20 @@ export default function Sizes() {
72
72
  ## Anatomy
73
73
 
74
74
  ```jsx
75
- import { InputPayment } from '@xsolla/xui-input-payment';
75
+ import { InputPayment } from "@xsolla/xui-input-payment";
76
76
 
77
77
  <InputPayment
78
- value={cardNumber} // Card number value
79
- onChangeText={setCardNumber} // Change handler
80
- size="md" // Input size
81
- placeholder="Card number" // Placeholder text
82
- possiblePayments={['visa', 'mastercard']} // Accepted cards
83
- maxVisiblePossiblePayments={5} // Max icons shown
84
- recognizedPayment="visa" // Force recognized type
85
- autoDetect={true} // Enable auto-detection
86
- errorMessage="Invalid card" // Error message
87
- disabled={false} // Disabled state
88
- />
78
+ value={cardNumber} // Card number value
79
+ onChangeText={setCardNumber} // Change handler
80
+ size="md" // Input size
81
+ placeholder="Card number" // Placeholder text
82
+ possiblePayments={["visa", "mastercard"]} // Accepted cards
83
+ maxVisiblePossiblePayments={5} // Max icons shown
84
+ recognizedPayment="visa" // Force recognized type
85
+ autoDetect={true} // Enable auto-detection
86
+ errorMessage="Invalid card" // Error message
87
+ disabled={false} // Disabled state
88
+ />;
89
89
  ```
90
90
 
91
91
  ## Examples
@@ -93,13 +93,13 @@ import { InputPayment } from '@xsolla/xui-input-payment';
93
93
  ### Custom Accepted Cards
94
94
 
95
95
  ```tsx
96
- import * as React from 'react';
97
- import { InputPayment } from '@xsolla/xui-input-payment';
96
+ import * as React from "react";
97
+ import { InputPayment } from "@xsolla/xui-input-payment";
98
98
 
99
99
  export default function CustomCards() {
100
100
  return (
101
101
  <InputPayment
102
- possiblePayments={['visa', 'mastercard', 'amex']}
102
+ possiblePayments={["visa", "mastercard", "amex"]}
103
103
  maxVisiblePossiblePayments={3}
104
104
  placeholder="We accept Visa, Mastercard, Amex"
105
105
  />
@@ -110,18 +110,18 @@ export default function CustomCards() {
110
110
  ### With Error State
111
111
 
112
112
  ```tsx
113
- import * as React from 'react';
114
- import { InputPayment } from '@xsolla/xui-input-payment';
113
+ import * as React from "react";
114
+ import { InputPayment } from "@xsolla/xui-input-payment";
115
115
 
116
116
  export default function WithError() {
117
- const [cardNumber, setCardNumber] = React.useState('');
118
- const [error, setError] = React.useState('');
117
+ const [cardNumber, setCardNumber] = React.useState("");
118
+ const [error, setError] = React.useState("");
119
119
 
120
120
  const validate = (value: string) => {
121
121
  if (value.length > 0 && value.length < 13) {
122
- setError('Card number too short');
122
+ setError("Card number too short");
123
123
  } else {
124
- setError('');
124
+ setError("");
125
125
  }
126
126
  };
127
127
 
@@ -141,18 +141,18 @@ export default function WithError() {
141
141
  ### Controlled Recognition
142
142
 
143
143
  ```tsx
144
- import * as React from 'react';
145
- import { InputPayment } from '@xsolla/xui-input-payment';
144
+ import * as React from "react";
145
+ import { InputPayment } from "@xsolla/xui-input-payment";
146
146
 
147
147
  export default function ControlledRecognition() {
148
- const [cardNumber, setCardNumber] = React.useState('');
148
+ const [cardNumber, setCardNumber] = React.useState("");
149
149
 
150
150
  return (
151
151
  <InputPayment
152
152
  value={cardNumber}
153
153
  onChangeText={setCardNumber}
154
154
  autoDetect={false}
155
- recognizedPayment={cardNumber.startsWith('4') ? 'visa' : undefined}
155
+ recognizedPayment={cardNumber.startsWith("4") ? "visa" : undefined}
156
156
  />
157
157
  );
158
158
  }
@@ -161,46 +161,48 @@ export default function ControlledRecognition() {
161
161
  ### With Icon
162
162
 
163
163
  ```tsx
164
- import * as React from 'react';
165
- import { InputPayment } from '@xsolla/xui-input-payment';
166
- import { CreditCard } from '@xsolla/xui-icons-base';
164
+ import * as React from "react";
165
+ import { InputPayment } from "@xsolla/xui-input-payment";
166
+ import { CreditCard } from "@xsolla/xui-icons-base";
167
167
 
168
168
  export default function WithIcon() {
169
- return (
170
- <InputPayment
171
- icon={<CreditCard />}
172
- placeholder="Enter card number"
173
- />
174
- );
169
+ return <InputPayment icon={<CreditCard />} placeholder="Enter card number" />;
175
170
  }
176
171
  ```
177
172
 
178
173
  ### In Payment Form
179
174
 
180
175
  ```tsx
181
- import * as React from 'react';
182
- import { InputPayment } from '@xsolla/xui-input-payment';
183
- import { Input } from '@xsolla/xui-input';
184
- import { Button } from '@xsolla/xui-button';
176
+ import * as React from "react";
177
+ import { InputPayment } from "@xsolla/xui-input-payment";
178
+ import { Input } from "@xsolla/xui-input";
179
+ import { Button } from "@xsolla/xui-button";
185
180
 
186
181
  export default function PaymentForm() {
187
- const [cardNumber, setCardNumber] = React.useState('');
182
+ const [cardNumber, setCardNumber] = React.useState("");
188
183
  const [cardType, setCardType] = React.useState<string | null>(null);
189
184
 
190
185
  return (
191
- <form style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400 }}>
186
+ <form
187
+ style={{
188
+ display: "flex",
189
+ flexDirection: "column",
190
+ gap: 16,
191
+ maxWidth: 400,
192
+ }}
193
+ >
192
194
  <InputPayment
193
195
  value={cardNumber}
194
196
  onChangeText={setCardNumber}
195
197
  onRecognizedPaymentChange={setCardType}
196
198
  placeholder="Card number"
197
199
  />
198
- <div style={{ display: 'flex', gap: 16 }}>
200
+ <div style={{ display: "flex", gap: 16 }}>
199
201
  <Input placeholder="MM/YY" style={{ flex: 1 }} />
200
202
  <Input placeholder="CVV" style={{ width: 100 }} />
201
203
  </div>
202
204
  <Input placeholder="Cardholder name" />
203
- <Button onPress={() => console.log('Submit', { cardNumber, cardType })}>
205
+ <Button onPress={() => console.log("Submit", { cardNumber, cardType })}>
204
206
  Pay Now
205
207
  </Button>
206
208
  </form>
@@ -214,71 +216,81 @@ export default function PaymentForm() {
214
216
 
215
217
  **InputPaymentProps:**
216
218
 
217
- | Prop | Type | Default | Description |
218
- | :--- | :--- | :------ | :---------- |
219
- | value | `string` | - | Card number value. |
220
- | onChange | `(e: ChangeEvent) => void` | - | Standard change event handler. |
221
- | onChangeText | `(text: string) => void` | - | Text change handler. |
222
- | size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Input size variant. |
223
- | placeholder | `string` | `"Card number"` | Placeholder text. |
224
- | icon | `ReactNode` | - | Left icon. |
225
- | disabled | `boolean` | `false` | Disabled state. |
226
- | error | `boolean` | - | Error state indicator. |
227
- | errorMessage | `string` | - | Error message text. |
228
- | possiblePayments | `PaymentSystemKey[]` | See below | Accepted payment types. |
229
- | maxVisiblePossiblePayments | `number` | `5` | Max payment icons shown. |
230
- | recognizedPayment | `PaymentSystemKey` | - | Force recognized payment type. |
231
- | onRecognizedPaymentChange | `(type: PaymentSystemKey \| null) => void` | - | Detection callback. |
232
- | autoDetect | `boolean` | `true` | Enable auto-detection. |
233
- | aria-label | `string` | `"Card number"` | Accessible label. |
234
- | testID | `string` | - | Test identifier. |
219
+ | Prop | Type | Default | Description |
220
+ | :------------------------- | :----------------------------------------- | :-------------- | :------------------------------------------------------------------------------------------------------------ |
221
+ | `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
222
+ | value | `string` | - | Card number value. |
223
+ | onChange | `(e: ChangeEvent) => void` | - | Standard change event handler. |
224
+ | onChangeText | `(text: string) => void` | - | Text change handler. |
225
+ | size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Input size variant. |
226
+ | placeholder | `string` | `"Card number"` | Placeholder text. |
227
+ | icon | `ReactNode` | - | Left icon. |
228
+ | disabled | `boolean` | `false` | Disabled state. |
229
+ | error | `boolean` | - | Error state indicator. |
230
+ | errorMessage | `string` | - | Error message text. |
231
+ | possiblePayments | `PaymentSystemKey[]` | See below | Accepted payment types. |
232
+ | maxVisiblePossiblePayments | `number` | `5` | Max payment icons shown. |
233
+ | recognizedPayment | `PaymentSystemKey` | - | Force recognized payment type. |
234
+ | onRecognizedPaymentChange | `(type: PaymentSystemKey \| null) => void` | - | Detection callback. |
235
+ | autoDetect | `boolean` | `true` | Enable auto-detection. |
236
+ | aria-label | `string` | `"Card number"` | Accessible label. |
237
+ | testID | `string` | - | Test identifier. |
235
238
 
236
239
  **Default possiblePayments:**
237
240
 
238
241
  ```typescript
239
- ['mastercard', 'visa', 'maestro', 'diners', 'amex', 'discover', 'jcb', 'unionpay']
242
+ [
243
+ "mastercard",
244
+ "visa",
245
+ "maestro",
246
+ "diners",
247
+ "amex",
248
+ "discover",
249
+ "jcb",
250
+ "unionpay",
251
+ ];
240
252
  ```
241
253
 
242
254
  **PaymentSystemKey:**
243
255
 
244
256
  ```typescript
245
257
  type PaymentSystemKey =
246
- | 'visa'
247
- | 'mastercard'
248
- | 'amex'
249
- | 'diners'
250
- | 'maestro'
251
- | 'unionpay'
252
- | 'discover'
253
- | 'jcb'
254
- | 'aura'
255
- | 'cartesbancaires'
256
- | 'cirrus'
257
- | 'dankort'
258
- | 'elo'
259
- | 'hipercard'
260
- | 'mir'
261
- | 'naranja'
262
- | 'paypal'
263
- | 'sodexo'
264
- | 'uatp';
258
+ | "visa"
259
+ | "mastercard"
260
+ | "amex"
261
+ | "diners"
262
+ | "maestro"
263
+ | "unionpay"
264
+ | "discover"
265
+ | "jcb"
266
+ | "aura"
267
+ | "cartesbancaires"
268
+ | "cirrus"
269
+ | "dankort"
270
+ | "elo"
271
+ | "hipercard"
272
+ | "mir"
273
+ | "naranja"
274
+ | "paypal"
275
+ | "sodexo"
276
+ | "uatp";
265
277
  ```
266
278
 
267
279
  ## Card Detection
268
280
 
269
281
  The component automatically detects card types based on BIN (Bank Identification Number) ranges:
270
282
 
271
- | Card Type | BIN Pattern |
272
- | :-------- | :---------- |
273
- | Visa | Starts with 4 |
274
- | Mastercard | 51-55 or 2221-2720 |
275
- | American Express | 34, 37 |
276
- | Discover | 6011, 644-649, 65 |
277
- | JCB | 3528-3589 |
278
- | Diners Club | 300-305, 36, 38 |
279
- | UnionPay | 62 (except Discover range) |
280
- | Maestro | 50, 56-69 |
281
- | Mir | 2200-2204 |
283
+ | Card Type | BIN Pattern |
284
+ | :--------------- | :------------------------- |
285
+ | Visa | Starts with 4 |
286
+ | Mastercard | 51-55 or 2221-2720 |
287
+ | American Express | 34, 37 |
288
+ | Discover | 6011, 644-649, 65 |
289
+ | JCB | 3528-3589 |
290
+ | Diners Club | 300-305, 36, 38 |
291
+ | UnionPay | 62 (except Discover range) |
292
+ | Maestro | 50, 56-69 |
293
+ | Mir | 2200-2204 |
282
294
 
283
295
  ## Icon Animation
284
296
 
package/native/index.js CHANGED
@@ -238,6 +238,8 @@ var Text = ({
238
238
  numberOfLines,
239
239
  id,
240
240
  role,
241
+ testID,
242
+ "data-testid": dataTestId,
241
243
  style: styleProp,
242
244
  ...props
243
245
  }) => {
@@ -267,7 +269,7 @@ var Text = ({
267
269
  {
268
270
  style: baseStyle,
269
271
  numberOfLines,
270
- testID: id,
272
+ testID: dataTestId || testID || id,
271
273
  accessibilityRole,
272
274
  children
273
275
  }
@@ -330,7 +332,8 @@ var InputPrimitive = (0, import_react.forwardRef)(
330
332
  "aria-describedby": ariaDescribedBy,
331
333
  "aria-label": ariaLabel,
332
334
  "aria-disabled": ariaDisabled,
333
- "data-testid": dataTestId
335
+ "data-testid": dataTestId,
336
+ testID
334
337
  }, ref) => {
335
338
  const handleChangeText = (text) => {
336
339
  onChangeText?.(text);
@@ -390,7 +393,7 @@ var InputPrimitive = (0, import_react.forwardRef)(
390
393
  ],
391
394
  placeholderTextColor,
392
395
  maxLength,
393
- testID: dataTestId || id,
396
+ testID: dataTestId || testID || id,
394
397
  accessibilityLabel: ariaLabel,
395
398
  accessibilityHint: ariaDescribedBy,
396
399
  accessibilityState: {
@@ -739,13 +742,6 @@ var InputPayment = (0, import_react2.forwardRef)(
739
742
  sm: { vertical: 7, horizontal: 10 },
740
743
  xs: { vertical: 7, horizontal: 10 }
741
744
  };
742
- const borderRadiusConfig = {
743
- xl: 8,
744
- lg: 8,
745
- md: 8,
746
- sm: 4,
747
- xs: 4
748
- };
749
745
  const iconSizeConfig = {
750
746
  xl: 18,
751
747
  lg: 18,
@@ -761,7 +757,7 @@ var InputPayment = (0, import_react2.forwardRef)(
761
757
  xs: { width: 1, offset: -1 }
762
758
  };
763
759
  const padding = paddingConfig[size];
764
- const borderRadius = borderRadiusConfig[size];
760
+ const borderRadius = theme.shape.input[size].borderRadius;
765
761
  const iconSize = iconSizeConfig[size];
766
762
  const focusOutline = focusOutlineConfig[size];
767
763
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(