构建包含 Link 的自定义结账页面

首先，创建 Stripe 账户或登录。

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

# Available as a gem
sudo gem install stripe

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

Stripe 使用一个 PaymentIntent 对象来表示您向客户收款的意图，跟踪整个过程中的收费尝试和付款状态变化。

如果您收集银行卡详情以使用 Setup Intents 供未来使用，请手动列出支付方式，而非使用动态支付方式。要在没有动态支付方式的情况下使用 Link，请更新您的集成，将 link 传递到 payment_method_types。

创建 PaymentIntent 时，使用动态支付方式动态为客户提供最相关的支付方式，包括 Link。要使用动态支付方式，不要包含 payment_method_types 参数。您也可以启用 automatic_payment_methods。

要使用动态支付方式将 Link 添加到您的 Element 集成，请执行以下操作：

1. 在您的管理平台的支付方式设置中，开启 Link。
2. 如果您的现有集成可手动列出支付方式，请从您的集成中删除 payment_method_types参数。

检索客户端私钥

PaymentIntent 中包含的是一个客户端私钥，用于在客户端安全地完成支付流程。有不同的方法可以将客户端私钥传递到客户端。

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Link 通过客户的电子邮件地址对其进行验证。根据您的结账流程，您有以下选项：将电子邮件传递给 Payment Element、直接在 Payment Element 中收集电子邮件，或使用 Link Authentication Element。在这些选项中，Stripe 建议在客户电子邮件地址可用时将其传递给 Payment Element。

传入电子邮件

收集电子邮件

使用 Link Authentication Element

如果您满足以下_任一_条件：

• 您想要一个可收集邮件地址并进行 Link 身份验证的优化组件。
• 您需要从客户那里收集收货地址。

然后使用实现以下元素的集成流程：Link Authentication Element、Payment Element 和可选的 Address Element。

启用了 Link 的结账页面的开头显示 Link Authentication Element，随后是 Address Element，最后是 Payment Element。对于多页结账流程，您也可以按此顺序在不同页面上显示 Link Authentication Element。

使用多个元素创建支付表单

集成的工作方式如下：

现在，您可以用 Elements 预构建的 UI 组件设置您的自定义支付表单了。支付页面上的地址也必须以 https:// 开头，不能是 http://，否则您的集成不能工作。您可以在不使用 HTTPS 的情况下测试您的集成。准备好进行真实收款时启用 HTTPS。

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<linkAuthenticationElement onChange={(event) => {
  setEmail(event.value.email);
}} />

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

用 stripe.confirmPayment 完成付款，使用从不同 Elements 表单收集的客户信息完成付款。为该函数提供一个 return_url，告诉 Stripe 在用户完成付款后将他们重定向到何处。

您的用户可能会先被重定向到一个中间站点，如银行授权页面，然后 Stripe 将其重定向到 return_url。

默认情况下，付款成功时，银行卡和银行付款将立即重定向到 return_url。如果不想重定向到 return_url，可以用 if_required 来更改行为。

import {loadStripe} from "@stripe/stripe-js";
import {
  useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}

return_url 对应于您的网站上的一个页面，在您呈现返回页面时提供 PaymentIntent 的付款状态。当 Stripe 将客户重定向到 return_url 时，您可以使用以下 URL 查询参数来验证付款状态。您还可以在提供 return_url 时附上自己的查询参数。这些查询参数会在重定向过程中持续存在。

付款完成时，Stripe 会发送一个 payment_intent.succeeded 事件。用 Webhook 接收这些事件并运行操作，例如，向客户发送订单确认邮件、在数据库中记录订单，或启动配送流程。

配置您的集成来侦听这些事件，而不是等待来自客户端的回调。当您等待来自客户端的回调时，客户可能在回调执行之前关闭浏览器窗口或退出应用。通过设置您的集成来侦听异步事件，您就能够使用单一集成接受不同类型的支付方式。

除了处理 payment_intent.succeeded 事件外，您还可以在使用 Payment Element 收款时处理另外两个重要事件：

目前 Link 仅支持用信用卡、借记卡以及符合条件的美国银行账户进行购买。Link 需要域名注册。

您可以用任意有效的邮件地址为 Link 创建沙盒账户。下表显示的是 Stripe 接受的在验证沙盒账户时可使用的一次性固定密码值：

要测试具体的支付方式，请参考 Payment Element 测试示例。

多个资金来源

由于 Stripe 增加了额外的资金来源支持，因此您不需要更新您的集成。Stripe 会自动为它们提供与卡和银行账户支付相同的交易结算时间和担保。

卡验证和 3DS 验证

Link 支持对银行卡付款进行 3DS 2.0 验证。3DS2 要求客户在支付时，在发卡行那里完成额外的验证步骤。成功通过 3DS 验证的付款包含在责任转移范围内。

要在沙盒中用 Link 触发 3DS 2.0 验证流程，请使用以下测试卡（可输入任意的 CVC、邮编和未来的有效期）：4000000000003220

。

在沙盒环境中，身份验证过程显示一个模拟身份验证页面。在该页面，您可以授权或取消付款。授权付款 模拟的是身份验证成功的场景，并将您重定向到指定的返回 URL。点击失败按钮会模拟验证尝试不成功的场景。

有关更多详情，请参考 3DS 验证页面。