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

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.

<script src="https://hosted-component.codapayments.com/1.6.0/hosted-component.min.js"></script>

<div id="payment-form"></div>

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.

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.

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:

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 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.