Question

我正在开发一个我希望集成条带支付网关的网站。我已在其他网站上实现此代码，但此代码无法在我当前的网站上运行。我不知道为什么。我的代码正在关注

代码

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
  Stripe.setPublishableKey('API_KEY');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

        var $form = $('#paymentform');

        $form.submit(function(event) {
        event.preventDefault(event);
        $form.find('#pay_submit').prop('disabled', true);

        Stripe.card.createToken($form, stripeResponseHandler);

        return false;
    });

});

function stripeResponseHandler(status, response) {
    var $form = $('#payment-form');

    if (response.error) { 

        $form.find('.payment-errors').text(response.error.message);
        $form.find('#pay_submit').prop('disabled', false);

    } else { 

        var token = response.id;

        $form.append($('<input type="hidden" name="stripeToken">').val(token));

        $form.get(0).submit();
     }
   };
</script>

<form action="stripe.php" class="contact-form col-md-8 col-md-offset-2" method="POST" id="paymentform">
    <span class="payment-errors"></span>

    <label for="company-name">Company Name:</label>
    <input type="text" class="form-control" id="company-name" name="company_name" required>

    <label for="name">Your Name:</label>
    <input type="text" class="form-control" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" name="email" required>

    <label for="Phone">Phone:</label>
    <input type="text" class="form-control" id="Phone" name="phone" required>

    <label for="City">City:</label>
    <input type="text" class="form-control" id="City" name="city" required>

    <label for="stations">Address:</label>
    <input type="text" class="form-control" id="stations" name="stations"  required>

    <label for="Card">Credit Card #:</label>
    <input type="text" size="20" data-stripe="number" class="form-control" id="Card" required>

    <label for="cvc">CVC:</label>
    <input type="text" size="4" data-stripe="cvc" class="form-control" id="cvc"  required>

    <label for="exp_month">Expiry Month(MM):</label>
    <input type="text" size="2" data-stripe="exp_month" class="form-control" id="exp_month" required>

    <label for="exp_year">Expiry Year(YY):</label>
    <input type="text" size="2" data-stripe="exp_year" class="form-control" id="exp_year" required>

    <button type="submit" class="btn btn-default btn-lg getS-btn" id="pay_submit">PAY</button>
</form>

我在同一页面末尾的其他脚本，我将其用于不同的用途

<script type="text/javascript" src="js/jquery.1.11.1.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/SmoothScroll.js"></script> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" src="js/jquery.isotope.js"></script> 
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script> 
<script type="text/javascript" src="js/contact_me.js"></script> 
<script type="text/javascript" src="js/main.js"></script>

我认为jquery并没有阻止表单提交，这就是api无法正常工作的原因。

Answer 1

似乎错误在你的jquery中（意味着jquery产生错误），因为它的形式并没有阻止。在您的开发网站上仔细检查。

Answer 2

您可以在onSubmit（）方法上使用这个整洁的技巧来阻止表单提交。

示例：

<form action="stripe.php" class="contact-form col-md-8 col-md-offset-2" method="POST" id="paymentform" onSubmit="return false;">

防止条纹形式提交

2 个答案: