> For the complete documentation index, see [llms.txt](https://coda-payments.gitbook.io/coda-public-technical-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coda-payments.gitbook.io/coda-public-technical-documentation/codapay/hosted-component-integration/cards/how-it-works.md).

# How It Works

This section describes the high-level payment flow when using the Card Payment Hosted Component. The sequence illustrates how the Hosted Component participates in the broader card transaction lifecycle.

<figure><img src="https://611292228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl56STCN5yoV1K1MhVEvU%2Fuploads%2FML9GA6WNjzDZX9RsMNrC%2FScreenshot%202026-03-05%20at%2010.03.32%E2%80%AFAM.png?alt=media&amp;token=345b7ba6-94f5-491a-bfe7-75565fdcb027" alt=""><figcaption></figcaption></figure>

#### High-Level Flow Description

1. **Initiate Payment:** The user starts a payment. Your backend [creates the payment session by calling `POST /init.json`](/coda-public-technical-documentation/codapay/hosted-component-integration/cards/initiate-a-payment-request.md). Coda returns a Transaction ID and a Client Secret.
2. **Initialize SDK**: Using the `clientSecret` from your backend, [initialize the Hosted Component SDK](/coda-public-technical-documentation/codapay/hosted-component-integration/cards/interact-with-the-codacard-sdk.md). The card form is rendered securely in the checkout container.
3. **Readiness Monitoring:** Your frontend listens for the [`isReady` state](/coda-public-technical-documentation/codapay/hosted-component-integration/cards/interact-with-the-codacard-sdk.md#on-event-callback). This informs your UI when the user has filled in all required fields.
4. **Submission:** When the user clicks your "Pay" button, your frontend invokes [the SDK’s `submit()` method](/coda-public-technical-documentation/codapay/hosted-component-integration/cards/interact-with-the-codacard-sdk.md#submit), which forwards the sensitive data directly to Coda.
5. **Authentication (If required)**: If the card requires 3D Secure or additional authentication, the component opens a secure modal for the user to complete the flow.
6. **Notification:** Once successful, the payment is transitionned to a `SUCCESS` state and sends a notification to your backend.