applepay-rn 0.0.2 → 0.0.4

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.
@@ -14,7 +14,9 @@ Pod::Spec.new do |s|
14
14
  s.source = { :git => "https://github.com/Tap-Payments/ApplePay-RN.git", :tag => "#{s.version}" }
15
15
 
16
16
  s.source_files = "ios/**/*.{h,m,mm,swift}"
17
- s.private_header_files = "ios/**/*.h"
17
+
18
+ # Make header files public for Fabric module generation
19
+ s.public_header_files = "ios/ApplepayRnView.h"
18
20
 
19
21
  s.dependency 'ApplePay-iOS', '0.0.4'
20
22
 
package/README.md CHANGED
@@ -17,7 +17,7 @@ ApplePay-RN provides a complete React Native wrapper around the native Apple Pay
17
17
 
18
18
  ## Requirements
19
19
 
20
- - **React Native**: 0.60+
20
+ - **React Native**: 0.78+
21
21
  - **iOS**: 16.0+ (minimum deployment target)
22
22
  - **Xcode**: 14.0+
23
23
  - **CocoaPods**: For iOS dependency management
@@ -53,7 +53,7 @@ cd ..
53
53
  ### 1. Import the Component
54
54
 
55
55
  ```typescript
56
- import ApplePayView from '@tap-payments/applepay-rn';
56
+ import { TapApplePay, type ApplePayConfiguration } from 'applepay-rn';
57
57
  ```
58
58
 
59
59
  ### 2. Create Configuration
@@ -61,12 +61,12 @@ import ApplePayView from '@tap-payments/applepay-rn';
61
61
  Define your payment configuration:
62
62
 
63
63
  ```typescript
64
- const applePayConfig = {
64
+ const configuration: ApplePayConfiguration = {
65
65
  // REQUIRED
66
- publicKey: "pk_test_********",
66
+ publicKey: "pk_test_******",
67
67
  scope: "AppleToken",
68
68
  merchant: {
69
- id: "********"
69
+ id: "**********"
70
70
  },
71
71
 
72
72
  // OPTIONAL
@@ -83,7 +83,8 @@ const applePayConfig = {
83
83
  {
84
84
  lang: "en",
85
85
  first: "John",
86
- last: "Smith"
86
+ last: "Smith",
87
+ middle: "David"
87
88
  }
88
89
  ],
89
90
  contact: {
@@ -112,20 +113,38 @@ const applePayConfig = {
112
113
  ### 3. Use the Component
113
114
 
114
115
  ```typescript
115
- import React from 'react';
116
+ import React, { useCallback } from 'react';
116
117
  import { View, StyleSheet } from 'react-native';
117
- import ApplePayView from '@tap-payments/applepay-rn';
118
+ import { TapApplePay, type ApplePayConfiguration } from 'applepay-rn';
118
119
 
119
120
  const App = () => {
121
+ const handleReady = useCallback(() => {
122
+ console.log('Apple Pay ready');
123
+ }, []);
124
+
125
+ const handleSuccess = useCallback((data: string) => {
126
+ console.log('Payment successful:', data);
127
+ }, []);
128
+
129
+ const handleError = useCallback((error: string) => {
130
+ console.log('Payment error:', error);
131
+ }, []);
132
+
133
+ const handleCancel = useCallback(() => {
134
+ console.log('Payment canceled');
135
+ }, []);
136
+
120
137
  return (
121
138
  <View style={styles.container}>
122
- <ApplePayView
123
- config={applePayConfig}
124
- onReady={() => console.log('Apple Pay ready')}
139
+ <TapApplePay
140
+ configuration={configuration}
141
+ onReady={handleReady}
125
142
  onClick={() => console.log('Button clicked')}
126
- onSuccess={(data) => console.log('Payment successful:', data)}
127
- onError={(error) => console.log('Payment error:', error)}
128
- onCanceled={() => console.log('Payment canceled')}
143
+ onSuccess={handleSuccess}
144
+ onError={handleError}
145
+ onCancel={handleCancel}
146
+ onChargeCreated={(data) => console.log('Charge created:', data)}
147
+ onOrderCreated={(data) => console.log('Order created:', data)}
129
148
  onMerchantValidation={(data) => console.log('Merchant validation:', data)}
130
149
  style={styles.applePayButton}
131
150
  />
@@ -140,7 +159,7 @@ const styles = StyleSheet.create({
140
159
  paddingHorizontal: 16,
141
160
  },
142
161
  applePayButton: {
143
- height: 50,
162
+ height: 100,
144
163
  },
145
164
  });
146
165
 
@@ -292,12 +311,15 @@ const features = {
292
311
 
293
312
  ## Component Props
294
313
 
295
- ### ApplePayView Props
314
+ ### TapApplePay Props
296
315
 
297
316
  ```typescript
298
- interface ApplePayViewProps {
317
+ interface TapApplePayProps {
299
318
  // Payment configuration object (required)
300
- config: ApplePayConfig;
319
+ configuration: ApplePayConfiguration;
320
+
321
+ // View style props (optional)
322
+ style?: StyleProp<ViewStyle>;
301
323
 
302
324
  // Callback when Apple Pay view is ready
303
325
  onReady?: () => void;
@@ -308,23 +330,20 @@ interface ApplePayViewProps {
308
330
  // Callback when payment succeeds
309
331
  onSuccess?: (data: string) => void;
310
332
 
311
- // Callback when payment fails
312
- onError?: (data: string) => void;
313
-
314
- // Callback when user cancels payment
315
- onCanceled?: () => void;
316
-
317
- // Callback for merchant validation
318
- onMerchantValidation?: (data: string) => void;
333
+ // Callback when charge is created
334
+ onChargeCreated?: (data: string) => void;
319
335
 
320
336
  // Callback when order is created
321
337
  onOrderCreated?: (data: string) => void;
322
338
 
323
- // Callback when charge is created
324
- onChargeCreated?: (data: string) => void;
339
+ // Callback when user cancels payment
340
+ onCancel?: () => void;
325
341
 
326
- // View style props (optional)
327
- style?: StyleProp<ViewStyle>;
342
+ // Callback when payment fails
343
+ onError?: (error: string) => void;
344
+
345
+ // Callback for merchant validation
346
+ onMerchantValidation?: (data: string) => void;
328
347
  }
329
348
  ```
330
349
 
@@ -352,10 +371,7 @@ interface ApplePayViewProps {
352
371
 
353
372
  ```json
354
373
  {
355
- "error": {
356
- "code": "PAYMENT_FAILED",
357
- "message": "The payment could not be processed"
358
- }
374
+ "error": "Payment processing failed"
359
375
  }
360
376
  ```
361
377
 
@@ -453,23 +469,30 @@ const handleError = (errorData: string) => {
453
469
 
454
470
  A complete example application is included in the `example` folder demonstrating:
455
471
 
456
- - Basic Apple Pay integration
457
- - Configuration management
458
- - Real-time event logging
459
- - Multiple payment scenarios
460
- - Error handling
472
+ - Basic Apple Pay integration with configuration management
473
+ - Multiple screens: MainScreen (overview), SimpleScreen (minimal example), SettingsScreen (dynamic configuration)
474
+ - Real-time event logging and console output
475
+ - Multiple payment scenarios (one-time, recurring, shipping options)
476
+ - Error handling and success callbacks
477
+ - Standalone example component (`StandaloneSimpleExample`) for quick copy-paste integration
478
+
479
+ ### Running the Example App
461
480
 
462
- Run the example app:
481
+ Navigate to the example directory and run:
463
482
 
464
483
  ```bash
465
- cd example
466
- npm install
467
- cd ios
468
- pod install
469
- cd ..
470
- npm run ios
484
+ yarn
485
+ yarn example ios
471
486
  ```
472
487
 
488
+
489
+ ### Example Screens
490
+
491
+ 1. **MainScreen** - Main navigation and quick test
492
+ 2. **SimpleScreen** - Minimal implementation example
493
+ 3. **SettingsScreen** - Dynamic configuration editor
494
+ 4. **StandaloneSimpleExample** - Fully self-contained component (copy-paste ready)
495
+
473
496
  ## Native Dependency
474
497
 
475
498
  This library wraps the native **ApplePay-iOS** module. The native bridge handles:
@@ -533,7 +556,7 @@ We welcome contributions! Please feel free to submit pull requests with bug fixe
533
556
 
534
557
  ## Version History
535
558
 
536
- ### 0.0.1
559
+ ### 0.0.3
537
560
  - Initial release
538
561
  - React Native bridge to Apple Pay iOS
539
562
  - TypeScript support
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "applepay-rn",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "A React Native wrapper around Tap Payments’ Apple Pay iOS SDK, enabling seamless Apple Pay integration in React Native apps.",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/src/index.d.ts",