Using default_selected and default_declined in the drop-in component

Purpose

Use default_selected and default_declined when you want to control the initial decision state (accept/decline) of an Drop-in Component at load time.

This is especially useful in multi-step checkout journeys where the offer can be shown more than once, such as when a user navigates back and forth between steps or when selection state is persisted over time. These flags let you restore a predictable starting state each time the offer is rendered, while still allowing users to change their decision in the UI.

Flags

The Drop-in Component supports two quote request flags in product_config:

  • default_selected: pre-accepts a quote when the offer loads.
  • default_declined: pre-declines a quote when the offer loads.

How to use them

Set these flags on each quote request object inside product_config.

{
  "client_id": "test_...",
  "product_config": {
    "registration-cancellation": [
      {
        "default_selected": true,
        "customer": {
          "email_address": "test01@verticalinsure.com",
          "first_name": "John",
          "last_name": "Doe",
          "state": "MN",
          "postal_code": "55414"
        },
        "policy_attributes": {
          "insurable_amount": 50000,
          "event_start_date": "2026-01-01",
          "event_end_date": "2026-01-01",
          "participant": {
            "first_name": "John",
            "last_name": "Doe"
          }
        }
      }
    ]
  }
}

default_selected behavior

If default_selected: true, the resulting quote is accepted by default when the offer is presented.

Use this when you want the offer to start in an accepted state.

default_declined behavior

If default_declined: true, the offer is explicitly declined by default when the offer is presented.

Use this when you want the offer to start in a declined state.

When both flags are set

If both flags are set to true on the same quote request, default_declined takes precedence.

In other words:

  • default_selected: true and default_declined: true results in a declined state.

Example with default_declined

{
  "client_id": "test_...",
  "product_config": {
    "gap-medical": [
      {
        "default_declined": true,
        "customer": {
          "email_address": "test01@verticalinsure.com",
          "first_name": "John",
          "last_name": "Doe",
          "state": "MN",
          "postal_code": "55414"
        },
        "policy_attributes": {
          "coverage_start_date": "2026-01-01",
          "coverage_end_date": "2026-01-10",
          "coverage_type": "SOCCER",
          "covered_person": {
            "first_name": "John",
            "last_name": "Doe",
            "state": "MN",
            "birth_date": "2010-07-05",
            "street": "123 Main St"
          }
        }
      }
    ]
  }
}

Notes

  • These flags define only the initial state when the offer loads.
  • Users can still change their choice in the UI.

On this page