두 번 호출되는 jQuery 콜백

Question

구독 결제를 구현하기 위해 캐스트 캐스트를 따르고 있습니다. 그것은 여기에 : 나는 스트라이프 몇 가지 추가 필드가 통과하지만

http://railscasts.com/episodes/288-billing-with-stripe

내 코드는 거의 동일하다. 문제는 성공적으로 청구 된 경우에도 자바 스크립트의 오류 메시지에 제출 버튼이 누적 될 때 항상 오류 메시지가 표시된다는 것입니다. Strip이 오류를 유발하는 무언가를 반환하는지 또는 JS 문제가 있는지 확실하지 않습니다.

jQuery -> 
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content')) 
    subscription.setupForm() 

subscription = 
    setupForm: -> 
    $('#new_membership').submit -> 
     $('input[type=submit]').attr('disabled', true) 
     if $('#card_number').length 
     subscription.processCard() 
     false 
     else 
     true 

    processCard: -> 
    card = 
     number: $('#card_number').val() 
     cvc: $('#card_code').val() 
     expMonth: $('#card_month').val() 
     expYear: $('#card_year').val() 
    Stripe.createToken(card, subscription.handleStripeResponse) 

    handleStripeResponse: (status, response) -> 
    if status == 200 
     $('#membership_stripe_card_token').val(response.id) 
     $('#new_membership')[0].submit() 
    else 
     $('#stripe_error').text(response.error.message) 
     $('input[type=submit]').attr('disabled', false) 

이것은 오류 처리를 위해 제공되는 스트라이프의 예입니다. 정확히 왜 또는 어떻게 문제를 해결하려면 그래서 무슨 일이 일어나고 있는지 당신에게 말할 수 있지만 :

function stripeResponseHandler(status, response) { 
    if (response.error) { 
     ... 
     //show the errors on the form 
     $(".payment-errors").html(response.error.message); 
    } else { 
     var form$ = $("#payment-form"); 
     // token contains id, last4, and card type 
     var token = response['id']; 
     // insert the token into the form so it gets submitted to the server 
     form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>"); 
     // and submit 
     form$.get(0).submit(); 
    } 
} 

UPDATE를 : 그들은 첫 번째 오류에 대해 공정 및 테스트를 뒤집습니다.

나는 콘솔 로그 문을 추가 handleStripeResponse은 사용자 안타 제출 때 한 번, 두 번 호출되고 있음을 이제 볼 수 있고, 그 다음에 다시 (것하는 200 반환 형식은 다음에 게시하는 아마 때문에 실제 처리를위한 Rails 응용 프로그램? 그리고 오류 메시지를 일으키는 0을 반환합니다.하지만 Rails가 처리 서버 측을 처리 중이므로 요금이 부과됩니다.

다음은 컴파일 된 JS입니다. :

(function() { 
    var subscription; 

    jQuery(function() { 
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content')); 
    return subscription.setupForm(); 
    }); 

    subscription = { 
    setupForm: function() { 
     return $('#new_membership').submit(function() { 
     $('input[type=submit]').attr('disabled', true); 
     if ($('#card_number').length) { 
      subscription.processCard(); 
      return false; 
     } else { 
      return true; 
     } 
     }); 
    }, 
    processCard: function() { 
     var card; 
     card = { 
     number: $('#card_number').val(), 
     cvc: $('#card_code').val(), 
     expMonth: $('#card_month').val(), 
     expYear: $('#card_year').val() 
     }; 
     return Stripe.createToken(card, subscription.handleStripeResponse); 
    }, 
    handleStripeResponse: function(status, response) { 
     if (status === 200) { 
     $('#membership_stripe_card_token').val(response.id); 
     return $('#new_membership')[0].submit(); 
     } else { 
     $('#stripe_error').text(response.error.message); 
     return $('input[type=submit]').attr('disabled', false); 
     } 
    } 
    }; 

}).call(this); 

Answer 1

그래서 내 hacky soluti 콜백을 통해 두 번째 시간은 지속적으로 0

else if status == 0 
     $('#stripe_error').text('Processing...') 

적어도 그런 식으로 반환 이후 지금까지에,이 작업을 수행하는 것입니다, 사용자는 오류 메시지가 표시되지 않으며, 제출 버튼이 활성화되지 .

Answer 2

같은 문제가 발생했습니다. 아직도 그 원인을 모릅니다.

: 대신

if $('#card_number').length 

I가 수표를 넣어 : 대신 검사의 '경우'문에 대한 것을

subscription = 
    setupForm: -> 
    $('#new_subscription').submit -> 
     $('input[type=submit]').attr('disabled', true) 
     if $('#subscription_stripe_card_token').val 
     true 
     else 
     subscription.processCard() 
     false 

공지 사항 : 내가 찾은 해결책은 커피 스크립트에 다른 유효성 검사를 추가했다

if $('#subscription_stripe_card_token').val 

이렇게하면 양식이 처음 제출 될 때 'stripe_card_token'값을 성공적으로 반환하므로 두 번째로 양식을 전송하지 않습니다. 내가 아직 모르는 이유는 railscast에서 card_number.length 메소드를 사용하는 것이 효과가 없었던 이유입니다. 나는 그것이 @subscription 객체가 card_number 속성 필드를 제거하지 따라서 지금 stripe_card_token에 대한 값을 가지고 있음을 인식하고,하지에 문제가 될 수있다 생각 ...하지만이 얻을 수 있습니다 나는

<div class="field"> 
    <%= f.label :email %> 
    <%= f.text_field :email %> 
</div>  
<% if @subscription.stripe_card_token %> 
    Credit card has been provided 
<% else %> 
    <div class="field"> 
    <%= label_tag :card_number, "Credit Card Number " %> 
    <%= text_field_tag :card_number, nil, name: nil %> 

희망을 모른다 여기에 최종 답변을 가까이!

Answer 3

동일한 문제가있었습니다. 나는 무의식적으로 javascript를 두 번 호출했습니다.

번 (명시 적) 페이지에서 : (실수로) 다시 다음

= javascript_include_tag 'stripe' 

그리고 application.js에서

//= require_tree . 

결과는 jQuery를 문서 준비 함수가 호출됩니다되어 두 번하는 모든 리스너가 두 번 설정됩니다.

응용 프로그램 설치 방법에 따라 하나 또는 다른 포함을 제거해야합니다. 내 응용 프로그램의 경우 내 application.js에서 해당 줄을 제거하는 것이 가장 좋습니다.

까다로운 자산 파이프 라인!

Answer 4

동일한 문제가있었습니다. Stripe 코드가 저장된 coffeescript 파일의 상단에서 jQuery ->를 꺼내서 이중 제출을 중단했습니다. 위의 Nathan Colgate의 힌트를 얻었습니다.

Answer 5

누구에게이 글을 읽는 사람에게 : 비슷한 문제가있는 경우 "페이지 소스보기"또는 이와 동등한 자바 스크립트가 두 번 포함되는지 확인하는 것이 좋습니다.

동일한 Railscast를 따라 가면서 같은 문제가 발생했습니다. 제가 깨닫기를 기꺼이 받아들이는 것보다 오래 걸렸지 만, 졸리는 동안 레일 스크류 노트의 라인을 붙여 넣는 것이 문제였습니다.

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 

및 railscast 노트에서 광고 붙여 번째 복사본 : 따라서

<%= javascript_include_tag "https://js.stripe.com/v1/", "application" %> 

을 원인이 애플리케이션 자바 스크립트 두 번 포함되고 있던, 일단 자동 생성 레일 application.html.erb에 포함 "응용 프로그램"을 두 번 포함합니다. 나는 그 중 하나를 제거하여 그것을 해결했다.