Skip to main content

Widget Containers

Overview

This documentation outlines the different types of containers supported by our widget and their respective capabilities. The widget can be configured to use either a primary container only or a combination of primary and secondary containers.

Container Types

Primary Only Containers

Primary only containers mean that the entire widget usage is done within that primary container.

  • Types: inline, modal, drawer

Primary and Secondary Containers

Primary and secondary containers are used when the primary container is inline. This configuration allows the primary container to show the initial view of the session, while the secondary container is used for additional actions that are not part of the primary session capability.

  • Primary Type: inline
  • Secondary Types: modal, drawer

Widget Capabilities by Container Type

Primary only

InlineModalDrawer
Payment with wallet
Payment
Wallet management
Add payment method
Payment method selector
Payment method display

Primary (inline) and Secondary (modal, drawer)

Primary
(inline)
Secondary
(modal, drawer)
Payment method selectorWallet management
Payment with walletWallet management
Wallet Management
  • Add payment method
  • Edit payment method
  • Remove payment method

Examples

Here are a few examples to illustrate the combinations:

Example 1: Primary Only - Inline

const options: OptumCCGWidgetInitializerParams = {
appEnv: "prod",
checkoutSessionId: "checkout-session-id",
rootElement: document.getElementById("ccgWidgetContainer")!,
containerConfig: {
type: "inline",
},
};
const ccgWidget = OptumCCGWidgetInitializer(options);

Example 2: Primary and Secondary - Inline with Drawer

const options: OptumCCGWidgetInitializerParams = {
appEnv: "prod",
checkoutSessionId: "checkout-session-id",
rootElement: document.getElementById("ccgWidgetContainer")!,
containerConfig: {
type: "inline",
secondaryContainer: {
type: "drawer",
},
},
};
const ccgWidget = OptumCCGWidgetInitializer(options);

Example 3: Primary and Secondary - Inline with Modal

const options: OptumCCGWidgetInitializerParams = {
appEnv: "prod",
checkoutSessionId: "checkout-session-id",
rootElement: document.getElementById("ccgWidgetContainer")!,
containerConfig: {
type: "inline",
secondaryContainer: {
type: "modal",
},
},
};
const ccgWidget = OptumCCGWidgetInitializer(options);

Example 4: Primary Only - How to Enable Auto Scroll for Inline

const options: OptumCCGWidgetInitializerParams = {
appEnv: "prod",
checkoutSessionId: "checkout-session-id",
rootElement: document.getElementById("ccgWidgetContainer")!,
containerConfig: {
type: "inline",
autoScrollEnabled: true,
},
};
const ccgWidget = OptumCCGWidgetInitializer(options);