カスタム4桁クレジットカードフィールドをテンプレートAPI v1、v2、v3で実装する

手順の概要

ヘルプセンター のテンプレートAPI v1、v2、v3 を使用していて、 サポートリクエストフォームの一部としてクレジットカード番号を収集する場合は、標準のクレジットカードフィールドを使用します。このフィールドのデフォルトの動作では、ユーザーにクレジットカード番号全体を入力するように求め、フォームを送信する前に番号を墨消しして、下4桁を除くすべての数字を「X」に置き換えます。このフィールドの動作は、2025年3月31日に施行される新しい PCI DSS 要件と互換性がありません。

可能であれば 、テーマをテンプレートAPI v4にアップグレードします。このバージョンでは、旧バージョンのrequest_formヘルパーではなく、new_request_formヘルパー を使用します。テンプレートAPI v4にアップグレードできない場合は、v1、v2、またはv3のテーマにカスタムJavaScriptコードを記述することで、デフォルトのクレジットカードフィールドを、クレジットカード番号の最後の4桁の入力のみを要求する新しい入力フィールドに置き換えることができます。カードに入力します。

また、 管理センター でカスタムクレジットカードフィールドの ラベルまたは説明 を編集し、カード番号の下4桁のみを入力するようにユーザーに指示する必要があります。

カスタムクレジットカードフィールドの実装例

旧バージョンの request_formヘルパーでレンダリングされるデフォルトのクレジットカードフィールドは、次の要素で構成されます。

• フォームに値を追加する非表示の入力要素
• ユーザーに表示されるテキスト入力要素。ユーザーが要素をぼかしたりフォームを送信したりすると、入力した値は墨消しされます。墨消しされた値は非表示の入力に反映されます。

カスタムJavaScriptコードを記述することで、テキスト入力要素を、次のような新しい入力要素に置き換えることができます。

• クレジットカード番号の下4桁のみを質問し、
• 値が変更されるたびに、9～15の「X」の後に続く最後の4桁の数字で非表示の入力を更新

この方法では、ユーザーが最後の4桁の数字のみを入力することで、そのフォームはPCI DSSの対象から削除されます。フォームで送信された値は、墨消しされたクレジットカード番号のままです。

フォームがエラーのある送信の後または補足チケットが作成された後に表示される場合、入力には以前に入力した値（墨消し済み）が含まれます。たとえば、ユーザーがクレジットカードフィールドに値を入力し、エラーを発生させてフォームを送信すると、ページが再読み込みされ、フォームに次のような値でデフォルトのクレジットカードフィールドが表示されます。 XXXXXXXXX1234」でツリーベースの最大権限を有効にします。カスタムコードで、最後の4桁のデータを抽出し、新しい要素の値として設定する必要があります。

メモ：以下のコードは、ヘルプセンターのテーマのscript.jsファイルに追加できる実装の例として機能します。このコードは、すべてのカスタムテーマで動作することを保証するわけではありません。カスタマイズされるため、Zendeskは標準のCopenhagenテーマv4のみをサポートするため、このテーマに関するサポートは提供しません。

// 4 digits credit card field
document.addEventListener("DOMContentLoaded", function () {
  // Select all text inputs with the class 'partialcreditcardinputfield'
  const inputFields = 
document.querySelectorAll(".partialcreditcardinputfield");

  inputFields.forEach((originalInput) => {
    // Locate the adjacent hidden input
    const parentElement = originalInput.parentElement;
    const hiddenInput = parentElement.querySelector(
      ".partialcreditcardhiddenfield"
    );

    if (hiddenInput) {
      // Get the relevant attributes from the original input
      const id = originalInput.id;
      const className = originalInput.className;
      const ariaRequired = originalInput.getAttribute("aria-required");
      const ariaLabelledby = originalInput.getAttribute("aria-labelledby");

      // Create the new input element
      const newInput = document.createElement("input");
      newInput.type = "text";
      newInput.id = id;
      newInput.className = className;
      newInput.setAttribute("aria-required", ariaRequired);
      newInput.setAttribute("aria-labelledby", ariaLabelledby);
      newInput.setAttribute("maxlength", "4");
      newInput.value = originalInput.value
        ? originalInput.value.replaceAll("X", "")
        : "";

      // Add the input event listener to update the hidden input
      newInput.addEventListener("input", function (event) {
        const value = event.target.value;
        hiddenInput.value = `XXXXXXXXX${value}`;
      });

      // Replace the original input with the new one
      parentElement.replaceChild(newInput, originalInput);
    }
  });
});

翻訳に関する免責事項：この記事は、お客様の利便性のために自動翻訳ソフ トウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性につ いては保証いたしません。

翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事 を参照してください。