如何在不使用Stripe的UI层的情况下获取客户端令牌?

时间:2019-02-10 05:03:33

标签: javascript stripe-payments

我有以下工作正常的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
}

这就是预期的一切。问题是,我可以找到提交信用卡号和有效日期并接收JSON的唯一方法是通过用户界面。例如,当我单击customButton时,将出现以下对话框:

enter image description here

我不想使用他们的抄送表格。我有自己的抄送表格。我想使用自己的表单,向Stripe的API端点发送ajax请求,并如上所述接收回JSON。我已经梳理了Stripe的在线文档一个小时,找不到任何方法。

如何完成?

2 个答案:

答案 0 :(得分:2)

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

由于您提到已经拥有付款表格,尽管您应该改用Stripe Elements。这样一来,您就可以设计和设置自己的付款方式,同时仍能满足最低的PCI合规性要求SAQ A,documented here

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

答案 1 :(得分:1)

Stripe.js版本2支持此功能。在撰写本文时,您可以看到旧文档here。如果我不得不猜测Stripe.js v2将完全贬值,并在某些时候不再使用。因此,尽管您可以轻而易举地使用它,但是它已经贬值了,您必须问自己是否值得在将来重写它。由于您当前正在构建它,所以我只会使用最新技术。

此外,根据Stripe's page on PCI compliance

  

如果您继续使用Stripe.js v2,则必须每年上传一次SAQ A-EP以证明您的业务符合PCI。


使用Stripe的Elements系统进行整体操作是必经之路。您无法触摸用户的付款信息,从而使其尽可能安全。与AJAX调用相比,您弄乱代码的可能性要小得多。如果您不小心将AJAX呼叫发送到您自己的服务器怎么办?那么您违反了PCI合规性。

Stripe Elements在样式方面也提供了很多自定义功能。您应该能够以与现有表单轻松集成的方式进行设计。