Cardholder Name Input

<primer-card-form>
  <primer-input-card-holder-name></primer-input-card-holder-name>
</primer-card-form>

<primer-input-card-holder-name
  label="Name on Card"
  placeholder="Enter your full name"
  aria-label="Full name as it appears on your card"
></primer-input-card-holder-name>

<primer-card-form>
  <div slot="card-form-content">
    <primer-input-card-holder-name></primer-input-card-holder-name>
    <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>

checkout.options = {
  card: {
    cardholderName: {
      visible: true,      // Show field (default: true)
      required: true,     // Make required (default: true)
      defaultValue: ''    // Pre-fill value
    }
  }
};

checkout.options = {
  card: {
    cardholderName: {
      defaultValue: 'John Doe'
    }
  }
};

checkout.addEventListener('primer:ready', (event) => {
  const primer = event.detail;
  primer.setCardholderName('John Doe');
});