不进行银行验证的银行卡付款

构建一个带有区域限制的稍简单的集成。

复制页面

该集成支持仅接受美国和加拿大银行卡的商家。它起步较简单，但难以扩展来支持全球客户群。

此集成的原理是什么？

它相比于全球性集成怎样？

增长中的企业或全球性企业应使用 Stripe 的全球集成来支持银行的双重验证请求，并允许客户用更多支付方式付款。

构建结账表单
客户端

Elements 是 Stripe.js 的一部分，它提供了用来从客户那里收集银行卡信息的临时 UI 组件。Stripe 托管它们并将其作为 iframe 放入您的支付表单，从而使您的客户的银行卡详情不会触及您的代码。

先在您网站的每个页面头部包含 Stripe.js 脚本。

<script src="https://js.stripe.com/v3/"></script>

在您网站的每个页面上都包含脚本的好处是您可以利用 Stripe 的高级欺诈功能，并且可以检测异常的浏览行为。

安全要求

为保证 PCI 合规，请始终直接从 js.stripe.com 下载此脚本。不要将脚本打包或自行托管副本。

使用 Elements 时，所有的支付信息都会通过一个安全的 HTTPS 连接来提交。

包含 Elements 的页面的地址必须以 https:// 开头，不能是 http://。有关获取 SSL 证书并与您的服务器集成以启用安全 HTTPS 连接的更多信息，请查看安全文档。

将 Elements 添加到您的页面

然后，您需要有 Stripe 账户。立即注册。

用您的支付表单中的唯一 ID 创建一个空的 DOM Elements（容器）。

payment.html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>

创建一个 Stripe 对象实例，提供您 API 公钥作为第一个参数。之后，创建一个 Elements 对象实例，并用它在页面上的空 DOM Element 容器中挂载一个 Card 元素。

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

在客户提交支付表单时，用您的客户端 stripe.createPaymentMethod 收集银行卡详情并创建一个 PaymentMethod。将 PaymentMethod 的 ID 发送到您的服务器。

client.js
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = result.error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};

设置 Stripe
服务器端

用官方库请求从您的应用程序访问 Stripe API：

付款
服务器端

在您的服务器上设置一个端点，用以接收来自客户的请求。

Stripe 用一个 PaymentIntent 对象来表示您从客户收款的意图，跟踪扣款尝试及整个过程中付款状态的变化情况。

始终在服务器端决定扣款金额，这是一个可信的环境，客户端不行。这样可防止客户自己选择价格。

创建一个 HTTP 端点，响应第 1 步的 AJAX 请求。在此端点，应决定对客户的扣款金额。创建付款时，用第 1 步的 PaymentMethod ID 创建一个 PaymentIntent，使用以下代码：

警告

如果您在确认付款时将 error_on_requires_action 设置为 true，则如果 Stripe 要求用户进行双重验证，则付款将自动失败。

Payment Intents API 响应

在您用 API 进行付款时，响应中会包含 PaymentIntent 的状态。如果付款成功，则它的状态变为 succeeded。

{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,
  "status": "succeeded",
}

如果付款被拒绝，响应中会包含错误代码和错误消息。这里有一个由于要求对银行卡进行双重验证而付款失败的示例。

{
  "error": {
    "code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}

测试集成

Stripe 提供了几个测试卡，您可以在沙盒中使用，以确保此集成已准备就绪。使用时，CVC 卡安全码、邮编及未来的有效期可任意输入。

卡号	描述
	成功并且立即处理付款。
	始终会失败，显示拒付码 `insufficient_funds`。
	要求验证，此集成中会失败，显示拒付代码 `authentication_not_handled`。

查看完整的测试卡列表。

将集成升级以处理银行卡验证

恭喜！您已完成一个基本的支付集成，可以进行基本的银行卡收款了。注意，此集成会拒绝支付过程中要求验证的银行卡。

如果在管理平台中开始显示被列入 Failed 类别的付款，则需要升级您的集成。Stripe 的全局集成会处理这些付款，而非自动拒绝它们。