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.