ストライプペイメントAPIトークンの何度も何度もリクエストを送信しています

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(); 

を持っています。応答が成功した場合は、送信イベントを再度トリガーします。

送信する前にトークンを取得する必要がある場合（要求に応じて送信する）、最初にトークンを持っているかどうかを確認します。あなたがしない場合は、それを取得してフォームを送信します。そうした場合は、フォームを送信してください（つまり、submitをトリガーする代わりにtrueを返す）。

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

です。 nameが提出されているので、btnSubmitにボタン名を提出改名

1. は、ボタンのクリック、$form = $(this);は$form = $('#payment-form');

に変更したコード内 $('#payment-form').find('button').click(function(e){

に変更form.submit()

$('#payment-form').submit(function(e){をオーバーライドしています

次のコードは私によってテストされ、完全に動作します。

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> 

このコードが役立つことを願っています。