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自定义蓝色条纹'带卡支付'按钮看起来不同。

谢谢，

Answer 1

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

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添加为隐藏输入，然后提交表单。

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

1 个答案: