Question

我要通过AJAX提交我的Stripe Checkout表单（捕获表单提交事件），因为我有一个复杂的多窗格HTML表单，并且想要显示Stripe的付款错误，而不必重新加载页面并重新生成表单或用户重新输入大量信息。

这一切工作正常，但一旦禁用了“条纹检查”按钮后，该按钮除外。在预订表格页面上显示错误消息后，我需要用户再次单击“条纹”按钮并尝试其他付款信息。如何重新激活“条纹”按钮？我是否需要从DOM中删除整个Stripe按钮脚本（我正在使用jQuery）并重新插入（或类似代码）？

我的标准Checkout按钮代码：

<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="my_stripe_key"
    data-image="mylogo.png"
    data-name="My Booking Form"
    data-zip-code="true"
    data-locale="auto"
    data-email=""
    data-description="Payment for this booking"
    data-currency="gbp"
    data-amount=""
    data-label="Pay and book!">
</script>

以及相关的我的AJAX表单提交代码：

$('#booking-form').get(0).submit = function() {
  var formdata = $(this).serialize();

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
    },
    type: 'POST',
    url: 'book',
    dataType: 'json',
    data: formdata,
    success: function(data) {
      if (data.response == 'ok') // Payment went through OK
      {
        // Redirect to booking confirmation page:
        window.location.replace(data.url);
      } else // Payment failed, alert user to try again
      {
        $('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
      }
    },
    error: function(data) // Server error
    {
      console.log('Error:', data.responseText);
    }
  });

  // Prevent form submit.
  return false;
}

Answer 1

您有一个属性disabled="true"，该属性在提交表单后设置为“提交”按钮元素。您只需要删除以下属性：$('button[type="submit"]').get(0).removeAttr("disabled");。

有效的示例：

http://jsfiddle.net/5xq8Lhda

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="booking" action="your-server-side-code" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_TYooMQauvdEDq54NiTphI7jx" data-amount="999" data-name="Stripe.com" data-description="Widget" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto" data-zip-code="true">
  </script>
</form>

<script>
  $('#booking').get(0).submit = function() {
    $('button[type="submit"]').get(0).removeAttr("disabled");
    return false;
  }
</script>

要使用您的示例，您应该执行以下操作：

$('#booking-form').get(0).submit = function() {
  var formdata = $(this).serialize();

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
    },
    type: 'POST',
    url: 'book',
    dataType: 'json',
    data: formdata,
    success: function(data) {
      if (data.response == 'ok') // Payment went through OK
      {
        // Redirect to booking confirmation page:
        window.location.replace(data.url);
      } else // Payment failed, alert user to try again
      {
        $('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
        $('button[type="submit"]').get(0).removeAttr("disabled");
      }
    },
    error: function(data) // Server error
    {
      console.log('Error:', data.responseText);
    }
  });

  // Prevent form submit.
  return false;
}

Answer 2

如果您打算通过AJAX提交表单，或者只是希望对结帐体验进行更多控制，建议您在此处使用Custom Checkout集成。

Simple Checkout是围绕一个非常简单的用例设计的：填写表单，完成简单的表单提交。您可以执行一些操作，例如尝试抓住“提交”按钮并删除禁用的属性，尽管Stripe可以随时进行更改，但可能无法达到您的预期效果。

在token回调中，自定义集成为您的ajax提交或其他js代码提供了一个理想的地方，

token: function(token) {
   // your form submission or next steps here
}

如何重新加载/刷新Stripe Checkout按钮？

2 个答案: