Skip to main content
Pre-populate the cardholder name field with data from your user’s profile to reduce friction at checkout.

​
Recipe

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

  const user = getAuthenticatedUser();
  if (user?.fullName) {
    primer.setCardholderName(user.fullName);
  }
});

​
How it works

  1. Listen for the primer:ready event to access the Primer SDK instance
  2. Retrieve the user’s name from your authentication system or profile data
  3. Call primer.setCardholderName() with the name value
When using setCardholderName(), you don’t need to include the <primer-input-cardholder-name> component in your form if you don’t want users to edit the name.

​
Variations

​
Pre-fill from shipping address

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

  // Get name from shipping form
  const shippingName = document.getElementById('shipping-name').value;
  if (shippingName) {
    primer.setCardholderName(shippingName);
  }
});

​
Pre-fill with editable field

If you want to pre-fill but still allow editing, include the cardholder name input and set an initial value: 
checkout.addEventListener('primer:ready', (event) => {
  const primer = event.detail;
  const user = getAuthenticatedUser();

  if (user?.fullName) {
    // Pre-fill the value
    primer.setCardholderName(user.fullName);

    // The <primer-input-cardholder-name> component will show this value
    // and users can still edit it
  }
});

​
See also