銀行カード
銀行カードによる決済を設定するには、基本設定手順に従います。ユーザーが支払いを完了するために追加データを入力する必要がある場合、例えばブラジルのカードで支払う場合や3-Dセキュア検証を通過する場合など、以下の指示に従ってください。
追加のユーザーデータ入力
- 決済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フィールドを作成します。
注意
submitButtonTextフィールドを使用すると、続けるなど、決済フォームの各ステップにおけるデフォルトのボタン文言を設定できます。Copy
- typescript
1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
2 this.form.fields = nextAction.data.fields;
3 if (nextAction.data.submitButtonText) {
4 this.updateSubmitButton(nextAction.data.submitButtonText);
5 }
6 this.updateForm(this.form);
7}
8
9private updateForm(form: Form): void {
10 const visibleFields = form.fields.filter((field) => {
11 return field.isVisible === '1';
12 });
13
14 const controls = visibleFields.map((field) => {
15 if (field.type === 'select') {
16 return this.getSelectControl(field);
17 }
18
19 if (field.type === 'check') {
20 return this.getCheckboxControl(field);
21 }
22
23 if (field.type === 'text') {
24 if (field.name === 'card_number') {
25 return this.getCardNumberControl(field);
26 }
27
28 if (field.name === 'phone') {
29 return this.getPhoneControl(field);
30 }
31
32 return this.getTextControl(field);
33 }
34
35 return null;
36 });
37
38 this.renderForm(controls);
39}
40
41private getSelectControl(field: Field): HTMLElement {
42 const control = new SelectComponent();
43 control.setAttribute('name', field.name);
44 return control;
45}
46
47private getCheckboxControl(field: Field): HTMLElement {
48 const control = new CheckboxComponent();
49 control.setAttribute('name', field.name);
50 return control;
51}
52
53private getCardNumberControl(field: Field): HTMLElement {
54 const control = new CardNumberComponent();
55 control.setAttribute('name', field.name);
56 control.setAttribute('icon', 'true');
57 return control;
58}
59
60private getPhoneControl(field: Field): HTMLElement {
61 const control = new PhoneComponent();
62 control.setAttribute('name', field.name);
63 control.setAttribute('showFlags', 'true');
64 return control;
65}
66
67private getTextControl(field: Field): HTMLElement {
68 const control = new TextComponent();
69 control.setAttribute('name', field.name);
70 return control;
71}
72
73private renderForm(controls: Array<HTMLElement | null>): void {
74 const formContainer = document.querySelector('#form-container');
75 formContainer.nativeElement.innerHTML = '';
76
77 controls.forEach((control) => {
78 if (!control) return;
79 formContainer.nativeElement.append(control);
80 });
81}
3-Dセキュア検証
3-Dセキュア認証は、アクワイアラの組み込みメカニズム、またはカード所有者を認証し、その結果をアクワイアラーに転送する外部マーチャントプラグイン（MPI）のいずれかを介して処理できます。
アクワイアラの内蔵メカニズムで認証を行う場合、ユーザーは外部URLにリダイレクトされます。このシナリオでは、redirectイベントの処理を設定する必要があります。
MPIを介した認証は、WebSocketsを使用するpsdk-3dsコンポーネントで実装されます。この認証プロセスではトランザクションを確認するための追加のユーザーアクションが必要になるため、正しく機能させるには3DSイベントの処理を設定する必要があります。
認証タイプの選択は、ユーザーの銀行に依存します。
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
