자바 스크립트가 입력을 삽입하지 않음

Question

나는 지불을 받아들이 기 위해 스트라이프를 사용하려고 노력해 왔으며 발견 한 가이드에서 대략적인 프로토 타입을 만들려고 노력했지만 제대로 작동하지 않는 것 같습니다. "stripeToken"이라는 새 입력은 제출 후에 절대로 삽입되지 않습니다. 이로 인해 내 PHP 스크립트가 실행되지 않습니다. 왜 삽입하지 않는지 이해하려고 노력 중입니다.

자바 스크립트 : (페이지의 머리에서)

<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/자바 스크립트 : (양식 머리와 두 시도 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(); 응답 핸들러의 일부이므로 스트라이프가 완료된 후에