WithdrawButtonElement

Overview

A UI element that renders a button for initiating withdrawals. This element provides a convenient one-click withdrawal experience:

Shows current available balance
Automatically handles verification if required
Opens withdrawal modal when clicked
Supports customizable styling

The button intelligently routes users to verification or withdrawal based on their account status.

Usage

Basic usage

// Create the element
const element = session.createElement("withdraw-button-element", {
  onWithdrawalRequested: () => {
    console.log("Withdrawal initiated!");
  },
});

// Mount it to a container
element.mount("#withdraw-button-container");

Customized button

const element = session.createElement("withdraw-button-element", {
  size: "4",
  variant: "solid",
  highContrast: true,
  onWithdrawalRequested: (ev) => {
    console.log("Withdrawal requested!");
  },
});

element.mount("#withdraw-button-container");

Handling verification

const element = session.createElement("withdraw-button-element", {
  onVerificationSubmitted: (ev) => {
    console.log("User completed verification!");
  },
  onWithdrawalRequested: (ev) => {
    console.log("Withdrawal requested!");
  },
});

// Custom verify handling
element.on("verify", (ev) => {
  ev.preventDefault(); // Handle verification yourself
  showCustomVerificationFlow();
});

element.mount("#container");

const element = session.createElement("withdraw-button-element", {
  size: "3",
  variant: "solid",
  onReady: (element) => {
    console.log("Button is ready");
  },
  onWithdrawalRequested: (ev) => {
    console.log("Withdrawal requested!");
  },
});

Events

Events emitted by the WithdrawButtonElement. Listen to these events using the on() method or by passing callback functions in the options.

`error`

Emitted when an error occurs during element initialization or operation. Callback signature: (error: unknown) => void

`ready`

Emitted when the element has finished loading and is ready for user interaction. Callback signature: (element: WithdrawButtonElement) => void

`optionsUpdated`

Emitted when the element’s options are updated via updateOptions(). Callback signature: (options: WithdrawButtonElementOptions) => void

`verify`

Emitted when the user clicks the button and needs to verify their identity first. By default, opens the verification modal. Call ev.preventDefault() to handle this yourself. Callback signature: (ev: CustomEvent<WithdrawButtonElement>) => void

`withdraw`

Emitted when the user clicks the button to initiate a withdrawal. By default, opens the withdrawal modal. Call ev.preventDefault() to handle this yourself. Callback signature: (ev: CustomEvent<WithdrawButtonElement>) => void

`snapshot`

Emitted when the element’s internal state changes. Callback signature: (snapshot: WithdrawButtonElementSnapshot) => void

`verificationSubmitted`

Emitted when the user successfully submits verification through the modal opened by this button. Callback signature: (ev: CustomEvent<WithdrawButtonElement>) => void

`withdrawalRequested`

Emitted when the user successfully requests a withdrawal through the modal opened by this button. Callback signature: (ev: CustomEvent<WithdrawButtonElement>) => void

Methods

`mount(container)`

Mount the element to a DOM container. The container must be an empty element. The element will be appended as a child. If the element is already mounted, this method will log a warning and return.

Parameter	Type	Description
`container`	`HTMLElement` \| `#$\{`string`\}`	The container element or a CSS selector starting with ’#‘

// Using a selector
element.mount("#my-container");

// Using an element reference
const container = document.getElementById("my-container");
element.mount(container);

`unmount()`

Remove the element from the DOM and clean up all event listeners. After unmounting, the element instance should not be reused. Create a new element instance if you need to mount again.

// Unmount when done
element.unmount();

// Commonly used in event handlers
element.on("complete", () => {
  element.unmount();
});

`updateOptions(options)`

Update the element’s configuration options after creation. Only the provided options will be updated; other options remain unchanged. The element will re-render with the new options.

Parameter	Type	Description
`options`	`Partial`<`WithdrawButtonElementOptions`>	Partial options object with the values to update

// Update a single option
element.updateOptions({
  onComplete: (ev) => {
    console.log("New handler!");
  },
});

`getSnapshot()`

Get the current state snapshot of the element. The snapshot contains the element’s current internal state, such as loading status, form values, or other element-specific data. Returns: WithdrawButtonElementSnapshot

const snapshot = element.getSnapshot();
console.log("Current state:", snapshot.state);

// Or listen for changes
element.on("snapshot", (snapshot) => {
  console.log("State changed:", snapshot);
});

Styling

Customize this element with appearance.classes. See the styling reference for the full list of stable class names and example snippets.

Types