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
Inline | Modal | Drawer | |
---|---|---|---|
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 selector | Wallet management |
Payment with wallet | Wallet management |
Wallet Management |
|
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);