Integration
To integrate with the CCG widget, it's important to understand three main components
Components
Users
Authenticated users are CCG wallet users, while anonymous users are considered guest users.
Widget Capabilities
Widget capabilities determine what actions a user can perform within the widget.
| Capability | Mode | User | Experience |
|---|---|---|---|
| Manage wallet and make payment | PAYMENT_WITH_WALLET | wallet | Hosted Embedded |
| Make one time payment | PAYMENT | wallet, guest | Hosted Embedded |
| Add a payment method | PAYMENT_METHOD_ENTRY | wallet | Hosted Embedded |
| Manage wallet | WALLET | wallet | Hosted Embedded |
| Payment Method Selector | PAYMENT_METHOD_SELECT | wallet | Hosted Embedded |
| Payment Method Display | PAYMENT_METHOD_DISPLAY | wallet | Embedded |
Widget Experience
Widget experience determines how the widget is presented: as a hosted pop-up or embedded.
- Hosted: Displayed as a browser pop-up, launched separately from the parent application.
- Embedded: Integrated into the parent application for a seamless, thematically consistent experience with three embedding options: modal, inline, and drawer.
- For details on container and capability combinations, click here.
Integration approaches
Choosing an Integration approach
Each integration option has unique attributes that make it suitable for different scenarios. Developers can choose the integration option that best fits their needs, based on factors such as the user experience and ease of integration.
| Embedded Experience | Hosted Experience | |
|---|---|---|
| Widget Experience (UX) | embedded as a component into merchant app | launched as browser popup |
| Session | Managed by Merchant | Managed by Merchant |
| Build Time Integration (npm) | Available | NA |
| Run Time Integration (CDN) | Available | NA |
| Usage within React App | Yes | Yes |
| Usage within Non-React App | Yes | Yes |