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

Question

I have the following php page that works fine: 我有以下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>

It works and produces the following JSON: 它可以工作并产生以下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
}

So that is all as expected. 这就是所有预期。 The problem is, the only way I can find to submit my credit card # and exp date and receive back the JSON is by going through their UI. 问题是，我可以找到提交信用卡号和有效日期并接收JSON的唯一方法是通过用户界面。 For example, when I click my customButton , this dialog appears: 例如，当我单击customButton ，将出现以下对话框：

I don't want to use their cc form. 我不想使用他们的抄送表格。 I have my own CC form. 我有自己的抄送表格。 I want to use my own form, send an ajax request to Stripe's API endpoint, and receive back the JSON just as above. 我想使用自己的表单，向Stripe的API端点发送ajax请求，并如上所述接收回JSON。 I have combed through Stripe's online docs for an hour and can't find any way to do this. 我已经梳理了Stripe的在线文档一个小时，找不到任何方法可以做到这一点。

How is it done? 怎么做？

Answer 1

The product you mentioned is called Stripe Checkout and lets you collect card details securely without having to build your own payment form. 您提到的产品称为Stripe Checkout ，可让您安全地收集卡的详细信息，而无需构建自己的付款表格。

Since you mentioned having your payment form already though you should instead look into Stripe Elements . 由于您已经提到已经拥有付款表格，尽管应该改为查看Stripe Elements 。 This lets you design and style your own payment form while still meeting the lowest level of PCI compliance, SAQ A, as documented here . 这样，您就可以设计和设置自己的付款表单，同时仍然满足最低的PCI合规性要求SAQ A，如此处所述。

You can still multiple examples of payments form and the corresponding code here: https://stripe.github.io/elements-examples/ 您仍然可以在此处找到多个付款表单示例和相应的代码： https : //stripe.github.io/elements-examples/

Answer 2

Stripe.js version 2 supported this. Stripe.js版本2支持此功能。 As of the time of writing this you can see the old documentation here . 在撰写本文时，您可以在此处查看旧文档。 If I had to guess Stripe.js v2 will be depreciated fully and removed from use at some point. 如果我不得不猜测Stripe.js v2将完全贬值，并在某些时候不再使用。 So although you can use it with some hassle, it is depreciated, and you have to ask yourself if it's worth the risk of having to rewrite in the future. 因此，尽管您可以轻而易举地使用它，但是它已经贬值了，您必须问自己是否值得在将来重写它。 Since you are building it currently, I would just use the latest technology. 由于您当前正在构建它，因此我只会使用最新技术。

Also, according to Stripe's page on PCI compliance : 此外，根据Stripe关于PCI合规性的页面：

If you continue to use Stripe.js v2, you'll be required to upload your SAQ A-EP annually to prove your business is PCI compliant. 如果您继续使用Stripe.js v2，则需要每年上传SAQ A-EP以证明您的业务符合PCI。

Overall using Stripe's Elements system is the way to go. 总体上使用Stripe的Elements系统是必经之路。 There is no way you can touch the user's payment information, which makes it as secure as possible. 您无法触摸用户的付款信息，从而使其尽可能安全。 Much less possibility of you messing up in your code vs an AJAX call. 与AJAX调用相比，您弄乱代码的可能性要小得多。 What if you accidentally send the AJAX call to your own server? 如果您不小心将AJAX呼叫发送到您自己的服务器怎么办？ You are in violation of PCI compliance then. 您违反了PCI合规性。

Stripe Elements also provides a LOT of customization in terms of styling. Stripe Elements在样式方面还提供了许多自定义项。 You should be able to design it in a way that integrates with your existing form pretty easily. 您应该能够以与现有表单轻松集成的方式进行设计。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-02-10 07:27:33

解决方案2
1 2019-02-10 17:24:43

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-02-10 07:27:33

解决方案2 1 2019-02-10 17:24:43

解决方案1
2 已采纳 2019-02-10 07:27:33

解决方案2
1 2019-02-10 17:24:43