2014-11-30 2 views
-2

Stripe.js 및 HTML을 사용하여 사용자 은행 계좌 세부 정보를 허용하는 양식을 만들려고합니다. 문제는 세부 사항을 제출할 때마다 그것이 옳은지 여부에 관계없이 오류가 발생한다는 것입니다. 입력 양식은 아래와 같습니다. 어떤 아이디어?Stripe.js를 사용하여 은행 계좌 수락

<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 

    <!-- The required Stripe lib --> 
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script> 

    <!-- jQuery is used only for this example; it isn't required to use Stripe --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <script type="text/javascript"> 
    // This identifies your website in the createToken call below 
    //blanking my test key out just for stackoverflow 
    Stripe.setPublishableKey('pk_test_XXXXXXXXXXXXX'); 
    var stripeResponseHandler = function(status, response) { 
     var $form = $('#inst-form'); 
     if (response.error) 
     { 
      alert("Error"); 
      // Not sure how to get these errors. 
      $form.find('button').prop('disabled', false); 
     } 
     else 
     { 
      var token = response.id; 
      $form.append($('<input type="hidden" name="stripeToken" />').val(token)); 
      $form.get(0).submit(); 
     } 
     }; 

     // Now the handler is done, lets use it when the form is submitted. 
     // On form submission execute: 
     jQuery(function($) { 
     $('#inst-form').submit(function(event) { 
      // Get the form object. 
      var $form = $(this); 
      // Disable the submit button to prevent repeated clicks 
      $form.find('button').prop('disabled', true); 
      // Create a token with Stripe 
      Stripe.bankAccount.createToken({ 
      country: $('.country').val(), 
      routingNumber: $('.routingNumber').val(), 
      accountNumber: $('.accountNumber').val(), 
      }, stripeResponseHandler); 
      // Prevent the form from submitting with the default action 
      return false; 
     }); 
     }); 
    </script> 
</head> 
<body> 
    <h1>Give us your bank info</h1> 


<form method="POST" id="inst-form">  

    <div class="form-row"> 
     <label> 
     <span>Bank Location</span> 
      <select data-stripe="country"> 
       <option value="US">United States</option> 
      </select> 
     </label> 
    </div> 

    <div class="form-row"> 
     <label> 
     <span>Routing Number</span> 
      <input type="text" size="9" data-stripe="routingNumber"/> 
     </label> 
    </div> 

    <div class="form-row"> 
     <label> 
     <span>Account Number</span> 
      <input type="text" size="17" data-stripe="accountNumber"/> 
     </label> 
    </div> 


    <button type="submit">Make Recipient!</button> 
</form> 
</body> 
+0

하는 난 그냥 오류 경고 팝업에게 내가 누를 때마다 얻을 당신이 얻을 오류 –

+0

제출 뭐죠 : 자바 스크립트 내가 Stripe.bankAccount.createToken에 $ 형태로 전달할 경우 참고이 (처럼 보이는 끝낼 것 – user1161310

답변

6

그래서 당신은 스트라이프의 data-stripe 속성을 사용하지만 자바 스크립트는 CSS 선택기를 통해 값을 선택한다. $('.country')country 클래스의 DOM 요소를 나타내는 JQuery 객체를 반환하는 JQuery를 호출합니다. 귀하의 양식에 대한 귀하의 html은 당신이 도달하고자하는 필드에 대한 클래스를 사용하지 않으며 오직 data-stripe 속성입니다.

data-stripe 속성을 사용하면 전체 양식을 Stripe.bankAccount.createToken()으로 전달할 수 있으며 Stripe은 필요한 필드를 자동으로 가져옵니다. ?

Stripe.setPublishableKey('pk_test_i2txBI2jUjSQIMoqFz3Fo326'); 
var stripeResponseHandler = function(status, response) { 
    var $form = $('#inst-form'); 
    if (response.error) 
    { 
     alert("Error"); 
     // Not sure how to get these errors. 
     $form.find('button').prop('disabled', false); 
    } 
    else 
    { 
     var token = response.id; 
     $form.append($('<input type="hidden" name="stripeToken" />').val(token)); 
     console.log(response); 
    } 
    }; 

    // Now the handler is done, lets use it when the form is submitted. 
    // On form submission execute: 
    jQuery(function($) { 
    $('#inst-form').submit(function(event) { 
     // Get the form object. 
     var $form = $(this); 
     // Disable the submit button to prevent repeated clicks 
     $form.find('button').prop('disabled', true); 
     // Create a token with Stripe 
     Stripe.bankAccount.createToken($form, stripeResponseHandler); 
     // Prevent the form from submitting with the default action 
     return false; 
    }); 
    });