简介
Braintree 是一家全球领先的支付解决方案提供商，通过 Braintree 的支付系统可以快速轻松地完成支付操作。braintree-paypal-client-config 是一个 Braintree 的 npm 包，可以让你轻松地在项目中集成 PayPal 的支付和结算操作。
在本文中，我们将介绍如何使用 npm 包 braintree-paypal-client-config，包括如何安装、配置和使用该包以及使用示例代码。
安装
在使用 braintree-paypal-client-config 之前，需要先在项目中安装该 npm 包。可以通过以下命令安装：
npm install braintree-paypal-client-config --save
配置
使用 braintree-paypal-client-config 需要一些配置步骤。首先，你需要在 Braintree 管理面板中创建账户并获取 API 密钥。
接下来，你需要在项目中创建配置文件，配置文件应该包含以下信息：
-- -------------------- ---- ------- - ------- ------------------------- ------------ ------ ------ -------- --------- ------ ------ ----- ----------- ------ -------- ----- ------------------------------- ----- --------------------- ------ ------- ----------- ----- ------------ ------------ -
其中，apiUrl 是 PayPal 的 API 地址，accessToken 是 Braintree 创建的访问令牌，clientId 和 merchantId 是你在 Braintree 中创建的 PayPal 应用程序的账户信息。isPartnerAttributionIdRequired 和 partnerAttributionId 是可选的，用于跟踪支付来源。environment 设置为 Production 表示该配置文件的环境为生产环境，如果是测试环境请设置为 Sandbox。
配置文件可以使用以下方式加载：
const config = require('/path/to/config/file');
const BTPayPal = require('braintree-paypal-client-config');
const btPayPal = new BTPayPal.Client(config);以上代码会创建 BTPayPal 对象，该对象包含 PayPal 的 API 访问方法和其他常用的方法。
使用
接下来是使用示例，我们实现一个简单的前端支付功能，并对 basic 和 advanced 两个版本进行说明。
Basic
在 basic 版本中，支付界面只包括商品名称、价格和 PayPal 支付按钮，用户点击支付按钮后会转到 PayPal 网站完成支付和确认。
以下是 basic 版本的示例代码:
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ----- ---------------
------- ----------------------------------------------------------
-------
------
---------- ------- ----- ------------
------
------ ------------------- -------------
------ ----------- --------------- ------------------
------ -------------------- --------------
------ ------------- ---------------- -------------------
---- -----------------------------------
-------
--------
----- -------- - --- --------------
--------- ------ ------ -----
------------ ---------
---
----------------
------------ -------------- -------- -
------ ----------------------
--------------- --
------- -
------ ------------------------------------------
--
------------ -----------------------------------------
--
---
--
---------- -------------- -------- -
------ ---------------------------------------------- -
------------------ --------- -- - - ----------------------------- - -------------- --- - - ------------
---
-
--------------------------------------
---------
-------
-------在该示例中，我们使用 paypal.Buttons 方法创建了 PayPal 按钮，然后使用 createOrder 方法创建订单并指定商品名称和价格，使用 onApprove 方法处理支付成功后的回调函数。
Advanced
在 advanced 版本中，支付界面包括更多的选项，比如设定订单数量、重量等。在支付完成后，还可以设置支付后跳转的页面。
以下是 advanced 版本的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- -------- ---------------
------- ----------------------------------------------------------
-------
------
---------- ------- -------- ------------
------
------ ------------------- -------------
------ ----------- --------------- ------------------
------ --------------------------
------ ------------- ------------ ---------------
------ --------------------------------
------ ------------- --------------- ------------- --------------
------ ----------------------------
------ ------------- ------------- ----------------
------ ----------------------------
------ ----------- ------------- ----------------
---- -----------------------------------
-------
--------
----- -------- - --- --------------
--------- ------ ------ -----
------------ ---------
---
----------------
------------ -------------- -------- -
------ ----------------------
------- ----------
--------------- --
------- -
-------------- ------
------ ---------------------------------------
---------- -
----------- -
-------------- ------
------ --------------------------------------
--
--------- -
-------------- ------
------ ---
--
---------- -
-------------- ------
------ ---
-
-
--
------ --
----- ------------------------------------------
--------- ------------------------------------------
------------ -
-------------- ------
------ --------------------------------------
--
------- -
----- -----
------ ---------------------------------------
-
---
--------- -
-------- -
------ ----- ---- -----
----- ---- -----------
------ -----
------------ --------
------------- ----
-
--
---------- ---------------------------------------
--
---
--
---------- -------------- -------- -
------ ---------------------------------------------------------- -
------------------ --------- -- - - ----------------------------- - -------------- --- - - ------------
-----------------------------------------------------------
---
--
--------------------------------------
---------
-------
-------在该示例中，我们也是使用 paypal.Buttons 方法创建了 PayPal 按钮，但是 createOrder 方法的选项更多，比如包含了数量、重量等信息，同时，使用 captureOrder 方法来处理支付成功后的回调函数。
总结
在本文中，我们介绍了 npm 包 braintree-paypal-client-config 的安装、配置和使用步骤，并给出了 basic 和 advanced 两个版本的使用示例代码。
我们希望本文对大家能够有所启发，能够帮助大家使用 braintree-paypal-client-config 解决前端支付集成问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5181e8991b448e5d26