react-native-braintree-custom-ui
An effort to update https://github.com/kraffslol/react-native-braintree-xplat. Use Braintree Android SDK V3 & IOS V4, with 3DS 2.
Required RN 0.60+ for auto linking on iOS.
TODO :
- Currency as a parameter
Installation
Run yarn install react-native-braintree-custom-ui
Usage
Setup
This plugin uses only Tokenization Key for initialisation (https://developers.braintreepayments.com/guides/authorization/tokenization-key/android/v2) Put your serverUrl where the plugin will be able to make a GET request and get the token from your server
var BTClient = ;BTClient;
You will need the CardinalMobile.framework for 3DS 2 (https://developers.braintreepayments.com/guides/3d-secure/client-side/ios/v4). You can easily download it with that command
curl -L -ubraintree-team-sdk@cardinalcommerce:220cc9476025679c4e5c843666c27d97cfb0f951 "https://cardinalcommerce.bintray.com/ios/2.1.4-2/cardinalmobilesdk.zip" -o cardinalmobile2.1.4-2.zip
For Android you will need to add this to you build.gradle
repositories {
maven {
url "https://cardinalcommerce.bintray.com/android"
credentials {
username 'braintree-team-sdk@cardinalcommerce'
password '220cc9476025679c4e5c843666c27d97cfb0f951'
}
}
}
Get Card Nonce
If you only want to tokenize credit card information, you can use the following:
const card = number: "4111111111111111" expirationDate: "10/20" // or "10/2020" or any valid date cvv: "400" BTClient; // Full list of card parameters:type Card = number: string cvv: string expirationDate: string cardholderName: string firstName: string lastName: string company: string countryName: string countryCodeAlpha2: string countryCodeAlpha3: string countryCodeNumeric: string locality: string postalCode: string region: string streetAddress: string extendedAddress: string amount: number
Check 3D Secure for card nonce
If you only want to tokenize credit card information, you can use the following:
const params = BTClient; // Full list of card parameters:type Params = nonce: string firstName: string lastName: string locality: string postalCode: string region: string streetAddress: string extendedAddress: string amount: number
PayPal Checkout
This plugin implements Paypal Checkout https://developers.braintreepayments.com/guides/paypal/checkout-with-paypal/android/v2
You will need to provide an amount to make it works
BTClient;
One Touch on iOS
To take advantage of One Touch, there are additional setup required:
- Register a URL scheme in Xcode (should always start with YOUR Bundle ID) More info here TL;DR
Add CFBundleURLTypes to Info.Plist
<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>yourbundleid</string> <key>CFBundleURLSchemes</key> <array> <string>yourbundleidpayments</string> </array> </dict> </array>
WhiteList
If your app is built using iOS 9 as its Base SDK, then you must add URLs to a whitelist in your app's info.plist
<key>LSApplicationQueriesSchemes</key> <array> <string>compaypalppclienttouchv1</string> <string>compaypalppclienttouchv2</string> <string>comvenmotouchv2</string> </array>
-
For iOS: Use setupWithURLScheme instead, passing the url scheme you have registered in previous step
-
Add this delegate method (callback) to your AppDelegate.m
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
Credits
Big thanks to @kraffslol for the original ios & android modules.