Stripe Payment API Immer wieder Anfrage von Token

Question

Ich habe den Code erstellt, um das Token aus dem Stripe die Prozedur ist, wenn ich auf die Schaltfläche Anfrage gehe zu js und in js Ich fordere das Token aus dem Stripe aber die Problem ist, wenn die Antwortanforderung erfolgreich ausgeführt wird und ich das Formular unter Verwendung von jquery das Skriptanforderungs-Token immer wieder aus Stripe absetze.

Bitte helfen Sie mir bitte, wo ich Fehler mache. Hier

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

Hier mein js Code ist

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

Hier ist mein Conole Bild

Answer 1

Sie haben

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

in der Antwortfunktion. Wenn die Antwort erfolgreich ist, lösen Sie das Submit-Ereignis erneut aus.

Wenn Sie das Token vor dem Senden abrufen müssen (um es zusammen mit der Anfrage zu senden), prüfen Sie, ob Sie es zuerst haben. Wenn Sie dies nicht tun, rufen Sie es ab und senden Sie das Formular. Wenn Sie dies tun, senden Sie einfach das Formular (d. H. Geben Sie true zurück, statt submit auszulösen).

$('#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

Die Probleme sind wegen des Code ('#payment-form').submit();

ich kleine Änderungen im Code vorgenommen haben Sie zur Verfügung gestellt.

1. die Schaltfläche Namen btnSubmit Umbenannt einreichen, weil die name die form.submit()

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

3. Innen Schaltfläche klicken geändert wird überschrieben vorlegen wird, den Code $form = $(this); zu $form = $('#payment-form'); geändert

Folgendes Code wird von mir getestet und funktioniert einwandfrei.

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> 

Hoffnung, dass dieser Code helfen.