前言
随着移动支付的迅猛发展，移动应用的开发中越来越多地涉及到处理支付的问题，而 Braintree 则成为了一个备受信任的支付平台，提供了丰富的支付服务。而 react-native-braintree-bangerz 就是一个基于 React Native 的 Braintree 封装包，开发者可以使用这个包轻松地集成 Braintree 支付服务。本篇文章将介绍如何使用 react-native-braintree-bangerz 包实现支付功能。
安装
首先，需要确保你的项目已经使用了 React Native，然后在命令行中进入项目目录，输入以下命令进行安装：
npm install react-native-braintree-bangerz --save
安装完成后，需要在 Xcode、Android Studio 或者 Expo 中重新运行项目，才能使这个包生效。
配置
在安装了 react-native-braintree-bangerz 包之后，为了让它能够正常工作，需要在应用程序中进行一些配置工作。
iOS 应用程序配置
安装依赖
使用 react-native-braintree-bangerz 包需要依赖以下依赖库：
- BraintreeCore.framework
- BraintreeDropIn.framework
- BraintreePayPal.framework
- BraintreeVenmo.framework
- BraintreeCard.framework
- PayPalDataCollector.framework
- PayPalOneTouchCore.framework
- PayPalOneTouchButton.framework
可以使用 CocoaPods 进行依赖安装，编辑项目的 Podfile，添加以下内容：
pod 'Braintree', '~> 4.1.0'
然后执行以下命令进行相应的安装：
pod install
添加 URL Scheme
在项目的 info.plist 文件中添加 URL Scheme，如下：
-- -------------------- ---- -------
---------------------------
-------
------
--------------------------
------------------------------------------
-----------------------------
-------
--------------------------------
--------
-------
--------其中，your-url-scheme 指的是你的应用程序的 URL Scheme，可以在 Xcode 中的 Target -> Info -> URL Types 中设置。
Android 应用程序配置
在 Android 应用程序配置中，需要将以下依赖库添加到你的项目中，打开项目的 build.gradle 文件，添加以下内容：
dependencies {
compile 'com.braintreepayments.api:braintree:2.12.0'
compile ('com.paypal.sdk:paypal-android-sdk:2.14.2') {
exclude group: 'com.android.support'
}
}还需要在你的应用程序清单文件中添加以下权限：
<uses-permission android:name="android.permission.INTERNET" />
使用
react-native-braintree-bangerz 包提供了丰富的支付服务，下面我们将介绍如何使用这个包来实现支付功能。
创建支付客户端
首先需要创建支付客户端，使用 Braintree.initialize(clientToken) 方法初始化支付客户端，其中 clientToken 是支付凭证的字符串。
示例代码：
-- -------------------- ---- -------
------ --------- ---- ---------------------------------
----- ----------- - --------------------
----- ------- ------- --------------- -
----- ------------------- -
----- ----------------------------------
-
-------- -
------ ----- ---
-
-创建支付订单
成功初始化支付客户端后，可以使用 Braintree.getDeviceData() 方法获取设备数据，然后使用 Braintree.getNonce(amount) 方法创建支付订单，其中 amount 是支付金额。
示例代码：
-- -------------------- ---- -------
------ --------- ---- ---------------------------------
----- ------- ------- --------------- -
----- ------------------- -
----- ----------------------------------
-
----- ------------------------- -
----- ---------- - ----- --------------------------
----- - ----- - - ----- ---------------------------
-- - ----- -----------
-
-------- -
------ -
------
------- --------- ---- ----------- -- --------------------------- --
-------
--
-
-集成 PayPal 支付
react-native-braintree-bangerz 包支持集成 PayPal 支付，可以使用 Braintree.showPayPalViewController(amount, touchDisabled) 方法直接打开 PayPal 支付界面，其中 amount 是支付金额，touchDisabled 表示是否禁用 Touch ID。
示例代码：
-- -------------------- ---- -------
------ --------- ---- ---------------------------------
----- ------- ------- --------------- -
----- ------------------- -
----- ----------------------------------
-
----- ------------------------------- -
----- ---------- - ----- --------------------------
----- - ----- - - ----- ------------------------------------------ ------
-- - ----- -----------
-
-------- -
------ -
------
------- ---------- ---- ------- ----------- -- --------------------------------- --
-------
--
-
-结语
本篇文章介绍了如何使用 react-native-braintree-bangerz 包来实现支付功能，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673181e8991b448e3b56