@connect-xyz/withdraw-js

A JavaScript SDK that enables frontend applications to seamlessly integrate with the Connect Withdraw product.

Connect Withdraw provides a secure way for end users to withdraw their funds. Learn more in the Connect Withdraw documentation.

Installation

Via NPM (recommended)

npm install @connect-xyz/withdraw-js

import { Withdraw } from '@connect-xyz/withdraw-js';

Via CDN

You can import the script in your index file and use the Withdraw class provided by it.

<script
  type="module"
  src="https://sdk.connect.xyz/withdraw-web/index.js"
></script>

Or you can directly import in your javascript code.

import { Withdraw } from 'https://sdk.connect.xyz/withdraw-web/index.js';

Getting Started

Follow these simple steps to integrate Connect Withdraw into your frontend application:

1. Import the Withdraw module

import { Withdraw } from '@connect-xyz/withdraw-js';

1.1 Or import via CDN

import { Withdraw } from 'https://sdk.connect.xyz/withdraw-web/index.js';

2. Initialize the Withdraw module into Your App

// Create a Withdraw instance with configuration
const withdraw = new Withdraw({
  jwt: 'your-jwt-token',
  env: 'production', // or 'sandbox'
  onError: ({ errorCode, reason }) => {
    console.error('Withdraw error:', errorCode, 'Reason:', reason);
  },
  onClose: () => {
    console.log('Withdraw widget closed');
  },
  onWithdrawal: ({ data }) => {
    console.log('Withdrawal completed:', data);
  },
  onEvent: ({ type, data }) => {
    console.log('Event received:', type, data);
  },
  onLoaded: () => {
    console.log('Withdraw widget loaded and ready');
  },
});

// Render the widget to a container element
const container = document.getElementById('withdraw-container');
await withdraw.render(container);

// Update configuration dynamically
withdraw.updateConfig({
  jwt: 'new-jwt-token',
  onError: newErrorHandler,
});

// Check if rendered
if (withdraw.isRendered()) {
  console.log('Widget is active');
}

// Clean up when done
withdraw.destroy();

API Reference

Withdraw widget Props

Constructor

new Withdraw(config: WithdrawConfig)

Creates a new Withdraw instance with the provided configuration.

Parameters

• config (WithdrawConfig): Configuration object
  • jwt (string, required): JWT token for authentication
  • env (string, optional): Environment - 'production' (default) or 'sandbox'
  • theme (string, optional): Theme mode - 'auto' (default), 'light', or 'dark'
  • onError (function, optional): Error callback
  • onClose (function, optional): Close callback
  • onWithdrawal (function, optional): Withdrawal callback
  • onEvent (function, optional): General event callback
  • onLoaded (function, optional): Callback when widget is loaded and ready

Methods

render(container: HTMLElement): Promise<void>

Renders the Withdraw widget to the specified container element.

await withdraw.render(document.getElementById('withdraw-container'));

updateConfig(config: Partial<WithdrawConfig>): void

Updates the configuration of an already rendered widget.

withdraw.updateConfig({
  jwt: 'new-token',
  onError: newErrorHandler,
});

destroy(): void

Removes the widget from the DOM and cleans up resources.

withdraw.destroy();

isRendered(): boolean

Returns whether the widget is currently rendered.

if (withdraw.isRendered()) {
  // Widget is active
}

getConfig(): WithdrawConfig

Returns a copy of the current configuration.

const config = withdraw.getConfig();
console.log('Current JWT:', config.jwt);

Callback Functions

For detailed information about callback events and their payloads, see the Withdraw SDK Callbacks documentation.

onError

Called when an error occurs in the Withdraw widget.

onError: ({ errorCode, reason }) => {
  // errorCode: Error code
  // reason: Human-readable error description
};

onClose

Called when the Withdraw widget is closed by the user.

onClose: () => {
  // Handle close event
};

onWithdrawal

Called when a withdrawal is completed.

onWithdrawal: ({ data }) => {
  // data: Object containing withdrawal details
};

onEvent

Called for general events from the Withdraw widget.

onEvent: ({ type, data }) => {
  // type: Event type string
  // data: Event-specific data object
};

onLoaded

Called when the Withdraw widget has fully loaded and is ready for user interaction. This callback is useful for showing loading states or performing actions once the widget is initialized.

onLoaded: () => {
  // Widget is fully loaded and ready
};

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• All modern browsers with Web Components support

More Information & Support

For comprehensive documentation or support about Connect Withdraw, visit our Documentation Page.