Card Number Input

<primer-card-form>
  <primer-input-card-number></primer-input-card-number>
</primer-card-form>

<primer-input-card-number
  label="Credit Card Number"
  placeholder="Enter your card number"
  aria-label="Your credit card number"
></primer-input-card-number>

<primer-input-card-number placeholder=""></primer-input-card-number>

<primer-card-form>
  <div slot="card-form-content">
    <primer-input-card-number></primer-input-card-number>
    <div style="display: flex; gap: 8px;">
      <primer-input-card-expiry></primer-input-card-expiry>
      <primer-input-cvv></primer-input-cvv>
    </div>
    <button type="submit">Pay</button>
  </div>
</primer-card-form>

const cardForm = document.querySelector('primer-card-form');

cardForm.addEventListener('primer:card-error', (event) => {
  const { errors } = event.detail;
  errors.forEach(err => console.log(err.field, err.message));
});