Product Quote Card

Host Integration Pattern

Functions are not passed through HTML attributes. Attach an event listener for selectedPlan and run your host logic there. The selectedPlan contract includes contractVersion and is emitted as bubbling/composed. The host default checkout base URL comes from NEXT_PUBLIC_TII_CHECKOUT_BASE_URL and explicit URL attributes remain the override path when a partner supplies a custom destination.

const defaultCheckoutBaseUrl =
  process.env.NEXT_PUBLIC_TII_CHECKOUT_BASE_URL?.trim() || "http://localhost:3001";

const card = document.querySelector("product-quote-card");
card.addEventListener("selectedPlan", (event) => {
  const { quoteId, productCode, totalPrice } = event.detail;
  const checkoutUrl = defaultCheckoutBaseUrl.replace(//$/, "") +
    "/quote/" + encodeURIComponent(quoteId) + "/payment";
  // host function: route, modal, analytics, API side-effects
  console.log('selected productCode', productCode, 'totalPrice', totalPrice);
  router.push(checkoutUrl);
});

card.addEventListener("coverageChanged", (event) => {
  const { coverageType, checked, totalPrice, source } = event.detail;
  // optional host-side parity behavior for add-ons and derived pricing UI
});

Stylesheet Injection

To apply partner-owned styling at runtime, set custom-stylesheet-url and optionally custom-stylesheet-allowed-origins. Same-origin stylesheets are always allowed.

<product-quote-card
  enable-internal-navigation="false"
  custom-stylesheet-url="https://cdn.partner.com/product-card-theme.css"
  custom-stylesheet-allowed-origins="https://cdn.partner.com"
></product-quote-card>