@xbenjii/react-native-braintree-dropin-ui 2.4.0 → 2.6.0

package/README.md

@@ -1,377 +1,377 @@
-# react-native-braintree-dropin-ui
-
-> React Native integration of Braintree Drop-in for IOS & ANDROID (Apple Pay, Google Pay, Paypal, Venmo, Credit Card)
-
-<p align="center">
-<img src="https://raw.githubusercontent.com/xbenjii/react-native-braintree-dropin-ui/master/images/iphone.png" width="250">
-<img src="https://raw.githubusercontent.com/xbenjii/react-native-braintree-dropin-ui/master/images/android.png" width="250">
-</p>
-
-## Getting started
-
-For React Native versions >= 0.60
-
-IOS
-```bash
-npm install react-native-braintree-dropin-ui --save
-
-OR
-
-yarn add react-native-braintree-dropin-ui
-
-cd ./ios
-pod install
-```
-
-Android
-```bash
-npm install react-native-braintree-dropin-ui --save
-
-OR
-
-yarn add react-native-braintree-dropin-u
-```
-
-## Configurate Payment Method(For ALL RN VERSIONS)
-See Braintree's documentation, [Apple Pay][7], [Google Pay][8], [Paypal][9], [Venmo][10]
-Once you have finished setting up all the configurations, it will show in the dropin UI.
-
-
-For React Native versions < 0.60
-### Mostly automatic installation
-
-```bash
-react-native link react-native-braintree-dropin-ui
-```
-
-#### iOS specific
-
-You must have a iOS deployment target \>= 12.0.
-
-If you don't have a Podfile or are unsure on how to proceed, see the [CocoaPods][1] usage guide.
-
-In your `Podfile`, add:
-
-```
-# comment the next line to disable credit card scanning
-pod 'CardIO'
-
-```
-
-When using React Native versions < 0.60, the following must also be added to your `Podfile`:
-
-```
-pod 'Braintree'
-
-pod 'BraintreeDropIn'
-
- # comment the next line to disable Apple pay
-pod 'Braintree/ApplePay'
-
- # comment the next line to disable PayPal
-pod 'Braintree/PayPal'
-
- # comment the next line to disable Venmo
-pod 'Braintree/Venmo'
-
- # Data collector for Braintree Advanced Fraud Tools
-pod 'Braintree/DataCollector'
-```
-
-Then:
-
-```bash
-cd ios
-pod repo update # optional and can be very long
-pod install
-```
-
-#### Apple Pay
-
-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].
-
-#### PayPal
-
-To enable paypal payments in iOS, you will need to add `setReturnURLScheme` to `launchOptions` of your `AppDelegate.m` / `AppDelegate.mm`
-
-```objective-c
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-    [BTAppContextSwitcher setReturnURLScheme:@"com.your-company-name.your-app-name.payments"]; // ADD THIS LINE 
-    return YES;
-}
-```
-
-#### Android specific
-
-Add in your `MainActivity.java`:
-```
-    import com.xbenjii.RNBraintreeDropIn.RNBraintreeDropInModule;
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        // ...
-        RNBraintreeDropInModule.initDropInClient(this);
-    }
-```
-
-Note: Only complete the next steps if using React Native versions < 0.60, autolinking will do these steps automatically.
-
-Add in your `app/build.gradle`:
-
-```
-dependencies {
-...
-    implementation project(':react-native-braintree-dropin-ui')
-    implementation "io.card:android-sdk:5.+"
-    implementation 'com.braintreepayments.api:data-collector:2.+'
-    implementation 'com.google.android.gms:play-services-wallet:11.4.0'
-```
-
-Add in your `MainApplication.java`:
-
-```
-  import com.xbenjii.RNBraintreeDropIn.RNBraintreeDropInPackage;
-
-
-  return Arrays.<ReactPackage>asList(
-             ... ...
-             new RNBraintreeDropInPackage()  // <------ add here
-         );
-
-```
-
-The below steps apply to all versions of React Native
-
-If you wish to support Google Pay, add in your `AndroidManifest.xml`:
-
-```
-    <!-- Enables the Google Pay API -->
-    <meta-data
-        android:name="com.google.android.gms.wallet.api.enabled"
-        android:value="true"/>
-```
-
-If you wish to support card swipe support, add in your 'app/build.gradle`:
-
-```
-dependencies {
-...
-    implementation "io.card:android-sdk:5.+"
-```
-
-### Configuration
-
-For more configuration options, see Braintree's documentation ([iOS][2] | [Android][3]).
-
-#### 3D Secure
-
-If you plan on using 3D Secure, you have to do the following.
-
-##### iOS
-
-###### Configure a new URL scheme
-
-Add a bundle url scheme `{BUNDLE_IDENTIFIER}.payments` in your app Info via XCode or manually in the `Info.plist`.
-In your `Info.plist`, you should have something like:
-
-```xml
-<key>CFBundleURLTypes</key>
-<array>
-    <dict>
-        <key>CFBundleTypeRole</key>
-        <string>Editor</string>
-        <key>CFBundleURLName</key>
-        <string>com.myapp</string>
-        <key>CFBundleURLSchemes</key>
-        <array>
-            <string>com.myapp.payments</string>
-        </array>
-    </dict>
-</array>
-```
-
-###### Update your code
-
-In your `AppDelegate.m`:
-
-```objective-c
-#import "BraintreeCore.h"
-
-...
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-{
-    ...
-    [BTAppContextSwitcher setReturnURLScheme:self.paymentsURLScheme];
-    ...
-}
-
-- (BOOL)application:(UIApplication *)application
-            openURL:(NSURL *)url
-            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
-
-    if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) {
-        return [BTAppContextSwitcher handleOpenURL:url];
-    }
-
-    return [RCTLinkingManager application:application openURL:url options:options];
-}
-
-- (NSString *)paymentsURLScheme {
-    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];
-    return [NSString stringWithFormat:@"%@.%@", bundleIdentifier, @"payments"];
-}
-```
-
-In your `AppDelegate.swift`:
-
-```swift
-import Braintree
-
-func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
-    ...
-    BTAppContextSwitcher.setReturnURLScheme(self.paymentsURLScheme)
-    ...
-}
-
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-    if let scheme = url.scheme, scheme.localizedCaseInsensitiveCompare(self.paymentsURLScheme) == .orderedSame {
-        return BTAppContextSwitcher.handleOpen(url)
-    }
-    return RCTLinkingManager.application(app, open: url, options: options)
-}
-
-private var paymentsURLScheme: String {
-    let bundleIdentifier = Bundle.main.bundleIdentifier ?? ""
-    return bundleIdentifier + ".payments"
-}
-```
-
-## Usage
-
-For the API, see the [Flow typings][4].
-
-### Basic
-
-```javascript
-import BraintreeDropIn from 'react-native-braintree-dropin-ui';
-
-BraintreeDropIn.show({
-  clientToken: 'token',
-  merchantIdentifier: 'applePayMerchantIdentifier',
-  googlePayMerchantId: 'googlePayMerchantId',
-  countryCode: 'US',    //apple pay setting
-  currencyCode: 'USD',   //apple pay setting
-  merchantName: 'Your Merchant Name for Apple Pay',
-  orderTotal:'Total Price',
-  googlePay: true,
-  applePay: true,
-  vaultManager: true,
-  payPal: true, 
-  cardDisabled: false,
-  darkTheme: true,
-})
-.then(result => console.log(result))
-.catch((error) => {
-  if (error.code === 'USER_CANCELLATION') {
-    // update your UI to handle cancellation
-  } else {
-    // update your UI to handle other errors
-  }
-});
-```
-
-### 3D Secure
-
-```javascript
-import BraintreeDropIn from 'react-native-braintree-dropin-ui';
-
-BraintreeDropIn.show({
-  clientToken: 'token',
-  threeDSecure: {
-    amount: 1.0,
-    email: 'john.doe@gmail.com',
-    billingAddress: { //optional
-      givenName:"Joe",
-      surname:"Guy",
-      phoneNumber:"12345678",
-      streetAddress:"555 Smith St.",
-      extendedAddress:"#5",
-      locality:"Oakland",
-      region:"CA",
-      countryCodeAlpha2:"US",
-      postalCode:"54321"
-    }
-  },
-  merchantIdentifier: 'applePayMerchantIdentifier',
-  googlePayMerchantId: 'googlePayMerchantId',
-  countryCode: 'US',    //apple pay setting
-  currencyCode: 'USD',   //apple pay setting
-  merchantName: 'Your Merchant Name for Apple Pay',
-  orderTotal:'Total Price',
-  googlePay: true,
-  applePay: true,
-  vaultManager: true,
-  payPal: true, 
-  cardDisabled: false,
-  darkTheme: true,
-})
-.then(result => console.log(result))
-.catch((error) => {
-  if (error.code === 'USER_CANCELLATION') {
-    // update your UI to handle cancellation
-  } else {
-    // update your UI to handle other errors
-    // for 3D secure, there are two other specific error codes: 3DSECURE_NOT_ABLE_TO_SHIFT_LIABILITY and 3DSECURE_LIABILITY_NOT_SHIFTED
-  }
-});
-```
-
-### Fetch more recent payment method
-
-```javascript
-import BraintreeDropIn from 'react-native-braintree-dropin-ui';
-
-BraintreeDropIn.fetchMostRecentPaymentMethod(clientToken)
-.then(result => console.log(result))
-.catch((error) => {
-  // Handle error
-});
-```
-
-### Tokenize card
-
-```javascript
-import BraintreeDropIn from 'react-native-braintree-dropin-ui';
-
-BraintreeDropIn.tokenizeCard(clientToken, {
-  number: '4111111111111111',
-  expirationMonth: '10',
-  expirationYear: '23',
-  cvv: '123',
-  postalCode: '12345',
-})
-.then(cardNonce => console.log(cardNonce))
-.catch((error) => {
-  // Handle error
-});
-```
-
-### Custom Fonts
-```
-BraintreeDropIn.show({
-  ...,
-  fontFamily: 'Averta-Regular',
-  boldFontFamily: 'Averta-Semibold',
-})
-```
-
-[1]:  http://guides.cocoapods.org/using/using-cocoapods.html
-[2]:  https://github.com/braintree/braintree-ios-drop-in
-[3]:  https://github.com/braintree/braintree-android-drop-in
-[4]:  ./index.js.flow
-[5]:  https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v5
-[6]:  https://articles.braintreepayments.com/guides/payment-methods/apple-pay#compatibility
-[7]:  https://developers.braintreepayments.com/guides/apple-pay/overview
-[8]:  https://developers.braintreepayments.com/guides/google-pay/overview
-[9]: https://developers.braintreepayments.com/guides/paypal/overview/ios/v5
-[10]: https://developers.braintreepayments.com/guides/venmo/overview
+# react-native-braintree-dropin-ui
+
+> React Native integration of Braintree Drop-in for IOS & ANDROID (Apple Pay, Google Pay, Paypal, Venmo, Credit Card)
+
+<p align="center">
+<img src="https://raw.githubusercontent.com/xbenjii/react-native-braintree-dropin-ui/master/images/iphone.png" width="250">
+<img src="https://raw.githubusercontent.com/xbenjii/react-native-braintree-dropin-ui/master/images/android.png" width="250">
+</p>
+
+## Getting started
+
+For React Native versions >= 0.60
+
+IOS
+```bash
+npm install react-native-braintree-dropin-ui --save
+
+OR
+
+yarn add react-native-braintree-dropin-ui
+
+cd ./ios
+pod install
+```
+
+Android
+```bash
+npm install react-native-braintree-dropin-ui --save
+
+OR
+
+yarn add react-native-braintree-dropin-u
+```
+
+## Configurate Payment Method(For ALL RN VERSIONS)
+See Braintree's documentation, [Apple Pay][7], [Google Pay][8], [Paypal][9], [Venmo][10]
+Once you have finished setting up all the configurations, it will show in the dropin UI.
+
+
+For React Native versions < 0.60
+### Mostly automatic installation
+
+```bash
+react-native link react-native-braintree-dropin-ui
+```
+
+#### iOS specific
+
+You must have a iOS deployment target \>= 12.0.
+
+If you don't have a Podfile or are unsure on how to proceed, see the [CocoaPods][1] usage guide.
+
+In your `Podfile`, add:
+
+```
+# comment the next line to disable credit card scanning
+pod 'CardIO'
+
+```
+
+When using React Native versions < 0.60, the following must also be added to your `Podfile`:
+
+```
+pod 'Braintree'
+
+pod 'BraintreeDropIn'
+
+ # comment the next line to disable Apple pay
+pod 'Braintree/ApplePay'
+
+ # comment the next line to disable PayPal
+pod 'Braintree/PayPal'
+
+ # comment the next line to disable Venmo
+pod 'Braintree/Venmo'
+
+ # Data collector for Braintree Advanced Fraud Tools
+pod 'Braintree/DataCollector'
+```
+
+Then:
+
+```bash
+cd ios
+pod repo update # optional and can be very long
+pod install
+```
+
+#### Apple Pay
+
+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].
+
+#### PayPal
+
+To enable paypal payments in iOS, you will need to add `setReturnURLScheme` to `launchOptions` of your `AppDelegate.m` / `AppDelegate.mm`
+
+```objective-c
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+    [BTAppContextSwitcher setReturnURLScheme:@"com.your-company-name.your-app-name.payments"]; // ADD THIS LINE 
+    return YES;
+}
+```
+
+#### Android specific
+
+Add in your `MainActivity.java`:
+```
+    import com.xbenjii.RNBraintreeDropIn.RNBraintreeDropInModule;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        // ...
+        RNBraintreeDropInModule.initDropInClient(this);
+    }
+```
+
+Note: Only complete the next steps if using React Native versions < 0.60, autolinking will do these steps automatically.
+
+Add in your `app/build.gradle`:
+
+```
+dependencies {
+...
+    implementation project(':react-native-braintree-dropin-ui')
+    implementation "io.card:android-sdk:5.+"
+    implementation 'com.braintreepayments.api:data-collector:2.+'
+    implementation 'com.google.android.gms:play-services-wallet:11.4.0'
+```
+
+Add in your `MainApplication.java`:
+
+```
+  import com.xbenjii.RNBraintreeDropIn.RNBraintreeDropInPackage;
+
+
+  return Arrays.<ReactPackage>asList(
+             ... ...
+             new RNBraintreeDropInPackage()  // <------ add here
+         );
+
+```
+
+The below steps apply to all versions of React Native
+
+If you wish to support Google Pay, add in your `AndroidManifest.xml`:
+
+```
+    <!-- Enables the Google Pay API -->
+    <meta-data
+        android:name="com.google.android.gms.wallet.api.enabled"
+        android:value="true"/>
+```
+
+If you wish to support card swipe support, add in your 'app/build.gradle`:
+
+```
+dependencies {
+...
+    implementation "io.card:android-sdk:5.+"
+```
+
+### Configuration
+
+For more configuration options, see Braintree's documentation ([iOS][2] | [Android][3]).
+
+#### 3D Secure
+
+If you plan on using 3D Secure, you have to do the following.
+
+##### iOS
+
+###### Configure a new URL scheme
+
+Add a bundle url scheme `{BUNDLE_IDENTIFIER}.payments` in your app Info via XCode or manually in the `Info.plist`.
+In your `Info.plist`, you should have something like:
+
+```xml
+<key>CFBundleURLTypes</key>
+<array>
+    <dict>
+        <key>CFBundleTypeRole</key>
+        <string>Editor</string>
+        <key>CFBundleURLName</key>
+        <string>com.myapp</string>
+        <key>CFBundleURLSchemes</key>
+        <array>
+            <string>com.myapp.payments</string>
+        </array>
+    </dict>
+</array>
+```
+
+###### Update your code
+
+In your `AppDelegate.m`:
+
+```objective-c
+#import "BraintreeCore.h"
+
+...
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+    ...
+    [BTAppContextSwitcher setReturnURLScheme:self.paymentsURLScheme];
+    ...
+}
+
+- (BOOL)application:(UIApplication *)application
+            openURL:(NSURL *)url
+            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
+
+    if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) {
+        return [BTAppContextSwitcher handleOpenURL:url];
+    }
+
+    return [RCTLinkingManager application:application openURL:url options:options];
+}
+
+- (NSString *)paymentsURLScheme {
+    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];
+    return [NSString stringWithFormat:@"%@.%@", bundleIdentifier, @"payments"];
+}
+```
+
+In your `AppDelegate.swift`:
+
+```swift
+import Braintree
+
+func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+    ...
+    BTAppContextSwitcher.setReturnURLScheme(self.paymentsURLScheme)
+    ...
+}
+
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+    if let scheme = url.scheme, scheme.localizedCaseInsensitiveCompare(self.paymentsURLScheme) == .orderedSame {
+        return BTAppContextSwitcher.handleOpen(url)
+    }
+    return RCTLinkingManager.application(app, open: url, options: options)
+}
+
+private var paymentsURLScheme: String {
+    let bundleIdentifier = Bundle.main.bundleIdentifier ?? ""
+    return bundleIdentifier + ".payments"
+}
+```
+
+## Usage
+
+For the API, see the [Flow typings][4].
+
+### Basic
+
+```javascript
+import BraintreeDropIn from 'react-native-braintree-dropin-ui';
+
+BraintreeDropIn.show({
+  clientToken: 'token',
+  merchantIdentifier: 'applePayMerchantIdentifier',
+  googlePayMerchantId: 'googlePayMerchantId',
+  countryCode: 'US',    //apple pay setting
+  currencyCode: 'USD',   //apple pay setting
+  merchantName: 'Your Merchant Name for Apple Pay',
+  orderTotal:'Total Price',
+  googlePay: true,
+  applePay: true,
+  vaultManager: true,
+  payPal: true, 
+  cardDisabled: false,
+  darkTheme: true,
+})
+.then(result => console.log(result))
+.catch((error) => {
+  if (error.code === 'USER_CANCELLATION') {
+    // update your UI to handle cancellation
+  } else {
+    // update your UI to handle other errors
+  }
+});
+```
+
+### 3D Secure
+
+```javascript
+import BraintreeDropIn from 'react-native-braintree-dropin-ui';
+
+BraintreeDropIn.show({
+  clientToken: 'token',
+  threeDSecure: {
+    amount: 1.0,
+    email: 'john.doe@gmail.com',
+    billingAddress: { //optional
+      givenName:"Joe",
+      surname:"Guy",
+      phoneNumber:"12345678",
+      streetAddress:"555 Smith St.",
+      extendedAddress:"#5",
+      locality:"Oakland",
+      region:"CA",
+      countryCodeAlpha2:"US",
+      postalCode:"54321"
+    }
+  },
+  merchantIdentifier: 'applePayMerchantIdentifier',
+  googlePayMerchantId: 'googlePayMerchantId',
+  countryCode: 'US',    //apple pay setting
+  currencyCode: 'USD',   //apple pay setting
+  merchantName: 'Your Merchant Name for Apple Pay',
+  orderTotal:'Total Price',
+  googlePay: true,
+  applePay: true,
+  vaultManager: true,
+  payPal: true, 
+  cardDisabled: false,
+  darkTheme: true,
+})
+.then(result => console.log(result))
+.catch((error) => {
+  if (error.code === 'USER_CANCELLATION') {
+    // update your UI to handle cancellation
+  } else {
+    // update your UI to handle other errors
+    // for 3D secure, there are two other specific error codes: 3DSECURE_NOT_ABLE_TO_SHIFT_LIABILITY and 3DSECURE_LIABILITY_NOT_SHIFTED
+  }
+});
+```
+
+### Fetch more recent payment method
+
+```javascript
+import BraintreeDropIn from 'react-native-braintree-dropin-ui';
+
+BraintreeDropIn.fetchMostRecentPaymentMethod(clientToken)
+.then(result => console.log(result))
+.catch((error) => {
+  // Handle error
+});
+```
+
+### Tokenize card
+
+```javascript
+import BraintreeDropIn from 'react-native-braintree-dropin-ui';
+
+BraintreeDropIn.tokenizeCard(clientToken, {
+  number: '4111111111111111',
+  expirationMonth: '10',
+  expirationYear: '23',
+  cvv: '123',
+  postalCode: '12345',
+})
+.then(cardNonce => console.log(cardNonce))
+.catch((error) => {
+  // Handle error
+});
+```
+
+### Custom Fonts
+```
+BraintreeDropIn.show({
+  ...,
+  fontFamily: 'Averta-Regular',
+  boldFontFamily: 'Averta-Semibold',
+})
+```
+
+[1]:  http://guides.cocoapods.org/using/using-cocoapods.html
+[2]:  https://github.com/braintree/braintree-ios-drop-in
+[3]:  https://github.com/braintree/braintree-android-drop-in
+[4]:  ./index.js.flow
+[5]:  https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v5
+[6]:  https://articles.braintreepayments.com/guides/payment-methods/apple-pay#compatibility
+[7]:  https://developers.braintreepayments.com/guides/apple-pay/overview
+[8]:  https://developers.braintreepayments.com/guides/google-pay/overview
+[9]: https://developers.braintreepayments.com/guides/paypal/overview/ios/v5
+[10]: https://developers.braintreepayments.com/guides/venmo/overview