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.

High-Level Flow Description

1. Initiate Payment: The user starts a payment. Your backend creates the payment session by calling POST /init.json. Coda returns a Transaction ID and a Client Secret.

2. Initialize SDK: Using the clientSecret from your backend, initialize the Hosted Component SDK. The card form is rendered securely in the checkout container.

3. Readiness Monitoring: Your frontend listens for the isReady state. 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, 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.