Skip to content
Docs

Preview. The API is shared with design partners and may change before launch. Register interest for sandbox access.

Drop-in SDK

The drop-in SDK renders the complete Phew offer for you: eligibility, plans, prices, the legally required documents and the opt-in. You decide where it appears and how it looks. Phew keeps the copy, the pricing and the compliance rules up to date, so the offer is always correct without changes on your side.

Your page ──▶ phew.js renders the offer ──▶ customer chooses a plan
          ◀── change event with the selection
Your server ──▶ POST /v1/policies when the order is paid

Add the offer

Section titled “Add the offer”

  1. Load the SDK with a script tag:

    <script src="https://js.getphew.com/v1/phew.js" async></script>

    Or install it from npm (npm install @phew/js), which loads the same script and adds TypeScript types:

    import { loadPhew } from "@phew/js";
    const Phew = await loadPhew();

  2. Add a container where the offer should appear: next to the product, in the cart, in the checkout or on the receipt.

    <div id="phew-offer"></div>

  3. Create and mount the offer with your publishable key and the items. You don’t need to tell Phew what the items are: Phew classifies them automatically and only shows an offer for items it can cover.

    const phew = Phew("pk_test_...", { locale: "nb-NO" });
    

    const offer = phew.offer({
      currency: "NOK",
      market: "NO",
      items: [{ reference: "SKU-CBX-48", name: "City Bike Explorer", price: 499000, quantity: 1 }],
    });
    

    offer.on("change", ({ selections, total }) => {
      // Update the order total shown to the customer.
    });
    

    offer.mount("#phew-offer");

  4. Send the selection to your server with the order, and create the policy there when the order is paid. Policy creation always happens server-side with your secret key.

    const { offer: offerId, selections } = offer.value();
    // selections: [{ reference: "SKU-CBX-48", plan: "plan_36m" }]

    Then call POST /v1/policies with offerId and selections as the items.

Match your brand

Section titled “Match your brand”

The offer inherits your page’s font by default. Set appearance to match your design system:

const phew = Phew("pk_live_...", {
  locale: "sv-SE",
  appearance: {
    theme: "light", // "light", "dark" or "auto"
    variables: {
      colorPrimary: "#0b5fff",
      colorText: "#1a1a1a",
      fontFamily: "Inter, sans-serif",
      borderRadius: "10px",
    },
    layout: "compact", // "default", "compact" or "inline"
  },
});

The opt-in control, price, plan names and document links are always shown; their wording and order can’t be changed, because they’re part of how the insurance is legally sold.

Updating and removing

Section titled “Updating and removing”
  • Call offer.update({ items }) when the cart changes. The offer re-prices without flicker and keeps the customer’s choice where it still applies.
  • Call offer.unmount() to remove it.

Events

Section titled “Events”
Event Payload When
ready { eligible } The offer has loaded. eligible is false if no item can be covered, and nothing is shown.
change { selections, total } The customer chose a plan, changed plan or declined. total is the premium in minor units.
error { code, message } The offer couldn’t load. Nothing is shown, and checkout continues as normal.

Never blocks a sale

Section titled “Never blocks a sale”

The SDK loads asynchronously and fails closed to “no offer”. If Phew is slow or unreachable, the container stays empty and your checkout works exactly as before.

Security

Section titled “Security”
  • The publishable key (pk_…) can only create offers, and only from the domains you register for it. It can’t read policies, claims or any customer data.
  • The SDK never sees card details or customer contact details.
  • The script is versioned (/v1/), served over TLS from Phew’s edge, and never changes behaviour within a version.

If your Content Security Policy is strict, allow:

Content-Security-Policy: script-src https://js.getphew.com; connect-src https://api.getphew.com