GenerateWithdrawalReceiptElement

Overview

A UI element that allows users to generate and request a receipt for a specific withdrawal. This element handles the receipt generation flow, including:

Displaying withdrawal details
Allowing the user to request a receipt
Sending the receipt to the user’s email

Usage

Basic usage

// Create the element with a specific withdrawal ID
const element = session.createElement("generate-withdrawal-receipt-element", {
  withdrawalId: "withdrawal_abc123",
  onReceiptRequested: () => {
    console.log("Receipt sent to email!");
  },
});

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

// Show the element in a modal overlay
const modal = session.showGenerateWithdrawalReceiptModal({
  withdrawalId: "withdrawal_abc123",
  onReceiptRequested: (ev) => {
    console.log("Receipt requested!");
    // Element auto-unmounts by default
  },
  onClose: (ev) => {
    ev.preventDefault();
    modal.close();
  },
});

Listening to events

const element = session.createElement("generate-withdrawal-receipt-element", {
  withdrawalId: "withdrawal_abc123",
});

element.on("ready", () => {
  console.log("Element loaded");
});

element.on("receiptRequested", (ev) => {
  console.log("Receipt requested!");
  ev.preventDefault(); // Keep element mounted
  showSuccessMessage();
});

element.mount("#container");

const element = session.createElement("generate-withdrawal-receipt-element", {
  withdrawalId: "withdrawal_abc123",
  onReady: (element) => {
    console.log("Receipt generator is ready");
  },
  onReceiptRequested: (ev) => {
    console.log("Receipt requested!");
  },
});

Events

Events emitted by the GenerateWithdrawalReceiptElement. 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: GenerateWithdrawalReceiptElement) => void

`optionsUpdated`

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

`snapshot`

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

`close`

Emitted when the user closes the receipt generator without requesting a receipt. Call ev.preventDefault() to prevent the element from automatically unmounting. Callback signature: (ev: CustomEvent<any>) => void

`receiptRequested`

Emitted when the user successfully requests a receipt for the withdrawal. The receipt will be sent to the user’s email address. Call ev.preventDefault() to prevent the element from automatically unmounting. Callback signature: (ev: CustomEvent<any>) => 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`<`GenerateWithdrawalReceiptElementOptions`>	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: GenerateWithdrawalReceiptElementSnapshot

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