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

【问题标题】：Hooking up a custom stripe button to back-end将自定义条纹按钮连接到后端
【发布时间】：2017-01-14 15:43:24
【问题描述】：

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

<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 自定义蓝色条纹“用卡付款”按钮，使其看起来与众不同。

谢谢，

【问题讨论】：

标签： html laravel stripe-payments

【解决方案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作为隐藏输入，然后提交表单。

【讨论】：