기본서식 작성 API v1, v2 또는 v3에서 사용자 지정 4자리 신용카드 필드 구현

개요

헬프 센터 기본서식작성 API v1, v2 또는 v3를 사용하고지원 요청 양식의 일부로 신용카드 번호를 수집하는 경우에는 표준 신용카드 필드를 사용하는 것입니다. 이 필드의 기본 동작은 사용자에게 전체 신용카드 번호를 입력하도록 요청한 다음 양식을 제출하기 전에 번호를 삭제하여 마지막 4자리를 제외한 모든 숫자를 “X”로 바꿉니다. 이 필드 동작은 2025년 3월 31일부터 발효되는 새로운PCI DSS요구 사항과 호환되지 않습니다.

가능하다면 레거시 request_form 헬퍼 대신new_request_form 헬퍼를 사용하는 기본서식작성 API v4로 테마를 업그레이드하세요. 기본서식 작성 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는 번역의 정확성을 보장하지 않습니다.

번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.