applepay-rn 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +72 -55
  2. package/package.json +1 -1
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
@@ -30,12 +30,12 @@ ApplePay-RN provides a complete React Native wrapper around the native Apple Pay
30
30
 
31
31
  Using npm:
32
32
  ```bash
33
- npm install @tap-payments/applepay-rn
33
+ npm install applepay-rn
34
34
  ```
35
35
 
36
36
  Using yarn:
37
37
  ```bash
38
- yarn add @tap-payments/applepay-rn
38
+ yarn add applepay-rn
39
39
  ```
40
40
 
41
41
  ### 2. Install Pod Dependencies
@@ -48,18 +48,12 @@ pod install
48
48
  cd ..
49
49
  ```
50
50
 
51
- ### 3. Link Native Module (if not auto-linked)
52
-
53
- ```bash
54
- npx react-native link @tap-payments/applepay-rn
55
- ```
56
-
57
51
  ## Quick Start
58
52
 
59
53
  ### 1. Import the Component
60
54
 
61
55
  ```typescript
62
- import ApplePayView from '@tap-payments/applepay-rn';
56
+ import { TapApplePay, type ApplePayConfiguration } from 'applepay-rn';
63
57
  ```
64
58
 
65
59
  ### 2. Create Configuration
@@ -67,12 +61,12 @@ import ApplePayView from '@tap-payments/applepay-rn';
67
61
  Define your payment configuration:
68
62
 
69
63
  ```typescript
70
- const applePayConfig = {
64
+ const configuration: ApplePayConfiguration = {
71
65
  // REQUIRED
72
- publicKey: "pk_test_********",
66
+ publicKey: "pk_test_******",
73
67
  scope: "AppleToken",
74
68
  merchant: {
75
- id: "********"
69
+ id: "**********"
76
70
  },
77
71
 
78
72
  // OPTIONAL
@@ -89,7 +83,8 @@ const applePayConfig = {
89
83
  {
90
84
  lang: "en",
91
85
  first: "John",
92
- last: "Smith"
86
+ last: "Smith",
87
+ middle: "David"
93
88
  }
94
89
  ],
95
90
  contact: {
@@ -118,20 +113,38 @@ const applePayConfig = {
118
113
  ### 3. Use the Component
119
114
 
120
115
  ```typescript
121
- import React from 'react';
116
+ import React, { useCallback } from 'react';
122
117
  import { View, StyleSheet } from 'react-native';
123
- import ApplePayView from '@tap-payments/applepay-rn';
118
+ import { TapApplePay, type ApplePayConfiguration } from 'applepay-rn';
124
119
 
125
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
+
126
137
  return (
127
138
  <View style={styles.container}>
128
- <ApplePayView
129
- config={applePayConfig}
130
- onReady={() => console.log('Apple Pay ready')}
139
+ <TapApplePay
140
+ configuration={configuration}
141
+ onReady={handleReady}
131
142
  onClick={() => console.log('Button clicked')}
132
- onSuccess={(data) => console.log('Payment successful:', data)}
133
- onError={(error) => console.log('Payment error:', error)}
134
- 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)}
135
148
  onMerchantValidation={(data) => console.log('Merchant validation:', data)}
136
149
  style={styles.applePayButton}
137
150
  />
@@ -146,7 +159,7 @@ const styles = StyleSheet.create({
146
159
  paddingHorizontal: 16,
147
160
  },
148
161
  applePayButton: {
149
- height: 50,
162
+ height: 100,
150
163
  },
151
164
  });
152
165
 
@@ -298,12 +311,15 @@ const features = {
298
311
 
299
312
  ## Component Props
300
313
 
301
- ### ApplePayView Props
314
+ ### TapApplePay Props
302
315
 
303
316
  ```typescript
304
- interface ApplePayViewProps {
317
+ interface TapApplePayProps {
305
318
  // Payment configuration object (required)
306
- config: ApplePayConfig;
319
+ configuration: ApplePayConfiguration;
320
+
321
+ // View style props (optional)
322
+ style?: StyleProp<ViewStyle>;
307
323
 
308
324
  // Callback when Apple Pay view is ready
309
325
  onReady?: () => void;
@@ -314,23 +330,20 @@ interface ApplePayViewProps {
314
330
  // Callback when payment succeeds
315
331
  onSuccess?: (data: string) => void;
316
332
 
317
- // Callback when payment fails
318
- onError?: (data: string) => void;
319
-
320
- // Callback when user cancels payment
321
- onCanceled?: () => void;
322
-
323
- // Callback for merchant validation
324
- onMerchantValidation?: (data: string) => void;
333
+ // Callback when charge is created
334
+ onChargeCreated?: (data: string) => void;
325
335
 
326
336
  // Callback when order is created
327
337
  onOrderCreated?: (data: string) => void;
328
338
 
329
- // Callback when charge is created
330
- onChargeCreated?: (data: string) => void;
339
+ // Callback when user cancels payment
340
+ onCancel?: () => void;
331
341
 
332
- // View style props (optional)
333
- style?: StyleProp<ViewStyle>;
342
+ // Callback when payment fails
343
+ onError?: (error: string) => void;
344
+
345
+ // Callback for merchant validation
346
+ onMerchantValidation?: (data: string) => void;
334
347
  }
335
348
  ```
336
349
 
@@ -358,10 +371,7 @@ interface ApplePayViewProps {
358
371
 
359
372
  ```json
360
373
  {
361
- "error": {
362
- "code": "PAYMENT_FAILED",
363
- "message": "The payment could not be processed"
364
- }
374
+ "error": "Payment processing failed"
365
375
  }
366
376
  ```
367
377
 
@@ -459,23 +469,30 @@ const handleError = (errorData: string) => {
459
469
 
460
470
  A complete example application is included in the `example` folder demonstrating:
461
471
 
462
- - Basic Apple Pay integration
463
- - Configuration management
464
- - Real-time event logging
465
- - Multiple payment scenarios
466
- - 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
467
480
 
468
- Run the example app:
481
+ Navigate to the example directory and run:
469
482
 
470
483
  ```bash
471
- cd example
472
- npm install
473
- cd ios
474
- pod install
475
- cd ..
476
- npm run ios
484
+ yarn
485
+ yarn example ios
477
486
  ```
478
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
+
479
496
  ## Native Dependency
480
497
 
481
498
  This library wraps the native **ApplePay-iOS** module. The native bridge handles:
@@ -539,7 +556,7 @@ We welcome contributions! Please feel free to submit pull requests with bug fixe
539
556
 
540
557
  ## Version History
541
558
 
542
- ### 0.0.1
559
+ ### 0.0.3
543
560
  - Initial release
544
561
  - React Native bridge to Apple Pay iOS
545
562
  - TypeScript support
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "applepay-rn",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
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",