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

# Component Architecture Explorer — Android

> Explore the Android Checkout Compose component hierarchy and customization points interactively.

Explore the Android Checkout Compose component hierarchy interactively. Click on any composable to see its parameters, available states, and copyable Kotlin code examples.

Component Hierarchy

**PrimerCheckoutHost**

Ready state → Payment Methods

**PrimerCardForm**

**CardDetailsContent**

**CardNumberField**

**ExpiryField**

**CvvField**

**CardholderField**

**CardNetworkField**

**BillingAddressContent**

**SubmitButton**

Composable

card
Type label

field
Input field

Component Details

***

## Key State Types

### PrimerCheckoutState

| State | Description |
| - | - |
| `Loading` | Checkout is initializing |
| `Ready` | Payment methods available (contains `clientSession`) |
| `Success` | Payment completed (contains `checkoutData`) |
| `Failure` | Payment failed (contains `error`) |

### PrimerCardFormController.State

| Property | Type | Description |
| - | - | - |
| `cardFields` | `CardFields` | Card field values and validation |
| `billingFields` | `BillingFields` | Billing address field values |
| `fieldErrors` | `List<SyncValidationError>?` | Validation errors (each with `inputElementType`, `errorId`, `fieldId`, `errorResId`) |
| `data` | `CardFormData` | Aggregated form data |
| `isLoading` | `Boolean` | Whether form is processing |
| `isFormValid` | `Boolean` | Whether all required fields are valid |
| `networkSelection` | `NetworkSelection` | Co-badged card network info |

### NetworkSelection

| Property | Type | Description |
| - | - | - |
| `selectedNetwork` | `CardNetwork?` | Currently selected network |
| `availableNetworks` | `List<CardNetwork>` | Available networks for this card |
| `isNetworkSelectable` | `Boolean` | Whether user can choose network |

***

## Related

* [Card Form Layout Builder](https://primer.io/docs/checkout/primer-checkout/build-your-ui/card-form-layout-builder.md) — Interactive card form builder
* [Design Tokens Explorer](https://primer.io/docs/checkout/primer-checkout/build-your-ui/design-tokens-explorer-android.md) — Android theme token explorer


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.