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-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.4.1 the function OptumCCGWidgetInitializer is exported with types.

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

if using a version older than 2.4.1:

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>;