Braintree Web 集成指南

怀谦熹Glynnis

于 2025-04-06 10:30:44 发布

阅读量597

点赞数 30

本文链接：https://blog.youkuaiyun.com/gitblog_00570/article/details/147022358

版权

Braintree Web 集成指南

braintree-web A suite of tools for integrating Braintree in the browser 项目地址: https://gitcode.com/gh_mirrors/br/braintree-web

1. 项目基础介绍

Braintree Web 是一个开源项目，提供了一系列工具来帮助开发者在浏览器中集成 Braintree 的支付功能。该项目主要使用 JavaScript 编程语言，为开发者提供了一个简单的方式来处理在线支付。

2. 关键技术和框架

该项目使用以下关键技术和框架：

Braintree SDK：Braintree 提供的软件开发工具包，用于集成支付功能。
Hosted Fields：Braintree 提供的一种服务，允许在网页上嵌入支付字段，同时保持 PCI DSS 合规性。
Promises：JavaScript 的一种异步编程模式，用于处理异步操作。

3. 安装和配置

准备工作

在开始安装之前，请确保你的开发环境已经安装了以下工具：

Node.js：JavaScript 的运行环境，用于执行 JavaScript 代码。
npm：Node.js 的包管理工具，用于安装和管理项目依赖。

安装步骤

以下是详细的安装步骤：

克隆项目

首先，克隆 Braintree Web 项目的仓库到本地环境：

git clone https://github.com/braintree/braintree-web.git
cd braintree-web

安装依赖

使用 npm 安装项目所需的依赖：
```
npm install
```

创建一个示例项目

在项目根目录下创建一个简单的 HTML 文件 index.html，用于展示集成效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Braintree Web Example</title>
</head>
<body>
    <form id="my-sample-form">
        <input type="hidden" name="payment_method_nonce" />
        <label for="card-number">Card Number</label>
        <div id="card-number"></div>
        <label for="cvv">CVV</label>
        <div id="cvv"></div>
        <label for="expiration-date">Expiration Date</label>
        <div id="expiration-date"></div>
        <button id="my-submit" type="submit" disabled>Pay</button>
    </form>

    <script src="path/to/braintree-web/dist/braintree-web.js"></script>
    <script>
        // Braintree 客户端和 Hosted Fields 集成的代码
    </script>
</body>
</html>

集成 Braintree 客户端

在 index.html 的 <script> 标签中，添加以下代码以创建 Braintree 客户端并集成 Hosted Fields：

var submitBtn = document.getElementById('my-submit');
var form = document.getElementById('my-sample-form');

braintree.client.create({
    authorization: 'YOUR_CLIENT_AUTHORIZATION'
}, function (err, client) {
    braintree.hostedFields.create({
        client: client,
        styles: {
            input: {
                'font-size': '16pt',
                color: '#3A3A3A'
            },
            '.number': {
                'font-family': 'monospace'
            },
            '.valid': {
                color: 'green'
            }
        },
        fields: {
            number: {
                selector: '#card-number'
            },
            cvv: {
                selector: '#cvv'
            },
            expirationDate: {
                selector: '#expiration-date'
            }
        }
    }, function (err, hostedFields) {
        submitBtn.addEventListener('click', function (event) {
            event.preventDefault();
            submitBtn.setAttribute('disabled', 'disabled');
            hostedFields.tokenize(function (err, payload) {
                if (err) {
                    submitBtn.removeAttribute('disabled');
                    console.error(err);
                } else {
                    form['payment_method_nonce'].value = payload.nonce;
                    form.submit();
                }
            });
        });
        submitBtn.removeAttribute('disabled');
    });
});