@tagadapay/plugin-sdk 1.0.26 → 1.0.27
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 +414 -414
- package/dist/react/hooks/useAddress.js +19 -19
- package/dist/react/hooks/useCheckout.js +11 -1
- package/dist/react/providers/TagadaProvider.js +5 -5
- package/dist/react/utils/trackingUtils.d.ts +24 -0
- package/dist/react/utils/trackingUtils.js +172 -0
- package/package.json +66 -66
package/README.md
CHANGED
|
@@ -1,414 +1,414 @@
|
|
|
1
|
-
# TagadaPay Plugin SDK
|
|
2
|
-
|
|
3
|
-
A comprehensive SDK for building checkout plugins on the TagadaPay platform. Create custom checkout experiences with React components, payment processing, and advanced features.
|
|
4
|
-
|
|
5
|
-
## 📚 Documentation
|
|
6
|
-
|
|
7
|
-
### Core APIs
|
|
8
|
-
|
|
9
|
-
- **[useCheckout](./README-useCheckout.md)** - Checkout state management and flow control
|
|
10
|
-
- **[setCheckoutInfo](./README-setCheckoutInfo.md)** - Customer information and validation
|
|
11
|
-
- **[useOffers](./README-useOffers.md)** - Dynamic pricing and promotional offers
|
|
12
|
-
- **[Money utilities](./README-money.md)** - Currency formatting and calculations
|
|
13
|
-
- **[URL utilities](./README-urlUtils.md)** - Navigation and routing helpers
|
|
14
|
-
|
|
15
|
-
### Examples
|
|
16
|
-
|
|
17
|
-
- **[Vite Checkout Demo](../checkout-vite)** - Complete checkout implementation
|
|
18
|
-
|
|
19
|
-
## 🚀 Quick Start
|
|
20
|
-
|
|
21
|
-
### Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm install @tagadapay/plugin-sdk
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
### Basic Usage
|
|
28
|
-
|
|
29
|
-
```typescript
|
|
30
|
-
import { useCheckout, setCheckoutInfo } from '@tagadapay/plugin-sdk';
|
|
31
|
-
|
|
32
|
-
function CheckoutPage() {
|
|
33
|
-
const { customer, cart, payment } = useCheckout();
|
|
34
|
-
|
|
35
|
-
const handleSubmit = async (data) => {
|
|
36
|
-
await setCheckoutInfo({
|
|
37
|
-
customer: data.customer,
|
|
38
|
-
payment: data.payment
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<div>
|
|
44
|
-
{/* Your checkout UI */}
|
|
45
|
-
</div>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
## 🎯 Key Features
|
|
51
|
-
|
|
52
|
-
### Payment Processing
|
|
53
|
-
|
|
54
|
-
- Secure tokenized payments
|
|
55
|
-
- Multiple payment method support
|
|
56
|
-
- Real-time validation
|
|
57
|
-
- PCI compliance
|
|
58
|
-
|
|
59
|
-
### Customer Management
|
|
60
|
-
|
|
61
|
-
- Profile management
|
|
62
|
-
- Address validation
|
|
63
|
-
- Order history
|
|
64
|
-
- Preferences
|
|
65
|
-
|
|
66
|
-
### Cart & Pricing
|
|
67
|
-
|
|
68
|
-
- Dynamic pricing
|
|
69
|
-
- Promotional offers
|
|
70
|
-
- Tax calculations
|
|
71
|
-
- Currency conversion
|
|
72
|
-
|
|
73
|
-
### UI Components
|
|
74
|
-
|
|
75
|
-
- Pre-built checkout components
|
|
76
|
-
- Customizable themes
|
|
77
|
-
- Mobile-optimized
|
|
78
|
-
- Accessibility features
|
|
79
|
-
|
|
80
|
-
## 📖 API Reference
|
|
81
|
-
|
|
82
|
-
### Core Hooks
|
|
83
|
-
|
|
84
|
-
#### useCheckout()
|
|
85
|
-
|
|
86
|
-
Primary hook for checkout state management.
|
|
87
|
-
|
|
88
|
-
```typescript
|
|
89
|
-
const {
|
|
90
|
-
customer, // Customer information
|
|
91
|
-
cart, // Shopping cart state
|
|
92
|
-
payment, // Payment details
|
|
93
|
-
shipping, // Shipping information
|
|
94
|
-
loading, // Loading states
|
|
95
|
-
errors, // Error handling
|
|
96
|
-
} = useCheckout();
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
#### useOffers()
|
|
100
|
-
|
|
101
|
-
Hook for managing dynamic offers and pricing.
|
|
102
|
-
|
|
103
|
-
```typescript
|
|
104
|
-
const {
|
|
105
|
-
offers, // Available offers
|
|
106
|
-
applyOffer, // Apply offer function
|
|
107
|
-
removeOffer, // Remove offer function
|
|
108
|
-
total, // Calculated total
|
|
109
|
-
} = useOffers();
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
### Utility Functions
|
|
113
|
-
|
|
114
|
-
#### setCheckoutInfo()
|
|
115
|
-
|
|
116
|
-
Update checkout information with validation.
|
|
117
|
-
|
|
118
|
-
```typescript
|
|
119
|
-
await setCheckoutInfo({
|
|
120
|
-
customer: {
|
|
121
|
-
email: 'user@example.com',
|
|
122
|
-
firstName: 'John',
|
|
123
|
-
lastName: 'Doe',
|
|
124
|
-
},
|
|
125
|
-
payment: {
|
|
126
|
-
method: 'card',
|
|
127
|
-
token: 'pm_token_123',
|
|
128
|
-
},
|
|
129
|
-
});
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
#### Money utilities
|
|
133
|
-
|
|
134
|
-
Format and calculate monetary values.
|
|
135
|
-
|
|
136
|
-
```typescript
|
|
137
|
-
import { formatMoney, convertCurrency } from '@tagadapay/plugin-sdk';
|
|
138
|
-
|
|
139
|
-
const formatted = formatMoney(2999, 'USD'); // "$29.99"
|
|
140
|
-
const converted = convertCurrency(2999, 'USD', 'EUR'); // 2699
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
## 🛠️ Development
|
|
144
|
-
|
|
145
|
-
### Local Development
|
|
146
|
-
|
|
147
|
-
```bash
|
|
148
|
-
# Install dependencies
|
|
149
|
-
npm install
|
|
150
|
-
|
|
151
|
-
# Start development server
|
|
152
|
-
npm run dev
|
|
153
|
-
|
|
154
|
-
# Build for production
|
|
155
|
-
npm run build
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### Testing
|
|
159
|
-
|
|
160
|
-
```bash
|
|
161
|
-
# Run tests
|
|
162
|
-
npm test
|
|
163
|
-
|
|
164
|
-
# Run tests with coverage
|
|
165
|
-
npm run test:coverage
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
### Linting
|
|
169
|
-
|
|
170
|
-
```bash
|
|
171
|
-
# Check code style
|
|
172
|
-
npm run lint
|
|
173
|
-
|
|
174
|
-
# Fix linting issues
|
|
175
|
-
npm run lint:fix
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
## 📦 Build & Deploy
|
|
179
|
-
|
|
180
|
-
### Building Your Plugin
|
|
181
|
-
|
|
182
|
-
```bash
|
|
183
|
-
# Build optimized bundle
|
|
184
|
-
npm run build
|
|
185
|
-
|
|
186
|
-
# Analyze bundle size
|
|
187
|
-
npm run analyze
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
### Deployment
|
|
191
|
-
|
|
192
|
-
```bash
|
|
193
|
-
# Deploy using TagadaPay CLI
|
|
194
|
-
npx @tagadapay/plugin-cli deploy
|
|
195
|
-
|
|
196
|
-
# Deploy specific environment
|
|
197
|
-
npx @tagadapay/plugin-cli deploy --env production
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
## 🔧 Configuration
|
|
201
|
-
|
|
202
|
-
### Plugin Configuration
|
|
203
|
-
|
|
204
|
-
```json
|
|
205
|
-
{
|
|
206
|
-
"name": "My Checkout Plugin",
|
|
207
|
-
"version": "1.0.0",
|
|
208
|
-
"description": "Custom checkout experience",
|
|
209
|
-
"main": "dist/index.js",
|
|
210
|
-
"tagadapay": {
|
|
211
|
-
"type": "checkout",
|
|
212
|
-
"mode": "direct",
|
|
213
|
-
"framework": "react"
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
### Environment Variables
|
|
219
|
-
|
|
220
|
-
```env
|
|
221
|
-
TAGADAPAY_API_KEY=your_api_key
|
|
222
|
-
TAGADAPAY_ENVIRONMENT=sandbox
|
|
223
|
-
TAGADAPAY_STORE_ID=your_store_id
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
## 🎨 Styling & Themes
|
|
227
|
-
|
|
228
|
-
### CSS Custom Properties
|
|
229
|
-
|
|
230
|
-
```css
|
|
231
|
-
:root {
|
|
232
|
-
--tagada-primary: #007bff;
|
|
233
|
-
--tagada-secondary: #6c757d;
|
|
234
|
-
--tagada-success: #28a745;
|
|
235
|
-
--tagada-danger: #dc3545;
|
|
236
|
-
--tagada-border-radius: 4px;
|
|
237
|
-
--tagada-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
238
|
-
}
|
|
239
|
-
```
|
|
240
|
-
|
|
241
|
-
### Component Styling
|
|
242
|
-
|
|
243
|
-
```typescript
|
|
244
|
-
import { styled } from '@tagadapay/plugin-sdk';
|
|
245
|
-
|
|
246
|
-
const StyledButton = styled.button`
|
|
247
|
-
background: var(--tagada-primary);
|
|
248
|
-
color: white;
|
|
249
|
-
border-radius: var(--tagada-border-radius);
|
|
250
|
-
padding: 12px 24px;
|
|
251
|
-
border: none;
|
|
252
|
-
cursor: pointer;
|
|
253
|
-
|
|
254
|
-
&:hover {
|
|
255
|
-
opacity: 0.9;
|
|
256
|
-
}
|
|
257
|
-
`;
|
|
258
|
-
```
|
|
259
|
-
|
|
260
|
-
## 🔐 Security
|
|
261
|
-
|
|
262
|
-
### Best Practices
|
|
263
|
-
|
|
264
|
-
- Never store sensitive payment data
|
|
265
|
-
- Always validate user inputs
|
|
266
|
-
- Use HTTPS in production
|
|
267
|
-
- Implement proper error handling
|
|
268
|
-
- Follow PCI DSS guidelines
|
|
269
|
-
|
|
270
|
-
### Token Management
|
|
271
|
-
|
|
272
|
-
```typescript
|
|
273
|
-
// ✅ Good: Use tokenized payments
|
|
274
|
-
const paymentToken = await tokenizePayment(cardData);
|
|
275
|
-
await processPayment({ token: paymentToken });
|
|
276
|
-
|
|
277
|
-
// ❌ Bad: Never store raw card data
|
|
278
|
-
// const cardNumber = '4111111111111111'; // Don't do this
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
## 📱 Mobile Optimization
|
|
282
|
-
|
|
283
|
-
### Responsive Design
|
|
284
|
-
|
|
285
|
-
```css
|
|
286
|
-
.checkout-container {
|
|
287
|
-
max-width: 600px;
|
|
288
|
-
margin: 0 auto;
|
|
289
|
-
padding: 16px;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
@media (max-width: 768px) {
|
|
293
|
-
.checkout-container {
|
|
294
|
-
padding: 8px;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
.checkout-form {
|
|
298
|
-
font-size: 16px; /* Prevent zoom on iOS */
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
```
|
|
302
|
-
|
|
303
|
-
### Touch Interactions
|
|
304
|
-
|
|
305
|
-
```typescript
|
|
306
|
-
const handleTouchStart = (e) => {
|
|
307
|
-
// Optimize for touch devices
|
|
308
|
-
e.preventDefault();
|
|
309
|
-
// Handle touch interaction
|
|
310
|
-
};
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
## 🌐 Internationalization
|
|
314
|
-
|
|
315
|
-
### Multi-language Support
|
|
316
|
-
|
|
317
|
-
```typescript
|
|
318
|
-
import { useTranslation } from '@tagadapay/plugin-sdk';
|
|
319
|
-
|
|
320
|
-
function CheckoutForm() {
|
|
321
|
-
const { t } = useTranslation();
|
|
322
|
-
|
|
323
|
-
return (
|
|
324
|
-
<form>
|
|
325
|
-
<label>{t('checkout.email')}</label>
|
|
326
|
-
<input type="email" placeholder={t('checkout.email_placeholder')} />
|
|
327
|
-
</form>
|
|
328
|
-
);
|
|
329
|
-
}
|
|
330
|
-
```
|
|
331
|
-
|
|
332
|
-
### Currency Support
|
|
333
|
-
|
|
334
|
-
```typescript
|
|
335
|
-
import { useCurrency } from '@tagadapay/plugin-sdk';
|
|
336
|
-
|
|
337
|
-
function PriceDisplay({ amount }) {
|
|
338
|
-
const { formatPrice, currency } = useCurrency();
|
|
339
|
-
|
|
340
|
-
return <span>{formatPrice(amount, currency)}</span>;
|
|
341
|
-
}
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
## 📊 Analytics & Monitoring
|
|
345
|
-
|
|
346
|
-
### Event Tracking
|
|
347
|
-
|
|
348
|
-
```typescript
|
|
349
|
-
import { trackEvent } from '@tagadapay/plugin-sdk';
|
|
350
|
-
|
|
351
|
-
// Track user interactions
|
|
352
|
-
trackEvent('checkout_started', {
|
|
353
|
-
product_id: 'prod_123',
|
|
354
|
-
value: 2999,
|
|
355
|
-
currency: 'USD',
|
|
356
|
-
});
|
|
357
|
-
|
|
358
|
-
// Track conversions
|
|
359
|
-
trackEvent('purchase_completed', {
|
|
360
|
-
transaction_id: 'txn_456',
|
|
361
|
-
value: 2999,
|
|
362
|
-
currency: 'USD',
|
|
363
|
-
});
|
|
364
|
-
```
|
|
365
|
-
|
|
366
|
-
### Performance Monitoring
|
|
367
|
-
|
|
368
|
-
```typescript
|
|
369
|
-
import { performance } from '@tagadapay/plugin-sdk';
|
|
370
|
-
|
|
371
|
-
// Measure load times
|
|
372
|
-
performance.mark('checkout-start');
|
|
373
|
-
// ... checkout logic
|
|
374
|
-
performance.mark('checkout-end');
|
|
375
|
-
performance.measure('checkout-duration', 'checkout-start', 'checkout-end');
|
|
376
|
-
```
|
|
377
|
-
|
|
378
|
-
## 🤝 Contributing
|
|
379
|
-
|
|
380
|
-
### Development Setup
|
|
381
|
-
|
|
382
|
-
```bash
|
|
383
|
-
# Clone the repository
|
|
384
|
-
git clone https://github.com/tagadapay/plugin-sdk.git
|
|
385
|
-
|
|
386
|
-
# Install dependencies
|
|
387
|
-
npm install
|
|
388
|
-
|
|
389
|
-
# Start development
|
|
390
|
-
npm run dev
|
|
391
|
-
```
|
|
392
|
-
|
|
393
|
-
### Submitting Changes
|
|
394
|
-
|
|
395
|
-
1. Fork the repository
|
|
396
|
-
2. Create a feature branch
|
|
397
|
-
3. Make your changes
|
|
398
|
-
4. Add tests
|
|
399
|
-
5. Submit a pull request
|
|
400
|
-
|
|
401
|
-
## 📄 License
|
|
402
|
-
|
|
403
|
-
MIT License - see [LICENSE](./LICENSE) for details.
|
|
404
|
-
|
|
405
|
-
## 🆘 Support
|
|
406
|
-
|
|
407
|
-
- **Documentation**: [docs.tagadapay.com](https://docs.tagadapay.com)
|
|
408
|
-
- **Discord**: [discord.gg/tagadapay](https://discord.gg/tagadapay)
|
|
409
|
-
- **Email**: support@tagadapay.com
|
|
410
|
-
- **GitHub Issues**: [github.com/tagadapay/plugin-sdk/issues](https://github.com/tagadapay/plugin-sdk/issues)
|
|
411
|
-
|
|
412
|
-
---
|
|
413
|
-
|
|
414
|
-
Built with ❤️ by the TagadaPay team
|
|
1
|
+
# TagadaPay Plugin SDK
|
|
2
|
+
|
|
3
|
+
A comprehensive SDK for building checkout plugins on the TagadaPay platform. Create custom checkout experiences with React components, payment processing, and advanced features.
|
|
4
|
+
|
|
5
|
+
## 📚 Documentation
|
|
6
|
+
|
|
7
|
+
### Core APIs
|
|
8
|
+
|
|
9
|
+
- **[useCheckout](./README-useCheckout.md)** - Checkout state management and flow control
|
|
10
|
+
- **[setCheckoutInfo](./README-setCheckoutInfo.md)** - Customer information and validation
|
|
11
|
+
- **[useOffers](./README-useOffers.md)** - Dynamic pricing and promotional offers
|
|
12
|
+
- **[Money utilities](./README-money.md)** - Currency formatting and calculations
|
|
13
|
+
- **[URL utilities](./README-urlUtils.md)** - Navigation and routing helpers
|
|
14
|
+
|
|
15
|
+
### Examples
|
|
16
|
+
|
|
17
|
+
- **[Vite Checkout Demo](../checkout-vite)** - Complete checkout implementation
|
|
18
|
+
|
|
19
|
+
## 🚀 Quick Start
|
|
20
|
+
|
|
21
|
+
### Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @tagadapay/plugin-sdk
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Basic Usage
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import { useCheckout, setCheckoutInfo } from '@tagadapay/plugin-sdk';
|
|
31
|
+
|
|
32
|
+
function CheckoutPage() {
|
|
33
|
+
const { customer, cart, payment } = useCheckout();
|
|
34
|
+
|
|
35
|
+
const handleSubmit = async (data) => {
|
|
36
|
+
await setCheckoutInfo({
|
|
37
|
+
customer: data.customer,
|
|
38
|
+
payment: data.payment
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
{/* Your checkout UI */}
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## 🎯 Key Features
|
|
51
|
+
|
|
52
|
+
### Payment Processing
|
|
53
|
+
|
|
54
|
+
- Secure tokenized payments
|
|
55
|
+
- Multiple payment method support
|
|
56
|
+
- Real-time validation
|
|
57
|
+
- PCI compliance
|
|
58
|
+
|
|
59
|
+
### Customer Management
|
|
60
|
+
|
|
61
|
+
- Profile management
|
|
62
|
+
- Address validation
|
|
63
|
+
- Order history
|
|
64
|
+
- Preferences
|
|
65
|
+
|
|
66
|
+
### Cart & Pricing
|
|
67
|
+
|
|
68
|
+
- Dynamic pricing
|
|
69
|
+
- Promotional offers
|
|
70
|
+
- Tax calculations
|
|
71
|
+
- Currency conversion
|
|
72
|
+
|
|
73
|
+
### UI Components
|
|
74
|
+
|
|
75
|
+
- Pre-built checkout components
|
|
76
|
+
- Customizable themes
|
|
77
|
+
- Mobile-optimized
|
|
78
|
+
- Accessibility features
|
|
79
|
+
|
|
80
|
+
## 📖 API Reference
|
|
81
|
+
|
|
82
|
+
### Core Hooks
|
|
83
|
+
|
|
84
|
+
#### useCheckout()
|
|
85
|
+
|
|
86
|
+
Primary hook for checkout state management.
|
|
87
|
+
|
|
88
|
+
```typescript
|
|
89
|
+
const {
|
|
90
|
+
customer, // Customer information
|
|
91
|
+
cart, // Shopping cart state
|
|
92
|
+
payment, // Payment details
|
|
93
|
+
shipping, // Shipping information
|
|
94
|
+
loading, // Loading states
|
|
95
|
+
errors, // Error handling
|
|
96
|
+
} = useCheckout();
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
#### useOffers()
|
|
100
|
+
|
|
101
|
+
Hook for managing dynamic offers and pricing.
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
const {
|
|
105
|
+
offers, // Available offers
|
|
106
|
+
applyOffer, // Apply offer function
|
|
107
|
+
removeOffer, // Remove offer function
|
|
108
|
+
total, // Calculated total
|
|
109
|
+
} = useOffers();
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Utility Functions
|
|
113
|
+
|
|
114
|
+
#### setCheckoutInfo()
|
|
115
|
+
|
|
116
|
+
Update checkout information with validation.
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
await setCheckoutInfo({
|
|
120
|
+
customer: {
|
|
121
|
+
email: 'user@example.com',
|
|
122
|
+
firstName: 'John',
|
|
123
|
+
lastName: 'Doe',
|
|
124
|
+
},
|
|
125
|
+
payment: {
|
|
126
|
+
method: 'card',
|
|
127
|
+
token: 'pm_token_123',
|
|
128
|
+
},
|
|
129
|
+
});
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
#### Money utilities
|
|
133
|
+
|
|
134
|
+
Format and calculate monetary values.
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
import { formatMoney, convertCurrency } from '@tagadapay/plugin-sdk';
|
|
138
|
+
|
|
139
|
+
const formatted = formatMoney(2999, 'USD'); // "$29.99"
|
|
140
|
+
const converted = convertCurrency(2999, 'USD', 'EUR'); // 2699
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## 🛠️ Development
|
|
144
|
+
|
|
145
|
+
### Local Development
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
# Install dependencies
|
|
149
|
+
npm install
|
|
150
|
+
|
|
151
|
+
# Start development server
|
|
152
|
+
npm run dev
|
|
153
|
+
|
|
154
|
+
# Build for production
|
|
155
|
+
npm run build
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Testing
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
# Run tests
|
|
162
|
+
npm test
|
|
163
|
+
|
|
164
|
+
# Run tests with coverage
|
|
165
|
+
npm run test:coverage
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### Linting
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
# Check code style
|
|
172
|
+
npm run lint
|
|
173
|
+
|
|
174
|
+
# Fix linting issues
|
|
175
|
+
npm run lint:fix
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
## 📦 Build & Deploy
|
|
179
|
+
|
|
180
|
+
### Building Your Plugin
|
|
181
|
+
|
|
182
|
+
```bash
|
|
183
|
+
# Build optimized bundle
|
|
184
|
+
npm run build
|
|
185
|
+
|
|
186
|
+
# Analyze bundle size
|
|
187
|
+
npm run analyze
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Deployment
|
|
191
|
+
|
|
192
|
+
```bash
|
|
193
|
+
# Deploy using TagadaPay CLI
|
|
194
|
+
npx @tagadapay/plugin-cli deploy
|
|
195
|
+
|
|
196
|
+
# Deploy specific environment
|
|
197
|
+
npx @tagadapay/plugin-cli deploy --env production
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
## 🔧 Configuration
|
|
201
|
+
|
|
202
|
+
### Plugin Configuration
|
|
203
|
+
|
|
204
|
+
```json
|
|
205
|
+
{
|
|
206
|
+
"name": "My Checkout Plugin",
|
|
207
|
+
"version": "1.0.0",
|
|
208
|
+
"description": "Custom checkout experience",
|
|
209
|
+
"main": "dist/index.js",
|
|
210
|
+
"tagadapay": {
|
|
211
|
+
"type": "checkout",
|
|
212
|
+
"mode": "direct",
|
|
213
|
+
"framework": "react"
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Environment Variables
|
|
219
|
+
|
|
220
|
+
```env
|
|
221
|
+
TAGADAPAY_API_KEY=your_api_key
|
|
222
|
+
TAGADAPAY_ENVIRONMENT=sandbox
|
|
223
|
+
TAGADAPAY_STORE_ID=your_store_id
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
## 🎨 Styling & Themes
|
|
227
|
+
|
|
228
|
+
### CSS Custom Properties
|
|
229
|
+
|
|
230
|
+
```css
|
|
231
|
+
:root {
|
|
232
|
+
--tagada-primary: #007bff;
|
|
233
|
+
--tagada-secondary: #6c757d;
|
|
234
|
+
--tagada-success: #28a745;
|
|
235
|
+
--tagada-danger: #dc3545;
|
|
236
|
+
--tagada-border-radius: 4px;
|
|
237
|
+
--tagada-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
238
|
+
}
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Component Styling
|
|
242
|
+
|
|
243
|
+
```typescript
|
|
244
|
+
import { styled } from '@tagadapay/plugin-sdk';
|
|
245
|
+
|
|
246
|
+
const StyledButton = styled.button`
|
|
247
|
+
background: var(--tagada-primary);
|
|
248
|
+
color: white;
|
|
249
|
+
border-radius: var(--tagada-border-radius);
|
|
250
|
+
padding: 12px 24px;
|
|
251
|
+
border: none;
|
|
252
|
+
cursor: pointer;
|
|
253
|
+
|
|
254
|
+
&:hover {
|
|
255
|
+
opacity: 0.9;
|
|
256
|
+
}
|
|
257
|
+
`;
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
## 🔐 Security
|
|
261
|
+
|
|
262
|
+
### Best Practices
|
|
263
|
+
|
|
264
|
+
- Never store sensitive payment data
|
|
265
|
+
- Always validate user inputs
|
|
266
|
+
- Use HTTPS in production
|
|
267
|
+
- Implement proper error handling
|
|
268
|
+
- Follow PCI DSS guidelines
|
|
269
|
+
|
|
270
|
+
### Token Management
|
|
271
|
+
|
|
272
|
+
```typescript
|
|
273
|
+
// ✅ Good: Use tokenized payments
|
|
274
|
+
const paymentToken = await tokenizePayment(cardData);
|
|
275
|
+
await processPayment({ token: paymentToken });
|
|
276
|
+
|
|
277
|
+
// ❌ Bad: Never store raw card data
|
|
278
|
+
// const cardNumber = '4111111111111111'; // Don't do this
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
## 📱 Mobile Optimization
|
|
282
|
+
|
|
283
|
+
### Responsive Design
|
|
284
|
+
|
|
285
|
+
```css
|
|
286
|
+
.checkout-container {
|
|
287
|
+
max-width: 600px;
|
|
288
|
+
margin: 0 auto;
|
|
289
|
+
padding: 16px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
@media (max-width: 768px) {
|
|
293
|
+
.checkout-container {
|
|
294
|
+
padding: 8px;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.checkout-form {
|
|
298
|
+
font-size: 16px; /* Prevent zoom on iOS */
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### Touch Interactions
|
|
304
|
+
|
|
305
|
+
```typescript
|
|
306
|
+
const handleTouchStart = (e) => {
|
|
307
|
+
// Optimize for touch devices
|
|
308
|
+
e.preventDefault();
|
|
309
|
+
// Handle touch interaction
|
|
310
|
+
};
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
## 🌐 Internationalization
|
|
314
|
+
|
|
315
|
+
### Multi-language Support
|
|
316
|
+
|
|
317
|
+
```typescript
|
|
318
|
+
import { useTranslation } from '@tagadapay/plugin-sdk';
|
|
319
|
+
|
|
320
|
+
function CheckoutForm() {
|
|
321
|
+
const { t } = useTranslation();
|
|
322
|
+
|
|
323
|
+
return (
|
|
324
|
+
<form>
|
|
325
|
+
<label>{t('checkout.email')}</label>
|
|
326
|
+
<input type="email" placeholder={t('checkout.email_placeholder')} />
|
|
327
|
+
</form>
|
|
328
|
+
);
|
|
329
|
+
}
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
### Currency Support
|
|
333
|
+
|
|
334
|
+
```typescript
|
|
335
|
+
import { useCurrency } from '@tagadapay/plugin-sdk';
|
|
336
|
+
|
|
337
|
+
function PriceDisplay({ amount }) {
|
|
338
|
+
const { formatPrice, currency } = useCurrency();
|
|
339
|
+
|
|
340
|
+
return <span>{formatPrice(amount, currency)}</span>;
|
|
341
|
+
}
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
## 📊 Analytics & Monitoring
|
|
345
|
+
|
|
346
|
+
### Event Tracking
|
|
347
|
+
|
|
348
|
+
```typescript
|
|
349
|
+
import { trackEvent } from '@tagadapay/plugin-sdk';
|
|
350
|
+
|
|
351
|
+
// Track user interactions
|
|
352
|
+
trackEvent('checkout_started', {
|
|
353
|
+
product_id: 'prod_123',
|
|
354
|
+
value: 2999,
|
|
355
|
+
currency: 'USD',
|
|
356
|
+
});
|
|
357
|
+
|
|
358
|
+
// Track conversions
|
|
359
|
+
trackEvent('purchase_completed', {
|
|
360
|
+
transaction_id: 'txn_456',
|
|
361
|
+
value: 2999,
|
|
362
|
+
currency: 'USD',
|
|
363
|
+
});
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
### Performance Monitoring
|
|
367
|
+
|
|
368
|
+
```typescript
|
|
369
|
+
import { performance } from '@tagadapay/plugin-sdk';
|
|
370
|
+
|
|
371
|
+
// Measure load times
|
|
372
|
+
performance.mark('checkout-start');
|
|
373
|
+
// ... checkout logic
|
|
374
|
+
performance.mark('checkout-end');
|
|
375
|
+
performance.measure('checkout-duration', 'checkout-start', 'checkout-end');
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
## 🤝 Contributing
|
|
379
|
+
|
|
380
|
+
### Development Setup
|
|
381
|
+
|
|
382
|
+
```bash
|
|
383
|
+
# Clone the repository
|
|
384
|
+
git clone https://github.com/tagadapay/plugin-sdk.git
|
|
385
|
+
|
|
386
|
+
# Install dependencies
|
|
387
|
+
npm install
|
|
388
|
+
|
|
389
|
+
# Start development
|
|
390
|
+
npm run dev
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
### Submitting Changes
|
|
394
|
+
|
|
395
|
+
1. Fork the repository
|
|
396
|
+
2. Create a feature branch
|
|
397
|
+
3. Make your changes
|
|
398
|
+
4. Add tests
|
|
399
|
+
5. Submit a pull request
|
|
400
|
+
|
|
401
|
+
## 📄 License
|
|
402
|
+
|
|
403
|
+
MIT License - see [LICENSE](./LICENSE) for details.
|
|
404
|
+
|
|
405
|
+
## 🆘 Support
|
|
406
|
+
|
|
407
|
+
- **Documentation**: [docs.tagadapay.com](https://docs.tagadapay.com)
|
|
408
|
+
- **Discord**: [discord.gg/tagadapay](https://discord.gg/tagadapay)
|
|
409
|
+
- **Email**: support@tagadapay.com
|
|
410
|
+
- **GitHub Issues**: [github.com/tagadapay/plugin-sdk/issues](https://github.com/tagadapay/plugin-sdk/issues)
|
|
411
|
+
|
|
412
|
+
---
|
|
413
|
+
|
|
414
|
+
Built with ❤️ by the TagadaPay team
|
|
@@ -277,25 +277,25 @@ export function useAddress(options = {}) {
|
|
|
277
277
|
// Custom styles for Google Places dropdown
|
|
278
278
|
useEffect(() => {
|
|
279
279
|
if (enableGooglePlaces && !document.getElementById('google-places-custom-styles')) {
|
|
280
|
-
const autocompleteStyles = `
|
|
281
|
-
.pac-container {
|
|
282
|
-
border-radius: 8px;
|
|
283
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
284
|
-
border: 1px solid #e2e8f0;
|
|
285
|
-
margin-top: 4px;
|
|
286
|
-
font-family: inherit;
|
|
287
|
-
z-index: 9999;
|
|
288
|
-
}
|
|
289
|
-
.pac-item {
|
|
290
|
-
padding: 10px 12px;
|
|
291
|
-
font-size: 14px;
|
|
292
|
-
cursor: pointer;
|
|
293
|
-
border-top: 1px solid #f3f4f6;
|
|
294
|
-
}
|
|
295
|
-
.pac-item:first-child { border-top: none; }
|
|
296
|
-
.pac-item:hover { background-color: #f8fafc; }
|
|
297
|
-
.pac-item-selected, .pac-item-selected:hover { background-color: #eef2ff; }
|
|
298
|
-
.pac-matched { font-weight: 600; }
|
|
280
|
+
const autocompleteStyles = `
|
|
281
|
+
.pac-container {
|
|
282
|
+
border-radius: 8px;
|
|
283
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
284
|
+
border: 1px solid #e2e8f0;
|
|
285
|
+
margin-top: 4px;
|
|
286
|
+
font-family: inherit;
|
|
287
|
+
z-index: 9999;
|
|
288
|
+
}
|
|
289
|
+
.pac-item {
|
|
290
|
+
padding: 10px 12px;
|
|
291
|
+
font-size: 14px;
|
|
292
|
+
cursor: pointer;
|
|
293
|
+
border-top: 1px solid #f3f4f6;
|
|
294
|
+
}
|
|
295
|
+
.pac-item:first-child { border-top: none; }
|
|
296
|
+
.pac-item:hover { background-color: #f8fafc; }
|
|
297
|
+
.pac-item-selected, .pac-item-selected:hover { background-color: #eef2ff; }
|
|
298
|
+
.pac-matched { font-weight: 600; }
|
|
299
299
|
`;
|
|
300
300
|
const styleElement = document.createElement('style');
|
|
301
301
|
styleElement.id = 'google-places-custom-styles';
|
|
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
import { useCurrency } from '../hooks/useCurrency';
|
|
3
3
|
import { useTagadaContext } from '../providers/TagadaProvider';
|
|
4
4
|
import { getCheckoutToken } from '../utils/urlUtils';
|
|
5
|
+
import { collectTrackingData } from '../utils/trackingUtils';
|
|
5
6
|
export function useCheckout(options = {}) {
|
|
6
7
|
const { apiService, updateCheckoutDebugData, refreshCoordinator, store, currency } = useTagadaContext();
|
|
7
8
|
const { code: currentCurrency } = useCurrency();
|
|
@@ -62,6 +63,14 @@ export function useCheckout(options = {}) {
|
|
|
62
63
|
setIsLoading(true);
|
|
63
64
|
setError(null);
|
|
64
65
|
try {
|
|
66
|
+
// Collect tracking data
|
|
67
|
+
const trackingData = await collectTrackingData();
|
|
68
|
+
// Enhanced customerMetadata with tracking data
|
|
69
|
+
const enhancedCustomerMetadata = {
|
|
70
|
+
...params.customerMetadata,
|
|
71
|
+
localStorage: trackingData.localStorageData,
|
|
72
|
+
cookies: trackingData.trackingCookiesData,
|
|
73
|
+
};
|
|
65
74
|
const requestBody = {
|
|
66
75
|
...params,
|
|
67
76
|
returnUrl: params.returnUrl || window.location.origin,
|
|
@@ -69,6 +78,7 @@ export function useCheckout(options = {}) {
|
|
|
69
78
|
...params.customer,
|
|
70
79
|
currency: params.customer?.currency || currentCurrency,
|
|
71
80
|
},
|
|
81
|
+
customerMetadata: enhancedCustomerMetadata,
|
|
72
82
|
};
|
|
73
83
|
const response = await apiService.fetch('/api/v1/checkout/session/init', {
|
|
74
84
|
method: 'POST',
|
|
@@ -417,7 +427,7 @@ export function useCheckout(options = {}) {
|
|
|
417
427
|
lineItems,
|
|
418
428
|
storeId: store?.id,
|
|
419
429
|
currency: currency.code,
|
|
420
|
-
promotionIds: promotionIds
|
|
430
|
+
promotionIds: promotionIds ?? [],
|
|
421
431
|
},
|
|
422
432
|
});
|
|
423
433
|
return response;
|
|
@@ -22,11 +22,11 @@ const InitializationLoader = () => (_jsx("div", { style: {
|
|
|
22
22
|
backgroundSize: '200% 100%',
|
|
23
23
|
animation: 'tagada-loading 1.5s ease-in-out infinite',
|
|
24
24
|
zIndex: 9999,
|
|
25
|
-
}, children: _jsx("style", { children: `
|
|
26
|
-
@keyframes tagada-loading {
|
|
27
|
-
0% { background-position: 200% 0; }
|
|
28
|
-
100% { background-position: -200% 0; }
|
|
29
|
-
}
|
|
25
|
+
}, children: _jsx("style", { children: `
|
|
26
|
+
@keyframes tagada-loading {
|
|
27
|
+
0% { background-position: 200% 0; }
|
|
28
|
+
100% { background-position: -200% 0; }
|
|
29
|
+
}
|
|
30
30
|
` }) }));
|
|
31
31
|
const TagadaContext = createContext(null);
|
|
32
32
|
export function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface TrackingData {
|
|
2
|
+
trackingCookiesData: Record<string, string>;
|
|
3
|
+
localStorageData: Record<string, string>;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Define pixel tracking cookie patterns for various platforms
|
|
7
|
+
*/
|
|
8
|
+
export declare const trackingCookiePatterns: RegExp[];
|
|
9
|
+
/**
|
|
10
|
+
* Function to get cookies with retry logic
|
|
11
|
+
*/
|
|
12
|
+
export declare const getCookiesWithRetry: (maxRetries?: number, delay?: number) => Promise<string[]>;
|
|
13
|
+
/**
|
|
14
|
+
* Collect localStorage data as dictionary
|
|
15
|
+
*/
|
|
16
|
+
export declare const getLocalStorageData: () => Record<string, string>;
|
|
17
|
+
/**
|
|
18
|
+
* Collect tracking cookies data based on defined patterns
|
|
19
|
+
*/
|
|
20
|
+
export declare const getTrackingCookiesData: () => Promise<Record<string, string>>;
|
|
21
|
+
/**
|
|
22
|
+
* Collect all tracking data (localStorage and cookies)
|
|
23
|
+
*/
|
|
24
|
+
export declare const collectTrackingData: () => Promise<TrackingData>;
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Define pixel tracking cookie patterns for various platforms
|
|
3
|
+
*/
|
|
4
|
+
export const trackingCookiePatterns = [
|
|
5
|
+
// Meta/Facebook pixels
|
|
6
|
+
/^_fbp/,
|
|
7
|
+
/^_fbc/,
|
|
8
|
+
/^fr$/,
|
|
9
|
+
/^_fbq/,
|
|
10
|
+
/^fbq/,
|
|
11
|
+
/^sb$/,
|
|
12
|
+
// Google Analytics & Ads
|
|
13
|
+
/^_ga/,
|
|
14
|
+
/^_gid/,
|
|
15
|
+
/^_gcl_au/,
|
|
16
|
+
/^_gac_/,
|
|
17
|
+
/^_gtag/,
|
|
18
|
+
/^_gat/,
|
|
19
|
+
/^_dc_gtm_/,
|
|
20
|
+
/^_gtm/,
|
|
21
|
+
// Google Ads
|
|
22
|
+
/^_gcl_/,
|
|
23
|
+
/^_gclid/,
|
|
24
|
+
/^_gclsrc/,
|
|
25
|
+
// Snapchat
|
|
26
|
+
/^_scid/,
|
|
27
|
+
/^_sctr/,
|
|
28
|
+
/^_schn/,
|
|
29
|
+
/^_scpx/,
|
|
30
|
+
// TikTok
|
|
31
|
+
/^_ttp/,
|
|
32
|
+
/^_tt_enable_cookie/,
|
|
33
|
+
/^_ttclid/,
|
|
34
|
+
/^_tta/,
|
|
35
|
+
// Pinterest
|
|
36
|
+
/^_pin/,
|
|
37
|
+
/^_pinterest_/,
|
|
38
|
+
/^_pinid/,
|
|
39
|
+
// Twitter/X
|
|
40
|
+
/^_twitter/,
|
|
41
|
+
/^_twid/,
|
|
42
|
+
/^muc_ads/,
|
|
43
|
+
// LinkedIn
|
|
44
|
+
/^_li/,
|
|
45
|
+
/^AnalyticsSyncHistory/,
|
|
46
|
+
/^bcookie/,
|
|
47
|
+
/^bscookie/,
|
|
48
|
+
// Microsoft/Bing
|
|
49
|
+
/^_uetsid/,
|
|
50
|
+
/^_uetvid/,
|
|
51
|
+
/^MUID/,
|
|
52
|
+
/^_msdcs/,
|
|
53
|
+
// Amazon
|
|
54
|
+
/^ad-id/,
|
|
55
|
+
/^ad-privacy/,
|
|
56
|
+
// CVG tracking
|
|
57
|
+
/^__cvg_uid/,
|
|
58
|
+
/^__cvg_sid/,
|
|
59
|
+
/^__cvg_session/,
|
|
60
|
+
// Shopify tracking
|
|
61
|
+
/^_shopify_y/,
|
|
62
|
+
/^_shopify_s/,
|
|
63
|
+
/^_shopify_ga/,
|
|
64
|
+
/^_shopify_ga_/,
|
|
65
|
+
/^_shopify_sa_p/,
|
|
66
|
+
/^_shopify_sa_t/,
|
|
67
|
+
// General tracking
|
|
68
|
+
/^_awc/,
|
|
69
|
+
/^_aw_/,
|
|
70
|
+
/^utm_/,
|
|
71
|
+
/^_clck/,
|
|
72
|
+
/^_clsk/,
|
|
73
|
+
];
|
|
74
|
+
/**
|
|
75
|
+
* Function to get cookies with retry logic
|
|
76
|
+
*/
|
|
77
|
+
export const getCookiesWithRetry = async (maxRetries = 3, delay = 100) => {
|
|
78
|
+
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
|
79
|
+
try {
|
|
80
|
+
const cookies = document.cookie.split('; ');
|
|
81
|
+
if (cookies.length > 0 && cookies[0] !== '') {
|
|
82
|
+
return cookies;
|
|
83
|
+
}
|
|
84
|
+
// If no cookies found, wait and retry
|
|
85
|
+
if (attempt < maxRetries) {
|
|
86
|
+
console.log(`Cookie collection attempt ${attempt} failed, retrying in ${delay}ms...`);
|
|
87
|
+
await new Promise((resolve) => setTimeout(resolve, delay));
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
catch (error) {
|
|
91
|
+
console.warn(`Cookie collection attempt ${attempt} failed:`, error);
|
|
92
|
+
if (attempt < maxRetries) {
|
|
93
|
+
await new Promise((resolve) => setTimeout(resolve, delay));
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
return [];
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* Collect localStorage data as dictionary
|
|
101
|
+
*/
|
|
102
|
+
export const getLocalStorageData = () => {
|
|
103
|
+
const localStorageData = {};
|
|
104
|
+
try {
|
|
105
|
+
for (let i = 0; i < localStorage.length; i++) {
|
|
106
|
+
const key = localStorage.key(i);
|
|
107
|
+
if (key) {
|
|
108
|
+
localStorageData[key] = localStorage.getItem(key) || '';
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
catch (error) {
|
|
113
|
+
console.warn('Failed to read localStorage:', error);
|
|
114
|
+
}
|
|
115
|
+
return localStorageData;
|
|
116
|
+
};
|
|
117
|
+
/**
|
|
118
|
+
* Collect tracking cookies data based on defined patterns
|
|
119
|
+
*/
|
|
120
|
+
export const getTrackingCookiesData = async () => {
|
|
121
|
+
const trackingCookiesData = {};
|
|
122
|
+
try {
|
|
123
|
+
// Get cookies with retry logic
|
|
124
|
+
const cookies = await getCookiesWithRetry();
|
|
125
|
+
if (cookies.length === 0) {
|
|
126
|
+
console.warn('No cookies found after retry attempts');
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
console.log(`Successfully collected ${cookies.length} cookies`);
|
|
130
|
+
}
|
|
131
|
+
cookies.forEach((cookie) => {
|
|
132
|
+
const [key, ...valueParts] = cookie.split('=');
|
|
133
|
+
const value = valueParts.join('='); // Handle values that might contain =
|
|
134
|
+
if (key && trackingCookiePatterns.some((pattern) => pattern.test(key))) {
|
|
135
|
+
try {
|
|
136
|
+
trackingCookiesData[key] = decodeURIComponent(value || '');
|
|
137
|
+
}
|
|
138
|
+
catch (error) {
|
|
139
|
+
// If decoding fails, use raw value
|
|
140
|
+
trackingCookiesData[key] = value || '';
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
// Log specific cookies we're looking for
|
|
145
|
+
const importantCookies = ['_shopify_y', '__cvg_uid', '_fbp', '_ga'];
|
|
146
|
+
importantCookies.forEach((cookieName) => {
|
|
147
|
+
if (trackingCookiesData[cookieName]) {
|
|
148
|
+
console.log(`Found ${cookieName}:`, trackingCookiesData[cookieName]);
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
console.log(`Missing ${cookieName} cookie`);
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
catch (error) {
|
|
156
|
+
console.warn('Failed to read tracking cookies:', error);
|
|
157
|
+
}
|
|
158
|
+
return trackingCookiesData;
|
|
159
|
+
};
|
|
160
|
+
/**
|
|
161
|
+
* Collect all tracking data (localStorage and cookies)
|
|
162
|
+
*/
|
|
163
|
+
export const collectTrackingData = async () => {
|
|
164
|
+
const [localStorageData, trackingCookiesData] = await Promise.all([
|
|
165
|
+
Promise.resolve(getLocalStorageData()),
|
|
166
|
+
getTrackingCookiesData(),
|
|
167
|
+
]);
|
|
168
|
+
return {
|
|
169
|
+
localStorageData,
|
|
170
|
+
trackingCookiesData,
|
|
171
|
+
};
|
|
172
|
+
};
|
package/package.json
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@tagadapay/plugin-sdk",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Modern React SDK for building Tagada Pay plugins",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"types": "dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "tsc",
|
|
9
|
-
"clean": "rm -rf dist",
|
|
10
|
-
"lint": "echo \"No linting configured\"",
|
|
11
|
-
"test": "echo \"No tests yet\" && exit 0",
|
|
12
|
-
"dev": "tsc --watch",
|
|
13
|
-
"prepublishOnly": "npm run clean && npm run build",
|
|
14
|
-
"publish:patch": "npm version patch && npm publish",
|
|
15
|
-
"publish:minor": "npm version minor && npm publish",
|
|
16
|
-
"publish:major": "npm version major && npm publish",
|
|
17
|
-
"publish:beta": "npm version prerelease --preid=beta && npm publish --tag beta",
|
|
18
|
-
"publish:alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
|
|
19
|
-
"version:patch": "npm version patch",
|
|
20
|
-
"version:minor": "npm version minor",
|
|
21
|
-
"version:major": "npm version major",
|
|
22
|
-
"version:beta": "npm version prerelease --preid=beta",
|
|
23
|
-
"version:alpha": "npm version prerelease --preid=alpha"
|
|
24
|
-
},
|
|
25
|
-
"keywords": [
|
|
26
|
-
"tagadapay",
|
|
27
|
-
"cms",
|
|
28
|
-
"plugin",
|
|
29
|
-
"sdk",
|
|
30
|
-
"react",
|
|
31
|
-
"typescript"
|
|
32
|
-
],
|
|
33
|
-
"author": "Tagada Pay",
|
|
34
|
-
"license": "MIT",
|
|
35
|
-
"dependencies": {
|
|
36
|
-
"@basis-theory/apple-pay-js": "^2.0.2",
|
|
37
|
-
"@basis-theory/basis-theory-js": "^4.30.0",
|
|
38
|
-
"@basis-theory/basis-theory-react": "^1.32.5",
|
|
39
|
-
"@basis-theory/web-threeds": "^1.0.1",
|
|
40
|
-
"axios": "^1.6.0",
|
|
41
|
-
"react-google-autocomplete": "^2.7.3",
|
|
42
|
-
"react-intl": "^7.1.11"
|
|
43
|
-
},
|
|
44
|
-
"devDependencies": {
|
|
45
|
-
"@types/node": "^18.0.0",
|
|
46
|
-
"@types/react": "^19",
|
|
47
|
-
"@types/react-dom": "^19",
|
|
48
|
-
"typescript": "^5.0.0"
|
|
49
|
-
},
|
|
50
|
-
"peerDependencies": {
|
|
51
|
-
"react": "^18.0.0 || ^19.0.0",
|
|
52
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
53
|
-
},
|
|
54
|
-
"files": [
|
|
55
|
-
"dist/**/*",
|
|
56
|
-
"README.md"
|
|
57
|
-
],
|
|
58
|
-
"repository": {
|
|
59
|
-
"type": "git",
|
|
60
|
-
"url": "git+https://github.com/tagadapay/plugin-sdk.git"
|
|
61
|
-
},
|
|
62
|
-
"bugs": {
|
|
63
|
-
"url": "https://github.com/tagadapay/plugin-sdk/issues"
|
|
64
|
-
},
|
|
65
|
-
"homepage": "https://github.com/tagadapay/plugin-sdk#readme"
|
|
66
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@tagadapay/plugin-sdk",
|
|
3
|
+
"version": "1.0.27",
|
|
4
|
+
"description": "Modern React SDK for building Tagada Pay plugins",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"build": "tsc",
|
|
9
|
+
"clean": "rm -rf dist",
|
|
10
|
+
"lint": "echo \"No linting configured\"",
|
|
11
|
+
"test": "echo \"No tests yet\" && exit 0",
|
|
12
|
+
"dev": "tsc --watch",
|
|
13
|
+
"prepublishOnly": "npm run clean && npm run build",
|
|
14
|
+
"publish:patch": "npm version patch && npm publish",
|
|
15
|
+
"publish:minor": "npm version minor && npm publish",
|
|
16
|
+
"publish:major": "npm version major && npm publish",
|
|
17
|
+
"publish:beta": "npm version prerelease --preid=beta && npm publish --tag beta",
|
|
18
|
+
"publish:alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
|
|
19
|
+
"version:patch": "npm version patch",
|
|
20
|
+
"version:minor": "npm version minor",
|
|
21
|
+
"version:major": "npm version major",
|
|
22
|
+
"version:beta": "npm version prerelease --preid=beta",
|
|
23
|
+
"version:alpha": "npm version prerelease --preid=alpha"
|
|
24
|
+
},
|
|
25
|
+
"keywords": [
|
|
26
|
+
"tagadapay",
|
|
27
|
+
"cms",
|
|
28
|
+
"plugin",
|
|
29
|
+
"sdk",
|
|
30
|
+
"react",
|
|
31
|
+
"typescript"
|
|
32
|
+
],
|
|
33
|
+
"author": "Tagada Pay",
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@basis-theory/apple-pay-js": "^2.0.2",
|
|
37
|
+
"@basis-theory/basis-theory-js": "^4.30.0",
|
|
38
|
+
"@basis-theory/basis-theory-react": "^1.32.5",
|
|
39
|
+
"@basis-theory/web-threeds": "^1.0.1",
|
|
40
|
+
"axios": "^1.6.0",
|
|
41
|
+
"react-google-autocomplete": "^2.7.3",
|
|
42
|
+
"react-intl": "^7.1.11"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@types/node": "^18.0.0",
|
|
46
|
+
"@types/react": "^19",
|
|
47
|
+
"@types/react-dom": "^19",
|
|
48
|
+
"typescript": "^5.0.0"
|
|
49
|
+
},
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
52
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
53
|
+
},
|
|
54
|
+
"files": [
|
|
55
|
+
"dist/**/*",
|
|
56
|
+
"README.md"
|
|
57
|
+
],
|
|
58
|
+
"repository": {
|
|
59
|
+
"type": "git",
|
|
60
|
+
"url": "git+https://github.com/tagadapay/plugin-sdk.git"
|
|
61
|
+
},
|
|
62
|
+
"bugs": {
|
|
63
|
+
"url": "https://github.com/tagadapay/plugin-sdk/issues"
|
|
64
|
+
},
|
|
65
|
+
"homepage": "https://github.com/tagadapay/plugin-sdk#readme"
|
|
66
|
+
}
|