Interact with the CodaComponent SDK

The CodaComponent SDK is a client-side JavaScript library that renders payment channel UIs into your checkout page. Use this reference to manage the component's lifecycle and handle state-driven events.

CodaComponent()

Creates a new CodaComponent instance.

Code Example

const codaComponent = CodaComponent();

Returns

SDK Instance: An object containing the components function.

.components({ clientSecret })

Sets up the environment for payment elements and authorizes the session.

Parameters

• clientSecret (string): Required. The JWT returned from the charge creation on your backend.

Code Example

const components = codaComponent.components({
  clientSecret: 'eyJ...'
});

Returns

Components Factory: An object used to generate specific payment UI elements: { create: Function }.

.create(type)

Generates a specific payment component instance, such as the card input form.

Parameters

• type (string): Required. The type of component to create (currently supports 'charge')

Code Example

const chargeComponent = components.create('charge');

Returns

ChargeComponent: The instance used for mounting and managing the payment form.

.mount(selector)

Injects the secure payment form into a specific DOM element on your page.

Parameters

• selector (string): Required. A CSS selector identifying the container where the form should be rendered (e.g., '#payment-form').

Code Example

chargeComponent.mount('#payment-form');

.on(event, callback)

Registers a listener for specific component events to synchronize your UI with the payment state.

Available Events

Event	Callback Signature	When Fired
userLoaded	() => void	Form finishes loading
success	() => void	The payment has been completed successfully
failed	() => void	The payment has failed

Code Example

chargeComponent.on('success', () => {
  console.log('Payment successful!');
});