我曾经有过Angular Stripe Checkout表单,我正在尝试将我的表单更新为最近推出的新的Stripe Card Elements。角度条纹 - 将条纹付款表格转换为条纹元素
取出表单输入字段,并与磁条卡元素替换它们后,我的形式如下:
<form name="payment" ng-submit="vm.submit()">
<div class="row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
</div>
<button class="btn btn-primary" type="submit" ng-disabled="vm.submitting">Pay!</button>
<div ng-show="vm.cardError" class="row">
<div class="has-error">
<p class="help-block">* {{vm.cardError}}</p>
</div>
</div>
</form>
的角度,当提交表单时,我正在处理从
submit()
和
stripeResponseHandler
以前控制器。在更新我的Angular Controller后,我的控制器现在看起来像这样:
function PaymentController() {
var vm = this;
var elements = stripe.elements();
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: 'Helvetica Neue',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
vm.card = elements.create('card', {style: style});
vm.card.mount('#card-element');
// Handle real-time validation errors from the card Element.
vm.card.addEventListener('change', function(event) {
if (event.error) {
vm.cardError = event.error.message;
} else {
vm.cardError = '';
}
});
function submit() {
vm.cardError = '';
vm.submitting = true;
createToken();
}
// Send data directly to stripe
function createToken() {
stripe.createToken(vm.card).then(function(result) {
if (result.error) {
vm.cardError = result.error.message;
vm.submitting = false;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
}
// Response Handler callback to handle the response from Stripe server
function stripeTokenHandler(token) {
vm.tokenData = {
token: token.id
};
.. Process the rest in server ...
}
}
上述代码按原样工作。但我很困惑这些:
1)由于Stripe现在使用DOM操纵在表单中插入卡片元素,这是否使我的上述方法错误,如在Angular方式?意思是说,我不应该在Controller中做这些事情,而是将它们移到一个指令上?或者应该没有必要,因为被操纵的元素使用stripe.elements()
。 2)如果我确实需要将它们放在指令内,我只是不确定如何将上述内容转换为角度指令。它首先通过挂载元素来操作元素(可以将其添加到指令链接函数中),但稍后它会继续使用card
元素来提交表单和事件处理程序。我是否需要在指令链接本身内部完成所有这些操作,使指令控制器中的提交和链接中的元素操作?
我很困惑,在这里做什么卡住了。有人可以给我一个关于如何解决这个问题的例子吗?
我正在使用Angular 1.5。
喜尼尔,请问在这种情况下,你的HTML看看吗?提交卡片详细信息时出现错误'错误:我们无法从指定的元素中检索数据。请确保您尝试使用的元素仍然安装。' –
@SachinKaria我已经用我正在使用的HTML代码更新了我的答案。希望这可以帮助。 – Neel