2013-07-11 110 views
6

Stripe現在提供支付,該支付通過在前端創建銀行賬戶令牌來實現。從那裏,令牌被髮送到服務器,在那裏您使用該銀行賬戶令牌創建了一個收件人對象。從那裏你可以在傳輸中使用這個收件人對象。Stripe.js - 收集收件人信息

雖然我很熟悉,你可以創建custom forms for paymentsstripe.js,當談到創建收件人的道理,我似乎無法找到比this其他任何文件。

這裏是我的問題,我的第一個形式:

<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> 

到目前爲止,這三個東西,我從這種形式需要的是國家,routingNumber,並使用accountNumber。讓我們看一下使用Javascript,所以我可以用這些字段與Stripe.js:

// Create a handler to manage what Stripe returns. 
    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; 
    }); 
    }); 

我的問題是,警報()被觸發,這意味着有錯誤。我查看了API,我不確定如何專門爲創建收件人而顯示這些錯誤。對於支付它提供了以下例子:

$(".payment-errors").text(response.error.message); 

注 - 我排除的jQuery/Stripe.js的進口 - 這確實是沒問題的。 感謝您的幫助!

回答

3

我的經驗是,response.error.message的確是正確的處理方式。

下面是我自己的代碼爲這個樣本:

Stripe.bankAccount.createToken({ 
    country: 'US', 
    routingNumber: bank_routing_number, 
    accountNumber: bank_account_number, 
}, function(status, response) { 
    if (response.error) 
    { 
     console.log(response); 
     alert(response.error.message); 
    } 
    else 
    { 
     var token = response.id; 
     /* send the token to the server along with the withdraw request */ 
    } 
}); 

如果您還沒有看到正確的錯誤,你應該嘗試CONSOLE.LOG(Response),並查看線索JavaScript控制檯。

下面是一個簡單的錯誤示例重現:

路由號碼必須有9位數字

你應該與程序,當然,可以確認您的帳戶和路由的數字, Stripe.js提供。這裏從他們的資料爲準用法示例:

// This will return true, indicating a potentially valid bank 
// routing number. 

Stripe.bankAccount.validateRoutingNumber('111000025') 
Stripe.bankAccount.validateRoutingNumber('110000000') 

// These invalid bank routing numbers will all return false. 

Stripe.bankAccount.validateRoutingNumber('990000000') 
// (Doesn't pass the checksum check.) 
Stripe.bankAccount.validateRoutingNumber('12345') 
Stripe.bankAccount.validateRoutingNumber('mistake') 

這種情況的文檔是在這裏:https://stripe.com/docs/stripe.js#collecting-bank-account-details

0

只需更改如下表單。其他的事情都很好。 因爲您提取的值爲$('。country')。val()其中.country表示應該有類。所以只需像下面一樣在表單中添加類即可。

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

<div class="form-row"> 
    <label> 
    <span>Bank Location</span> 
     <select data-stripe="country" class="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" class="routingNumber"/> 
    </label> 
</div> 

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

<button type="submit">Make Recipient!</button>