Stripe Payment API 一次次发送token请求

Question

我已经创建了从条带中获取令牌的代码，该过程是当我单击按钮时，请求转到 js，在 js 中，我从条带中请求令牌，但问题是当响应请求成功时，我使用 jquery 一次又一次地从条带提交表单请求令牌。

请帮助我在哪里做错了。

这是 HTML 代码

<form action="submit.php" id="payment-form" method="post">
    <span class="payment-errors" style="color:red;font-size: 13px"></span>
    <p>
        <label for="">Card Number</label>
        <input type="text" data-stripe="number">
    </p>

    <p>
        <label for="">CVC</label>
        <input type="text" data-stripe="cvc">
    </p>

    <p>
        <label for="">Expiration mm/yyyy</label>
        <input type="text" data-stripe="exp-month">
        <input type="text" data-stripe="exp-year">
    </p>

    <button type="submit" name="submit">Submit</button>
</form>

这是我的 js 代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
    Stripe.setPublishableKey('pk_test_J16ou3qOqkQG190gDIb0DjeE');
    $('#payment-form').submit(function(e){
        $form = $(this);
        $form.find('button').prop('disabled' , true);

        Stripe.card.createToken($form, function(status, response){
            console.log(status);
            console.log(response);
            if(response.error){
                $form.find('.payment-errors').html(response.error.message);
                $form.find('button').prop('disabled' , false);
            } else{
                var token = response.id;
                $form.append($('<input type="hidden" name="stripe-token" />').val(token));
                $('#payment-form').submit();
            }
        });
    return false;
    });
</script>

这是我的 conole 图片

Answer 1

你有

$('#payment-form').submit();

在响应函数内部。如果响应成功，则再次触发提交事件。

如果您需要在提交之前检索令牌（以随请求发送），请先检查您是否拥有它。如果您不这样做，请检索它并发送表格。如果这样做，只需发送表单（即返回 true 而不是触发 submit）。

$('#payment-form').submit(function(e){
    $form = $(this);
    $form.find('button').prop('disabled' , true);

    Stripe.card.createToken($form, function(status, response){
        console.log(status);
        console.log(response);
        if(response.error){
            $form.find('.payment-errors').html(response.error.message);
            $form.find('button').prop('disabled' , false);
        } else{
            var token = response.id;
            $form.append($('<input type="hidden" name="stripe-token" />').val(token));
            return true;
        }
    });
    return false;
});

Answer 2

问题是因为代码('#payment-form').submit();

我对您提供的代码做了一些小的改动。

1. 将提交按钮名称重命名为btnSubmit，因为正在提交的name 覆盖了form.submit()

2. $('#payment-form').submit(function(e){改为$('#payment-form').find('button').click(function(e){

3. 内部按钮点击，代码$form = $(this);改为$form = $('#payment-form');

以下代码经过我的测试并且运行良好。

HTML

<form action="submit.php" id="payment-form" method="post">
    <span class="payment-errors" style="color:red;font-size: 13px"></span>
    <p>
        <label for="">Card Number</label>
        <input type="text" data-stripe="number">
    </p>
    <p>
        <label for="">CVC</label>
        <input type="text" data-stripe="cvc">
    </p>
    <p>
        <label for="">Expiration mm/yyyy</label>
        <input type="text" data-stripe="exp-month">
        <input type="text" data-stripe="exp-year">
    </p>
    <button type="submit" name="btnSubmit">Submit</button> <!-- Changed button name -->
</form>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <script type="text/javascript">
        Stripe.setPublishableKey('pk_test_J16ou3qOqkQG190gDIb0DjeE');
        $('#payment-form').find('button').click(function(e){ // Changed here

            $form = $('#payment-form'); // Changed here
            $form.find('button').prop('disabled' , true);

            Stripe.card.createToken($form, function(status, response){
                console.log(status);
                console.log(response);
                if(response.error){
                    $form.find('.payment-errors').html(response.error.message);
                    $form.find('button').prop('disabled' , false);
                } else{
                    var token = response.id;
                    $form.append($('<input type="hidden" name="stripe-token" />').val(token));
                    $('#payment-form').submit();
                }
            });
            return false;
        });
    </script>

希望此代码对您有所帮助。