Question

我想创建一个stripe.js表单，首先应该在客户端验证数据然后提交到stripe.js以获取令牌。这是我的完整源代码：

<!DOCTYPE html><html>
<head>
<?php
print_r($_POST);
?>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="jquery.payment.js"></script>
<style type="text/css" media="screen">
.has-error input {
  border-width: 2px;
}
.validation.text-danger:after {
  content: 'Validation failed';
}
.validation.text-success:after {
  content: 'Validation passed';
}
</style>

<script type="text/javascript">

jQuery(function($) {
  $('[data-numeric]').payment('restrictNumeric');
  $('.cc-number').payment('formatCardNumber');
  $('.cc-exp').payment('formatCardExpiry');
  $('.cc-cvc').payment('formatCardCVC');

  $.fn.toggleInputError = function(erred) {
    this.parent('.form-group').toggleClass('has-error', erred);
    return this;
  };
  $('button[type="submit"]').click(function(e){
    e.preventDefault();
    var cardType = $.payment.cardType($('.cc-number').val());
    $('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
    $('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
    $('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
    $('.cc-brand').text(cardType);
    $('.validation').removeClass('text-danger text-success');
    if ($('.has-error').length) { $('.validation').addClass('text-danger') } else { $('form').submit(); }
  });
});

Stripe.setPublishableKey('pk_test_***');

jQuery(function($) {
  $('#payment-form').submit(function(event) {
    var $form = $(this);
     // Disable the submit button to prevent repeated clicks
     $form.find('button').prop('disabled', true);
     Stripe.card.createToken($form, stripeResponseHandler);
     // Prevent the form from submitting with the default action
     return false;
  });
});

function stripeResponseHandler(status, response) {
  var $form = $('#payment-form');
  if (response.error) {
      // Show the errors on the form
      $form.find('.payment-errors').text(response.error.message);
      $form.find('button').prop('disabled', false);
  } else {
      // response contains id and card, which contains additional card details
      var token = response.id;
      // Insert the token into the form so it gets submitted to the server
      $form.append($('<input type="hidden" name="stripeToken" />').val(token));
      // and submit
      $form.get(0).submit();
  }
};
</script>
</head>
<body>
<div class="container">
<form action="" method="post" id="payment-form" novalidate autocomplete="on">
<span class="payment-errors"></span>

  <div class="form-group">
    <label for="cc-number" class="control-label">Card number:<small class="text-muted">[<span class="cc-brand"></span>]</small></label>
    <input id="cc-number" data-stripe="number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required class="col-md-2">
  </div>

  <div class="form-group">
    <label for="cc-exp" class="control-label">Card expiry:</label>
    <input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2">
  </div>

  <div class="form-group">
    <label for="cc-cvc" class="control-label">CVC:</label>
    <input id="cc-cvc" data-stripe="cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required class="col-md-2">
  </div>

  <button type="submit" class="btn btn-lg btn-primary">Submit</button>
  <h4 class="validation"></h4>
  </form>
  </div>
  </body>
  </html>

此到期表单只使用一个字段，它将以mm / yy的形式提交给验证器，验证器工作正常，但在成功验证后，我想将mm / yy分开并将每个分配给data-stripe="exp-month"在提交到stripe.js之前和data-stripe="exp-year"分别由stripe.js需要data-stripe="exp-month"和data-stripe="exp-year"。

for validator我使用这个第三方脚本：https://github.com/stripe/jquery.payment/tree/master/lib 我看到它已经有一个功能可以在这里分割mm和yy https://github.com/stripe/jquery.payment#paymentcardexpiryvalstring-and-fnpaymentcardexpiryval，但我不知道如何使用该功能来分割fom到期日期并将它们分配给data-stripe="exp-month"和data-stripe="exp-year" 请告知我该怎么做？

Answer 1

Stripe.js可以将过期日期作为单个参数接受：https://stripe.com/docs/stripe.js#passing-exp-dates

因此您无需拆分日期。只需将data-stripe="exp"添加到cc-exp字段即可：

    <input id="cc-exp" data-stripe="exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2">

如何拆分表单数据并使用jQuery分配给另一个值？

1 个答案: