用 Stripe Elements 和 Charges API 接受付款Charges API

接受美国和加拿大客户的线上付款。

旧版 API

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

Charges API 不支持以下功能，信用卡合规对其中很多都有要求：

用我们的预构建 UI 组件 Stripe Elements 创建支付表单，安全地收集银行卡详情，不需要处理敏感的数据。然后这些银行卡详情会被转化为一个代表性的 Token，可将它安全地发送到您的服务器。您的服务器用此令牌来创建收款。

设置 Stripe

首先，您需要有 Stripe 账户。立即注册。

用我们的官方库从您的应用程序访问 Stripe API：

创建您的支付表单
客户端

为了让您安全地从客户那里收集银行卡详情，Stripe Elements 为您创建了一个由 Stripe 托管的 UI 组件。然后它们被置入您的支付表单，而非由您直接创建。

设置 Stripe Elements

要使您的网页中获得 Elements，将此脚本标签加入您的 HTML 页面的 head 内：

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

应始终从 https://js.stripe.com 直接下载此脚本。

用下面的 JavaScript 在您的付款页面创建一个 Elements 实例：

client.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

加载了 Elements 后，您即可在您想让 Elements 添加其输入字段的支付表单内创建一个具有唯一 ID 的空的 DOM 容器。建议将此容器放在一个 <label> 内或旁边<label>，用一个 for 属性匹配 Element 容器的唯一 id。这样做的话，当客户点击相应的标签时，Element 将自动获得焦点。

例如：

payment.html
<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">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display Element errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

加载上述表单后，为某个 card Element 创建一个实例，并将它放入上面创建的 Element 容器：

client.js
// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: '#32325d',
  },
};

// Create an instance of the card Element.
const card = elements.create('card', {style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

card Element 通过插入一个可安全地收集所有必要的银行卡和账单信息的单一灵活的输入字段，对支付表单进行了简化，并且将需要的字段数降到了最低。

否则，对 cardNumber、cardExpiry、和 cardCvc Elements 加以组合，获取灵活的多重输入银行卡表单。

备注

始终要收集邮编，以提高卡的接受率并减少欺诈。

The single line Card Element automatically collects and sends the customer’s postal code to Stripe. If you build your payment form with split Elements (Card Number, Expiry, CVC), add a separate input field for the customer’s postal code.

参考我们的 Stripe.js 参考文档中支持的 Element 类型的完整列表。

创建令牌
客户端

添加一个事件监听器，侦听客户提交银行卡信息的操作，并用 stripe.createToken(card) 对该信息进行令牌化：

client.js
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {token, error} = await stripe.createToken(card);

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(token);
  }
});

createToken 还会接受一个可选的第二参数，其中包含从客户收集的额外的银行卡信息，但该例中未用到。该函数返回一个已解决的 Promise，具有一个 result 对象。该对象有以下其中之一：

result.token：Token 已成功创建。
result.error：发生了错误。其中包括客户端验证错误。参考 API 参考，了解所有可能的错误。

如果对象包含一个 result.token，则将它发送到您的服务器。否则，向客户显示错误。

向服务器提交令牌
客户端

将令牌发送到您的服务器，连同已收集的任何额外信息：

client.js
const stripeTokenHandler = (token) => {
  // Insert the token ID into the form so it gets submitted to the server
  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);

  // Submit the form
  form.submit();
}

用令牌创建收款
服务器端

客户端向您的服务器发布令牌后，您即可用它创建收款。在您的服务器上，通过 POST 参数获取您的表单提交的 Stripe 令牌。这样即通过 API 调用完成了一次银行卡收款：

创建收款后得到的响应要么是一个收款，要么是一个错误，并附有一个错误代码。如果响应成功，则履行客户的订单，并向他们显示成功页面。否则，向他们显示错误页面。

测试您的集成应用

如果您现在可以顺利在 HTML 表单内输入测试卡，提交至服务器，然后看到您的服务器成功创建收款，那就说明您的集成完工了。

恭喜！您已经用 Charges API 完成了一个基本的支付集成。此 API 不支持扩展到美国和加拿大以外的企业或客户。为获得更强大的全球支付功能，请学习用 Payment Intents API 接受付款。

另见

更多地了解 Elements 及如何用 Charges API 保存银行卡。