Question

我正在使用Stripe Custom Checkout。成功收费后，我正试图让表格自动提交。我知道表单有效，但我无法在条带结帐流程后提交表单。

我很确定代码应该在函数（令牌）之后。条带结帐表单关闭，表单未提交。

我的表格：

<form name="regform" id="regform" action="[[~[[*id]]]]" method="post" class="form">..Lots of data......<input type="submit" name="regform" id="regform" value="Register"> </form>

My Strip结帐：

<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_zizizizizizizizizzizi',
image: '/images/VR-logo.png',
token: function(token) {
document.getElementById("regform").submit();
// Use the token to create the charge with a server-side script.
// You can access the token ID with `token.id`
}
});

$('#customButton').on('click', function(e) {
  var grtotal;
  grtotal = document.getElementById('total').value;
      // Open Checkout with further options
handler.open({
  name: 'Verticle Runner',
  description: '[[!+fi.pagetitle]]',
  amount: parseInt(grtotal * 100),
  email: "[[+modx.user.id:userinfo=`email`]]"
});
e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function() {
  handler.close();
});

</script>

Answer 1

这里的想法是在token回调中检索卡片令牌，然后从那里提交表单。

我们假设您有以下表格：

<form id="myForm" action="XXXXXX" method="POST">
    <input type="text" id="amount" name="amount"/>
    <input type="hidden" id="stripeToken" name="stripeToken"/>
    <input type="hidden" id="stripeEmail" name="stripeEmail"/>
</form>

然后您对StripeCheckout.configure()的电话可能是这样的：

var handler = StripeCheckout.configure({
    key: 'pk_test_XXX',
    image: '/square-image.png',
    token: function(token) {
        $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
});

Answer 2

确保您的提交按钮没有“提交”的名称。花了我大约6个小时来计算出那个。

Answer 3

我也遇到同样的问题。

我的问题是表格中有2个按钮。其中一个是type=submit，另一个尚未定义type。我将其固定在其上定义了type=button。

条纹自定义结帐流程后提交表单

3 个答案: