Stripe.js - collection of recipient information

Question

Stripe now offers payouts that work by creating a front-end bank account marker . From there, the token is sent to the server, where you create the recipient object with this bank account token. From there, you use this recipient object in transmissions.

While I am familiar, you can create custom forms for payments using stripe.js, when it comes to creating a token for recipients, I can seem to have no documentation other than this .

Here is my problem, my form first:

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

So far, the three things I need from this form are the country, routingNumber and accountNumber . Let's take a look at Javascript to use these fields with 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; }); }); 

My problem is that alert () is triggered, which means there are errors. I looked at the API and I'm not sure how to display these errors specifically for creating a recipient. For payments, he gives the following example:

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

Note. I ruled out importing jQuery / Stripe.js - this is definitely not a problem. Thanks for the help!

Answer 1

My experience is that response.error.message is really the right way.

Here is an example of my own code:

 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 */ } }); 

If you still don't see the correct errors, you should try console.log (answer) and look at the javascript console for tips.

Here is an example of a simple error to reproduce:

The route number must have 9 digits

Of course, you should verify your account and route numbers using the procedures provided by Stripe.js. Here is a usage example taken from their documentation:

 // 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') 

The documents for this are here: https://stripe.com/docs/stripe.js#collecting-bank-account-details

Answer 2

Just change the shape as shown below. other things are beautiful. Because you get the value as $ ('. Country'). Val () , where .country indicates that there should be a class. so just add the class to your form as shown below.

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