React / Next.js

// app/product/layout.tsx
import { getWhimState } from '@whim-sdk/react/server'
import { WhimConfig } from '@whim-sdk/react'

export default async function ProductLayout({ children }) {
  const whimState = await getWhimState({ merchantId: 'your-merchant-id' })

  return (
    <WhimConfig state={whimState}>
      {children}
    </WhimConfig>
  )
}

<WhimProvider product="your-product-name">
  {/* useWhimMode(), useWhimPrice(), etc. available here */}
</WhimProvider>

// initialAttributes syncs the provider with whatever variant
// the page loaded with, falls back to catalog default if omitted
<WhimProvider
  configurableProduct="your-product-name"
  initialAttributes={{ size: 'large', color: 'black' }}
>
  {/* useWhimProduct(), useWhimAddons(), etc. available here */}
</WhimProvider>

const { mode, setWhimMode, programName } = useWhimMode()

// mode: 'buy' | 'whim'
// programName: merchant-configured label, e.g. 'Rent', 'Subscribe', 'Try'

<button onClick={() => setWhimMode('buy')}>Buy</button>
<button onClick={() => setWhimMode('whim')}>{programName}</button>

const {
  product,          // resolved WhimProduct, or null
  isRentable,       // false when no variant matches the Whim catalog
  reason,           // 'NO_RENTABLE_MATCH' | 'OUT_OF_STOCK' | ... | null
  setWhimAttribute, // ('size', 'large') - resolves new variant
  attributeDefs,    // [{ name: 'size', values: ['small', 'large'] }, ...]
} = useWhimProduct()

// wire your existing pickers, one extra line each
function handleSizeChange(newSize) {
  setSize(newSize)                       // your own state
  setWhimAttribute('size', newSize)      // sync with Whim
}

// disable rent when variant isn't rentable
<button disabled={!isRentable}>
  {isRentable ? 'Rent Monthly' : 'Rent unavailable'}
</button>

const price = useWhimPrice()
// amounts are in cents — format however you want

{price && (
  <>
    {price.recurring.map((r) => (
      <p key={r.interval}>
        {fmt(r.amount)}/{r.interval.toLowerCase()}
      </p>
    ))}
    {price.oneTime && (
      <p>{fmt(price.oneTime.amount)} today</p>
    )}
    {price.introDiscount && (
      <p>
        {fmt(price.introDiscount.amount)} for first
        {' '}{price.introDiscount.months} months
      </p>
    )}
  </>
)}

const whimCheckoutUrl = useWhimCheckoutUrl()

// e.g. https://rent.example.com/merchant/checkout?products=your-product-name(size=large,color=black,addons(case=c1))

<a href={isWhim ? whimCheckoutUrl : product.cartUrl}>
  {isWhim ? `${programName} Now` : 'Add to Cart'}
</a>

const { addonDefs, addons, setWhimAddon, removeWhimAddon } = useWhimAddons()

// addonDefs - addon definitions for the current variant
// addons    - current selections: { case: 'c1', warranty: 'w1' }

// single-option addon (warranty) - checkbox
{addonDefs.filter(a => a.isOptional).map((addon) =>
  addon.options.length === 1 ? (
    <Checkbox
      checked={!!addons[addon.addonKey]}
      onToggle={(on) => on
        ? setWhimAddon(addon.addonKey, addon.options[0].optionKey)
        : removeWhimAddon(addon.addonKey)
      }
    />
  ) : (
    // multi-option addon (case with choices) - dropdown
    <Select
      value={addons[addon.addonKey]}
      onChange={(val) => val
        ? setWhimAddon(addon.addonKey, val)
        : removeWhimAddon(addon.addonKey)
      }
    />
  )
)}

const benefits = useWhimBenefits()

// ['Free shipping', 'Cancel anytime', '30-day trial']

{benefits.length > 0 && (
  <ul>{benefits.map((b) => <li key={b}>{b}</li>)}</ul>
)}

const faqs = useWhimFaqs()

// [{ question: 'How does renting work?', answer: 'Pick a plan...' }, ...]

{faqs.length > 0 && (
  <dl>
    {faqs.map((faq) => (
      <div key={faq.question}>
        <dt>{faq.question}</dt>
        <dd>{faq.answer}</dd>
      </div>
    ))}
  </dl>
)}

<p className="buy-price">$249.00</p>
<WhimTeaserPrice product="wireless-headphones-black" />
{/* renders: "or rent for $29/mo" */}

interface WhimState {
  merchantId: string
  currency: string
  checkoutBaseUrl: string
  programName: string               // 'Rent', 'Subscribe', 'Try', etc.
  benefits: string[]                // marketing copy
  faqs: { question: string, answer: string }[]
  products: WhimProduct[]           // simple products (single SKU)
  configurableProducts: WhimConfigurableProduct[]
}

interface WhimConfigurableProduct {
  name: string                      // e.g. 'your-product-name'
  displayName: string
  attributes: WhimAttributeDef[]
  products: WhimProduct[]           // rentable variants under this configurable
  defaultProduct?: WhimProduct
  addons: WhimAddonDef[]
}

interface WhimAttributeDef {
  name: string                      // 'size', 'color'
  values: string[]                  // ['small', 'large'], ['black', 'white']
}

interface WhimProduct {
  id: string
  name: string                      // 'your-product-large-black'
  displayName: string
  images: string[]
  attributeValues?: WhimAttributeValue[]
  addonIds: string[]                // which addon defs apply to this variant
  price: WhimProductPrice
  discountPercent: number | null
  discountMonths: number | null
}

interface WhimAttributeValue {
  name: string                      // attribute name: 'size'
  value: string                     // selected value: 'large'
}

interface WhimProductPrice {
  amount: number                    // cents, e.g. 4900
  compareAtAmount: number | null    // buy price reference, e.g. 59900
  isRecurring: boolean
  recurringInterval: string | null  // 'MONTH', 'YEAR', etc.
  recurringCount: number | null
}

interface WhimResolvedPrice {
  recurring: {
    amount: number                  // cents, e.g. 4900
    interval: string                // 'MONTH', 'YEAR', etc.
    count: number                   // e.g. 1
  }[]                               // grouped by cadence — usually one entry
  oneTime: {
    amount: number                  // cents
  } | null
  introDiscount: {
    amount: number                  // discounted cents
    months: number
  } | null
}

interface WhimAddonDef {
  id: string
  name: string
  displayName: string
  addonKey: string                  // checkout URL key: 'case', 'warranty'
  isOptional: boolean
  defaultOptionKey: string | null
  type: 'FEE' | 'PRODUCT'
  options: {
    optionKey: string               // checkout URL value: 'c1', 'w1'
    product: WhimProduct
  }[]
}