介绍
react-native-braintree-webview 是一个适用于 React Native 平台的 Braintree 支付集成插件，可以使得用户在 React Native 应用中使用 Braintree 进行支付。
本文将针对该 npm 包进行详细讲解，包括安装、使用、以及参数配置等。
安装
首先，在 React Native 项目中通过以下命令安装该 npm 包：
npm i react-native-braintree-webview
配置
1.导入以及初始化
在你的 React Native 项目中，需要导入 react-native-braintree-webview 以及 react-native-webview：
import BraintreePaymentWebView from 'react-native-braintree-webview';
import { WebView } from 'react-native-webview';在初始化时传递 BraintreePaymentWebView 以及 WebView 给组件：
-- -------------------- ---- ------- ------------------------ -------- -- - ------------------- - -- -- ------------------------- -- -------------------- ------------------------------------------------------------ --------------- ---------------------------------- ------------------------------------------ ---------------------------------- --
2.配置 Braintree 支付
在 App 启动时，在 App.js 中导入 Braintree，然后设置 Braintree 的凭证：
-- -------------------- ---- -------
------ - -- --------- ---- ----------------
---------------------- --------- -
--- ------------------
------- -
----- ----------- -- --------
------- ------- -- --------
--------- ---------
---------------------- ----------------------
------------------------ ------------------------
------------------------ ------------------------
--
------------------------ ---------- -- -
---------------- - ------- ----------------
-------------------------------------------------------
--
-------- -- -- -
-----------------------
--
-------- --- -- -
---------------------- ---
--
---使用
1.设置支付的桥梁回调函数
在 BraintreePaymentWebView 中，我们为其设置 onPaymentMethodNonceReceived 回调函数：
-- -------------------- ---- ------- ------------------------ -------- -- - ------------------- - -- -- ------------------------- -- -------------------- ------------------------------------------------------------ --------------- ---------------------------------- ------------------------------------------ ---------------------------------- --
回调函数 handlePaymentMethodNonce 接收参数 paymentMethodNonce 回调函数，返回生成的令牌（paymentMethodNonce），然后可以在服务端用来完成用户所需的操作。
handlePaymentMethodNonce = (paymentMethodNonce) => {
console.log(paymentMethodNonce);
// use payment method nonce here, such as billing or merchantID etc.
}2.设置渲染页面
在组件中，我们也需要设置 React Native 的 WebView 作为支付窗口。
-- -------------------- ---- -------
------------- - -- -- -
------ -
--------
-------- -- -
------------ - --
--
--------- ----- ---- --
------------------------------------------------------
----------------------------------------------------------------
--
--
-参数
clientToken：Braintree 的客户端 token。styles：样式对象，可以自定义样式。onPaymentMethodNonceReceived：支付令牌生成后的回调函数。renderWebView：渲染的 WebView 组件。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------------------- ---- ---------------------------------
------ - ------- - ---- -----------------------
----- ------------- ------- --------- -
------------------ -
-------------
---------- - -
------------ ---
--
-
------------------- -
------------------
-
---------- - ----- -- -- -
----- -------- - ----- ------------------------------------------------------ -
-------- -
-------------- ------ - - ---------------------------------------------------------------------------
--------------- -------------------
--
---
----- ------ - ----- ----------------
--------------- ------------ ------------------- ---
--
----------- - ------- -- -
-------------------
--
------------------------ - -------------------- -- -
--------------------------------
--
----------------- - -- -- -
------ -
----- --------------------------------
------------------ -------------- ----------------- --
-------
--
--
------------- - -- -- -
------ -
--------
-------- -- -
------------ - --
--
--------- ----- ---- --
------------------------------------------------------
----------------------------------------------------------------
--
--
--
-------- -
----- - ----------- - - -----------
------ -
------------------------
-------- -- - ------------------- - -- --
------------------------- -- --------------------
------------------------------------------------------------
---------------
----------------------------------
------------------------------------------
----------------------------------
--
--
-
-
------ ------- --------------结语
在本文中，我们介绍了如何在 React Native 应用中使用 Braintree 进行支付，并详细的讲解了 react-native-braintree-webview 的配置、使用以及参数说明等，希望对你理解和使用该插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e081f