不进行银行验证即保存银行卡

开始本指南之前，您需要先建立一个 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 加以组合，获取灵活的多重输入银行卡表单。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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 API：

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

通过将 PaymentMethod 绑定到 Customer 来保存银行卡。您可以用 Customer 对象存储有关客户的其他信息，例如配送详情和邮件地址。

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

如果您当前有 Customer，可改为将 PaymentMethod 绑定到那个对象。

curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}}

这时，将 Customer ID 和 PaymentMethod ID 关联到您自己对此客户使用的内部名称（如果有）。

在您准备好后，获取 PaymentMethod 和 Customer ID，进行收款。方法既可以是在您的数据库中存储两者的 Id，也可以用 Customer ID 查找 Customer 的所有可用 PaymentMethods。

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

用 PaymentMethod ID 和 Customer ID 创建一个新的 PaymentIntent。将 error_on_requires_action 设置为 true，拒绝需要客户额外操作的付款，例如双重验证。

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

付款尝试失败时，该请求也会失败，并显示 402 HTTP 状态码，同时 Stripe 会抛出一个错误。您需要通知客户返回到您的应用（例如，发送邮件）来完成付款。请查看 Stripe API 库引发的 错误 的代码，或者查看 PaymentIntent 上的 last_payment_error.decline_code 来了解发卡行拒绝付款的原因。

Notify your customer that the payment failed and direct them to the payment form you made in Step 1 where they can enter new card details. Send that new PaymentMethod ID to your server to attach to the Customer object and make the payment again.

或者，如果您已经创建了 Customer 的话，可以创建一个 PaymentIntent 并在所有 API 调用中保存卡。

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Setting setup_future_usage to on_session indicates to Stripe that you wish to save the card for later, without triggering unnecessary authentication.

Stripe provides test cards you can use in test mode to simulate different cards’ behavior. Use these cards with any CVC, postal code, and expiry date in the future.