Stripe Payment API一次又一次地发送令牌请求

I have created the code to get the token from the stripe the procedure is when i click the button request goes to js and in js I am requesting the token from the stripe but the issue is when the response request goes success and I submit the form using jquery the script request token again and again from stripe.

Kindly please help that where i am doing mistake.

Here is the HTML code

<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>

Here is my js code

<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>

Here is my conole image

You have

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

inside the response function. If the response is successful, you trigger the submit event again.

If you need to retrieve the token before submitting (to send it along the request), check if you have it first. If you don't, retrieve it and send the form. If you do, just send the form (i.e. return true instead of triggering 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;
});

The issues is because of the code ('#payment-form').submit();

I have made small changes in the code you provided.

1. Renamed the submit button name to btnSubmit, Because the name being submit is overriding the form.submit()

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

3. Inside button click, the code $form = $(this); changed to $form = $('#payment-form');

The following code is tested by me and working perfectly.

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>

Hope that this code will help.