銀行カード

銀行カードによる決済を設定するには、基本設定手順に従います。ユーザーが支払いを完了するために追加データを入力する必要がある場合、例えばブラジルのカードで支払う場合や3-Dセキュア検証を通過する場合など、以下の指示に従ってください。

追加のユーザーデータ入力

決済UIフォームのコンテナを追加します。

例：

Copy

Full screen

Small screen

<div id="form-container"></div>

新しいフィールドの表示に関するshow_fieldsイベントの処理を追加します。

例：

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'show_fields':
      this.handleShowFieldsAction(nextAction);
  }
});

カード所有者の名前や請求先住所などの追加データを入力するための決済UIフィールドを作成します。

例：

Copy

Full screen

Small screen

private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
  this.form.fields = nextAction.data.fields;
  this.updateForm(this.form);
}

private updateForm(form: Form): void {
  const visibleFields = form.fields.filter((field) => {
    return field.isVisible === '1';
  });

  const controls = visibleFields.map((field) => {
    if (field.type === 'select') {
      return this.getSelectControl(field);
    }

    if (field.type === 'check') {
      return this.getCheckboxControl(field);
    }

    if (field.type === 'text') {
      if (field.name === 'card_number') {
        return this.getCardNumberControl(field);
      }

      if (field.name === 'phone') {
        return this.getPhoneControl(field);
      }

      return this.getTextControl(field);
    }

    return null;
  });

  this.renderForm(controls);
}

private getSelectControl(field: Field): HTMLElement {
  const control = new SelectComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCheckboxControl(field: Field): HTMLElement {
  const control = new CheckboxComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCardNumberControl(field: Field): HTMLElement {
  const control = new CardNumberComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('icon', 'true');
  return control;
}

private getPhoneControl(field: Field): HTMLElement {
  const control = new PhoneComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('showFlags', 'true');
  return control;
}

private getTextControl(field: Field): HTMLElement {
  const control = new TextComponent();
  control.setAttribute('name', field.name);
  return control;
}

private renderForm(controls: Array<HTMLElement | null>): void {
  const formContainer = document.querySelector('#form-container');
  formContainer.nativeElement.innerHTML = '';

  controls.forEach((control) => {
    if (!control) return;
    formContainer.nativeElement.append(control);
  });
}

3-Dセキュア検証

3-Dセキュア検証を通過した後、ユーザーがリダイレクトされる支払状況ページを作成します。例えば、https://example.com/return-page.html。
支払状況を表示するには、決済UIののHTMLマークアップにpsdk-statusコンポーネントを追加します。

例：

Copy

Full screen

Small screen

@if (showStatus) {
  <psdk-status></psdk-status>
}

決済UIを表示するページを作成します。例えば、https://example.com/form-page.htmlです。
決済方法IDとステータスページURLを指定して、決済UIを初期化します。

例：

Copy

Full screen

Small screen

await headlessCheckout.form.init({
  paymentMethodId: 1380, // Bank card payment ID
  returnUrl: 'http://example.com/return-page.html',
});

3-Dセキュア検証のために、ユーザーを外部ページへリダイレクトするredirectイベントの処理を追加してください。検証に成功すると、ユーザーは支払状況のページ（https://example.com/return-page.html）にリダイレクトされます。

例：

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'redirect':
      this.handleRedirectAction(nextAction);
  }
});

private handleRedirectAction(redirectAction: RedirectAction): void {
  const url = this.buildRedirectUrl(redirectAction);
  window.location.href = url; // redirect to 3-D Secure page
}

private buildRedirectUrl(redirectAction: RedirectAction): string {
  const url = new URL(redirectAction.data.redirect.redirectUrl);
  const params = Object.entries(redirectAction.data.redirect.data);
  params.forEach((entry) => {
    const [key, value] = entry;
    url.searchParams.append(key, value);
  });
  return url.toString();
}

3-Dセキュア検証に関する3DSイベントの処理を追加します。

例：

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    ...
    case '3DS': {
      show3DS = true;
    }
  }
});

3-Dセキュア検証を処理するには、決済UIののHTMLマークアップにpsdk-3dsコンポーネントを追加します。

例：

Copy

Full screen

Small screen

@if (show3DS) {
  <psdk-3ds></psdk-3ds>
}

ご意見ありがとうございました！

あなたのメッセージを確認し、体験を向上させるために利用させていただきます。

最終更新日: 2025年3月3日

誤字脱字などのテキストエラーを見つけましたか？テキストを選択し、Ctrl+Enterを押します。

Your browser is not supported. Please try a different browser

ヘッドレスチェックアウト

銀行カード

追加のユーザーデータ入力

3-Dセキュア検証