ElvixAddressBook

Single-frame wizard for billing or shipping addresses with Google Places search, default toggle, and tap-to-edit.

app/checkout/shipping/page.tsx

"use client";

import { ElvixAddressBook } from "@elvix.is/sdk/react";

export function CheckoutShippingPane({ userName }: { userName?: string }) {
  return (
    <ElvixAddressBook
      kind="shipping"
      width={360}
      userDisplayName={userName}
      onChange={(addresses) => {
        // Re-read the default for your checkout summary.
        const def = addresses.find((a) => a.isDefault);
        console.log("default shipping address:", def?.id);
      }}
    />
  );
}

Props

Prop	Type	Required	Default	Description
`kind`	`"billing" \| "shipping"`	required	.	Scopes the address book to one kind. One mount per kind. Fixed for you when you use the `ElvixBillingAddressBook` / `ElvixShippingAddressBook` aliases.
`card`	`boolean`	optional	`true`	Render inside the `<ElvixCard>` chrome (brand border + Secured-by-elvix badge). Pass `false` for a bare frame when composing into your own surface.
`height`	`number`	optional	`520`	Fixed frame height in pixels. Takes precedence over min/max.
`minHeight`	`number`	optional	.	Bottom bound when `height` is unset.
`maxHeight`	`number`	optional	.	Top bound when `height` is unset.
`width`	`number \| string`	optional	`"100%"`	Frame width. Pass a number for fixed pixels.
`userDisplayName`	`string \| null`	optional	.	Powers the recipient "Me" card. Falls back to email or "You".
`onChange`	`(addresses: AddressRecord[]) => void`	optional	.	Fires after every successful save or delete with the full list. Use this when you need the rows.
`onResult`	`(result: ElvixAddressBookResult) => void`	optional	.	Terminal callback with a count-only success or `{ ok: false, error, message }`. Safe analytics hook, never carries rows.

Everything happens inside the frame. There is no redirect field on the result and the SDK never navigates the host. If your checkout needs to advance after a save, do it from onChange or onResult in the host wrapper.

onResult never carries the address rows. If you need the actual records (for a summary panel, a server sync, anything), read them from onChange(addresses) instead. The split is deliberate: onResult is the safe analytics hook, onChange is the data hook.

Kind-fixed aliases

Prefer an explicit name and never want to pass kind? Import ElvixBillingAddressBook or ElvixShippingAddressBook — thin aliases that fix kind for you (same pattern as ElvixSignOutMenuItem / ElvixSignOutLink). Every other prop (card, width, height, userDisplayName, onChange, onResult) is identical.

app/account/addresses/page.tsx

"use client";

import {
  ElvixBillingAddressBook,
  ElvixShippingAddressBook,
} from "@elvix.is/sdk/react";

export function AddressesPane() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      {/* No `kind` prop — the alias fixes it. */}
      <ElvixBillingAddressBook width={400} />
      <ElvixShippingAddressBook width={400} />
    </div>
  );
}

ElvixLegalEntities

Single-frame multi-step wizard for legal entities (individual, sole prop, company) with VAT live-validation and tap-to-edit.

Read

ElvixRegion

Single-frame wizard for the user's regional preferences singleton: country cascade plus tap-to-edit on every derived field.