@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 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.26",
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
+ }