条纹结帐不会提交表格

Question

我正在使用以下代码连接到条纹支付网关。一切正确连接，令牌被创建。问题是表单没有提交。

我试过了多个选项，但无法获取表单提交。

这是提交按钮代码：

<input type="submit" name="submit" id="checkout_submit" value="Pay Now" /> 

这里是脚本：

$.getScript('https://js.stripe.com/v2/', function() { 
    Stripe.setPublishableKey('pk_test_roBzpWOBxAA4LcgcurQ5DUcA'); 
}); 

$checkout_submit = $('#checkout_submit').click(function() { 
    if (this.form.elements["payment_method"].value == "Stripe") { 
     $checkout_submit.attr('disabled', true); 
     Stripe.card.createToken($(this.form), stripeResponseHandler); 
    } 
    return false; 
}); 

function stripeResponseHandler(status, response) { 
    $checkout_submit.attr('disabled', false); 
    if (response.error) { 
    } else { 
     $('#payment_token').val(response.id); 
      $checkout_submit.off("click").click();       
    } 
} 

没有人有任何想法，为什么剧本的最后一部分没有提交表格：

$checkout_submit.off("click").click(); 

我也试图与更换此：

$('form#checkout').submit(); 

但是这也未能提交表格。

表

<form id="checkout" method="post"> 
    <div style="margin:0;padding:0;display:inline;"> 
     <input type="hidden" value="basket/order/ORDER_HASH" name="return_url"> 
     <input type="hidden" value="Stripe" name="payment_method"> 
     <input type="hidden" value="22" name="ACT"> 
     <input type="hidden" value="basket/checkout-stripe" name="RET"> 
     <input type="hidden" value="1" name="site_id"> 
     <input type="hidden" value="2482e401fcd5d9e2bd444a343965171dd2cbd987" name="csrf_token"> 
     <input type="hidden" value="yOd+cSmm9DPUdq4HZ4g5WSYK7v9hE/vuePzybMuNG5AzjBM1iVh2Fe8l1EWWLAN6w0goBJPJfP9pKAMzbIdhRcabfy+2qmLR9TbXQ4C6HYkDXIRY9Ra9S9dS3S2WVlZIh9y56ieZxCGne6f1/W61bxSRCip1uPWR7LxsPBg4oyut06BJnyZhAeYqZCEmNhWQ4Ef1EbezLANR7SHezdif+laFWLnjTxCInEBlBEf/m64+uRE3MMylP6vtdK48qf60" name="_params"> 
    </div> 
    <div class="grid col-12 divide"> 
     <ul> 
      <li> 
       <label> 
        Card Number 
        <span class="required-icon">*</span> 
       </label> 
       <input class="standard required" type="text" data-stripe="number" value=""> 
      </li> 
      <li> 
       <label> 
        Name on Card 
        <span class="required-icon">*</span> 
       </label> 
       <input class="standard required" type="text" data-stripe="name" value=""> 
      </li> 
      <li> 
      <label> 
       Expiry Month 
       <span class="required-icon">*</span> 
      </label> 
      <select class="standard required" data-stripe="exp-month"> 
       <option value="">Expiry Month</option> 
       <option value="01">01</option> 
       <option value="02">02</option> 
       <option value="03">03</option> 
       <option value="04">04</option> 
       <option value="05">05</option> 
       <option value="06">06</option> 
       <option value="07">07</option> 
       <option value="08">08</option> 
       <option value="09">09</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
      </select> 
      </li> 
      <li> 
       <label> 
        Expiry Year 
        <span class="required-icon">*</span> 
       </label> 
       <select class="standard required" data-stripe="exp-year"> 
        <option value="">Expiry Year</option> 
        <option value="2015">2015</option> 
        <option value="2016">2016</option> 
        <option value="2017">2017</option> 
        <option value="2018">2018</option> 
        <option value="2019">2019</option> 
        <option value="2020">2020</option> 
        <option value="2021">2021</option> 
        <option value="2022">2022</option> 
        <option value="2023">2023</option> 
        <option value="2024">2024</option> 
       </select> 
      </li> 
      <li> 
       <label> 
        Security Code (CVC) 
        <span class="required-icon">*</span> 
       </label> 
       <input class="standard required" type="text" data-stripe="cvc" value="" size="4"> 
      </li> 
     </ul> 
    </div> 
    <div class="grid col-12"> 
     <input id="payment_token" type="hidden" value="" name="payment[token]"> 
     <input id="checkout_submit" type="submit" value="Pay Now" name="submit"> 
    </div> 
</form> 

Answer 1

你可以试试这个：

$.getScript('https://js.stripe.com/v2/', function() { 
    Stripe.setPublishableKey('pk_test_roBzpWOBxAA4LcgcurQ5DUcA'); 
}); 

$checkout_submit = $('#checkout_submit'); // assign the element instead of bound event. 

$checkout_submit.click(function() { 
    if ($('[name="payment_method"]').val() === "Stripe") { 
     $checkout_submit.prop('disabled', true); // use prop 
     Stripe.card.createToken($(this).closest('form'), stripeResponseHandler); // pass the form here 
    } 
    return false; 
}); 

function stripeResponseHandler(status, response) { 
    $checkout_submit.prop('disabled', false); // use prop instead 
    if (response.error) { 
    } else { 
     $('#payment_token').val(response.id); 
     //$checkout_submit.off("click").click();    
     $checkout_submit.closest("form")[0].submit(); // <-----try this    
    } 
} 

Answer 2

你需要改变你的提交按钮的名称。 <input type="submit" name="submit"/>通过用按钮对象替换它来掩盖了表单对象提交方法。