带多个元素的条纹元素createToken
r3plica
我正在尝试将条带化到我的角度应用程序中。this.elments.create('card')调用时，默认设置可以正常工作，await this.stripe.createToken(this.card)但我想分别设置输入的样式，因此我做到了：
ngAfterViewInit(): void {
this.stripeService
.setPublishableKey('pk_test_2syov9fTMRwOxYG97AAXbOgt008X6NL46o')
.then((stripe) => {
this.stripe = stripe;
this.elements = stripe.elements();
this.cardNumberElement = this.createElement('cardNumber');
this.cardExpiryElement = this.createElement('cardExpiry');
this.cardCvcElement = this.createElement('cardCvc');
});
}
onChange({ error }) {
if (error) {
this.error = error.message;
} else {
this.error = null;
}
this.cd.detectChanges();
}
async onSubmit(form: NgForm) {
const { token, error } = await this.stripe.createToken(
this.cardNumberElement
);
if (error) {
console.log('Something is wrong:', error);
} else {
console.log('Success!', token);
}
}
private createElement(elementName: string): any {
const control = this.elements.create(elementName);
control.mount(this[elementName].nativeElement);
control.addEventListener('change', this.cardHandler);
return control;
}
如您所见，我只是传递了this.cardNumberElementto await this.stripe.createToken，并且确实成功返回，但是我没有传递cvc或expiry元素。如何将所有元素传递给create token方法？
特马雷克
无需传递其他元素：
stripe.createToken-如果适用，元素将从您在同一Element实例上创建的其他元素中提取数据以进行标记化-您只需提供一个Element作为参数即可。https://stripe.com/docs/js/tokens_sources/create_token?type=cardElement#stripe_create_token-tokenType
只要使用相同的元素实例安装和初始化expiry和cvc元素，在创建令牌时便会包含它们的数据。如果将令牌保存到客户，并在仪表板中查看客户的卡，则应该看到到期和cvc通过：
验证也是如此。例如，如果省略了到期日期，则应注意，即使您仅提供cardNumberElement，Stripe.js仍会通过错误指出“您的卡的到期日期不完整”。
最后，我要提到的是，令牌API已被淘汰，取而代之的是新的PaymentMethods API，您可以使用它以相同的方式来保存卡的详细信息：https ://stripe.com/docs/js/payment_methods/create_payment_method 。与令牌类似，PaymentMethods API在分隔元素时的行为类似。您只需要提供一个cardNumber元素，并且只要使用相同的元素实例安装和初始化cardCvc和cardExpiry元素，它们的值就会被自动提取。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
带磁卡读卡器的条纹元素javascript问题
- 2
在ReactJs中添加条纹元素多个可发布的键
- 3
斑马条纹忽略了隐藏的元素
- 4
CSS中的条纹元素样式设置
- 5
条纹元素的问题。创建焦点的类
- 6
以斜条纹打印矩阵的元素
- 7
条纹元素和 3d 安全
- 8
更改反应条纹元素的字体系列
- 9
带偏移的画布元素
- 10
带纯AngularJs的后缀元素
- 11
带链接元素的div中心
- 12
带DIV的元素之间的间距
- 13
带对象的JavaScript搜索元素
- 14
带链接元素的div中心
- 15
HTML <select> 带元素列表
- 16
拍摄的带条纹的照片
- 17
SVG条纹图案作为元素背景图像
- 18
如何在vue2中添加条纹元素？
- 19
Laravel Cashier 10-条纹付款元素为空
- 20
自定义字体未加载到条纹元素中
- 21
自定义条纹元素javascript生成的表单
- 22
Python：获取条纹至少为3的元素的索引？
- 23
条纹-在SCA中使用PaymentIntents和Stripe元素
- 24
SVG条纹图案作为元素背景图像
- 25
条纹元素快速入门示例未正确呈现
- 26
比较多个元素
- 27
多个微调元素？
- 28
IndexedSeq并删除多个元素
- 29
jQuery悬停多个元素
我来说两句