首页 > 解决方案 > 如何在不使用 Stripe 的 UI 层的情况下获取客户端令牌?

问题描述

我有以下可以正常工作的 php 页面:

<html>
<head>
    <script src="https://checkout.stripe.com/checkout.js"></script>
    <script>
        var handler = StripeCheckout.configure({
          key: '<?=$stripePublicKey?>',
          image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
          locale: 'auto',
          token: function(token) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
            console.log("token.id: " + token.id);
            console.log("token: " + token);
          }
        });

        function init(){
            document.getElementById('customButton').addEventListener('click', function(e) {
                // Open Checkout with further options:
                handler.open({
                    name: 'TruckerCert',
                    description: 'Buy Certs',
                    amount: 2000
                });
                e.preventDefault();
            });

            // Close Checkout on page navigation:
            window.addEventListener('popstate', function() {
              handler.close();
            });
        }
    </script>
</head>
<body onload="init()">
<h1>Stripe Token Test</h1>
<button id="customButton">Purchase</button>
</body>
</html>

它可以工作并生成以下 JSON:

{
  "id": "tok_1E255j2*****wC135im",
  "object": "token",
  "card": {
    "id": "card_1E255j2H1*****RGS4Kqc",
    "object": "card",
    "address_city": null,
    "address_country": null,
    "address_line1": null,
    "address_line1_check": null,
    "address_line2": null,
    "address_state": null,
    "address_zip": null,
    "address_zip_check": null,
    "brand": "Visa",
    "country": "US",
    "customer": null,
    "cvc_check": "pass",
    "dynamic_last4": null,
    "exp_month": 12,
    "exp_year": 2021,
    "fingerprint": "3nk5B*****29xV",
    "funding": "unknown",
    "last4": "1111",
    "metadata": {
    },
    "name": "her*******@gmail.com",
    "tokenization_method": null,
    "type": "Visa"
  },
  "client_ip": "67.***.***.17",
  "created": 1549754315,
  "email": "her********@gmail.com",
  "livemode": false,
  "type": "card",
  "used": false
}

所以这一切都符合预期。问题是,我能找到提交我的信用卡 # 和 exp 日期并收到 JSON 的唯一方法是通过他们的 UI。例如,当我单击 my 时customButton,会出现此对话框:

在此处输入图像描述

我不想使用他们的抄送表格。我有自己的抄送表。我想使用我自己的表单,向 Stripe 的 API 端点发送一个 ajax 请求,然后像上面一样接收 JSON。我已经梳理了 Stripe 的在线文档一个小时,但找不到任何方法来做到这一点。

它是如何完成的?

标签: javascriptstripe-payments

解决方案


您提到的产品称为Stripe Checkout,可让您安全地收集卡详细信息,而无需构建自己的付款表格。

既然您提到已经有您的付款表格,但您应该查看Stripe Elements。这使您可以设计和设计自己的支付表单,同时仍然满足最低级别的 PCI 合规性 SAQ A,如此所述。

您仍然可以在此处提供多个付款表单和相应代码的示例:https ://stripe.github.io/elements-examples/


推荐阅读