介绍
react-native-braintree-webview 是一个适用于 React Native 平台的 Braintree 支付集成插件,可以使得用户在 React Native 应用中使用 Braintree 进行支付。
本文将针对该 npm 包进行详细讲解,包括安装、使用、以及参数配置等。
安装
首先,在 React Native 项目中通过以下命令安装该 npm 包:
--- - ------------------------------
配置
1.导入以及初始化
在你的 React Native 项目中,需要导入 react-native-braintree-webview
以及 react-native-webview
:
------ ----------------------- ---- --------------------------------- ------ - ------- - ---- -----------------------
在初始化时传递 BraintreePaymentWebView
以及 WebView
给组件:
------------------------ -------- -- - ------------------- - -- -- ------------------------- -- -------------------- ------------------------------------------------------------ --------------- ---------------------------------- ------------------------------------------ ---------------------------------- --
2.配置 Braintree 支付
在 App 启动时,在 App.js
中导入 Braintree,然后设置 Braintree 的凭证:
------ - -- --------- ---- ---------------- ---------------------- --------- - --- ------------------ ------- - ----- ----------- -- -------- ------- ------- -- -------- --------- --------- ---------------------- ---------------------- ------------------------ ------------------------ ------------------------ ------------------------ -- ------------------------ ---------- -- - ---------------- - ------- ---------------- ------------------------------------------------------- -- -------- -- -- - ----------------------- -- -------- --- -- - ---------------------- --- -- ---
使用
1.设置支付的桥梁回调函数
在 BraintreePaymentWebView
中,我们为其设置 onPaymentMethodNonceReceived
回调函数:
------------------------ -------- -- - ------------------- - -- -- ------------------------- -- -------------------- ------------------------------------------------------------ --------------- ---------------------------------- ------------------------------------------ ---------------------------------- --
回调函数 handlePaymentMethodNonce
接收参数 paymentMethodNonce
回调函数,返回生成的令牌(paymentMethodNonce),然后可以在服务端用来完成用户所需的操作。
------------------------ - -------------------- -- - -------------------------------- -- --- ------- ------ ----- ----- ---- -- ------- -- ---------- ---- -
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