Payment Method Component

<primer-checkout client-token="your-token">
  <primer-main slot="main">
    <div slot="payments">
      <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
      <primer-payment-method type="PAYPAL"></primer-payment-method>
      <primer-payment-method type="GOOGLE_PAY"></primer-payment-method>
    </div>
  </primer-main>
</primer-checkout>

<primer-payment-method type="PAYPAL" disabled></primer-payment-method>

checkout.addEventListener('primer:methods-update', (event) => {
  const methods = event.detail.toArray();
  const container = document.getElementById('payment-methods');
  
  methods.forEach(method => {
    const el = document.createElement('primer-payment-method');
    el.setAttribute('type', method.type);
    container.appendChild(el);
  });
});

checkout.addEventListener('primer:state-change', (event) => {
  document.querySelectorAll('primer-payment-method').forEach(pm => {
    event.detail.isProcessing 
      ? pm.setAttribute('disabled', '') 
      : pm.removeAttribute('disabled');
  });
});

const checkout = document.querySelector('primer-checkout');

checkout.addEventListener('primer:methods-update', (event) => {
  const methods = event.detail.toArray();
  const available = methods.map(m => m.type);

  // Only render methods that are available for this checkout
  available.forEach(type => {
    const el = document.createElement('primer-payment-method');
    el.setAttribute('type', type);
    document.getElementById('methods').appendChild(el);
  });
});

checkout.options = {
  card: {
    cardholderName: { required: true }
  },
  googlePay: {
    buttonTheme: 'dark',
    buttonType: 'buy'
  }
};