jQuery 함수가 스트라이프 요소로 실행되지 않습니다.

Question

사용자가 결제 방법을 선택하도록하는 양식이 있습니다. 메소드가 신용 카드 인 경우, 시작된 Stripe Elements 양식이 표시되고 CC/EXP/ZIP 데이터를 입력 할 수 있습니다. 그들이 제출을 클릭하면 양식은 먼저 유효성 검사 (jQuery Validate)를 통과 한 다음 Stripe에서 토큰을 가져 와서 다음 페이지의 서버로 전달하는 과정을 거쳐야합니다. 문제는 비록 함수가 선언 되었더라도 호출한다고해도 실행되지 않는 것 같아서 이유를 알 수 없다는 것입니다.

var style = { 
    base: { 
    color: '#32325d', 
    lineHeight: '24px', 
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif', 
    fontSmoothing: 'antialiased', 
    fontSize: '16px', 
    '::placeholder': { 
     color: '#aab7c4' 
    } 
    }, 
    invalid: { 
    color: '#fa755a', 
    iconColor: '#fa755a' 
    } 
}; 

var card = elements.create('card', {style: style}); 

// Add an instance of the card Element into the `card-element` <div> 
card.mount('#card-element'); 

// Handle real-time validation errors from the card Element. 
card.addEventListener('keyup', function(event) { 
    var displayError = document.getElementById('card-errors'); 
    if (event.error) { 
    displayError.textContent = event.error.message; 
    } else { 
    displayError.textContent = ''; 
    } 
}); 


var stripe = Stripe(''); 

// Create an instance of Elements 
var elements = stripe.elements(); 
jQuery(document).ready(function() { 
    function stripeTokenHandler(token) { 
       // Insert the token ID into the form so it gets submitted to the server 
       document.createElement('input'); 
       var form = document.getElementById('payment-form'); 
       var hiddenInput = document.createElement('input'); 
       hiddenInput.setAttribute('type', 'hidden'); 
       hiddenInput.setAttribute('name', 'stripeToken'); 
       hiddenInput.setAttribute('value', token.id); 
       form.appendChild(hiddenInput); 
       alert('token id is' + token.id); 
       var token_field = jQuery("input[name='stripeToken']").val(); 
       alert(token_field); 
       // Submit the form 

       setTimeout(form.submit(), 3000); 

     }; 
    function createToken() { 
     stripe.createToken(card).then(function(result) { 

      if (result.error) { 
      // Inform the user if there was an error 
      var errorElement = document.getElementById('card-errors'); 
      errorElement.textContent = result.error.message; 
      alert(result.error.message); 
      } else { 
      // Send the token to your server 
      alert('we got the token, sending it off') 
      stripeTokenHandler(result.token); 
      } 
     }); 
    }; 

    function stripeCreateToken(event){ 

     var selectVal = jQuery("#payment_type option:selected").val(); 
     if(selectVal !== "Credit Card"){ 
      // Not CC, skip Stripe and submit the form 
      alert('it failed or no credit card'); 
      var form = document.getElementById('payment-form'); 
      form.submit(); 
     } 
     createToken(); 
    }; 


    jQuery('#payment_type').on('change', function() { 
      var selectVal = jQuery("#payment_type option:selected").val(); 
      //var form = document.getElementById('payment-form'); 
      if(selectVal == "Credit Card"){ 
       jQuery('.check').hide(); 
       jQuery('.cc').show(); 

       jQuery("#payment-form").submit(function(e){ 
        stripeCreateToken(e); 
       }); 
      }else{ 
       jQuery('.cc').hide(); 
       jQuery('.check').show(); 
      } 
     }); 
}); 

이상한 것은입니다 나는 그것이 작동 콘솔에서 위의 모든 붙여 넣기,하지만 난 잘못하고, 또는 볼 수있는 위치의 적어도 일부 방향하고 이해하려는 경우.

Answer 1

문제 jQuery 유효성 검사가 양식 제출을 시작하여 Stripe이 처리를 완료 할 수있었습니다. jQuery 유효성 검사에서 form.submit();을 제거하고 내 스트라이프 기능을 작동 시켰습니다.