不进行银行验证即保存银行卡
Stripe 允许先收集客户的银行卡详情,之后再对客户扣款。在某些地区,银行会要求第二重验证,例如输入发送到手机的验证码。如果您的客户并未主动使用您的网站或应用,会因无法进行验证而放弃购买,那么这个额外的步骤就会降低转化。
如果您的业务主要在美国和加拿大,这里的银行不要求验证,因此您可以使用这个简易集成。在对银行卡保存操作要求进行身份验证的国家(如印度),这种集成是不兼容的,构建这个集成就意味着向其他国家扩展或添加其他支付方式时会面临很大的困难。了解如何保存要求验证的银行卡。
合规
保存客户的支付详情时,您有责任遵守所有适用的法律、法规和卡组织规则。比如,您想保存他们的支付方式以供将来使用,例如在他们不经常使用您的网站或应用程序的情况下对其收费。在您的网站或应用程序中添加条款,说明您打算如何保存支付方式详情,并允许客户选择加入。如果您想在他们不在线时向他们收费,请确保您的条款中包括以下内容:
- 客户同意您代其对指定的交易发起一次或一系列付款。
- 预期的付款时间和频率(例如,收款是计划的分期付款、订阅付款还是计划外充值)。
- 如何确定付款金额。
- 如果支付方式是用于支付订阅服务,那即同意您的取消政策。
请务必让客户书面同意这些条款并做好记录。
收集银行卡详情客户端
开始本指南之前,您需要先建立一个 Stripe 账户。立即注册。
构建一个结账页面,收集您客户的银行卡详情。用一个 UI 库 Stripe Elements 帮助构建您的自定义支付表单。要开始使用 Element,通过以下脚本将 Stripe.js 库包含到您的结账页面。
<script src="https://js.stripe.com/v3/"></script>
为保持 PCI 合规,始终从 js.stripe.com 加载 Stripe.js。不要把脚本打包或自行保留副本。
为了最好地利用 Stripe 的高级欺诈功能,请将此脚本包含在您网站的每个页面,而不仅仅是结账页面。将脚本包含到每个页面后便可以让 Stripe 检测可疑行为,这样在用户浏览您的网站时便可以指示某些欺诈行为。
将 Elements 添加到您的页面
为了让您安全地从客户那里收集银行卡详情,Elements 为您创建了一个由 Stripe 托管的 UI 组件。然后它们被置入您的支付表单,而非由您直接创建。要确定在哪里插入这些组件,用您的支付表单中的唯一 ID 创建一个空的 DOM Elements(容器)。
<input id="cardholder-name" type="text"> <!-- placeholder for Elements --> <div id="card-element"></div> <div id="card-result"></div> <button id="card-button">Save Card</button>
接下来,创建一个 Stripe 对象实例,提供您的 API 公钥作为第一个参数。之后,创建一个 Elements 对象实例,并用其在 DOM 中安一个 card
元素。
card
Element 通过插入一个可安全地收集所有必要的银行卡和账单信息的单一灵活的输入字段,对支付表单进行了简化,并且将需要的字段数降到了最低。
否则,对 cardNumber
、cardExpiry
、和 cardCvc
Elements 加以组合,获取灵活的多重输入银行卡表单。
备注
始终要收集邮编,以提高卡的接受率并减少欺诈。
此单行 Card Element 会自动收集邮编并将其发给 Stripe。如果您用分割的 Elements(卡号、有效期、CVC)创建支付表单,那么为客户的邮编添加一个单独的输入字段。
const stripe = Stripe(
); const elements = stripe.elements(); const cardElement = elements.create('card'); cardElement.mount('#card-element');'pk_test_TYooMQauvdEDq54NiTphI7jx'
Stripe Element 中包含一个 iframe,它通过一个 HTTPS 连接安全地将支付信息发送到 Stripe。结账页面上的地址也必须以 https://
开头,不能是 http://
,否则您的集成不能工作。
可以在不使用 HTTPS 的情况下测试您的集成。准备好进行真实收款时将它启用。
const cardholderName = document.getElementById('cardholder-name'); const cardButton = document.getElementById('card-button'); const resultContainer = document.getElementById('card-result'); cardButton.addEventListener('click', async (ev) => { const {paymentMethod, error} = await stripe.createPaymentMethod({ type: 'card', card: cardElement, billing_details: { name: cardholderName.value, }, } ); if (error) { // Display error.message in your UI. resultContainer.textContent = error.message; } else { // You have successfully created a new PaymentMethod resultContainer.textContent = "Created payment method: " + paymentMethod.id; } });
将产生的 PaymentMethod ID 发送到您的服务器。
设置 Stripe服务器端
用我们的官方库从您的应用程序访问 Stripe API:
保存卡服务器端
通过将 PaymentMethod 绑定到 Customer 来保存银行卡。您可以用 Customer 对象存储有关客户的其他信息,例如配送详情和邮件地址。
如果您当前有 Customer,可改为将 PaymentMethod 绑定到那个对象。
这时,将 Customer ID 和 PaymentMethod ID 关联到您自己对这个客户使用的内部名称(如果有)。
对保存的卡扣款服务器端
在您准备好后,获取 PaymentMethod 和 Customer ID,进行收款。方法既可以是在您的数据库中存储两者的 Id,也可以用 Customer ID 查找 Customer 的所有可用 PaymentMethods。
用 PaymentMethod ID 和 Customer ID 创建一个新的 PaymentIntent。将 error_on_requires_action 设置为 true,拒绝需要客户额外操作的付款,例如双重验证。
付款尝试失败时,该请求也会失败,并显示 402 HTTP 状态码,同时 Stripe 也会抛出一个错误。您需要通知客户返回您的应用程序(例如,发送邮件)来完成付款。请查看 Stripe API 库引发的 Error 的代码,或者查看 PaymentIntent 上的 last_payment_error.decline_code 来了解发卡行拒绝付款的原因。
处理任意银行卡错误
通知客户付款失败,并将其转到您在第 1 步创建的支付表单来输入新的银行卡详情。将这个新的 PaymentMethod ID 发送到您服务器,绑定到 Customer 对象并再次付款。
或者,如果您已经创建了 Customer 的话,可以创建一个 PaymentIntent 并在所有 API 调用中保存卡。
将 setup_future_usage 设置为 on_session
,告诉 Stripe 您希望保存卡供以后使用,这样就不会触发不必要的验证流程。
测试集成应用
Stripe 提供有一些测试卡,您可以在测试模式下用它们来模拟不同银行卡的行为。
卡号 | 描述 |
---|---|
成功并且立即处理付款。 | |
始终会失败,显示拒付码 insufficient_funds 。 | |
要求验证,这个集成中会拒绝,显示代码 authentication_required 。 |
将集成升级以处理银行卡验证
这个集成会拒绝支付过程中要求验证的银行卡。如果您开始在管理平台中见到很多被列入 Failed
类别的付款,那么是时候升级您的集成了。Stripe 的全局集成会处理这些付款,而非自动拒绝。