Example of toggling payment type

Payment Method Selection

<div class="method-selectors">
  <span capability="PLACEMENT_CAPABILITY_CARD_FORM">
    <label>
      <input type="radio" name="methodType" value="PLACEMENT_CAPABILITY_CARD_FORM"/>
      <span data-chargehive="cardMarks" highlight></span>
    </label>
  </span>

  <span capability="PLACEMENT_CAPABILITY_APPLE_PAY">
    <label>
      <input type="radio" name="methodType" value="PLACEMENT_CAPABILITY_APPLE_PAY"/>
      <span data-chargehive="applepayMark"></span>
    </label>
  </span>
</div>

Payment Method Input

<div class="input-containers">
  <div capability="PLACEMENT_CAPABILITY_CARD_FORM">
    <label class="ch-field-label">Credit card number</label>
    <div class="ch-field-placeholder">
      <span data-chargehive="cardName"></span>
      <div class="ch-field-group ch-nowrap">
        <span data-chargehive="cardBrand"></span>
        <span data-chargehive="cardNum"></span>
      </div>
      <span data-chargehive="cardExp"></span>
      <span data-chargehive="cardCvv"></span>
    </div>
  </div>
</div>

ChargeHive event handlers

<script>
  ChargeHive.addEventListener(ChargeHive.events.ON_INIT, function (event)
  {
    document.querySelectorAll('[capability]').forEach(
      function (e)
      {
        if(event.detail.Capabilities.indexOf(e.getAttribute('capability')) > -1)
        {
          e.classList.add('available');
        }
      });
  });

  document.addEventListener('change', function (e)
  {
    if(e.target.matches('[name="methodType"]'))
    {
      ChargeHive.setPaymentMethodType(e.target.value);
    }
  });

  ChargeHive.addEventListener(ChargeHive.events.ON_METHOD_TYPE_CHANGE, function (event)
  {
    document.querySelector('input[name="methodType"][value="' + event.detail.type + '"]').checked = true;
    document.querySelectorAll('.input-containers [capability]').forEach(
      function (e)
      {
        console.log(e);
        if(e.getAttribute('capability') !== event.detail.type)
        {
          e.classList.remove('active');
        }
      });
    const active = document.querySelector('.input-containers [capability=' + event.detail.type + ']');
    if(active)
    {
      active.classList.add('active');
    }
  });

Supporting CSS

.method-selectors [capability],
.input-containers [capability] {
  display: none;
}

.method-selectors [capability].available,
.input-containers [capability].active {
  display: block;
}