Convenient Checkout UI
The Convenient Checkout Gateway (CCG) UI is a flexible, embeddable payment widget that enables merchants to accept payments, manage digital wallets, and deliver secure checkout experiences — all with minimal integration effort.
New to CCG? Start with the Getting Started guide to set up your first integration in minutes.
Integration Experiences
The CCG widget supports two core delivery models. Choose the one that fits your integration needs:
Embedded Experience
The widget renders directly inside your application via inline, modal, or drawer containers — seamlessly integrated with your brand.
- Display and manage the member's digital wallet
- Add, edit, or delete saved payment methods
- Make one-time payments without saving details
- Guest checkout — no wallet required
- Supports React and non-React apps
Hosted Experience
The widget is served as a CCG-managed browser pop-up launched from your page — minimal frontend code required.
- Full wallet experience with HealthSafe Pay
- Guest checkout (one-time payment)
- Language selector dropdown
- Quickest setup — no embedding needed
HSA-Aware Wallet Experience
Convenient Checkout can provide three HSA-aware capabilities alongside the existing payment experience:
| Capability | Customer experience | Important boundary |
|---|---|---|
| Informational HSA balance | Gives eligible customers HSA account context while reviewing wallet payment choices. | The balance is not a payment method and is not associated with a stored or designated card. |
| Customer HSA designation | Helps customers recognize the card they intend to use for HSA spending. | The customer can apply, remove, or reassign the designation without changing normal card payment behavior. |
| Add HSA Card CTA | Makes the relevant add-card journey easier to discover when the approved display conditions are met. | The CTA opens the existing add-card experience with the designation selected; it does not validate or prepopulate the card. |
Approved card naming and artwork may support the designation experience, but presentation is not verification. The customer-applied designation remains separate from the HSA payment-method type, and none of these capabilities establishes an association between a displayed balance and a card.
See Customer HSA Designation on Cards for the business rules and Widget Capabilities for customer flows and widget behavior.
Documentation Map
Getting Started
Quick start, CDN/NPM install, TypeScript setup, and session prerequisites.
🔌Integration
Hosted vs Embedded, session setup, and all integration options.
⚡Capabilities
Supported widget modes, container types, user types, and session lifecycle.
🎨Customization
Theming, branding, layout, and error handling configuration options.
🌐Localization & Translation
Language config, preferred language setup, and agent child session translation.
🔒Security & Compliance
PCI engagement notifications and sensitive data handling.
⚠️Error handling
Field-level and form-level UI validation error references.
📦Versioning
Package versions, changelog, and upgrade guidance.
Related Documentation
- Sessions API — Required to create a checkout session before launching the widget
- API Reference — Full backend API reference
- Widget Capabilities — Supported modes, user flows, and container types