Stripe.js - 收集收件人信息

时间:2013-07-11 04:56:22

标签: javascript jquery html stripe-payments

Stripe现在提供付款,这可以通过在前端创建银行帐户令牌来实现。从那里,令牌将发送到服务器,您可以使用该银行帐户令牌创建收件人对象。从那里你可以在转移中使用这个收件人对象。

虽然我很熟悉你可以使用 stripe.js 创建custom forms for payments,但在为收件人创建令牌时,我似乎找不到除{{{}之外的任何文档。 3}}

这是我的问题,首先是我的表格:

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

到目前为止,我需要从这个表单中获得的三件事是 country,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;
    });
  });

我的问题是正在触发 alert(),这意味着存在错误。我查看了API,但我不确定如何专门为创建收件人显示这些错误。对于付款,它给出了以下示例:

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

注意 - 我排除了jQuery / Stripe.js的导入 - 这肯定不是问题。 谢谢你的帮助!

2 个答案:

答案 0 :(得分: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(响应)并查看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

答案 1 :(得分: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>