Question

我正在尝试使用Stripe.js和HTML创建一个接受用户银行帐户详细信息的表单。问题是，每次我尝试提交细节时，无论是否正确，我都会收到错误。输入表格如下。有什么想法吗？

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

Answer 1

所以你正在使用Stripe的data-stripe属性，但在你的Javascript中，你是通过css选择器选择值。 $('.country')是对JQuery的调用，它返回表示类country的DOM元素的JQuery对象。您的表单的html不会使用您尝试访问的字段的类，只有data-stripe属性。

使用data-stripe属性，您可以将整个表单传递给Stripe.bankAccount.createToken()，Stripe会自动获取所需的字段。你的javascript最终看起来像这样（注意我将$ form传递给Stripe.bankAccount.createToken：

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

使用Stripe.js接受银行帐户

1 个答案: