Product Quote Card Integration Harness

Submit a QuoteRequestInput payload to the BFF, review the API response, then mount the Stencil product card with the same request input. Test URL-based CTA behavior or selectedPlan event-driven host behavior.

For partner-auth testing, first issue an embed token from the partner credentials, then send only Authorization: Bearer <embedToken> on quote APIs. The harness no longer mints tokens implicitly during quote calls.

1. Integration Settings

Partner Credentials

Issue an embed token before creating or loading a quote.

apiToken

accessKey

Embed Token For Quote Calls

embedToken

Component Style and Actions

Configure layout, behavior, feature visibility, and theme overrides.

Button Actions

button-action-mode

buy-now-url

button-text

button-url (optional)

Layout and Content

logo-src

logo-alt

view-mode

card-variant

container-variant

market-variant

Partner Integration

language, currency, and trip-type are HTML attributes set by the partner at embed time — not toggled at runtime. The fields above simulate this; the snippet below shows what the partner's HTML looks like.
Note: language drives both the quote API request and the component's UI chrome text (translated labels, buttons, tab names).

comparison-render-mode

shell-badge-text

shell-headline

shell-subheadline

shell-featured-index

shell-featured-label

shell-footer-text

shell-plan-details-url (optional)

cfar-eligible-countries

standard-product-codes (optional)

cfar-product-codes (optional)

single-offer-eyebrow

single-offer-accept-label

single-offer-decline-label

Integration Notes

selectedPlan contract (v1.0.0): Required: productCode. Recommended: quoteId, quoteNumber, productId, product. Includes contractVersion for host-side version checks.
Event semantics: selectedPlan and coverageChanged are emitted as bubbling + composed CustomEvents from the custom element for broad host integration support.
Host-first control: Internal navigation is disabled by default. URL mode in this harness explicitly enables internal navigation only when a target URL is configured.
URL mode: Use button-url for a full destination template or buy-now-url for an external base URL. Without either one, the host must navigate after selectedPlan.
Stylesheet injection: Leave custom-stylesheet-url empty to use agency-number-based stylesheet lookup. When provided, it must come from an allowlisted origin (same-origin is always allowed).
Theme overrides: CSS variable controls below still apply on top of the agency/default stylesheet for further customization.
Container variant: Use comparison-shell to demo the Bermuda Air grouped shell experience.

2. API + Render Output

Request Preview

Waiting for request...

BFF Response Preview

Waiting for response...

selectedPlan Event Preview

Waiting for selectedPlan event...

Host Function Preview

Waiting for host handler...

coverageChanged Event Preview

Waiting for coverageChanged event...

Product Quote Card Integration Harness

1. Integration Settings

Partner Credentials

Quote Request Input

Component Style and Actions

2. API + Render Output