---
id: card-form
title: Card Form
description: Card entry sub-component for Modular Checkout layouts with shared validation and token orchestration.
sidebar_position: 2
---
import {
CodeBlock,
PropsMarkdownTable,
PartsMarkdownTable,
getWebcomponentsVersion,
getComponentParts,
getPropsFromDocs,
} from '../../helpers';
import docsJson from '../../docs.json';
import componentTreeJson from '../../component-tree.json';
## Overview
Renders a form for collecting credit and debit card details as part of a checkout flow.
This component is **designed to be used within** the `justifi-modular-checkout` and **does not accept props directly**. Instead, it relies on shared state passed through the Stencil Store, managed by the wrapper component.
> **Note:** If you are using the card payment method, you also need to provide billing information. This can be done by using either the `justifi-billing-form-full` component for complete billing address, the `justifi-card-billing-form-simple` component for ZIP code only, or by passing the `billingInformation` object as an argument to the `submitCheckout` method called on the wrapper. The `billingInformation` object can contain all the fields or just the `address_postal_code` field.
**Authorization** and business context are also handled by `justifi-modular-checkout`, which manages authentication tokens and related configuration.
This component exposes **no public methods or properties** and is not intended for standalone use.
## Usage
{`
justifi-card-form
`}
## Props, Events & Methods
### Events
All submit and error events bubble through the parent ``, so no additional listeners are required on the card form.
## Theming & Layout
- When embedded inside cards, wrap the host element in your layout container and scope typography overrides via the parts listed below.
- Use the `card-form` CSS part (`::part(card-form)`) to apply box shadows or wrapper padding.