Как получить токен на стороне клиента без использования слоя пользовательского интерфейса Stripe? - PullRequest
Новая
       17

Как получить токен на стороне клиента без использования слоя пользовательского интерфейса Stripe?

0 голосов
/ 10 февраля 2019

У меня есть следующая 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

Я не хочу использовать их форму cc.У меня есть своя собственная форма CC.Я хочу использовать свою собственную форму, отправить запрос ajax на конечную точку API Stripe и получить обратно JSON, как описано выше.Я пролистал онлайн-документы Stripe в течение часа и не могу найти способ сделать это.

Как это делается?

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Stripe.js версии 2 поддерживает это.На момент написания этой статьи вы можете увидеть старую документацию здесь .Если бы мне пришлось угадывать, Stripe.js v2 будет полностью амортизирован и в какой-то момент выведен из употребления.Таким образом, хотя вы можете использовать его с некоторыми трудностями, он устарел, и вы должны спросить себя, стоит ли риск переписывать его в будущем.Поскольку вы создаете его в настоящее время, я бы просто использовал новейшую технологию.

Кроме того, согласно странице Stripe по соответствию PCI :

Если вы продолжитеиспользуйте Stripe.js v2, вам необходимо будет ежегодно загружать свой SAQ A-EP, чтобы доказать, что ваш бизнес совместим с PCI.

В целом использование системы Stripe - это путь.Вы не сможете прикоснуться к платежной информации пользователя, что сделает ее максимально безопасной.Гораздо меньше вероятность того, что вы испортите свой код против вызова AJAX.Что если вы случайно отправите вызов AJAX на свой сервер?В этом случае вы нарушаете соответствие PCI.

Stripe Elements также предоставляет МНОГО настроек с точки зрения стиля.Вы должны быть в состоянии спроектировать его так, чтобы он довольно легко интегрировался с существующей формой.

0 голосов
/ 10 февраля 2019

Упомянутый вами продукт называется Stripe Checkout и позволяет безопасно собирать данные карты, не создавая собственную платежную форму.

Поскольку вы упомянули, что ваша платежная форма уже есть, хотя вам следуетвместо этого посмотрите на Stripe Elements .Это позволяет вам разрабатывать и разрабатывать собственную форму платежа, в то же время соблюдая самый низкий уровень соответствия PCI, SAQ A, как указано здесь .

Можно по-прежнему использовать несколько примеров формы платежей и соответствующихкод здесь: https://stripe.github.io/elements-examples/

...