Javascript未插入輸入

Question

我一直在嘗試使用條紋來接受付款，我一直試圖從我發現的指南中爲它製作一個粗糙的原型，但我似乎無法得到它的工作。提交後，名爲「stripeToken」的新輸入從不插入。這導致我的PHP腳本永遠不會執行。我試圖理解爲什麼它永遠不會插入。這裏的腳本：

的Javascript：（在頁面頭部）

<script src="https://js.stripe.com/v2/"></script> 
    <script type="text/javascript"> 
     Stripe.setPublishableKey('mykeyishere'); 
    </script> 
    <script> 
     // Event Listeners 
     $('#payment-form').on('submit', generateToken); 

     var generateToken = function (e) { 
      var form = $(this); 

      // No pressing the buy now button more than once 
      form.find('button').prop('disabled', true); 

      // Create the token, based on the form object 
      Stripe.create(form, stripeResponseHandler); 

      // Prevent the form from submitting 
      e.preventDefault(); 
     }; 
    </script> 

HTML/JavaScript的：（嘗試JS都在頭部和形式）

<form action="index.php" method="POST" id="payment-form"> 
       <script> 
        var stripeResponseHandler = function (status, response) { 
         var form = $('#payment-form'); 

         // Any validation errors? 
         if (response.error) { 
          // Show the user what they did wrong 
          form.find('.payment-errors').text(response.error.message); 

          // Make the submit clickable again 
          form.find('button').prop('disabled', false); 
         } else { 
          // Otherwise, we're good to go! Submit the form. 

          // Insert the unique token into the form 
          $('<input>', { 
           'type': 'hidden', 
           'name': 'stripeToken', 
           'value': response.id 
          }).appendTo(form); 

          // Call the native submit method on the form 
          // to keep the submission from being canceled 
          form.get(0).submit(); 
         } 
        };</script> 
       <span class="payment-errors"></span> 

       <div class="row"> 
        <label> 
         <span>Card Number</span> 
         <input type="text" data-stripe="number"> 
        </label> 
       </div> 

       <div class="row"> 
        <label> 
         <span>CVC</span> 
         <input type="text" data-stripe="cvc"> 
        </label> 
       </div> 

       <div class="row"> 
        <label> 
         <span>Expiration (MM/YYYY)</span> 
         <input type="text" data-stripe="exp-month"> 
        </label> 
        <input type="text" data-stripe="exp-year"> 
       </div> 

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

Answer 1

您應該刪除該腳本標記來自表單內部，並將其放在其他腳本標記旁邊。

也儘量包裹的事件在的document.ready

$(document).ready(function(){ 
    $('#payment-form').on('submit', generateToken); 
    var stripeResponseHandler = function (status, response) { 
         var form = $('#payment-form'); 

         // Any validation errors? 
         if (response.error) { 
          // Show the user what they did wrong 
          form.find('.payment-errors').text(response.error.message); 

          // Make the submit clickable again 
          form.find('button').prop('disabled', false); 
         } else { 
          // Otherwise, we're good to go! Submit the form. 

          // Insert the unique token into the form 
          $('<input>', { 
           'type': 'hidden', 
           'name': 'stripeToken', 
           'value': response.id 
          }).appendTo(form); 

          // Call the native submit method on the form 
          // to keep the submission from being canceled 
          form.get(0).submit(); 
         } 
        }; 
      var generateToken = function (e) { 
       var form = $(this); 

       // No pressing the buy now button more than once 
       form.find('button').prop('disabled', true); 

       // Create the token, based on the form object 
       Stripe.create(form, stripeResponseHandler); 

       // Prevent the form from submitting 
       e.preventDefault(); 
      }; 


    }); 

結合從我可以猜（和它不是一個很好的猜測），是在＃付款形式不能正確，因爲綁定腳本在dom準備好之前就已經運行了？

另一件事引起了我的注意。你有e.preventDefault（）阻止表單被提交，但你有一個響應處理程序。該響應處理程序是否被調用？是否有一些要求出現條帶並返回？

檢查您的網絡窗口，看看是否發生。表單只會在form.get（0）.submit（）;中提交。響應處理程序的一部分，所以在分區完成之後。