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

響應函數裏面。如果響應成功，則再次觸發提交事件。

如果您需要在提交之前檢索令牌（通過請求發送它），請檢查您是否首先擁有該令牌。如果你不這樣做，請檢索它併發送表格。如果你這樣做，只需發送表格（即返回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 = $('#payment-form');

代碼 $form = $(this);

以下代碼由我測試並完美工作。

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> 

希望這個代碼會有所幫助。