Skip to main content

TypeScript Support

CDN Integration​

Using NPM​

  1. Install package via NPM
  2. Add the following reference before using the widget:
    /// <reference types="@optum-ccg/convenient-checkout-ui/dist/widget/ccg-widget" />
    Note: Types support was added starting in package version 2.4.1

Manual​

Add or augment your existing global typings file (usually named global.d.ts) with the following:

declare global {
  interface Window {
    optumCCG: {
      /**
       * Note: For a comprehensive list of typings go to:
       * https://docs.healthsafepay.com/docs/developers/convenient-checkout-ui/Integration/Integration-Options/Embedded-Experience/#optumccgwidgetinitializer-method-options
       * @returns
       */
      OptumCCGWidgetInitializer: (
        args: {
          rootElement: HTMLElement;
          appEnv: 'stage' | 'prod';
          checkoutSessionId: string;
        } & Record<string, unknown>
      ) => ({
        render: () => void;
        unmount: () => void;
      });
    };
  }
}

NPM Integration​

  • Starting with package version 2.39.0, the function OptumCCGWidgetInitializer is exported with all necessary types directly. This allows for building fully type-safe configuration objects and callback handlers.
import { OptumCCGWidgetInitializer } from "@optum-ccg/convenient-checkout-ui/dist/widget/ccg-widget.min";
import type {
  OptumCCGWidgetInitializerArgs,
  AppEnv, 
  Appearance, 
  ContainerConfig, 
  OnErrorCallback, 
  OnEventCallback, 
  OnSuccessCallback,
} from "@optum-ccg/convenient-checkout-ui/dist/widget/ccg-widget.min";
  • For package versions between 2.4.1 and 2.38.0, the function OptumCCGWidgetInitializer is exported with types, but its constituent argument types (like Appearance, ContainerConfig etc.) were not easily importable. The primary way to get type safety was by importing the main function.
import { OptumCCGWidgetInitializer } from "@optum-ccg/convenient-checkout-ui/dist/widget/ccg-widget.min";
  • if using a version older than 2.4.1, official TypeScript types were not provided. Using the widget in a TypeScript project required a manual workaround to apply types. This pattern is now obsolete and should be removed if you are upgrading.
import { OptumCCGWidgetInitializer as UntypedOptumCCGWidgetInitializer } from "@optum-ccg/convenient-checkout-ui/dist/widget/ccg-widget.min";

import type cjsWidget from "@optum-ccg/convenient-checkout-ui/dist/cjs/widget-wrapper/OptumCCGWidgetInitializer";

const OptumCCGWidgetInitializer =
  UntypedOptumCCGWidgetInitializer as typeof cjsWidget;

  let ccgWidget: ReturnType<typeof cjsWidget>;