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.
- package/README.md +72 -55
- 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.
|
|
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
|
|
33
|
+
npm install applepay-rn
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
Using yarn:
|
|
37
37
|
```bash
|
|
38
|
-
yarn add
|
|
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
|
|
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
|
|
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
|
|
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
|
-
<
|
|
129
|
-
|
|
130
|
-
onReady={
|
|
139
|
+
<TapApplePay
|
|
140
|
+
configuration={configuration}
|
|
141
|
+
onReady={handleReady}
|
|
131
142
|
onClick={() => console.log('Button clicked')}
|
|
132
|
-
onSuccess={
|
|
133
|
-
onError={
|
|
134
|
-
|
|
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:
|
|
162
|
+
height: 100,
|
|
150
163
|
},
|
|
151
164
|
});
|
|
152
165
|
|
|
@@ -298,12 +311,15 @@ const features = {
|
|
|
298
311
|
|
|
299
312
|
## Component Props
|
|
300
313
|
|
|
301
|
-
###
|
|
314
|
+
### TapApplePay Props
|
|
302
315
|
|
|
303
316
|
```typescript
|
|
304
|
-
interface
|
|
317
|
+
interface TapApplePayProps {
|
|
305
318
|
// Payment configuration object (required)
|
|
306
|
-
|
|
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
|
|
318
|
-
|
|
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
|
|
330
|
-
|
|
339
|
+
// Callback when user cancels payment
|
|
340
|
+
onCancel?: () => void;
|
|
331
341
|
|
|
332
|
-
//
|
|
333
|
-
|
|
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
|
-
-
|
|
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
|
-
|
|
481
|
+
Navigate to the example directory and run:
|
|
469
482
|
|
|
470
483
|
```bash
|
|
471
|
-
|
|
472
|
-
|
|
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.
|
|
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.
|
|
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",
|