如何在不使用Stripe的UI層的情況下獲取客戶端令牌？

Question

我有以下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 ，將出現以下對話框：

我不想使用他們的抄送表格。 我有自己的抄送表格。 我想使用自己的表單，向Stripe的API端點發送ajax請求，並如上所述接收回JSON。 我已經梳理了Stripe的在線文檔一個小時，找不到任何方法可以做到這一點。

怎么做？

Answer 1

您提到的產品稱為Stripe Checkout ，可讓您安全地收集卡的詳細信息，而無需構建自己的付款表格。

由於您已經提到已經擁有付款表格，盡管應該改為查看Stripe Elements 。 這樣，您就可以設計和設置自己的付款表單，同時仍然滿足最低的PCI合規性要求SAQ A，如此處所述。

您仍然可以在此處找到多個付款表單示例和相應的代碼： https : //stripe.github.io/elements-examples/

Answer 2

Stripe.js版本2支持此功能。 在撰寫本文時，您可以在此處查看舊文檔。 如果我不得不猜測Stripe.js v2將完全貶值，並在某些時候不再使用。 因此，盡管您可以輕而易舉地使用它，但是它已經貶值了，您必須問自己是否值得在將來重寫它。 由於您當前正在構建它，因此我只會使用最新技術。

此外，根據Stripe關於PCI合規性的頁面：

如果您繼續使用Stripe.js v2，則需要每年上傳SAQ A-EP以證明您的業務符合PCI。

總體上使用Stripe的Elements系統是必經之路。 您無法觸摸用戶的付款信息，從而使其盡可能安全。 與AJAX調用相比，您弄亂代碼的可能性要小得多。 如果您不小心將AJAX呼叫發送到您自己的服務器怎么辦？ 您違反了PCI合規性。

Stripe Elements在樣式方面還提供了許多自定義項。 您應該能夠以與現有表單輕松集成的方式進行設計。

如何在不使用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