Quick Start Guide

Overview

The Vertical Insure Drop-in Component lets you present insurance products directly inside your platform — no redirects, no separate checkout flow. Your customers see a quote, make a selection, and purchase without ever leaving your product.

This guide walks you through the full integration from getting your credentials to handling a completed purchase. It should take about 30 minutes for a developer familiar with JavaScript.

Prerequisites

Before you start, make sure you have:

• A Vertical Insure partner account
• Access to the Partner Portal at partners.verticalinsure.com
• Your test API credentials (see Step 1 below)
• A product code assigned to your account (e.g. registration-cancellation, gap-medical)

Step 1 — Get Your Credentials

Vertical Insure provides two sets of credentials for every partner: test_ credentials for development and live_ credentials for production. Always develop and test with test_ credentials — policies issued in test mode are watermarked and no real charges are made.

1. Log in to the Partner Portal
2. Navigate to API Keys
3. Copy your test_... client ID and client secret and store them securely

Step 2 — Install the Package

Choose the installation method that matches your stack.

CDN (plain JavaScript)

<script src="https://cdn.jsdelivr.net/npm/@vertical-insure/embedded-offer"></script> 

npm (JavaScript / React / Vue)

# Javascript
npm install @vertical-insure/embedded-offer 

# React
npm install @vertical-insure/embedded-offer-react

# Vue 
npm install @vertical-insure/embedded-offer-vue 

Step 3 — Mount the Offer

Add a container element to your page and initialize the offer with your client ID and the customer and policy data for your product.

Plain JavaScript example

<div id="offer"></div> 
<script src="https://cdn.jsdelivr.net/npm/@vertical-insure/embedded-offer"></script>
<script>   
  new VerticalInsure("#offer", {     
    client_id: "test_********************************",     
    product_config: {       
      "registration-cancellation": [{         
        customer: {           
          email_address: "user@example.com",           
          first_name: "Jane",           
          last_name: "Smith",           
          state: "MN",           
          postal_code: "55414"         
        },         
        policy_attributes: {           
          event_start_date: "2026-08-01",           
          event_end_date:   "2026-08-03",           
          insurable_amount:  25000,           
          participant: {             
            first_name: "Jane",             
            last_name:  "Smith"           
          }         
        }       
      }]     
    }   
  }, function(offerState) {     
    // Called whenever the user changes their selection     
    console.log("Selected quotes:", offerState.quotes);   
  }, function(offerReady) {     
    // Called once when the offer finishes loading     
    console.log("Offer ready. Products available:", offerReady.offersAvailable);   
  }); 
</script>

Step 4 — Listen for User Selections

The offer fires two key events you should handle in your integration:

• offer-ready — fires once when the offer finishes loading. Use this to show/hide UI elements around the offer.
• offer-state-change — fires every time the user changes their selection. The event payload includes the currently selected quotes (may be an empty array if the user opts out).

window.addEventListener("offer-ready", (e) => {   
  console.log("Offers available:", e.detail.offersAvailable); 
}); 

window.addEventListener("offer-state-change", (e) => {   
  const selectedQuotes = e.detail.quotes;   // Store selected quotes to pass to your purchase flow   
  console.log("Selected:", selectedQuotes); 
});

Step 5 — Determine Payment Type

We support a number of ways to handle payments when purchasing policies. You can always send card PAN data directly to our purchase endpoints, which we handle in a PCI-compliant manner.

The general model for supporting a payment provider is onboarding Vertical Insure as a sub-merchant within your payment provider account. We will need a way to validate payments in the form of an API key to the sub merchant account, or a way to process the payment directly from our system (e.g. capture vs authorize and capture). With certain payment providers, we also support shared vault solutions or payment method forwarding solutions as we are PCI compliant.

Step 6 — Test Your Integration

Use test_ credentials and the following test card numbers to simulate purchases without real charges:

All API requests in test mode are logged in the Partner Portal under API Logs — useful for debugging failed requests.

Step 7 — Client Insights and Metadata

Metadata can help your platform improve on a number of operational needs for your business such as:

1. Improving retention for customers purchasing insurance policies.
2. Driving analytical decisions on how your platform is presenting insurance offers.
3. Tracking which feature flags were active within your customer workflow during the insurance purchase process.

Metadata fields can be sent with any request on our Quote and Purchase endpoints.

Step 8 — Set Up Webhooks

Webhooks notify your backend when policy events occur — including successful purchases, failures, and cancellations. This is the most reliable way to confirm a policy was issued.

1. Go to Partner Portal → Webhooks
2. Add your endpoint URL and select the events you want to receive
3. Use the VerticalInsure-Signature header (HMAC-SHA256) to validate incoming requests

Key events to subscribe to:

• policy_bind_complete — policy successfully issued; use this to update your records
• policy_bind_failed — policy failed to bind after purchase
• policy_payment_failed — payment was declined
• policy_canceled — policy was canceled

Step 9 — Go Live

Once you have tested the full flow end-to-end with test_ credentials:

1. Swap test_ credentials for your live_ credentials
2. Confirm your production domain is registered in the Partner Portal
3. Verify your webhook endpoint is pointing to your production server
4. Make a real test purchase with a real card to confirm everything works

Troubleshooting

Offer does not appear

• Confirm your client_id is correct and has the test_ prefix during development
• Make sure the container element (#offer) exists in the DOM before the script runs

Quote returns no results

• Verify all required fields are present in customer and policy_attributes
• Confirm your product code matches exactly what Vertical Insure has configured for your account
• Check API Logs in the Partner Portal for the specific error returned