@xbenjii/react-native-braintree-dropin-ui 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -0
- package/README.md +365 -0
- package/RNBraintreeDropIn.podspec +22 -0
- package/android/build.gradle +50 -0
- package/android/src/main/AndroidManifest.xml +5 -0
- package/android/src/main/java/tech/power/RNBraintreeDropIn/RNBraintreeDropInModule.java +265 -0
- package/android/src/main/java/tech/power/RNBraintreeDropIn/RNBraintreeDropInPackage.java +27 -0
- package/index.js +5 -0
- package/index.js.flow +42 -0
- package/ios/RNBraintreeDropIn.h +40 -0
- package/ios/RNBraintreeDropIn.m +280 -0
- package/ios/RNBraintreeDropIn.xcodeproj/project.pbxproj +291 -0
- package/ios/RNBraintreeDropIn.xcworkspace/contents.xcworkspacedata +8 -0
- package/package.json +34 -0
- package/react-native.config.js +13 -0
package/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2018 Louis Lagrange
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
@@ -0,0 +1,365 @@
|
|
1
|
+
# react-native-braintree-dropin-ui
|
2
|
+
|
3
|
+
> React Native integration of Braintree Drop-in for IOS & ANDROID (Apple Pay, Google Pay, Paypal, Venmo, Credit Card)
|
4
|
+
|
5
|
+
<p align="center">
|
6
|
+
<img src="https://raw.githubusercontent.com/xbenjii/react-native-braintree-dropin-ui/master/node_modules/iphone.png" width="250">
|
7
|
+
<img src="https://raw.githubusercontent.com/xbenjii/react-native-braintree-dropin-ui/master/node_modules/android.png" width="250">
|
8
|
+
</p>
|
9
|
+
|
10
|
+
## Getting started
|
11
|
+
|
12
|
+
For React Native versions >= 0.60
|
13
|
+
|
14
|
+
IOS
|
15
|
+
```bash
|
16
|
+
npm install react-native-braintree-dropin-ui --save
|
17
|
+
|
18
|
+
OR
|
19
|
+
|
20
|
+
yarn add react-native-braintree-dropin-ui
|
21
|
+
|
22
|
+
cd ./ios
|
23
|
+
pod install
|
24
|
+
```
|
25
|
+
|
26
|
+
Android
|
27
|
+
```bash
|
28
|
+
npm install react-native-braintree-dropin-ui --save
|
29
|
+
|
30
|
+
OR
|
31
|
+
|
32
|
+
yarn add react-native-braintree-dropin-u
|
33
|
+
```
|
34
|
+
|
35
|
+
## Configurate Payment Method(For ALL RN VERSIONS)
|
36
|
+
See Braintree's documentation, [Apple Pay][7], [Google Pay][8], [Paypal][9], [Venmo][10]
|
37
|
+
Once you have finished setting up all the configurations, it will show in the dropin UI.
|
38
|
+
|
39
|
+
|
40
|
+
For React Native versions < 0.60
|
41
|
+
### Mostly automatic installation
|
42
|
+
|
43
|
+
```bash
|
44
|
+
react-native link react-native-braintree-dropin-ui
|
45
|
+
```
|
46
|
+
|
47
|
+
#### iOS specific
|
48
|
+
|
49
|
+
You must have a iOS deployment target \>= 12.0.
|
50
|
+
|
51
|
+
If you don't have a Podfile or are unsure on how to proceed, see the [CocoaPods][1] usage guide.
|
52
|
+
|
53
|
+
In your `Podfile`, add:
|
54
|
+
|
55
|
+
```
|
56
|
+
# comment the next line to disable credit card scanning
|
57
|
+
pod 'CardIO'
|
58
|
+
|
59
|
+
```
|
60
|
+
|
61
|
+
When using React Native versions < 0.60, the following must also be added to your `Podfile`:
|
62
|
+
|
63
|
+
```
|
64
|
+
pod 'Braintree'
|
65
|
+
|
66
|
+
pod 'BraintreeDropIn'
|
67
|
+
|
68
|
+
# comment the next line to disable Apple pay
|
69
|
+
pod 'Braintree/ApplePay'
|
70
|
+
|
71
|
+
# comment the next line to disable PayPal
|
72
|
+
pod 'Braintree/PayPal'
|
73
|
+
|
74
|
+
# comment the next line to disable Venmo
|
75
|
+
pod 'Braintree/Venmo'
|
76
|
+
|
77
|
+
# Data collector for Braintree Advanced Fraud Tools
|
78
|
+
pod 'Braintree/DataCollector'
|
79
|
+
```
|
80
|
+
|
81
|
+
Then:
|
82
|
+
|
83
|
+
```bash
|
84
|
+
cd ios
|
85
|
+
pod repo update # optional and can be very long
|
86
|
+
pod install
|
87
|
+
```
|
88
|
+
|
89
|
+
#### Apple Pay
|
90
|
+
|
91
|
+
The Drop-in will show Apple Pay as a payment option as long as you've completed the [Apple Pay integration][5] and the customer's [device and card type are supported][6].
|
92
|
+
|
93
|
+
#### PayPal
|
94
|
+
|
95
|
+
To enable paypal payments in iOS, you will need to add `setReturnURLScheme` to `launchOptions` of your `AppDelegate.m` / `AppDelegate.mm`
|
96
|
+
|
97
|
+
```objective-c
|
98
|
+
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
|
99
|
+
[BTAppContextSwitcher setReturnURLScheme:@"com.your-company-name.your-app-name.payments"]; // ADD THIS LINE
|
100
|
+
return YES;
|
101
|
+
}
|
102
|
+
```
|
103
|
+
|
104
|
+
#### Android specific
|
105
|
+
|
106
|
+
Add in your `MainActivity.java`:
|
107
|
+
```
|
108
|
+
import com.xbenjii.RNBraintreeDropIn.RNBraintreeDropInModule;
|
109
|
+
|
110
|
+
@Override
|
111
|
+
protected void onCreate(Bundle savedInstanceState) {
|
112
|
+
// ...
|
113
|
+
RNBraintreeDropInModule.initDropInClient(this);
|
114
|
+
}
|
115
|
+
```
|
116
|
+
|
117
|
+
Note: Only complete the next steps if using React Native versions < 0.60, autolinking will do these steps automatically.
|
118
|
+
|
119
|
+
Add in your `app/build.gradle`:
|
120
|
+
|
121
|
+
```
|
122
|
+
dependencies {
|
123
|
+
...
|
124
|
+
implementation project(':react-native-braintree-dropin-ui')
|
125
|
+
implementation "io.card:android-sdk:5.+"
|
126
|
+
implementation 'com.braintreepayments.api:data-collector:2.+'
|
127
|
+
implementation 'com.google.android.gms:play-services-wallet:11.4.0'
|
128
|
+
```
|
129
|
+
|
130
|
+
Add in your `MainApplication.java`:
|
131
|
+
|
132
|
+
```
|
133
|
+
import com.xbenjii.RNBraintreeDropIn.RNBraintreeDropInPackage;
|
134
|
+
|
135
|
+
|
136
|
+
return Arrays.<ReactPackage>asList(
|
137
|
+
... ...
|
138
|
+
new RNBraintreeDropInPackage() // <------ add here
|
139
|
+
);
|
140
|
+
|
141
|
+
```
|
142
|
+
|
143
|
+
The below steps apply to all versions of React Native
|
144
|
+
|
145
|
+
If you wish to support Google Pay, add in your `AndroidManifest.xml`:
|
146
|
+
|
147
|
+
```
|
148
|
+
<!-- Enables the Google Pay API -->
|
149
|
+
<meta-data
|
150
|
+
android:name="com.google.android.gms.wallet.api.enabled"
|
151
|
+
android:value="true"/>
|
152
|
+
```
|
153
|
+
|
154
|
+
If you wish to support card swipe support, add in your 'app/build.gradle`:
|
155
|
+
|
156
|
+
```
|
157
|
+
dependencies {
|
158
|
+
...
|
159
|
+
implementation "io.card:android-sdk:5.+"
|
160
|
+
```
|
161
|
+
|
162
|
+
### Configuration
|
163
|
+
|
164
|
+
For more configuration options, see Braintree's documentation ([iOS][2] | [Android][3]).
|
165
|
+
|
166
|
+
#### 3D Secure
|
167
|
+
|
168
|
+
If you plan on using 3D Secure, you have to do the following.
|
169
|
+
|
170
|
+
##### iOS
|
171
|
+
|
172
|
+
###### Configure a new URL scheme
|
173
|
+
|
174
|
+
Add a bundle url scheme `{BUNDLE_IDENTIFIER}.payments` in your app Info via XCode or manually in the `Info.plist`.
|
175
|
+
In your `Info.plist`, you should have something like:
|
176
|
+
|
177
|
+
```xml
|
178
|
+
<key>CFBundleURLTypes</key>
|
179
|
+
<array>
|
180
|
+
<dict>
|
181
|
+
<key>CFBundleTypeRole</key>
|
182
|
+
<string>Editor</string>
|
183
|
+
<key>CFBundleURLName</key>
|
184
|
+
<string>com.myapp</string>
|
185
|
+
<key>CFBundleURLSchemes</key>
|
186
|
+
<array>
|
187
|
+
<string>com.myapp.payments</string>
|
188
|
+
</array>
|
189
|
+
</dict>
|
190
|
+
</array>
|
191
|
+
```
|
192
|
+
|
193
|
+
###### Update your code
|
194
|
+
|
195
|
+
In your `AppDelegate.m`:
|
196
|
+
|
197
|
+
```objective-c
|
198
|
+
#import "BraintreeCore.h"
|
199
|
+
|
200
|
+
...
|
201
|
+
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
|
202
|
+
{
|
203
|
+
...
|
204
|
+
[BTAppContextSwitcher setReturnURLScheme:self.paymentsURLScheme];
|
205
|
+
...
|
206
|
+
}
|
207
|
+
|
208
|
+
- (BOOL)application:(UIApplication *)application
|
209
|
+
openURL:(NSURL *)url
|
210
|
+
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
|
211
|
+
|
212
|
+
if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) {
|
213
|
+
return [BTAppContextSwitcher handleOpenURL:url];
|
214
|
+
}
|
215
|
+
|
216
|
+
return [RCTLinkingManager application:application openURL:url options:options];
|
217
|
+
}
|
218
|
+
|
219
|
+
- (NSString *)paymentsURLScheme {
|
220
|
+
NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];
|
221
|
+
return [NSString stringWithFormat:@"%@.%@", bundleIdentifier, @"payments"];
|
222
|
+
}
|
223
|
+
```
|
224
|
+
|
225
|
+
In your `AppDelegate.swift`:
|
226
|
+
|
227
|
+
```swift
|
228
|
+
import Braintree
|
229
|
+
|
230
|
+
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
|
231
|
+
...
|
232
|
+
BTAppContextSwitcher.setReturnURLScheme(self.paymentsURLScheme)
|
233
|
+
...
|
234
|
+
}
|
235
|
+
|
236
|
+
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
|
237
|
+
if let scheme = url.scheme, scheme.localizedCaseInsensitiveCompare(self.paymentsURLScheme) == .orderedSame {
|
238
|
+
return BTAppContextSwitcher.handleOpen(url)
|
239
|
+
}
|
240
|
+
return RCTLinkingManager.application(app, open: url, options: options)
|
241
|
+
}
|
242
|
+
|
243
|
+
private var paymentsURLScheme: String {
|
244
|
+
let bundleIdentifier = Bundle.main.bundleIdentifier ?? ""
|
245
|
+
return bundleIdentifier + ".payments"
|
246
|
+
}
|
247
|
+
```
|
248
|
+
|
249
|
+
## Usage
|
250
|
+
|
251
|
+
For the API, see the [Flow typings][4].
|
252
|
+
|
253
|
+
### Basic
|
254
|
+
|
255
|
+
```javascript
|
256
|
+
import BraintreeDropIn from 'react-native-braintree-dropin-ui';
|
257
|
+
|
258
|
+
BraintreeDropIn.show({
|
259
|
+
clientToken: 'token',
|
260
|
+
merchantIdentifier: 'applePayMerchantIdentifier',
|
261
|
+
googlePayMerchantId: 'googlePayMerchantId',
|
262
|
+
countryCode: 'US', //apple pay setting
|
263
|
+
currencyCode: 'USD', //apple pay setting
|
264
|
+
merchantName: 'Your Merchant Name for Apple Pay',
|
265
|
+
orderTotal:'Total Price',
|
266
|
+
googlePay: true,
|
267
|
+
applePay: true,
|
268
|
+
vaultManager: true,
|
269
|
+
payPal: true,
|
270
|
+
cardDisabled: false,
|
271
|
+
darkTheme: true,
|
272
|
+
})
|
273
|
+
.then(result => console.log(result))
|
274
|
+
.catch((error) => {
|
275
|
+
if (error.code === 'USER_CANCELLATION') {
|
276
|
+
// update your UI to handle cancellation
|
277
|
+
} else {
|
278
|
+
// update your UI to handle other errors
|
279
|
+
}
|
280
|
+
});
|
281
|
+
```
|
282
|
+
|
283
|
+
### 3D Secure
|
284
|
+
|
285
|
+
```javascript
|
286
|
+
import BraintreeDropIn from 'react-native-braintree-dropin-ui';
|
287
|
+
|
288
|
+
BraintreeDropIn.show({
|
289
|
+
clientToken: 'token',
|
290
|
+
threeDSecure: {
|
291
|
+
amount: 1.0,
|
292
|
+
},
|
293
|
+
merchantIdentifier: 'applePayMerchantIdentifier',
|
294
|
+
googlePayMerchantId: 'googlePayMerchantId',
|
295
|
+
countryCode: 'US', //apple pay setting
|
296
|
+
currencyCode: 'USD', //apple pay setting
|
297
|
+
merchantName: 'Your Merchant Name for Apple Pay',
|
298
|
+
orderTotal:'Total Price',
|
299
|
+
googlePay: true,
|
300
|
+
applePay: true,
|
301
|
+
vaultManager: true,
|
302
|
+
payPal: true,
|
303
|
+
cardDisabled: false,
|
304
|
+
darkTheme: true,
|
305
|
+
})
|
306
|
+
.then(result => console.log(result))
|
307
|
+
.catch((error) => {
|
308
|
+
if (error.code === 'USER_CANCELLATION') {
|
309
|
+
// update your UI to handle cancellation
|
310
|
+
} else {
|
311
|
+
// update your UI to handle other errors
|
312
|
+
// for 3D secure, there are two other specific error codes: 3DSECURE_NOT_ABLE_TO_SHIFT_LIABILITY and 3DSECURE_LIABILITY_NOT_SHIFTED
|
313
|
+
}
|
314
|
+
});
|
315
|
+
```
|
316
|
+
|
317
|
+
### Fetch more recent payment method
|
318
|
+
|
319
|
+
```javascript
|
320
|
+
import BraintreeDropIn from 'react-native-braintree-dropin-ui';
|
321
|
+
|
322
|
+
BraintreeDropIn.fetchMostRecentPaymentMethod(clientToken)
|
323
|
+
.then(result => console.log(result))
|
324
|
+
.catch((error) => {
|
325
|
+
// Handle error
|
326
|
+
});
|
327
|
+
```
|
328
|
+
|
329
|
+
### Tokenize card
|
330
|
+
|
331
|
+
```javascript
|
332
|
+
import BraintreeDropIn from 'react-native-braintree-dropin-ui';
|
333
|
+
|
334
|
+
BraintreeDropIn.tokenizeCard(clientToken, {
|
335
|
+
number: '4111111111111111',
|
336
|
+
expirationMonth: '10',
|
337
|
+
expirationYear: '23',
|
338
|
+
cvv: '123',
|
339
|
+
postalCode: '12345',
|
340
|
+
})
|
341
|
+
.then(cardNonce => console.log(cardNonce))
|
342
|
+
.catch((error) => {
|
343
|
+
// Handle error
|
344
|
+
});
|
345
|
+
```
|
346
|
+
|
347
|
+
### Custom Fonts
|
348
|
+
```
|
349
|
+
BraintreeDropIn.show({
|
350
|
+
...,
|
351
|
+
fontFamily: 'Averta-Regular',
|
352
|
+
boldFontFamily: 'Averta-Semibold',
|
353
|
+
})
|
354
|
+
```
|
355
|
+
|
356
|
+
[1]: http://guides.cocoapods.org/using/using-cocoapods.html
|
357
|
+
[2]: https://github.com/braintree/braintree-ios-drop-in
|
358
|
+
[3]: https://github.com/braintree/braintree-android-drop-in
|
359
|
+
[4]: ./index.js.flow
|
360
|
+
[5]: https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v5
|
361
|
+
[6]: https://articles.braintreepayments.com/guides/payment-methods/apple-pay#compatibility
|
362
|
+
[7]: https://developers.braintreepayments.com/guides/apple-pay/overview
|
363
|
+
[8]: https://developers.braintreepayments.com/guides/google-pay/overview
|
364
|
+
[9]: https://developers.braintreepayments.com/guides/paypal/overview/ios/v5
|
365
|
+
[10]: https://developers.braintreepayments.com/guides/venmo/overview
|
@@ -0,0 +1,22 @@
|
|
1
|
+
Pod::Spec.new do |s|
|
2
|
+
s.name = "RNBraintreeDropIn"
|
3
|
+
s.version = "1.1.6"
|
4
|
+
s.summary = "RNBraintreeDropIn"
|
5
|
+
s.description = <<-DESC
|
6
|
+
RNBraintreeDropIn
|
7
|
+
DESC
|
8
|
+
s.homepage = "https://github.com/xbenjii/react-native-braintree-dropin-ui"
|
9
|
+
s.license = "MIT"
|
10
|
+
# s.license = { :type => "MIT", :file => "./LICENSE" }
|
11
|
+
s.author = { "author" => "github@xbenjii.co.uk" }
|
12
|
+
s.platform = :ios, "12.0"
|
13
|
+
s.source = { :git => "git@github.com:xbenjii/react-native-braintree-dropin-ui.git", :tag => "master" }
|
14
|
+
s.source_files = "ios/**/*.{h,m}"
|
15
|
+
s.requires_arc = true
|
16
|
+
s.dependency 'React'
|
17
|
+
s.dependency 'Braintree', '5.23.0'
|
18
|
+
s.dependency 'BraintreeDropIn', '9.11.0'
|
19
|
+
s.dependency 'Braintree/DataCollector', '5.23.0'
|
20
|
+
s.dependency 'Braintree/ApplePay', '5.23.0'
|
21
|
+
s.dependency 'Braintree/Venmo', '5.23.0'
|
22
|
+
end
|
@@ -0,0 +1,50 @@
|
|
1
|
+
buildscript {
|
2
|
+
repositories {
|
3
|
+
google()
|
4
|
+
mavenCentral()
|
5
|
+
}
|
6
|
+
|
7
|
+
dependencies {
|
8
|
+
classpath 'com.android.tools.build:gradle:7.3.1'
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
apply plugin: 'com.android.library'
|
13
|
+
|
14
|
+
android {
|
15
|
+
compileSdkVersion 33
|
16
|
+
buildToolsVersion '33.0.1'
|
17
|
+
|
18
|
+
defaultConfig {
|
19
|
+
minSdkVersion 21
|
20
|
+
targetSdkVersion 33
|
21
|
+
versionCode 1
|
22
|
+
versionName "1.0"
|
23
|
+
}
|
24
|
+
lintOptions {
|
25
|
+
abortOnError false
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
repositories {
|
30
|
+
mavenCentral()
|
31
|
+
google()
|
32
|
+
}
|
33
|
+
|
34
|
+
dependencies {
|
35
|
+
implementation 'com.braintreepayments.api:drop-in:6.14.0'
|
36
|
+
implementation 'com.facebook.react:react-native:+'
|
37
|
+
}
|
38
|
+
|
39
|
+
// https://developers.braintreepayments.com/guides/3d-secure/migration/android/v3
|
40
|
+
rootProject.allprojects {
|
41
|
+
repositories {
|
42
|
+
maven {
|
43
|
+
url "https://cardinalcommerceprod.jfrog.io/artifactory/android"
|
44
|
+
credentials {
|
45
|
+
username 'braintree_team_sdk'
|
46
|
+
password 'AKCp8jQcoDy2hxSWhDAUQKXLDPDx6NYRkqrgFLRc3qDrayg6rrCbJpsKKyMwaykVL8FWusJpp'
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|