> 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/integration-guide.md).
# Integration Guide
This guide walks you through the implementation of the Hosted Component. Before you begin, ensure you have your `apiKey` and `projectId` ready.
### Prerequisites
* **HTTPS:** Your checkout page must be served over HTTPS with TLS 1.2 or higher
* **Backend Endpoint:** You must have a server-side endpoint capable of receiving webhooks notifications
* **API Credentials:** A valid `apiKey` and `projectId` assigned by Coda
* **Supported Payment Channel:** Confirm the `payType` for the payment channel you want to integrate. Currently this is only supported for Google Pay and Apple Pay but will be expanding fast to more payment channels
* **Configuration Request:** Provide a list of MIDs to your implementation manager to be configured for APM hosted components
### Step 1: Initiate a Payment
The lifecycle begins on your server. Call the `/init.json` endpoint to generate the required session credentials.
Endpoint: `POST /init.json`
```javascript
curl --location 'https://sandbox.codapayments.com/airtime/api/restful/v2.0/Payment/Component/init.json' \
--header 'Content-Type: application/json' \
--data '{
"initRequest": {
"country": 702,
"payType": 427,
"apiKey": "test_32774abe1cd7d8bae650ea48265e",
"projectId": 21
"orderId": "12321312321314",
"currency": 702,
"walletFilter": "google_pay",
"items": [
{
"code": "1",
"price": 50.00,
"name": "Test Item"
}
],
"profile": {
"entry": [
{
"key": "user_id",
"value": "105"
}
]
}
}
}'
```
> **Note:** The `payType` value determines which payment channel the component will render. Refer to the supported payment channels list for the correct value.
> **Wallet channels:** For payment channels that support multiple wallets under the same `payType` (e.g., Google Pay and Apple Pay), you can optionally pass the `walletFilter` parameter to display only a specific wallet button. If omitted, all available wallet buttons for that `payType` will be shown.
**Response**
Coda returns a Transaction ID and a Client Secret.
* Transaction ID: Store this in your database to link Coda's payment to your order.
* Client Secret: Pass this to your frontend securely. This secret authorizes the SDK to load the card fields for this specific transaction.
### Step 2: Initialize and Mount
Once your frontend receives the `clientSecret`, you can mount the secure card fields.
**Load the SDK & Container**
Include the Coda library on your checkout page and define a placeholder `div`. This container acts as the anchor where the SDK will securely inject the card input fields.
```html
```
**Mount the Component**
With the library loaded and the container ready, use your `clientSecret` to initialize the session. The `mount()` method then replaces your empty `div` with a fully functional, secure card entry form.
```javascript
const codaComponent = CodaComponent();
// Initialize the components with your secret
const components = codaComponent.components({
clientSecret: '{{CLIENT_SECRET_FROM_BACKEND}}'
});
// Create and mount the 'charge' component into your #payment-form div
const chargeComponent = components.create('charge');
chargeComponent.mount('#payment-form');
```
Full documentation on [the codaComponent SDK](/codapay/hosted-component-integration/alternative-payment-methods/interact-with-the-codacomponent-sdk.md).
### Step 3: Handle Payment State
The component emits events to communicate the current step of the payment flow. Your frontend should listen to these events to manage the surrounding UX — for example, showing a loading state, displaying a success message, or handling errors.
#### Listening to Events
Use the `.on()` method to register event listeners:
```javascript
chargeComponent.on('userLoaded', () => {
// Component has finished loading and is ready for user interaction
console.log('Component loaded');
});
chargeComponent.on('success', () => {
// Payment completed successfully — show confirmation in your UI
console.log('Payment successful');
});
chargeComponent.on('failed', () => {
// Payment failed — show appropriate messaging
console.log('Payment failed');
});
```
> Refer to [the CodaComponent SDK reference](/codapay/hosted-component-integration/alternative-payment-methods/interact-with-the-codacomponent-sdk.md) for the full list of available events and their signatures.
### Step 4: Handle Payment Results
After the user submits the form and the payment is successful, Coda sends an asynchronous notification to your backend.
Webhook Requirements:
* Security: You must verify the Checksum of every notification to ensure it originated from Coda.
* Your server must respond with a `200 OK` within X seconds to acknowledge receipt.
[Full documentation on notifications](/codapay/hosted-component-integration/alternative-payment-methods/get-notified-of-a-transaction-status-change.md).
---
# 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/integration-guide.md?ask=&goal=
```
`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.