Kustomisasi mata uang tampilan

Anda dapat menyesuaikan presentasi mata uang asing sesuai kebutuhan dan preferensi Anda dengan mengkustomisasi format tampilan mata uang dalam integrasi JavaScript Anda.

Format tampilan mata uang 

Hello mendukung format tampilan mata uang berikut:

• symbol (default) - Tampilkan simbol mata uang lokal (misalnya €123).
• code - Gunakan kode mata uang ISO (misalnya 123 USD).
• name - Tampilkan nama mata uang lokal (misalnya 123 dolar).

Anda dapat mengganti format tampilan mata uang dengan menggunakan properti overrideCurrencyFormat dalam metode Zonos.init. Properti ini menerima salah satu format tampilan mata uang yang tercantum di atas. Mengganti format tampilan mata uang berlaku untuk Hello dan Zonos Checkout.

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

Menggunakan konverter mata uang kustom 

Untuk kasus ketika sekadar mengganti format tampilan mata uang tidak cukup untuk kebutuhan situs Anda, Anda dapat menggunakan konverter mata uang kustom untuk menangani konversi dan pemformatan jumlah mata uang asing. Pendekatan ini memungkinkan Anda memiliki kontrol penuh atas bagaimana jumlah mata uang ditampilkan di situs Anda.

Untuk menggunakan konverter mata uang kustom, Anda perlu mengimplementasikan fungsi currencyConverter dalam metode Zonos.init. Fungsi ini harus menerima parameter berikut:

• convertAndFormat - Sebuah fungsi yang mengonversi dan memformat jumlah mata uang.
• originalAmount - Jumlah mata uang asli.
• selector - Selector elemen yang berisi jumlah mata uang.

Ketika ada, fungsi currencyConverter akan melakukan loop melalui semua selector harga yang cocok di situs Anda dan menerapkan logika konversi mata uang kustom ke masing-masing.

Salah satu kasus penggunaan umum untuk menggunakan fungsi konverter mata uang kustom adalah ketika Anda memiliki harga yang ditampilkan dalam menu dropdown atau elemen HTML kompleks lainnya. Misalnya, jika Anda memiliki menu dropdown dengan harga yang ditampilkan di samping setiap opsi, seperti:

<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>

Dalam kasus seperti ini, Anda tidak dapat langsung memilih harga karena ada teks tambahan di sampingnya. Dengan menggunakan konverter mata uang kustom, Anda dapat mengekstrak harga dari elemen tersebut dan menerapkan logika konversi mata uang padanya.

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