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

A React 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.

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

Installation

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

Getting Started

1. Import the CspFiatWithdrawals component

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

2. Add it to your app

function App() {
  const jwt = 'your-jwt-token'; // Obtain this from your backend

  return (
    <CspFiatWithdrawals
      jwt={jwt}
      env="prod" // or "cert" for testing
      theme="auto"
    />
  );
}

3. Configure event callbacks (optional)

<CspFiatWithdrawals
  jwt={jwt}
  env="prod"
  theme="auto"
  onCompleted={({ amountWithdrawn, assetSymbol }) => {
    console.log(`Withdrew ${amountWithdrawn} ${assetSymbol}`);
  }}
  onError={({ errorCode, reason }) => {
    console.error(errorCode, reason);
  }}
  onClose={() => console.log('Widget closed')}
  onEvent={(event) => console.log('Event:', event)}
  onLoaded={() => console.log('Widget ready')}
/>

API Reference

CspFiatWithdrawals Component Props

| 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').

More Information & Support

For comprehensive documentation, visit the Zerohash Documentation Page.