Skip to main content
Version: v1

TypeScript Support

Integration Details

TypeScript types are available starting in package version 2.4.1. Use with both NPM and CDN installs for full type safety on widget options, events, and callbacks.

Overview​

The CCG widget ships with TypeScript type definitions, enabling autocompletion and compile-time type checking for widget configuration, event callbacks, and all integration options. This reduces runtime errors and makes widget integration safer and more maintainable across React, Angular, Vue, and vanilla JS projects.

When to Use​

  • You want type safety and autocompletion for widget integration
  • You are using modern JS frameworks (React, Angular, Vue, etc.)
  • You want to avoid runtime errors and improve maintainability

Key Benefits​

  • Full type definitions for widget options and events
  • Works with both CDN and NPM installs
  • Supports all widget capabilities and integration patterns

Installation​

NPM​

Install the package normally — types are included:

npm install @optum-ccg/convenient-checkout-ui

CDN​

If consuming via CDN, add a triple-slash reference to your global type declarations file (e.g. globals.d.ts):

/// <reference types="@optum-ccg/convenient-checkout-ui" />

Integration Examples​

NPM — TypeScript​

import { OptumCCGWidgetInitializer, OptumCCGWidgetOptions } from "@optum-ccg/convenient-checkout-ui/dist/widget/ccg-widget.min";

const options: OptumCCGWidgetOptions = {
  rootElement: document.querySelector("#ccg-widget-container") as HTMLElement,
  checkoutSessionId: "REPLACE_WITH_CHECKOUT_SESSION_ID",
  appEnv: "prod",
  onSuccess: (data) => {
    console.log("Payment success", data);
  },
  onError: (data) => {
    console.error("Payment error", data);
  },
  onEvent: (data) => {
    console.log("Widget event", data);
  },
};

const ccgWidget = OptumCCGWidgetInitializer(options);
ccgWidget.render();

React — TypeScript​

import React, { useEffect, useRef } from "react";
import { OptumCCGWidgetInitializer, OptumCCGWidgetOptions } from "@optum-ccg/convenient-checkout-ui/dist/widget/ccg-widget.min";

const CheckoutWidget: React.FC<{ sessionId: string }> = ({ sessionId }) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const options: OptumCCGWidgetOptions = {
      rootElement: containerRef.current,
      checkoutSessionId: sessionId,
      appEnv: "prod",
      onSuccess: (data) => console.log("Success", data),
      onError: (data) => console.error("Error", data),
      onEvent: (data) => console.log("Event", data),
    };

    const widget = OptumCCGWidgetInitializer(options);
    widget.render();

    return () => widget.unmount?.();
  }, [sessionId]);

  return <div id="ccg-widget-container" ref={containerRef} />;
};

export default CheckoutWidget;

Available Types​

Type / InterfaceDescription
OptumCCGWidgetOptionsFull options object for widget initialization
OptumCCGWidgetInitializerWidget factory function — returns the widget instance
onSuccess callback dataPayload returned when a session completes successfully
onError callback dataPayload returned when a session encounters an error
onEvent callback dataPayload for mid-session events (e.g., SESSION_CONTEXT_UPDATED)

For the full list of fields and their types, see OptumCCGWidgetInitializer Method Options.

FAQ​

Q: What version adds TypeScript support?
A: TypeScript types are available starting in package version 2.4.1.

Q: Can I use TypeScript types with the CDN build?
A: Yes. Add a triple-slash reference (/// <reference types="..." />) in your global declarations file.

Q: Do I need to install a separate @types package?
A: No. Type definitions are bundled with the widget package — no separate install required.

Q: Where can I find all available types?
A: See OptumCCGWidgetInitializer Method Options for a comprehensive list.

Q: Does TypeScript support work with all widget capabilities and modes?
A: Yes. All capabilities (PAYMENT, WALLET, PAYMENT_WITH_WALLET, etc.) and event types are fully typed.