> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Pre-fill cardholder name

> Automatically fill in the cardholder name from user profile data.

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

## Recipe

<Tabs>
  <Tab title="Web">
    ```javascript theme={"dark"}
    checkout.addEventListener('primer:ready', (event) => {
      const primer = event.detail;

      const user = getAuthenticatedUser();
      if (user?.fullName) {
        primer.setCardholderName(user.fullName);
      }
    });
    ```
  </Tab>

  <Tab title="Android">
    ```kotlin theme={"dark"}
    val checkout = rememberPrimerCheckoutController(clientToken)
    val cardFormController = rememberCardFormController(checkout)

    LaunchedEffect(cardFormController) {
        cardFormController.updateCardholderName(userProfile.fullName)
    }
    ```
  </Tab>

  <Tab title="iOS">
    ```swift theme={"dark"}
    PrimerCheckout(
      clientToken: clientToken,
      scope: { checkoutScope in
        if let cardScope: PrimerCardFormScope = checkoutScope.getPaymentMethodScope(PrimerCardFormScope.self) {
          cardScope.updateCardholderName(userProfile.fullName)
        }
      }
    )
    ```
  </Tab>
</Tabs>

## How it works

<Tabs>
  <Tab title="Web">
    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

    <Info>
      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.
    </Info>
  </Tab>

  <Tab title="Android">
    1. Create a `PrimerCardFormController` using `rememberCardFormController()`
    2. Call `updateCardholderName()` with the user's name inside a `LaunchedEffect`
    3. The field will display the prefilled name and the user can edit it if needed

    <Note>
      `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.
    </Note>
  </Tab>

  <Tab title="iOS">
    1. Access `PrimerCardFormScope` via `getPaymentMethodScope()` in the scope closure
    2. Call `updateCardholderName()` with the user's name
    3. The field displays the prefilled name and the user can still edit it

    <Note>
      The same approach works for other fields -- use `updateCardNumber()`, `updateExpiryDate()`, or `updateCvv()` as needed.
    </Note>
  </Tab>
</Tabs>

## Variations

### Pre-fill from shipping address

<Tabs>
  <Tab title="Web">
    ```javascript theme={"dark"}
    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);
      }
    });
    ```
  </Tab>

  <Tab title="Android">
    ```kotlin theme={"dark"}
    LaunchedEffect(cardFormController) {
        cardFormController.updateCardholderName(shippingAddress.fullName)
    }
    ```
  </Tab>

  <Tab title="iOS">
    ```swift theme={"dark"}
    PrimerCheckout(
      clientToken: clientToken,
      scope: { checkoutScope in
        if let cardScope: PrimerCardFormScope = checkoutScope.getPaymentMethodScope(PrimerCardFormScope.self) {
          let fullName = "\(shippingAddress.firstName) \(shippingAddress.lastName)"
          cardScope.updateCardholderName(fullName)
        }
      }
    )
    ```
  </Tab>
</Tabs>

### 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:

<Tabs>
  <Tab title="Web">
    ```javascript theme={"dark"}
    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
      }
    });
    ```
  </Tab>

  <Tab title="Android">
    ```kotlin theme={"dark"}
    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),
                        )
                    }
                }
            },
        )
    }
    ```
  </Tab>

  <Tab title="iOS">
    Pre-fill the name and include `PrimerCardholderNameField` so users can edit it:

    ```swift theme={"dark"}
    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()
            )
          }
        }
      }
    )
    ```
  </Tab>
</Tabs>

## See also

<CardGroup cols={2}>
  <Card title="Build a custom card form" icon="credit-card" href="/checkout/primer-checkout/guides-and-recipes/build-custom-card-form">
    Step-by-step guide to building a fully custom card form
  </Card>

  <Card title="SDK options" icon="gear" href="/checkout/primer-checkout/configuration/sdk-options">
    All available SDK configuration options
  </Card>
</CardGroup>