react-native-braintree-payments-drop-in

React Native integration of Braintree Drop-in

Getting started

yarn add react-native-braintree-payments-drop-in

Mostly automatic installation

# Run this only if you are on RN < 0.60
react-native link react-native-braintree-payments-drop-in

iOS specific

You must have a iOS deployment target >= 9.0.

If you don't have a Podfile or are unsure on how to proceed, see the CocoaPods usage guide.

In your Podfile, add:

# uncomment the next line if you are on RN < 0.60
#pod 'BraintreeDropIn', '~> 7.5.0'

# uncomment the next line to support credit card scanning
# pod 'CardIO'

Then:

cd ios
bundle exec pod repo update # optional and can be very long
bundle exec pod install

Android specific

If you want to add card scanning, add in your app/build.gradle:

dependencies {
...
    implementation "io.card:android-sdk:5.+"

Configuration

For more configuration options, see Braintree's documentation (iOS | Android).

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:

<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:

#import "BraintreeCore.h"

...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [BTAppSwitch setReturnURLScheme:self.paymentsURLScheme];
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

    if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) {
        return [BTAppSwitch handleOpenURL:url options:options];
    }
    
    return [RCTLinkingManager application:application openURL:url options:options];
}

- (NSString *)paymentsURLScheme {
    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];
    return [NSString stringWithFormat:@"%@.%@", bundleIdentifier, @"payments"];
}

Android

Setup browser switch.

Usage

For the API, see the Flow typings.

Basic

import BraintreeDropIn from 'react-native-braintree-payments-drop-in';

BraintreeDropIn.show({
  clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
  totalPrice: '1.0',
  currencyCode: 'EUR',
  GPayMerchantId: 'GPAY_MERCHANT_ID',
  companyName: 'COMPANY_NAME',
  disabledVaultManager: false,
})
.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

import BraintreeDropIn from 'react-native-braintree-payments-drop-in';

BraintreeDropIn.show({
  clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
  totalPrice: '1.0',
  currencyCode: 'EUR',
  GPayMerchantId: 'GPAY_MERCHANT_ID',
  companyName: 'COMPANY_NAME',
  threeDSecure: {
    amount: 1.0,
  },
  disabledVaultManager: false,
})
.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
  }
});