用我们的预构建 UI 组件 Stripe Elements 创建支付表单,安全地收集银行卡详情,不需要处理敏感的数据。然后这些银行卡详情会被转化为一个代表性的 Token,可将它安全地发送到您的服务器。您的服务器用这个令牌来创建收款。
首先,您需要有 Stripe 账户。立即注册。
用我们的官方库从您的应用程序访问 Stripe API:
为了让您安全地从客户那里收集银行卡详情,Stripe Elements 为您创建了一个由 Stripe 托管的 UI 组件。然后它们被置入您的支付表单,而非由您直接创建。
设置 Stripe Elements
要使您的网页中获得 Elements,将这个脚本标签加入您的 HTML 页面的 head
内:
应始终从 https://js.stripe.com 直接下载这个脚本。
用下面的 JavaScript 在您的付款页面创建一个 Elements 实例:
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();
加载了 Elements 后,您即可在您想让 Elements 添加其输入字段的支付表单内创建一个具有唯一 ID 的空的 DOM 容器。建议将这个容器放在一个 <label>
内或旁边<label>
,用一个 for
属性匹配 Element 容器的唯一 id
。这样做的话,当客户点击相应的标签时,Element 将自动获得焦点。
例如:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
</div>
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
加载了上述表单后,为某个 card
Element 创建一个实例,并将它放入上面创建的 Element 容器:
const style = {
base: {
fontSize: '16px',
color: '#32325d',
},
};
const card = elements.create('card', {style});
card.mount('#card-element');
card
Element 通过插入一个可安全地收集所有必要的银行卡和账单信息的单一灵活的输入字段,对支付表单进行了简化,并且将需要的字段数降到了最低。
否则,对 cardNumber
、cardExpiry
、和 cardCvc
Elements 加以组合,获取灵活的多重输入银行卡表单。
参考我们的 Stripe.js 参考文档中支持的 Element 类型的完整列表。
添加一个事件监听器,侦听客户提交银行卡信息的操作,并用 stripe.createToken(card)
对该信息进行令牌化:
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {token, error} = await stripe.createToken(card);
if (error) {
const errorElement = document.getElementById('card-errors');
errorElement.textContent = error.message;
} else {
stripeTokenHandler(token);
}
});
createToken 还会接受一个可选的第二参数,其中包含从客户收集的额外的银行卡信息,但该例中未用到。该函数返回一个已解决的 Promise
,具有一个 result
对象。该对象有以下其中之一:
result.token
:Token 已成功创建。result.error
:发生了错误。其中包括客户端验证错误。参考 API 参考文档,了解所有可能的错误。
如果对象包含一个 result.token
,则将它发送到您的服务器。否则,向客户显示错误。
将令牌发送到您的服务器,连同已收集的任何额外信息:
const stripeTokenHandler = (token) => {
const form = document.getElementById('payment-form');
const hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
form.submit();
}
客户端向您的服务器发布令牌后,您即可用它创建收款。在您的服务器上,通过 POST 参数获取您的表单提交的 Stripe 令牌。这样即通过 API 调用完成了一次银行卡收款:
curl https://api.stripe.com/v1/charges \
-u sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
-d "amount"=999 \
-d "currency"="usd" \
-d "description"="Example charge" \
-d "source"="tok_visa"
创建收款后得到的响应要么是一个 charge,要么是一个 error,并附有一个错误代码。如果响应成功,则履行客户的订单,并向他们显示成功页面。否则,向他们显示错误页面。
测试您的集成应用
如果您现在可以顺利在 HTML 表单内输入测试卡,提交至服务器,然后看到您的服务器成功创建收款,那就说明您的集成完工了。
恭喜!您已经用 Charges API 完成了一个基本的支付集成。这个 API 不支持扩展到美国和加拿大以外的企业或客户。为获得更强大的全球支付功能,请学习用 Payment Intents API 接受付款。
另见
更多地了解 Elements 及如何用 Charges API 保存银行卡。