@zerohash-sdk/csp-fiat-withdrawals-js

A framework-agnostic JavaScript SDK for embedding the Zerohash CSP Fiat Withdrawals flow into web applications. Lets users withdraw fiat (USD) from their account to a linked bank account via ACH.

Installation

Via NPM (recommended)

npm install @zerohash-sdk/csp-fiat-withdrawals-js

import { CspFiatWithdrawals } from '@zerohash-sdk/csp-fiat-withdrawals-js';

Via CDN

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

Or import directly:

import { CspFiatWithdrawals } from 'https://sdk.connect.xyz/csp-fiat-withdrawals-web/index.js';

Getting Started

1. Import

import { CspFiatWithdrawals } from '@zerohash-sdk/csp-fiat-withdrawals-js';

2. Initialize and render

const cspFiatWithdrawals = new CspFiatWithdrawals({
  jwt: 'your-jwt-token',
  env: 'prod',
  theme: 'auto',
  onCompleted: ({ amountWithdrawn, assetSymbol }) => {
    console.log(`Withdrew ${amountWithdrawn} ${assetSymbol}`);
  },
  onError: ({ errorCode, reason }) => {
    console.error(errorCode, reason);
  },
  onClose: () => console.log('Closed'),
  onEvent: (event) => console.log('Event:', event),
  onLoaded: () => console.log('Ready'),
});

const container = document.getElementById('csp-fiat-withdrawals-container');
await cspFiatWithdrawals.render(container);

// Update configuration dynamically
cspFiatWithdrawals.updateConfig({ jwt: 'new-jwt-token', theme: 'dark' });

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

TypeScript

import { CspFiatWithdrawals, CspFiatWithdrawalsConfig } from '@zerohash-sdk/csp-fiat-withdrawals-js';

const config: CspFiatWithdrawalsConfig = {
  jwt: 'your-jwt-token',
  env: 'cert',
  theme: 'dark',
  onCompleted: ({ amountWithdrawn, assetSymbol }) => {
    console.log(`Withdrew ${amountWithdrawn} ${assetSymbol}`);
  },
};

const csp = new CspFiatWithdrawals(config);
await csp.render(document.getElementById('csp-fiat-withdrawals-container')!);

API Reference

Configuration

| Prop | Type | Required | Default | Description | | ------------- | -------------------------------------------- | -------- | -------- | -------------------------------------------- | | jwt | string | Yes | - | JWT token for authentication with Connect | | env | "prod" \| "cert" \| "dev" \| "local" | No | "prod" | Target environment | | theme | "auto" \| "light" \| "dark" | No | "auto" | Theme mode for the interface | | onCompleted | ({ amountWithdrawn, assetSymbol }) => void | No | - | Callback when the withdrawal flow completes | | onError | ({ errorCode, reason }) => void | No | - | Callback for error events | | onClose | () => void | No | - | Callback when the widget is closed | | onEvent | (event) => void | No | - | Callback for general events | | onLoaded | () => void | No | - | Callback when the widget is loaded and ready |

onCompleted payload shape: { amountWithdrawn: string; assetSymbol: string } (asset is always 'USD').

Methods

render(container: HTMLElement): Promise<void>

Renders the widget into the given container.

updateConfig(config: Partial<CspFiatWithdrawalsConfig>): void

Updates the configuration of an already rendered widget.

destroy(): void

Removes the widget from the DOM and cleans up resources.

isRendered(): boolean

Returns whether the widget is currently rendered.

getConfig(): CspFiatWithdrawalsConfig

Returns a copy of the current configuration.

Browser Support

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

More Information & Support

For comprehensive documentation, visit the Zerohash Documentation Page.