# `plandalf.mount()`

Mount an offer in an element.

Implemented by the [browser object](https://github.com/plandalf/numi/blob/fc6f42b5ade3d63b71623934838a6509f17203e2/packages/sdk/src/browser.ts#L437); parameter and return types follow the [delegated class declaration](https://github.com/plandalf/numi/blob/fc6f42b5ade3d63b71623934838a6509f17203e2/packages/sdk/src/core/sdk.ts#L602).

Call this after `plandalf.ready()`. The browser wrapper can return `undefined` before initialization.

## Signature

```typescript
plandalf.mount(
  target: HTMLElement | string,
  slug: string,
  opts?: MountOptions,
): FlowHandle<Flow>
```

## Arguments

| Name | Type | Meaning |
| --- | --- | --- |
| `target` | `HTMLElement` \| `string` | Element or CSS selector to mount into. |
| `slug` | `string` | Published offer slug. |
| `opts?` | [`MountOptions`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions) | Inline mount options passed through to the class. The browser wrapper declares this argument as `any` and passes it to the typed class method. |

## Example

```javascript title="mount.js" lineNumbers lineNumberStart=1
plandalf.ready(async () => {
  const handle = plandalf.mount('#checkout', 'upgrade', {
    promo: 'early-bird',
    metadata: { source: 'pricing-page' },
  })
  const flow = await handle
  console.log(flow.id, flow.state)
})
```

## Mount options

These fields come from [`MountOptions`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions). The current `mount()` implementation forwards `user`, `promo`, `properties`, and `metadata`; the other three fields are declared but are not forwarded to checkout.

| Field | Type | Meaning |
| --- | --- | --- |
| [`continuity?`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions#continuity) | [`ContinuityScope`](https://plandalf.com/docs/packages/sdk/referenced-types/ContinuityScope) | Declared in the type; the current `mount()` implementation does not forward it. |
| [`metadata?`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions#metadata) | `Record`\<`string`, `string`\> | Per-call Stripe-customer metadata. Eager strings only. |
| [`mode?`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions#mode) | `"test"` \| `"live"` \| `"preview"` | Declared in the type; the current `mount()` implementation does not forward it. |
| [`promo?`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions#promo) | `string` | Promo slug; the SDK resolves the active tier internally and applies its price. |
| [`properties?`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions#properties) | `Record`\<`string`, `unknown`\> | Per-call form-field prefill. Wins over PlandalfConfig.properties on overlap. |
| [`session?`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions#session) | `string` \| `null` | Declared in the type; the current `mount()` implementation does not forward it. |
| [`user?`](https://plandalf.com/docs/packages/sdk/interfaces/MountOptions#user) | `string` | Per-call JWT override — overrides the global `identify()` for this mount. |

## Resolved flow

Awaiting the handle gives a [`Flow`](https://plandalf.com/docs/packages/sdk/interfaces/Flow), after the inline checkout mounts. Its top-level fields are:

| Field | Type | Meaning |
| --- | --- | --- |
| [`harness`](https://plandalf.com/docs/packages/sdk/interfaces/Flow#harness) | [`HarnessDefinition`](https://plandalf.com/docs/packages/sdk/interfaces/HarnessDefinition) | The flow's step and block definition. |
| [`id`](https://plandalf.com/docs/packages/sdk/interfaces/Flow#id) | `string` | ID for this flow instance. |
| [`state`](https://plandalf.com/docs/packages/sdk/interfaces/Flow#state) | [`FlowState`](https://plandalf.com/docs/packages/sdk/interfaces/FlowState) | Current status, step, and context. |
| [`template`](https://plandalf.com/docs/packages/sdk/interfaces/Flow#template) | [`FlowTemplate`](https://plandalf.com/docs/packages/sdk/interfaces/FlowTemplate) | Offer template used by the flow. |

The `flow.state` object contains:

| Field | Type | Meaning |
| --- | --- | --- |
| [`context`](https://plandalf.com/docs/packages/sdk/interfaces/FlowState#context) | [`FlowContext`](https://plandalf.com/docs/packages/sdk/interfaces/FlowContext) | Customer, cart, and payment context. |
| [`currentStep`](https://plandalf.com/docs/packages/sdk/interfaces/FlowState#currentstep) | `string` \| `null` | Current step ID, or null. |
| [`error?`](https://plandalf.com/docs/packages/sdk/interfaces/FlowState#error) | `Error` | Current error, if any. |
| [`status`](https://plandalf.com/docs/packages/sdk/interfaces/FlowState#status) | [`FlowStatus`](https://plandalf.com/docs/packages/sdk/type-aliases/FlowStatus) | Current flow lifecycle status. |
| [`stepData`](https://plandalf.com/docs/packages/sdk/interfaces/FlowState#stepdata) | `Record`\<`string`, `unknown`\> | Data stored by step ID. |

The flow also provides methods such as [`close()`](https://plandalf.com/docs/packages/sdk/interfaces/Flow#close) and [`on()`](https://plandalf.com/docs/packages/sdk/interfaces/Flow#on).

## Returns

[`FlowHandle`](https://plandalf.com/docs/packages/sdk/interfaces/FlowHandle)\<[`Flow`](https://plandalf.com/docs/packages/sdk/interfaces/Flow)\>

## Behaviour

The handle resolves when the flow has mounted, rather than when a purchase completes.

[All plandalf methods](https://plandalf.com/docs/sdk)

Source: https://plandalf.com/docs/sdk/mount