个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
37
4
我想创建一个 stripe.js 表单，首先应在客户端验证数据，然后提交到 stripe.js 以获取 token 。这是我的完整源代码:
<!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" 和 data-stripe="exp-year" 分别提交到 stripe.js 作为这两个 data-stripe="exp-month" 和 data-stripe="exp-year" 是 stripe.js 所必需的。
对于验证器，我使用这个第三方脚本:https://github.com/stripe/jquery.payment/tree/master/lib我看到它已经有一个功能可以在这里分割 mm 和 yy https://github.com/stripe/jquery.payment#paymentcardexpiryvalstring-and-fnpaymentcardexpiryval ，但我不知道如何使用该函数来分割过期日期并将其分配给 data-stripe="exp-month" 和 data-stripe="exp-year"请建议我该怎么做？
最佳答案
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">
关于javascript - 如何使用 jQuery 拆分表单数据并分配给另一个值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33918956/
37
4
0
我一直在开发一个 .NET 字符串格式化库来协助应用程序的本地化。它称为 SmartFormat 并在 GitHub 上开源. 它试图解决的问题之一是 Grammatical Numbers .这也称
leetcode关于单数II的题目是: 给定一个整数数组，除一个元素外，每个元素出现三次。找到那一个。笔记:您的算法应该具有线性运行时复杂度。你能在不使用额外内存的情况下实现它吗？ 其实我已经从网站上
我想知道创建/命名模型的首选方法是什么？ 我的应用程序有一个“用户”模型，其中包含用于创建、获取、更新(等)用户记录的所有相关业务逻辑。 在我的一些 Controller 中，我可能想要获取多个“用户
在我的 Mysql 数据库中，我有一个术语列表，例如(首字母大写，大多数时候是复数) Hairdressers Restaurants Beauty Salons Fournitures For Re
如果我决定为我的所有路线名称使用复数形式，但某些资源仅作为一个东西存在，您是否将其保持为单数(更直观)或尊重使用复数的决定并保持这种方式？ 我们正在用 PHP 为我们的客户门户网站设计一个新的 API
我可能在做一些愚蠢的事情，但是...... 应用/模型/user.rb: class User 然后，当我导航到 /users/123/totem/new 时，出现错误: ActionView::
您能否澄清一些 Matplotlib 术语: “subplots”(或“subplot”？)这个词是“axes”的同义词吗？ “轴”和“轴”的单数/复数是什么？ 最佳答案 这确实是一个令人困惑的问题。
我有一个 profile我的应用程序中的模型。我想允许用户通过 /profile 查看他们自己的个人资料，所以我创建了这条路线: resource :profile, :only => :show 我
我是一名优秀的程序员,十分优秀！