将自定义条纹按钮连接到后端

Question

假设我有一个条纹的自定义实现，例如这个。

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

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
  image: '/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.
  }
});

$('#customButton').on('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Stripe.com',
    description: '2 widgets',
zipCode: true,
    amount: 2000
  });
  e.preventDefault();
});

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

我在后端有一个函数，它是通过路由'/charge'访问的，是PUT类型的。此函数负责充电，并写在 PHP (laravel) 中。

我曾经有一个简单的实现，就是像这样将表单提交到 /charge 路由。

  <form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-amount="2000"
    data-name="Stripe.com"
    data-description="2 widgets"
    data-image="/img/documentation/checkout/marketplace.png"
    data-locale="auto"
data-zip-code=&quot;true&quot;>
  </script>
  </form>

我正在尝试找到一种将更复杂的自定义方式发送到 /charge 方法的方法。我不太确定我是否以正确的方式思考这个问题。

我切换到更复杂的方式的原因是，我可以使用 CSS 自定义蓝色条纹 'pay with card' 按钮，使其看起来不同。

谢谢，

Answer 1

您只需将令牌作为 POST 参数提交给您的 URL。通常，这是通过提交表单来完成的。该表单可能已经存在，或者您可以动态创建它。例如：

token: function(token) {
  // Use the token to create the charge with a server-side script.
  // You can access the token ID with `token.id`
  var form = document.createElement("form");
  form.setAttribute('method', "post");
  form.setAttribute('action', "/charge");

  var input = document.createElement("input");
  input.setAttribute('type', "hidden");
  input.setAttribute('name', "stripeToken");
  input.setAttribute('value', token.id);

  form.appendChild(input);
  form.submit();
}

当执行回调token时，它会动态创建一个表单，将/charge作为其action属性，添加令牌ID作为隐藏输入，并提交表单。

将自定义条纹按钮连接到后端

Hooking up a custom stripe button to back-end

html

laravel

stripe-payments