简介
@react-native-payments/braintree 是一款可在 React Native 应用中使用的 braintree 支付插件。braintree 是一个 PayPal 子公司，提供信用卡、 PayPal 和 Venmo 支付解决方案。通过使用这个插件，我们可以在 React Native 应用中方便地实现支付功能。
本文将详细介绍如何在 React Native 应用中使用 @react-native-payments/braintree 插件，包括插件的安装、配置以及使用。
安装
使用 npm 包管理器即可安装 @react-native-payments/braintree，命令如下：
npm install @react-native-payments/braintree
配置
在使用 @react-native-payments/braintree 插件之前，我们需要先获取到 braintree 的客户端令牌(Client Token)。客户端令牌是一个由 braintree 后台服务返回的加密字符串，用于保证交易的安全。获取客户端令牌的方法有多种，这里我们选择使用托管(Hosted)方式获取客户端令牌来演示。
获取托管客户端令牌
创建 braintree 帐户。访问 braintree网站 并创建自己的账号。
在 braintree 控制台中创建一个新的 Sandbox 环境。进入 Braintree 控制台，选择 "Create Sandbox Account" 并创建你自己的 Sandbox 环境。
在 Sandbox 环境中创建一个新的结算方式。在 Braintree 控制台中，进入 "Settings > Processing > Settlement"，创建一个新的结算方式。
获取 Client Token。在 Braintree 控制台中，进入 "Settings > API Keys > Tokenization Keys"，将托管客户端令牌复制到你自己的 React Native 应用代码中。
配置插件
编写配置文件，配置 @react-native-payments/braintree 插件的相关参数。在使用插件之前，我们需要将插件的参数初始化。在 React Native 应用中创建一个名为 paymentConfig.js 的文件，并写入以下代码：
module.exports = {
token: "YOUR_CLIENT_TOKEN_FROM_BRAINTREE",
merchantIdentifier: "YOUR_MERCHANT_IDENTIFIER_FROM_APPLE_PAY",
currencyCode: "USD",
country: "US",
googlePayEnvironment: GooglePayEnvironment.Production,
merchantName: "YOUR_MERCHANT_NAME",
}使用
导入插件
在需要使用支付功能的页面中导入插件，并进行初始化：
-- -------------------- ---- -------
------ - ------------ -------------- - ---- -----------------------------------
------ - ---- - ---- ---------------
----- ------------- - -- -- -
----- -------- ----- - ---
------------
-------------------
------------ -- ---
---------------- -- ---
-------------------------------- -- ---
--
---------------
-------- ------ ------- ------- -- --
-------------- -- -- -
-- ----- ---------
--
--
-------
--渲染支付按钮
渲染 PayPal 和 Venmo 支付按钮：
-- -------------------- ---- -------
------ - ------------ ------------- ----------- - ---- -----------------------------------
----- ------------- - -- -- -
----- -------- ----- - ---
------------
-------------------
------------ -- ---
---------------- -- ---
-------------------------------- -- ---
--
-------------
-------- ------ ------- ------- -- --
------------------- -------- -- -
-- ----- ---------
--
------------ -- ---
---------------- -- ---
------------------------------------
--
------------
-------- ------ ------- ------- -- --
------------------ -- -
-- ----- ---------
--
------------ -- ---
---------------- -- ---
--
-------
--构建购买请求
构建购买请求，获取订单号，订单信息等:
-- -------------------- ---- -------
----- -------- - ----- -- -- -
--- -
----- -------- - ----- ---------------------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------- ---
--------- ------
-------- ------
---
---
----- - -------- ------------- - ----- - - - ----- ----------------
------ -
------- ------
--------
-------- ---
--
- ----- ----- -
------------------- ---- ------ --------- -- -----
----- --- ------------ --- ---- - -------- -- ---- --------
-
--总结
在本文中，我们详细介绍了在 React Native 应用中使用 @react-native-payments/braintree 插件的方法和步骤。通过学习，你应该能够轻松在自己的 React Native 项目中集成 PayPal、Venmo 支付解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726181e8991b448e88d5