A react native interface for handling Braintree's paypal nonce creation, when using a custom credit paypal UI.
For those using the Braintree's v.zero SDK, check out react-native-braintree.
// outside of your componet
import BraintreeCardClient from 'react-native-braintree-paypal';
// in your componentDidMount() block
BraintreeCardClient.initWithAuthorization(<token>);
// handle form submit event after user inputs paypal detail
BraintreeCardClient.getCardNonce( paypal, expMonth, expYear, cvv, (error, nonce) => {
// if error handle accordingly or pass nonce to your server
});
- Run
npm install react-native-braintree-paypal --save
to add the package - Inside the
ios/
directory, create a Podfile:
# Podfile for cocoapods 1.0
source 'https://github.com/CocoaPods/Specs.git'
target 'yourAppTarget' do
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket'
]
pod 'react-native-braintree-paypal', :path => '../node_modules/react-native-braintree-paypal'
end
Or if you use an older CocoaPods version:
source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket'
]
pod 'react-native-braintree-paypal', :path => '../node_modules/react-native-braintree-paypal'
-
Run
pod install
. This installs the Braintree iOS SDK and a new workspace is created. -
Open your workspace.
-
Under your app target -> build settings, look for
Other Linker Flags
and add$(inherited)
-
Build and run project! If it fails the first time, clean and rebuild.
Because React Native's iOS code is now pulled in via CocoaPods, you also need to remove the React
, RCTImage
, etc. subprojects from your app's Xcode project.
Tested with:
- Node 5.6.0
- npm 3.6.0
- react-native 0.17.0