Braintree 客户端设置

Braintree 提供了多种客户端 SDK，包括 Android、iOS 和 JavaScript。这些 SDK 允许我们在应用程序的前端集成 Braintree 的功能。

使用 Braintree SDK 执行的客户端事件流程如下：

1. 向服务器发送令牌请求
2. 从服务器接收客户端令牌
3. 将支付信息发送至 Braintree，以获取 支付方式凭证
4. 从 Braintree 接收 支付方式凭证
5. 将 支付方式凭证 发送到服务器

下面我们详细分析每一步（我们将以 JavaScript SDK 为例）。

Drop-in UI

Braintree 的 Drop-in UI 是一个完整的结账界面组件，可集成到我们的自定义应用中，安全地接收付款。该界面包含用户输入信用卡信息的输入框，并支持通过 PayPal、Venmo、Apple Pay 和 Google Pay 实现快速结账。

Drop-in UI 具有诸多优势，包括快速简便的集成方式、可定制且用户友好的界面，还可扩展以支持多种支付方式，如 PayPal 和 Apple Pay 等。

要在页面中添加 Drop-in UI，需执行以下两个步骤：

1. 在页面中添加一个空容器。我们已在 第 6 行 添加了一个。
2. 使用该容器（或类似查询选择器的字符串，如 #dropin-container）创建一个 Drop-in 实例。我们使用了 braintree.dropin.create 方法在 第 9 至 13 行 创建了实例。

HTML

1<head>
2  <meta charset="utf-8">
3  <script src="https://js.braintreegateway.com/web/dropin/1.29.0/js/dropin.min.js"></script>
4</head>
5<body>
6  <div id="dropin-container"></div>
7
8  <script type="text/javascript">
9    braintree.dropin.create({
10      container: '#dropin-container'
11    }, (error, dropinInstance) => {
12      // 在此处使用 `dropinInstance`
13    });
14  </script>
15</body>

在浏览器中显示的对应 Drop-in UI 如下所示。

获取客户端令牌

首先，我们的客户端 SDK 需要由服务器生成的一个令牌。客户端可以通过向服务器发起 GET 请求来获取该令牌。服务器使用 Braintree SDK 生成此令牌，并将其返回给客户端。我们将在下一课中学习如何从服务器生成并发送客户端令牌。

收到客户端令牌后，我们将其嵌入模板中，更新 braintree.dropin.create 方法中的 authorization 参数，如网页中 第 10 行 所示。

HTML

1<head>
2  <meta charset="utf-8">
3  <script src="https://js.braintreegateway.com/web/dropin/1.29.0/js/dropin.min.js"></script>
4</head>
5<body>
6  <div id="dropin-container"></div>
7
8  <script type="text/javascript">
9    braintree.dropin.create({
10      authorization: CLIENT_TOKEN_FROM_SERVER,
11      container: '#dropin-container'
12    }, (error, dropinInstance) => {
13      // 在此处使用 `dropinInstance`
14    });
15  </script>
16</body>

向 Braintree 请求支付方式凭证

在下面的网页中，我们在 第 6 至 9 行 创建了一个 form，并将计划传递给 braintree.dropin.create 的空容器（第 7 行）放入该表单中。这使得布局和流程更易于管理。我们还在该表单中添加了一个 submit 按钮（第 8 行）。

在 第 23 行，我们调用了 dropinInstance.requestPaymentMethod()，位于 submit 按钮的点击事件处理程序中。当客户点击该按钮时，客户端 SDK 会将支付信息（例如卡号和有效期）发送至 Braintree，以换取一个 支付方式凭证。该 支付方式凭证 是一个一次性使用的值，代表特定的支付方式。

HTML

1<head>
2  <meta charset="utf-8">
3  <script src="https://js.braintreegateway.com/web/dropin/1.29.0/js/dropin.min.js"></script>
4</head>
5<body>
6  <form id="payment-form" action="/route/on/your/server" method="post">
7    <div id="dropin-container"></div>
8    <input type="submit" />
9  </form>
10
11  <script type="text/javascript">
12    const form = document.getElementById('payment-form');
13    
14    braintree.dropin.create({
15      authorization: 'CLIENT_AUTHORIZATION',
16      container: '#dropin-container'
17    }, (error, dropinInstance) => {
18      if (error) console.error(error);
19
20      form.addEventListener('submit', event => {
21        event.preventDefault();
22
23        dropinInstance.requestPaymentMethod((error, payload) => {
24          // 将支付方式凭证发送到你的服务器
25        });
26      });
27    });
28  </script>
29</body>

将支付方式凭证发送到服务器

在从 Braintree 获取到 支付方式凭证 后，客户端执行的最后一步是使用 POST 请求将该凭证发送到服务器。在下面的网页中，这一步在 第 27 行 完成，我们将 凭证 添加到 第 9 行 声明的隐藏字段中。最后，表单在 第 28 行 提交至服务器。

HTML

1<head>
2  <meta charset="utf-8">
3  <script src="https://js.braintreegateway.com/web/dropin/1.29.0/js/dropin.min.js"></script>
4</head>
5<body>
6  <form id="payment-form" action="/route/on/your/server" method="post">
7    <div id="dropin-container"></div>
8    <input type="submit" />
9    <input type="hidden" id="nonce" name="payment_method_nonce"/>
10  </form>
11
12  <script type="text/javascript">
13    const form = document.getElementById('payment-form');
14
15    braintree.dropin.create({
16      authorization: 'CLIENT_AUTHORIZATION',
17      container: '#dropin-container'
18    }, (error, dropinInstance) => {
19      if (error) console.error(error);
20
21      form.addEventListener('submit', event => {
22        event.preventDefault();
23
24        dropinInstance.requestPaymentMethod((error, payload) => {
25          if (error) console.error(error);
26
27          document.getElementById('nonce').value = payload.nonce;
28          form.submit();
29        });
30      });
31    });
32  </script>
33</body>

服务器随后使用此 支付方式凭证 配合 Braintree 服务端 SDK 来扣款或更新客户的支付方式。