---
title: "JavaScript Injection"
---

## Selection-Change Callback

SureBright fires a callback whenever the customer's protection selection changes — when they select a plan, switch plans, or deselect. Use it to react to those changes in your own code; for example, to update the price shown on your page so it reflects the selected protection.

The callback lives on the same `window.SureBright` global you use for `initialize`.

### 1. Register a Handler

Pass your handler to `window.SureBright.onSelectionChange`. SureBright invokes it on every selection change and passes a `selectionChange` object that describes what changed. Read the price from that object to update your page — SureBright never modifies your page's price elements for you.

```javascript js
window.SureBright.onSelectionChange(function (selectionChange) {
    if (selectionChange.action === "selected" && selectionChange.pricing) {
        // Protection added — the total now includes the selected plan.
        console.log(selectionChange.pricing.totalPrice, selectionChange.pricing.currency);
    } else {
        // Protection removed — fall back to the base product price.
        console.log(selectionChange.pricing?.basePrice, selectionChange.pricing?.currency);
    }
});
```

`onSelectionChange` returns a function that unsubscribes your handler. Keep a reference to it only if you need to stop listening later.

### 2. Read the Selection Change

Each call receives a single `selectionChange` object describing what the customer did:

<ResponseField name="action" type="string" required>
  The kind of change. Either `selected` or `deselected`.
</ResponseField>

<ResponseField name="source" type="string" required>
  The widget surface the change came from: `pdp`, `quickview`, `cart`, `checkout`, `postPurchase`, `registration`, or `shippingInsurance`.
</ResponseField>

<ResponseField name="quote" type="object | null">
  The selected protection plan. Present on a `selected` action from a surface that exposes a full quote; `null` on `deselected` or where a quote isn't available.
  <Expandable title="properties">
    <ResponseField name="quoteId" type="string">
      Identifier of the quote the plan belongs to.
    </ResponseField>
    <ResponseField name="quoteItemId" type="string">
      Identifier of the selected plan within the quote.
    </ResponseField>
    <ResponseField name="coverageYears" type="number">
      Length of coverage, in years.
    </ResponseField>
    <ResponseField name="coverageType" type="string">
      One of `BREAKDOWN`, `ACCIDENTAL`, `ACCIDENTAL_BREAKDOWN`, or `SHIPPING`.
    </ResponseField>
    <ResponseField name="price" type="number">
      Price of the protection plan.
    </ResponseField>
    <ResponseField name="currency" type="string">
      ISO currency code for the plan price.
    </ResponseField>
    <ResponseField name="variantId" type="string">
      Identifier of the policy product's variant — the protection plan itself, not the covered product.
    </ResponseField>
    <ResponseField name="isDefault" type="boolean">
      Whether this plan is the quote's default selection.
    </ResponseField>
    <ResponseField name="ribbonEnabled" type="boolean">
      Whether the plan shows a highlight ribbon (e.g. a "Best Seller" badge).
    </ResponseField>
    <ResponseField name="ribbonText" type="string">
      Text shown on the highlight ribbon.
    </ResponseField>
    <ResponseField name="manufacturerWarrantyYears" type="number">
      Length of the manufacturer's warranty, in years. Optional.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="product" type="object | null">
  The product the customer was viewing. `null` when product data isn't available at selection time.
  <Expandable title="properties">
    <ResponseField name="productId" type="string">
      Identifier of the covered product.
    </ResponseField>
    <ResponseField name="selectedVariantId" type="string">
      Identifier of the selected variant.
    </ResponseField>
    <ResponseField name="productTitle" type="string">
      Display title of the product.
    </ResponseField>
    <ResponseField name="currency" type="string">
      ISO currency code for the product price.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="pricing" type="object | null">
  Computed price breakdown for the selection. `null` when the base product price is unknown.
  <Expandable title="properties">
    <ResponseField name="basePrice" type="number">
      Price of the product without protection.
    </ResponseField>
    <ResponseField name="warrantyPrice" type="number">
      Price of the selected protection plan.
    </ResponseField>
    <ResponseField name="totalPrice" type="number">
      Sum of the base price and the protection price.
    </ResponseField>
    <ResponseField name="currency" type="string">
      ISO currency code for the amounts above.
    </ResponseField>
  </Expandable>
</ResponseField>