前段时间，他让我帮忙将支付集成到他的个人网站中，这给了我参与支付系统开发的机会。同时，因为找不到很多中文的相关文档，所以做了一个总结，以方便以后的需要。同学们。

（更新）2021.5 我发现很多同学也在问如何集成微信支付。其实很简单，所以我添加了微信的最终实现，见最后。

（更新）2022.8不再推荐方法，推荐使用

关于付款

我第一次听说这个是几个月前的一篇新闻报道。基本上就是说美国总统在用，而且很有可能就是下一位。这么受欢迎的支付平台有什么好处呢？我粗略收集了一下：

我们重点关注第二点。这是什么意思？这意味着客户可以用人民币支付。如果商户（收款人）是美国的银行，则会自动兑换成美元。如果是英国的银行，会自动换算成英镑！ （遗憾的是目前不支持中国的商家（不过也可以提供解决方案，就是用它来创建美国代理））

对于我们程序员来说，当然最关心第一个，因为它的目的就是极简开发，对开发者超级友好！至于有多友好，请看下文。

最简单的支付方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="[Publishable key]"
data-amount="999"
data-name="troy yang"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">

只需几行代码，我们就在客户端实现了一切：

真的超级简单，不过这个方法是基于信用卡支付接口的，已经可以满足一半的支付方式了。对于其他的三方支付，比如3D、支付宝、微信，甚至比特币，它给我们提供了其他的方式等等，接下来我就以支付宝为例。

注册账户

与注册支付宝账户相同。您必须先注册账户，然后绑定银行卡。 BUT，正如之前所说，不支持中国，所以即使注册成功，也无法激活，也无法收款。

我应该为中国商家做些什么？我能想到的唯一方法是这些：

对于我来说，因为他是英国人，所以他可以创建他的主帐户，然后将我的帐户添加到他的团队帐户列表中，这样我就可以访问他帐户下的所有开发者权限。邀请成功后页面

两个阶段

有两种模式，一种是测试模式，另一种是生产模式（实时模式）。测试模式下生成的货币交易仅用于测试。当所有测试通过后，可以切换到实时模式。唯一的区别是 key 和 key，稍后我们将使用这两个值。

交易流程

在整个交易阶段和状态中使用了几个概念：

创造

使用你自己的密钥来创建一个（例如，3D、支付宝，甚至比特币等）。创建完成后，会得到交易或跳转至其他支持的三方支付平台（如支付宝支付）页面等待用户支付。当用户完成支付（或取消支付）时，会自动跳转回指定的结果页面。用户完成支付页面后，可能会得到三种状态：

创造

当用户支付成功后，终端上的支付状态变为...，表示授权成功，可以在我的支付宝平台扣款了。所以，这个时候我们还是需要使用key来创建，这是官方推荐的。用于捕获状态并完成创建。完成后，整个付款已完成，状态为 。将获得。

使用

它提供了几十种状态，所有这些状态都会注册在一个叫做事件钩子的地方。我们可以指定何时触发不同的事件，并将数据转发到我们自己构建的 Web API。 （下图是我们的服务器端，因为我们没有使用服务器，所以我们用亚马逊做了一个）

拿支付宝的栗子服务器（）

以AWS+API为例。前者用于定义API，后者用于路由。

创建代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

'use strict';

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
exports.handler = (event, context, callback) => {
console.log("request: " + JSON.stringify(event));

let stripeData = event.data.object;
stripe.charges.create({
amount: stripeData.amount,
source: stripeData.id,
currency: stripeData.currency || 'usd',
description: 'My Englishtutor 30 days' || ('Stripe payment ' + event.id),
}, function(err, charge) {
if (err && err.type === 'card_error') {
context.fail(new Error(err.message));
}
else if (err) {
context.fail(err);
}
else {
context.succeed({ status: charge.status, success: true });
}
});
};

客户端（网络）

各种实现方法：

文章开头的集成代码就是使用方法，非常简单。集成代码直接帮你完成客户端部分，服务端只需要定义hook API即可。

在做支付宝开发时，发现了一个可以直接使用的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_xxx"
data-amount="30000"
data-name="myenglishtutor.eu"
data-label="Pay With Alipay"
data-description="30 days"
data-image="/images/logo.png"
data-locale="auto"
data-alipay="auto"
data-currency="usd">

但总是出现这个错误：

1

Unrecognized request URL (POST: /v1/alipay/send_sms). Please see https://stripe.com/docs or we can help at https://support.stripe.com/.

给团队发邮件得到的结果是为了以后扩展，不再提供方法。我别无选择，只能使用下面的方法。

.js&

当然，如果你觉得方法过于集成，不够灵活，那么.js是你最好的选择。

.js实际上是客户端的JS核心类库及其UI类库。其实上面的代码都是为我们利用两者进行封装，防止我们直接接触敏感信息，但其本质是一样的。用于创建。这里直接贴出客户端代码（这里没有使用UI，因为只是一个按钮支付，太简单了，所以没有使用）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var stripe = Stripe('pk_live_xxxx');

function alipay(amount) {
showLoading();
stripe.createSource({
type: 'alipay',
amount: parseInt(amount),
currency: 'gbp', // usd, eur,
redirect: {
return_url: 'https://xxx.eu/pay/result.html'
},
}).then(function (response) {
hideLoading();
if (response.error) {
alert(response.error.message);
}
else {
processStripeResponse(response.source);
}
});
}

function processStripeResponse(source) {
window.location.href = source.redirect.url;
}

这里有几点需要注意：

一切OK后，点击支付按钮，会跳转到支付宝支付页面（其他支持的第三方平台也可以），如下：

微信实施

其实很简单。只需要将上一步中的类型改为，同时将返回的...转换成二维码即可。

1
2
3
4
5
6
7
8
9
10
11
12

var wechatCallback = function (source) {
generateQRCode(source.wechat.qr_code_url);
}
function generateQRCode(value) {
var qrEle = document.getElementById("qrcode");
var qrcode = new QRCode(qrEle, {
width: 100,
height: 100
});
qrcode.makeCode(value);
qrEle.style.display = 'inline-block';
}

二维码出来后，扫码即可得到以下结果

（更新）我开发了一个插件，主要针对微信和支付宝，涉及一些更新。详细请参见另一篇文章。插件已发布！