표시 통화 사용자 정의

JavaScript 통합에서 통화 표시 형식을 사용자 정의하여 외화의 표현을 필요와 선호에 맞게 조정할 수 있습니다.

통화 표시 형식 

Hello는 다음과 같은 통화 표시 형식을 지원합니다:

• symbol (기본값) - 지역화된 통화 기호를 표시합니다, 예: €123.
• code - ISO 통화 코드를 사용합니다, 예: 123 USD.
• name - 지역화된 통화 이름을 표시합니다, 예: 123 달러.

Zonos.init 메서드에서 overrideCurrencyFormat 속성을 사용하여 통화 표시 형식을 재정의할 수 있습니다. 이 속성은 위에 나열된 통화 표시 형식 중 하나를 허용합니다. 통화 표시 형식을 재정의하면 Hello와 Zonos Checkout 모두에 적용됩니다.

Zonos.init({
  overrideCurrencyFormat: 'code',
});

사용자 정의 통화 변환기 사용하기 

사이트의 요구 사항에 따라 단순히 통화 표시 형식을 재정의하는 것으로는 충분하지 않은 경우, 외화 금액의 변환 및 형식을 처리하기 위해 사용자 정의 통화 변환기를 사용할 수 있습니다. 이 접근 방식은 사이트에서 통화 금액이 표시되는 방식을 완전히 제어할 수 있게 해줍니다.

사용자 정의 통화 변환기를 사용하려면 Zonos.init 메서드에서 currencyConverter 함수를 구현해야 합니다. 이 함수는 다음 매개변수를 받아야 합니다:

• convertAndFormat - 통화 금액을 변환하고 형식화하는 함수입니다.
• originalAmount - 원래 통화 금액입니다.
• selector - 통화 금액이 포함된 요소의 선택자입니다.

currencyConverter 함수가 존재하면, 사이트의 모든 일치하는 가격 선택자에 대해 루프를 돌며 각 선택자에 사용자 정의 통화 변환 논리를 적용합니다.

사용자 정의 통화 변환기 함수를 사용하는 일반적인 사용 사례 중 하나는 드롭다운 메뉴나 기타 복잡한 HTML 요소에 가격이 표시되는 경우입니다. 예를 들어, 각 옵션 옆에 가격이 표시된 드롭다운 메뉴가 있는 경우:

<select title="Option">
  <option className="money" data-select-option="Blue" value="option1">
    Blue - $1.99
  </option>
  <option className="money" data-select-option="Red" value="option2">
    Red - $2.00
  </option>
  <option className="money" data-select-option="Yellow" value="option3">
    Yellow - $3.59
  </option>
</select>

이런 경우에는 가격을 직접 선택할 수 없습니다. 그 옆에 추가 텍스트가 있기 때문입니다. 사용자 정의 통화 변환기를 사용하여 요소에서 가격을 추출하고 통화 변환 로직을 적용할 수 있습니다.

window.Zonos.init({
  currencyConverter: ({ convertAndFormat, originalAmount, selector }) => {
    const optionValue = selector.getAttribute('data-select-option');
    if (optionValue) {
      return `${optionValue} -  ${convertAndFormat(originalAmount)}`;
    }
    return convertAndFormat(originalAmount);
  },
});