Pre-fill cardholder name

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

Recipe

Web
Android
iOS

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

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

val checkout = rememberPrimerCheckoutController(clientToken)
val cardFormController = rememberCardFormController(checkout)

LaunchedEffect(cardFormController) {
    cardFormController.updateCardholderName(userProfile.fullName)
}

PrimerCheckout(
  clientToken: clientToken,
  scope: { checkoutScope in
    if let cardScope: PrimerCardFormScope = checkoutScope.getPaymentMethodScope(PrimerCardFormScope.self) {
      cardScope.updateCardholderName(userProfile.fullName)
    }
  }
)

How it works

Web
Android
iOS

Listen for the primer:ready event to access the Primer SDK instance
Retrieve the user’s name from your authentication system or profile data
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.

Create a PrimerCardFormController using rememberCardFormController()
Call updateCardholderName() with the user’s name inside a LaunchedEffect
The field will display the prefilled name and the user can edit it if needed

updateCardholderName() sets the field value programmatically. The customer can still edit the prefilled name. The same approach works for other fields — use updateCardNumber(), updateExpiryDate(), or updateCvv() as needed.

Access PrimerCardFormScope via getPaymentMethodScope() in the scope closure
Call updateCardholderName() with the user’s name
The field displays the prefilled name and the user can still edit it

The same approach works for other fields — use updateCardNumber(), updateExpiryDate(), or updateCvv() as needed.

Variations

Pre-fill from shipping address

Web
Android
iOS

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);
  }
});

LaunchedEffect(cardFormController) {
    cardFormController.updateCardholderName(shippingAddress.fullName)
}

PrimerCheckout(
  clientToken: clientToken,
  scope: { checkoutScope in
    if let cardScope: PrimerCardFormScope = checkoutScope.getPaymentMethodScope(PrimerCardFormScope.self) {
      let fullName = "\(shippingAddress.firstName) \(shippingAddress.lastName)"
      cardScope.updateCardholderName(fullName)
    }
  }
)

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:

Web
Android
iOS

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
  }
});

PrimerCheckoutHost(
    checkout = checkout,
    onEvent = { event ->
        when (event) {
            is PrimerCheckoutEvent.Success -> { }
            is PrimerCheckoutEvent.Failure -> { }
        }
    },
) {
    val cardFormController = rememberCardFormController(checkout)

    LaunchedEffect(cardFormController) {
        cardFormController.updateCardholderName(userProfile.fullName)
    }

    PrimerCardForm(
        controller = cardFormController,
        cardDetails = {
            Column {
                CardFormDefaults.CardholderField(cardFormController)
                Spacer(Modifier.height(8.dp))
                CardFormDefaults.CardNumberField(cardFormController)
                Spacer(Modifier.height(8.dp))
                Row(Modifier.fillMaxWidth()) {
                    CardFormDefaults.ExpiryField(
                        cardFormController,
                        Modifier.weight(1f),
                    )
                    Spacer(Modifier.width(8.dp))
                    CardFormDefaults.CvvField(
                        cardFormController,
                        Modifier.weight(1f),
                    )
                }
            }
        },
    )
}

Pre-fill the name and include PrimerCardholderNameField so users can edit it:

PrimerCheckout(
  clientToken: clientToken,
  scope: { [userProfile] checkoutScope in
    if let cardScope: PrimerCardFormScope = checkoutScope.getPaymentMethodScope(PrimerCardFormScope.self) {
      cardScope.updateCardholderName(userProfile.fullName)

      cardScope.screen = { scope in
        AnyView(
          VStack(spacing: 16) {
            scope.PrimerCardholderNameField(label: "Name on card", styling: nil)
            scope.PrimerCardNumberField(label: "Card number", styling: nil)
            HStack(spacing: 12) {
              scope.PrimerExpiryDateField(label: "Expiry", styling: nil)
              scope.PrimerCvvField(label: "CVV", styling: nil)
            }
          }
          .padding()
        )
      }
    }
  }
)

Build a custom card form

Step-by-step guide to building a fully custom card form

SDK options

All available SDK configuration options

Checkout

​Recipe

​How it works

​Variations

​Pre-fill from shipping address

​Pre-fill with editable field

​See also

Build a custom card form

SDK options

Recipe

How it works

Variations

Pre-fill from shipping address

Pre-fill with editable field

See also