> ## 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. # PrimerCardForm > Composable component that renders a complete card payment form with customizable slots export const ComponentHierarchyBox = ({data}) => { const colors = { root: { border: '#3b82f6', text: '#3b82f6' }, layout: { border: '#8b5cf6', text: '#8b5cf6' }, container: { border: '#6b7280', text: '#6b7280' }, form: { border: '#10b981', text: '#10b981' }, input: { border: '#f59e0b', text: '#f59e0b' }, action: { border: '#ef4444', text: '#ef4444' }, error: { border: '#ef4444', text: '#ef4444' }, utility: { border: '#6b7280', text: '#6b7280' } }; const renderNode = (node, depth = 0) => { const color = colors[node.type] || colors.container; const isLeaf = !node.children || node.children.length === 0; const borderStyle = node.conditional ? 'dashed' : 'solid'; return
0 ? '12px' : '0' }}>
{node.name} {node.badge && {node.badge} } {node.note && {node.note} }
{node.children &&
{node.children.map(child => { if (child.inline) { const childBorderStyle = child.conditional ? 'dashed' : 'solid'; return
{child.name} {child.note && {child.note} }
; } return renderNode(child, depth + 1); })}
} {node.fullWidth &&
{node.fullWidth.map(item =>
{item.name}
)}
} {node.grid &&
{node.grid.map(item =>
{item.name}
)}
} {node.bottomFullWidth &&
{node.bottomFullWidth.map(item =>
{item.name}
)}
} {node.bottomGrid &&
{node.bottomGrid.map(item =>
{item.name}
)}
}
; }; return
{renderNode(data)}
; }; Primer Checkout Android SDK is currently in **beta** (v3.0.0-beta.4). The API is subject to change before the stable release. Composable that renders a card payment form with card details, optional billing address, and submit button. Each section is a slot parameter you can replace. ## Signature ```kotlin theme={"dark"} @Composable fun PrimerCardForm( controller: PrimerCardFormController, modifier: Modifier = Modifier, cardDetails: @Composable () -> Unit = { CardFormDefaults.CardDetailsContent(controller) }, billingAddress: @Composable () -> Unit = { CardFormDefaults.BillingAddressContent(controller) }, submitButton: @Composable () -> Unit = { CardFormDefaults.SubmitButton(controller) }, ) ``` ## Parameters | Parameter | Type | Default | Description | | ---------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------ | | `controller` | [`PrimerCardFormController`](/docs/sdk/android-checkout/v3.0.0-beta/api/card-form/card-form-controller) | Required | Controller managing form state, validation, and submission | | `modifier` | `Modifier` | `Modifier` | Modifier applied to the root container | | `cardDetails` | `@Composable () -> Unit` | `CardFormDefaults.CardDetailsContent(controller)` | Slot for card input fields (number, expiry, CVV, cardholder name) | | `billingAddress` | `@Composable () -> Unit` | `CardFormDefaults.BillingAddressContent(controller)` | Slot for billing address fields. Only rendered when required by session. | | `submitButton` | `@Composable () -> Unit` | `CardFormDefaults.SubmitButton(controller)` | Slot for the submit/pay button | ## Default layout