> For the complete documentation index, see [llms.txt](https://docs.coda.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.coda.co/codapay/hosted-component-integration/alternative-payment-methods/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.

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

### High-Level Flow Description

1. **Initiate Payment:** The user selects a payment method. Your backend creates the payment session by calling `POST /init.json` with the appropriate `payType` for the selected channel. Coda returns a Transaction ID and a Client Secret.
2. **Initialise SDK:** Using the `clientSecret` from your backend, initialise the CodaComponent SDK. The component renders the appropriate payment UI for the selected channel (e.g., a QR code, a wallet button, a redirect prompt, or an input field).
3. **State Monitoring:** Your frontend listens for state change events from the component. These events inform your UI about the current step in the payment flow, allowing you to adjust the surrounding experience accordingly.
4. **User Completes Payment:** Depending on the channel type, the user completes the payment within the component:
   * **QR code channels** (e.g., QRIS): The user scans the displayed QR code with their mobile app.
   * **Wallet buttons** (e.g., Google Pay, Apple Pay): The user clicks the wallet button and completes authentication in the wallet overlay.
   * **Redirect channels** (e.g., GCash): The user is temporarily redirected to the payment provider to authorise, then returned to your page.
   * **Input-based channels** (e.g., PIX): The user enters the required information (e.g., tax ID) and confirms.
5. **Notification:** Once the payment reaches a final state, Coda sends an asynchronous notification to your backend via webhook.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.coda.co/codapay/hosted-component-integration/alternative-payment-methods/how-it-works.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.