@payloqa/payment-widget 1.0.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 +460 -0
- package/dist/components/NetworkSelector.d.ts +11 -0
- package/dist/components/NetworkSelector.d.ts.map +1 -0
- package/dist/components/OTPInput.d.ts +13 -0
- package/dist/components/OTPInput.d.ts.map +1 -0
- package/dist/components/PaymentWidget.d.ts +10 -0
- package/dist/components/PaymentWidget.d.ts.map +1 -0
- package/dist/components/PhoneInput.d.ts +13 -0
- package/dist/components/PhoneInput.d.ts.map +1 -0
- package/dist/components/ResultScreen.d.ts +12 -0
- package/dist/components/ResultScreen.d.ts.map +1 -0
- package/dist/components/TimeoutScreen.d.ts +11 -0
- package/dist/components/TimeoutScreen.d.ts.map +1 -0
- package/dist/components/VerifyingScreen.d.ts +9 -0
- package/dist/components/VerifyingScreen.d.ts.map +1 -0
- package/dist/demo.d.ts +4 -0
- package/dist/demo.d.ts.map +1 -0
- package/dist/index.d.ts +175 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.umd.js +2 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/payment-widget.css +1 -0
- package/dist/payment-widget.d.ts +175 -0
- package/dist/payment-widget.esm.js +2 -0
- package/dist/payment-widget.esm.js.map +1 -0
- package/dist/payment-widget.umd.js +2 -0
- package/dist/payment-widget.umd.js.map +1 -0
- package/dist/services/paymentService.d.ts +16 -0
- package/dist/services/paymentService.d.ts.map +1 -0
- package/dist/types/payment.d.ts +150 -0
- package/dist/types/payment.d.ts.map +1 -0
- package/dist/utils/index.d.ts +11 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/package.json +86 -0
package/README.md
ADDED
|
@@ -0,0 +1,460 @@
|
|
|
1
|
+
# ๐ณ Payloqa Payment Widget
|
|
2
|
+
|
|
3
|
+
A secure React payment processing widget for handling transactions with multiple payment methods.
|
|
4
|
+
|
|
5
|
+
## โจ Features
|
|
6
|
+
|
|
7
|
+
- ๐ณ **Multiple Payment Methods** - Credit cards, mobile money, bank transfers
|
|
8
|
+
- ๐ **Secure Processing** - PCI-compliant payment handling
|
|
9
|
+
- ๐ฑ **Responsive Design** - Works on desktop, tablet, and mobile
|
|
10
|
+
- ๐จ **Customizable UI** - Easy to style and brand
|
|
11
|
+
- ๐ **Real-time Validation** - Instant payment method validation
|
|
12
|
+
- ๐ **Transaction Status** - Real-time payment status updates
|
|
13
|
+
- ๐งช **HTML Testing** - Comprehensive test interface
|
|
14
|
+
- ๐ฆ **Multiple Builds** - UMD, ESM, and TypeScript declarations
|
|
15
|
+
|
|
16
|
+
## ๐ Quick Start
|
|
17
|
+
|
|
18
|
+
### Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @payloqa/payment-widget
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Basic Usage
|
|
25
|
+
|
|
26
|
+
```jsx
|
|
27
|
+
import { PaymentWidget } from '@payloqa/payment-widget';
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
const config = {
|
|
31
|
+
apiKey: 'your-api-key',
|
|
32
|
+
platformId: 'your-platform-id',
|
|
33
|
+
apiUrl: 'https://api.payloqa.com/v1/payments'
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const handleSuccess = (transaction) => {
|
|
37
|
+
console.log('Payment successful:', transaction);
|
|
38
|
+
console.log('Transaction ID:', transaction.id);
|
|
39
|
+
console.log('Amount:', transaction.amount);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const handleError = (error) => {
|
|
43
|
+
console.error('Payment failed:', error);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const handleStatusChange = (status) => {
|
|
47
|
+
console.log('Payment status:', status);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<PaymentWidget
|
|
52
|
+
config={config}
|
|
53
|
+
amount={1000} // Amount in cents
|
|
54
|
+
currency="USD"
|
|
55
|
+
onSuccess={handleSuccess}
|
|
56
|
+
onError={handleError}
|
|
57
|
+
onStatusChange={handleStatusChange}
|
|
58
|
+
/>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## โ๏ธ Configuration
|
|
64
|
+
|
|
65
|
+
### PaymentWidgetConfig
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
interface PaymentWidgetConfig {
|
|
69
|
+
apiKey: string; // Your Payloqa API key
|
|
70
|
+
platformId: string; // Your platform identifier
|
|
71
|
+
apiUrl: string; // Payloqa payments API URL
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Callbacks
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
// Success callback
|
|
79
|
+
onSuccess: (transaction: PaymentTransaction) => void
|
|
80
|
+
|
|
81
|
+
// Error callback
|
|
82
|
+
onError: (error: PaymentError) => void
|
|
83
|
+
|
|
84
|
+
// Status change callback
|
|
85
|
+
onStatusChange: (status: PaymentStatus) => void
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## ๐จ Styling
|
|
89
|
+
|
|
90
|
+
The widget uses Tailwind CSS for styling. You can customize the appearance:
|
|
91
|
+
|
|
92
|
+
```css
|
|
93
|
+
/* Custom styles */
|
|
94
|
+
.payloqa-payment-widget {
|
|
95
|
+
--primary-color: #3b82f6;
|
|
96
|
+
--error-color: #ef4444;
|
|
97
|
+
--success-color: #10b981;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Override specific components */
|
|
101
|
+
.payment-widget-container {
|
|
102
|
+
@apply bg-white rounded-lg shadow-lg p-6;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.payment-method-selector {
|
|
106
|
+
@apply border-2 border-gray-300 rounded-lg p-4;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.payment-form {
|
|
110
|
+
@apply space-y-4;
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## ๐งช Testing
|
|
115
|
+
|
|
116
|
+
### HTML Test Interface
|
|
117
|
+
|
|
118
|
+
The widget includes a comprehensive HTML test file:
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
# Open the test interface
|
|
122
|
+
open test.html
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**Test Features:**
|
|
126
|
+
- โ
Widget loading and mounting
|
|
127
|
+
- โ
Payment method selection
|
|
128
|
+
- โ
Form validation testing
|
|
129
|
+
- โ
Transaction processing simulation
|
|
130
|
+
- โ
Mobile responsiveness testing
|
|
131
|
+
- โ
Error scenario simulation
|
|
132
|
+
- โ
Real-time logging
|
|
133
|
+
|
|
134
|
+
### Framework Testing
|
|
135
|
+
|
|
136
|
+
Test the widget in different React frameworks:
|
|
137
|
+
|
|
138
|
+
```bash
|
|
139
|
+
# Next.js
|
|
140
|
+
npx create-next-app@latest my-app
|
|
141
|
+
cd my-app
|
|
142
|
+
npm install @payloqa/payment-widget
|
|
143
|
+
|
|
144
|
+
# Create React App
|
|
145
|
+
npx create-react-app my-app
|
|
146
|
+
cd my-app
|
|
147
|
+
npm install @payloqa/payment-widget
|
|
148
|
+
|
|
149
|
+
# Vite
|
|
150
|
+
npm create vite@latest my-app -- --template react-ts
|
|
151
|
+
cd my-app
|
|
152
|
+
npm install @payloqa/payment-widget
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
## ๐ฆ Build Outputs
|
|
156
|
+
|
|
157
|
+
The widget is built for multiple formats:
|
|
158
|
+
|
|
159
|
+
- **UMD** (`dist/index.umd.js`) - For direct browser use
|
|
160
|
+
- **ESM** (`dist/index.esm.js`) - For modern bundlers
|
|
161
|
+
- **TypeScript** (`dist/index.d.ts`) - Type definitions
|
|
162
|
+
|
|
163
|
+
### Browser Usage
|
|
164
|
+
|
|
165
|
+
```html
|
|
166
|
+
<!DOCTYPE html>
|
|
167
|
+
<html>
|
|
168
|
+
<head>
|
|
169
|
+
<link rel="stylesheet" href="https://unpkg.com/@payloqa/payment-widget/dist/styles.css">
|
|
170
|
+
</head>
|
|
171
|
+
<body>
|
|
172
|
+
<div id="payment-widget"></div>
|
|
173
|
+
|
|
174
|
+
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
175
|
+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
176
|
+
<script src="https://unpkg.com/@payloqa/payment-widget/dist/index.umd.js"></script>
|
|
177
|
+
|
|
178
|
+
<script>
|
|
179
|
+
const config = {
|
|
180
|
+
apiKey: 'your-api-key',
|
|
181
|
+
platformId: 'your-platform-id',
|
|
182
|
+
apiUrl: 'https://api.payloqa.com/v1/payments'
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
const root = ReactDOM.createRoot(document.getElementById('payment-widget'));
|
|
186
|
+
root.render(React.createElement(PayloqaPaymentWidget.PaymentWidget, {
|
|
187
|
+
config: config,
|
|
188
|
+
amount: 1000,
|
|
189
|
+
currency: 'USD',
|
|
190
|
+
onSuccess: (transaction) => console.log('Success:', transaction),
|
|
191
|
+
onError: (error) => console.error('Error:', error)
|
|
192
|
+
}));
|
|
193
|
+
</script>
|
|
194
|
+
</body>
|
|
195
|
+
</html>
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
## ๐ง Development
|
|
199
|
+
|
|
200
|
+
### Prerequisites
|
|
201
|
+
|
|
202
|
+
- Node.js 16+
|
|
203
|
+
- npm or yarn
|
|
204
|
+
|
|
205
|
+
### Setup
|
|
206
|
+
|
|
207
|
+
```bash
|
|
208
|
+
# Install dependencies
|
|
209
|
+
npm install
|
|
210
|
+
|
|
211
|
+
# Start development server
|
|
212
|
+
npm run dev
|
|
213
|
+
|
|
214
|
+
# Build for production
|
|
215
|
+
npm run build
|
|
216
|
+
|
|
217
|
+
# Type checking
|
|
218
|
+
npm run type-check
|
|
219
|
+
|
|
220
|
+
# Clean build artifacts
|
|
221
|
+
npm run clean
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Project Structure
|
|
225
|
+
|
|
226
|
+
```
|
|
227
|
+
payment-widget/
|
|
228
|
+
โโโ src/
|
|
229
|
+
โ โโโ components/
|
|
230
|
+
โ โ โโโ PaymentWidget.tsx # Main widget component
|
|
231
|
+
โ โ โโโ PaymentMethodSelector.tsx # Payment method selection
|
|
232
|
+
โ โ โโโ PaymentForm.tsx # Payment form
|
|
233
|
+
โ โ โโโ TransactionStatus.tsx # Transaction status display
|
|
234
|
+
โ โโโ services/
|
|
235
|
+
โ โ โโโ paymentService.ts # API service layer
|
|
236
|
+
โ โโโ types/
|
|
237
|
+
โ โ โโโ payment.ts # TypeScript definitions
|
|
238
|
+
โ โโโ utils/
|
|
239
|
+
โ โ โโโ validation.ts # Validation schemas
|
|
240
|
+
โ โ โโโ index.ts # Utility functions
|
|
241
|
+
โ โโโ styles.css # Global styles
|
|
242
|
+
โ โโโ index.ts # Main entry point
|
|
243
|
+
โโโ dist/ # Build output
|
|
244
|
+
โโโ test.html # HTML test interface
|
|
245
|
+
โโโ package.json
|
|
246
|
+
โโโ README.md
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
## ๐ณ Payment Methods
|
|
250
|
+
|
|
251
|
+
The widget supports multiple payment methods:
|
|
252
|
+
|
|
253
|
+
### Credit/Debit Cards
|
|
254
|
+
- Visa
|
|
255
|
+
- Mastercard
|
|
256
|
+
- American Express
|
|
257
|
+
- Discover
|
|
258
|
+
|
|
259
|
+
### Mobile Money
|
|
260
|
+
- M-Pesa (Kenya)
|
|
261
|
+
- MTN Mobile Money (Ghana)
|
|
262
|
+
- Airtel Money (Multiple countries)
|
|
263
|
+
- Vodafone Cash (Ghana)
|
|
264
|
+
|
|
265
|
+
### Bank Transfers
|
|
266
|
+
- Direct bank transfers
|
|
267
|
+
- ACH payments (US)
|
|
268
|
+
- SEPA transfers (EU)
|
|
269
|
+
|
|
270
|
+
## ๐ Security
|
|
271
|
+
|
|
272
|
+
### PCI Compliance
|
|
273
|
+
|
|
274
|
+
The widget is designed to be PCI-compliant:
|
|
275
|
+
|
|
276
|
+
- **No card data storage** - Card details are never stored locally
|
|
277
|
+
- **Secure transmission** - All data is encrypted in transit
|
|
278
|
+
- **Tokenization** - Sensitive data is tokenized for processing
|
|
279
|
+
|
|
280
|
+
### API Security
|
|
281
|
+
|
|
282
|
+
- All API calls include your API key
|
|
283
|
+
- Request signing for additional security
|
|
284
|
+
- Rate limiting protection
|
|
285
|
+
|
|
286
|
+
## ๐ฑ Mobile Support
|
|
287
|
+
|
|
288
|
+
The widget is fully responsive and optimized for mobile devices:
|
|
289
|
+
|
|
290
|
+
- **Touch-friendly** payment method selection
|
|
291
|
+
- **Mobile-optimized** forms
|
|
292
|
+
- **Responsive** design that adapts to screen size
|
|
293
|
+
- **Native mobile** payment method integration
|
|
294
|
+
|
|
295
|
+
## ๐ Transaction Flow
|
|
296
|
+
|
|
297
|
+
The widget handles the complete payment flow:
|
|
298
|
+
|
|
299
|
+
1. **Payment Method Selection** - User chooses payment method
|
|
300
|
+
2. **Form Display** - Relevant payment form is shown
|
|
301
|
+
3. **Validation** - Real-time form validation
|
|
302
|
+
4. **Processing** - Payment is processed securely
|
|
303
|
+
5. **Status Updates** - Real-time transaction status
|
|
304
|
+
6. **Completion** - Success or error handling
|
|
305
|
+
|
|
306
|
+
## ๐ Troubleshooting
|
|
307
|
+
|
|
308
|
+
### Common Issues
|
|
309
|
+
|
|
310
|
+
**Widget doesn't load:**
|
|
311
|
+
- Check if React and ReactDOM are loaded
|
|
312
|
+
- Verify the widget script is included
|
|
313
|
+
- Check browser console for errors
|
|
314
|
+
|
|
315
|
+
**Payment methods not showing:**
|
|
316
|
+
- Verify your API key has payment permissions
|
|
317
|
+
- Check if payment methods are enabled for your account
|
|
318
|
+
- Ensure you're in a supported region
|
|
319
|
+
|
|
320
|
+
**Payment processing fails:**
|
|
321
|
+
- Check API configuration
|
|
322
|
+
- Verify payment method details
|
|
323
|
+
- Check network connectivity
|
|
324
|
+
- Review error messages in console
|
|
325
|
+
|
|
326
|
+
**Styling issues:**
|
|
327
|
+
- Ensure CSS file is loaded
|
|
328
|
+
- Check for CSS conflicts with your app
|
|
329
|
+
- Verify Tailwind CSS is available
|
|
330
|
+
|
|
331
|
+
### Debug Mode
|
|
332
|
+
|
|
333
|
+
Enable debug logging:
|
|
334
|
+
|
|
335
|
+
```jsx
|
|
336
|
+
<PaymentWidget
|
|
337
|
+
config={config}
|
|
338
|
+
amount={1000}
|
|
339
|
+
currency="USD"
|
|
340
|
+
onSuccess={handleSuccess}
|
|
341
|
+
onError={handleError}
|
|
342
|
+
debug={true} // Enable debug logging
|
|
343
|
+
/>
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
## ๐ API Reference
|
|
347
|
+
|
|
348
|
+
### PaymentWidget Props
|
|
349
|
+
|
|
350
|
+
```typescript
|
|
351
|
+
interface PaymentWidgetProps {
|
|
352
|
+
config: PaymentWidgetConfig;
|
|
353
|
+
amount: number; // Amount in cents
|
|
354
|
+
currency: string; // ISO currency code
|
|
355
|
+
onSuccess?: (transaction: PaymentTransaction) => void;
|
|
356
|
+
onError?: (error: PaymentError) => void;
|
|
357
|
+
onStatusChange?: (status: PaymentStatus) => void;
|
|
358
|
+
debug?: boolean;
|
|
359
|
+
}
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
### PaymentTransaction
|
|
363
|
+
|
|
364
|
+
```typescript
|
|
365
|
+
interface PaymentTransaction {
|
|
366
|
+
id: string;
|
|
367
|
+
amount: number;
|
|
368
|
+
currency: string;
|
|
369
|
+
status: PaymentStatus;
|
|
370
|
+
paymentMethod: string;
|
|
371
|
+
createdAt: string;
|
|
372
|
+
updatedAt: string;
|
|
373
|
+
}
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
### PaymentError
|
|
377
|
+
|
|
378
|
+
```typescript
|
|
379
|
+
interface PaymentError {
|
|
380
|
+
message: string;
|
|
381
|
+
code?: string;
|
|
382
|
+
details?: any;
|
|
383
|
+
}
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
### PaymentStatus
|
|
387
|
+
|
|
388
|
+
```typescript
|
|
389
|
+
type PaymentStatus =
|
|
390
|
+
| 'pending' // Payment is being processed
|
|
391
|
+
| 'processing' // Payment is being authorized
|
|
392
|
+
| 'completed' // Payment was successful
|
|
393
|
+
| 'failed' // Payment failed
|
|
394
|
+
| 'cancelled' // Payment was cancelled
|
|
395
|
+
| 'refunded'; // Payment was refunded
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
## ๐ Supported Countries
|
|
399
|
+
|
|
400
|
+
The widget supports payments from multiple countries:
|
|
401
|
+
|
|
402
|
+
### Africa
|
|
403
|
+
- Ghana
|
|
404
|
+
- Kenya
|
|
405
|
+
- Nigeria
|
|
406
|
+
- South Africa
|
|
407
|
+
- Uganda
|
|
408
|
+
- Tanzania
|
|
409
|
+
|
|
410
|
+
### Europe
|
|
411
|
+
- United Kingdom
|
|
412
|
+
- Germany
|
|
413
|
+
- France
|
|
414
|
+
- Netherlands
|
|
415
|
+
- Spain
|
|
416
|
+
- Italy
|
|
417
|
+
|
|
418
|
+
### Americas
|
|
419
|
+
- United States
|
|
420
|
+
- Canada
|
|
421
|
+
- Brazil
|
|
422
|
+
- Mexico
|
|
423
|
+
|
|
424
|
+
### Asia
|
|
425
|
+
- India
|
|
426
|
+
- Singapore
|
|
427
|
+
- Malaysia
|
|
428
|
+
- Philippines
|
|
429
|
+
|
|
430
|
+
## ๐ฐ Pricing
|
|
431
|
+
|
|
432
|
+
The widget is free to use. Transaction fees apply based on your Payloqa account:
|
|
433
|
+
|
|
434
|
+
- **Credit/Debit Cards**: 2.9% + $0.30
|
|
435
|
+
- **Mobile Money**: 1.5% + $0.10
|
|
436
|
+
- **Bank Transfers**: 0.5% + $0.10
|
|
437
|
+
|
|
438
|
+
*Fees may vary by region and payment method*
|
|
439
|
+
|
|
440
|
+
## ๐ค Contributing
|
|
441
|
+
|
|
442
|
+
1. Fork the repository
|
|
443
|
+
2. Create a feature branch
|
|
444
|
+
3. Make your changes
|
|
445
|
+
4. Add tests if applicable
|
|
446
|
+
5. Submit a pull request
|
|
447
|
+
|
|
448
|
+
## ๐ License
|
|
449
|
+
|
|
450
|
+
MIT License - see [LICENSE](../../LICENSE) for details.
|
|
451
|
+
|
|
452
|
+
## ๐ Support
|
|
453
|
+
|
|
454
|
+
- ๐ง Email: support@payloqa.com
|
|
455
|
+
- ๐ Documentation: [docs.payloqa.com](https://docs.payloqa.com)
|
|
456
|
+
- ๐ Issues: [GitHub Issues](https://github.com/kobbycoder/payloqa-widgets/issues)
|
|
457
|
+
|
|
458
|
+
---
|
|
459
|
+
|
|
460
|
+
Built with โค๏ธ by the Payloqa Team
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MobileNetwork } from "../types/payment";
|
|
3
|
+
interface NetworkSelectorProps {
|
|
4
|
+
selectedNetwork?: MobileNetwork;
|
|
5
|
+
onSelect: (network: MobileNetwork) => void;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
primaryColor?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const NetworkSelector: React.FC<NetworkSelectorProps>;
|
|
10
|
+
export default NetworkSelector;
|
|
11
|
+
//# sourceMappingURL=NetworkSelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NetworkSelector.d.ts","sourceRoot":"","sources":["../../src/components/NetworkSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0DD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+HnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface OTPInputProps {
|
|
3
|
+
length?: number;
|
|
4
|
+
onComplete: (code: string) => void;
|
|
5
|
+
onResend: () => void;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
error?: string;
|
|
9
|
+
primaryColor?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const OTPInput: React.FC<OTPInputProps>;
|
|
12
|
+
export default OTPInput;
|
|
13
|
+
//# sourceMappingURL=OTPInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../src/components/OTPInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsKrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { PaymentWidgetConfig } from "../types/payment";
|
|
3
|
+
interface PaymentWidgetProps {
|
|
4
|
+
config: PaymentWidgetConfig;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
onClose?: () => void;
|
|
7
|
+
}
|
|
8
|
+
declare const PaymentWidget: React.FC<PaymentWidgetProps>;
|
|
9
|
+
export default PaymentWidget;
|
|
10
|
+
//# sourceMappingURL=PaymentWidget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaymentWidget.d.ts","sourceRoot":"","sources":["../../src/components/PaymentWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,mBAAmB,EAKpB,MAAM,kBAAkB,CAAC;AAU1B,UAAU,kBAAkB;IAC1B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsmB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface PhoneInputProps {
|
|
3
|
+
value: string;
|
|
4
|
+
onChange: (value: string) => void;
|
|
5
|
+
onValid?: (phone: string) => void;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
error?: string;
|
|
9
|
+
primaryColor?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const PhoneInput: React.FC<PhoneInputProps>;
|
|
12
|
+
export default PhoneInput;
|
|
13
|
+
//# sourceMappingURL=PhoneInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../src/components/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgEzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { PaymentData } from "../types/payment";
|
|
3
|
+
interface ResultScreenProps {
|
|
4
|
+
success: boolean;
|
|
5
|
+
payment?: PaymentData;
|
|
6
|
+
redirectUrl?: string;
|
|
7
|
+
onRedirect: () => void;
|
|
8
|
+
primaryColor?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const ResultScreen: React.FC<ResultScreenProps>;
|
|
11
|
+
export default ResultScreen;
|
|
12
|
+
//# sourceMappingURL=ResultScreen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResultScreen.d.ts","sourceRoot":"","sources":["../../src/components/ResultScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+H7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface TimeoutScreenProps {
|
|
3
|
+
paymentId: string;
|
|
4
|
+
redirectUrl?: string;
|
|
5
|
+
onRedirect: () => void;
|
|
6
|
+
onContinueWaiting: () => void;
|
|
7
|
+
primaryColor?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const TimeoutScreen: React.FC<TimeoutScreenProps>;
|
|
10
|
+
export default TimeoutScreen;
|
|
11
|
+
//# sourceMappingURL=TimeoutScreen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeoutScreen.d.ts","sourceRoot":"","sources":["../../src/components/TimeoutScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+F/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface VerifyingScreenProps {
|
|
3
|
+
paymentId: string;
|
|
4
|
+
showTimeoutWarning?: boolean;
|
|
5
|
+
primaryColor?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const VerifyingScreen: React.FC<VerifyingScreenProps>;
|
|
8
|
+
export default VerifyingScreen;
|
|
9
|
+
//# sourceMappingURL=VerifyingScreen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerifyingScreen.d.ts","sourceRoot":"","sources":["../../src/components/VerifyingScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2CnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
package/dist/demo.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../src/demo.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAwEtB,iBAAS,GAAG,4CA4ZX;AAuBD,eAAe,GAAG,CAAC"}
|