To show different amounts when users select one-off vs recurring you can use the following code:

1. Copy the code to your form’s Advanced tab in the Code end body section
2. Update the numbers given for oneoffAmounts and recurringAmounts to choose the amounts to show in each case (the amounts must exist on your form - add them on the Basic Details tab)

<script>
  /* Show amount options based on frequency choice */
  const frequencyOptions = document.forms.paymentForm.elements.frequencyOptions,
        amountBtns       = [...document.querySelectorAll("[name=amountOptions]:not([value=other])")],
        oneoffAmounts    = [ 50, 100, 250, 500 ],
        recurringAmounts = [ 10, 25, 50, 100 ],
        oneoffBtns       = amountBtns.filter(el => oneoffAmounts.includes(parseInt(el.value, 10))),
        recurringBtns    = amountBtns.filter(el => recurringAmounts.includes(parseInt(el.value, 10)));

  function updateVisibleOptions() {
    amountBtns.forEach(el => { el.parentNode.classList.add('d-none'); el.checked = false });
    if (frequencyOptions.value == 'one-off') {
      oneoffBtns.forEach(el => el.parentNode.classList.remove('d-none'));
    } else {
      recurringBtns.forEach(el => el.parentNode.classList.remove('d-none'));
    }
  }

  frequencyOptions.forEach(el => el.addEventListener('change', updateVisibleOptions));
  updateVisibleOptions();
</script>

Need more help? Not to worry! Just email our support team at [email protected] 🙂