> ## Documentation Index
> Fetch the complete documentation index at: https://docs.smartwpplugins.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript API

> The shared picker controller used by both checkout adapters

Unwan's picker is a small, standard-DOM controller shared by Checkout Blocks and classic checkout — there's exactly one implementation to reason about, not two.

## `window.unwanAddressPicker`

```js theme={null}
const picker = window.unwanAddressPicker.mount( element, data );
picker.update( nextData );
window.unwanAddressPicker.destroy( element );
```

| Method                    | Description                                                                                                                                                                                                                                                                    |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `mount( element, data )`  | Mounts (or retrieves the existing instance for) a controller on `element`, an `HTMLElement`. Returns the controller, or `null` if `element` isn't a real `HTMLElement`. Calling `mount` again on an already-mounted element updates it rather than creating a second instance. |
| `instance.update( data )` | Re-renders with new data — a fresh checkout option list, a changed selection, and so on.                                                                                                                                                                                       |
| `destroy( element )`      | Removes listeners and generated markup, and clears the internal instance registry for that element.                                                                                                                                                                            |

Instances are tracked in a `WeakMap` keyed by their mount element, so there's no manual bookkeeping and no risk of leaking a detached controller.

## Data shape

The controller expects roughly this shape (matching what `unwan_checkout_address_options` produces server-side):

```js theme={null}
{
  addresses: [
    {
      id: 'unwan_a_1a2b3c4d5e6f7890',
      name: 'Jordan Rivera',
      street: '123 Main St',
      details: 'Austin, TX 78701, United States',
      description: '123 Main St, Austin, TX 78701, United States',
      isDefault: true,
      fields: { /* full address field set */ },
    },
    // …
  ],
  selection: 'unwan_a_1a2b3c4d5e6f7890', // a saved ID, or "new"
  summary: { /* the currently selected option, for the collapsed view */ },
  labels: { /* unwan_checkout_picker_labels keys */ },
  searchThreshold: 4,
  disabled: false,
}
```

## The selection event

Selecting an option — by click or keyboard — dispatches a bubbling custom event on the mount element:

```js theme={null}
element.addEventListener( 'unwan-selection-change', ( event ) => {
  console.log( event.detail.value ); // a saved address ID, or "new"
} );
```

Both checkout adapters listen for this to sync their hidden field (classic checkout) or Store API extension data (Blocks) and to show/hide the native address fields underneath.

## Standard-DOM guarantees

The picker deliberately avoids anything that would make it hard to inspect, override, or extend:

* No custom element (`customElements.define`) and no Shadow DOM — everything renders as plain `<div>`/`<span>`/`<button>` markup you can select and style with ordinary CSS.
* No style mutation from JavaScript — all presentation lives in `assets/css/unwan.css`, documented on the [CSS Variables & Markup](/unwan/customization/css-and-markup) page.
* Full keyboard support out of the box: Arrow Up/Down/Left/Right, Home, and End move and select within the `role="radio"` group, matching standard radio-group behavior.

## `window.unwanClassicCheckout`

On classic checkout only, Unwan localizes a private, per-request configuration object consumed by `unwan-classic-checkout.js` to mount the shared picker into each `.unwan-checkout__selector` placeholder: checkout options for each enabled type, field keys, the store's base country, the search threshold, and picker labels. This object is checkout-request-specific and isn't intended as a public integration point — filter the data going *into* it server-side instead, via `unwan_classic_checkout_picker_data` (see the [Hooks Reference](/unwan/developers/hooks-reference)).


## Related topics

- [Classic Checkout](/unwan/checkout/classic-checkout.md)
- [CSS Variables & Markup](/unwan/customization/css-and-markup.md)
- [Architecture](/unwan/developers/architecture.md)
- [FAQ & Troubleshooting](/unwan/faq.md)
- [Checkout Blocks](/unwan/checkout/checkout-blocks.md)