javascript - 使用 JavaScript 创建 Stripe 充电

Question

下面有一段代码，我想知道是否可以在结帐过程的“成功标记”中进行 Stripe 收费？下面的所有代码都有效，我只是想知道我将在哪里插入创建acctuall费用的代码。

    <script src="https://checkout.stripe.com/checkout.js"></script>
    <script src="https://js.stripe.com/v3/"</script>

    <button id="payment-button" type="button" class="btn btn-success">Pay With Card</button>

    <script>
    var handler = StripeCheckout.configure({
      key: 'mykeyhere',
      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.
        document.getElementById("book-appointment-submit").style.display="block";
        document.getElementById("payment-button").style.display="none";
      }
    });

    document.getElementById('payment-button').addEventListener('click', function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'DenchCodeLTD',
        description: '2 widgets',
        zipCode: true,
        currency: 'gbp',
        amount: 2000
      });
      e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
    </script>

<!-- End Of Stripe Payment -->

<button id="book-appointment-submit" type="button" class="btn btn-success" style="display:none">
    <span class="glyphicon glyphicon-ok"></span>
    <?php
        echo (!$manage_mode) ? $this->lang->line('confirm')
                : $this->lang->line('update');
    ?>
</button>

Answer 1

您不能在 JS 本身内进行收费。使用 Stripe 向客户收费是一个两步过程。

第 1 步:您使用 Checkout 收集客户的信用卡信息，然后将其发送至 Stripe。你拿回一个 token 。这就是您在上面的代码中所做的。

第 2 步:您必须获取此 token 并将其传递到您的后端，然后告诉 Stripe 使用它进行收费，或将其保存给客户以便稍后收费。您的服务器(PHP、Ruby 等)上需要一个脚本来处理此步骤。

此处是第二步的一些简短示例:https://stripe.com/docs/charges

在你的 token: function(token) { } 里面回调至少你会想要捕获token.id , 将其附加到 .submit()一个<form></form>围绕您的结帐按钮。

如果您想要更复杂的东西，您可以通过 AJAX 请求将 token ID 传递到您的后端，然后将收费请求的成功或失败转发回用户。

https://stripe.com/docs/checkout#integration-custom