银行卡
要设置银行卡支付，您可以按照基本设置说明进行操作。如果用户需要输入额外数据才能完成支付（例如使用巴西的银行卡付款）或需要通过3-D Secure验证，请按照以下说明操作。
额外用户数据输入
- 添加支付UI表单容器。
Copy
- html
1<div id="form-container"></div>
- 添加
show_fields事件处理以显示新字段。
Copy
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- 创建用于输入额外数据的支付UI字段，例如持卡人姓名或账单地址。
Copy
- typescript
1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
2 this.form.fields = nextAction.data.fields;
3 this.updateForm(this.form);
4}
5
6private updateForm(form: Form): void {
7 const visibleFields = form.fields.filter((field) => {
8 return field.isVisible === '1';
9 });
10
11 const controls = visibleFields.map((field) => {
12 if (field.type === 'select') {
13 return this.getSelectControl(field);
14 }
15
16 if (field.type === 'check') {
17 return this.getCheckboxControl(field);
18 }
19
20 if (field.type === 'text') {
21 if (field.name === 'card_number') {
22 return this.getCardNumberControl(field);
23 }
24
25 if (field.name === 'phone') {
26 return this.getPhoneControl(field);
27 }
28
29 return this.getTextControl(field);
30 }
31
32 return null;
33 });
34
35 this.renderForm(controls);
36}
37
38private getSelectControl(field: Field): HTMLElement {
39 const control = new SelectComponent();
40 control.setAttribute('name', field.name);
41 return control;
42}
43
44private getCheckboxControl(field: Field): HTMLElement {
45 const control = new CheckboxComponent();
46 control.setAttribute('name', field.name);
47 return control;
48}
49
50private getCardNumberControl(field: Field): HTMLElement {
51 const control = new CardNumberComponent();
52 control.setAttribute('name', field.name);
53 control.setAttribute('icon', 'true');
54 return control;
55}
56
57private getPhoneControl(field: Field): HTMLElement {
58 const control = new PhoneComponent();
59 control.setAttribute('name', field.name);
60 control.setAttribute('showFlags', 'true');
61 return control;
62}
63
64private getTextControl(field: Field): HTMLElement {
65 const control = new TextComponent();
66 control.setAttribute('name', field.name);
67 return control;
68}
69
70private renderForm(controls: Array<HTMLElement | null>): void {
71 const formContainer = document.querySelector('#form-container');
72 formContainer.nativeElement.innerHTML = '';
73
74 controls.forEach((control) => {
75 if (!control) return;
76 formContainer.nativeElement.append(control);
77 });
78}
3-D Secure验证
本文对您的有帮助吗？
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。
