> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.coinflow.cash/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.coinflow.cash/_mcp/server.

# Coinflow Withdraw Component (SDK)

## Overview

The Coinflow Withdraw Component is a React SDK that provides a prebuilt UI for handling the complete payout flow. This component manages bank authentication, KYC verification, and payout processing in a single, easy-to-integrate solution.

## When to Use This Method

#### Perfect For

**Choose this when you want the fastest integration with minimal code**

* React or Next.js applications
* Teams wanting to launch quickly (1-2 days)
* Businesses without dedicated UI/UX resources
* Platforms paying users to bank or debit card

**Integration time:** Hours, not days

#### Consider Alternatives If

**These scenarios require different implementation methods**

* **Non-React frameworks** → Use [Bank Authentication UI](./bank-authentication-ui) with iframe
* **Merchant-initiated payouts** → Use [API Integration](./api-integration) for full control
* **Custom branded UX** → Build custom UI with [API Integration](./api-integration)
* **Backend-only systems** → Use [API Integration](./api-integration) without UI components
* **Complex payout logic** → Use [API Integration](./api-integration) for custom workflows

> **Info**
>
> **Choose your flow at initialization**
>
> The Coinflow Withdraw Component supports both merchant-initiated payouts and direct user withdrawals. If your platform manages user balances internally (most SaaS, marketplace, and gaming use cases), use the [API Integration](./api-integration) method instead.

---

## React SDK Implementation

### Install Coinflow Package

Install the Coinflow React SDK using npm:

```bash
npm i @coinflowlabs/react
```

### Implement the CoinflowWithdraw Component

Add the `CoinflowWithdraw` component to your React application. For most merchant-initiated payouts to a user's bank or debit card, use the [API Integration](./api-integration) method — it does not require a wallet adapter.

#### Advanced: Connect user's wallet

The example below shows the direct-user-withdrawal pattern, where the user connects their own wallet to authorize the payout.

```javascript
<CoinflowWithdraw
  wallet={{
    publicKey: new PublicKey('<Wallet Public Key>'),
    sendTransaction: (transaction: Transaction) => Promise<string>,
    signMessage: (message: string) => Promise<string>
  }}
  merchantId={"YOUR_MERCHANT_ID"} // Your Coinflow merchant identifier
  env={"sandbox || prod"}
  onSuccess={(...args) => console.log('Withdraw Success', args)}
  blockchain={"solana"}
  email={"user-email@email.com"} // User's email (will be prefilled)
  amount={1}
/>
```

### Configure Payout Webhooks

Set up webhooks to receive notifications about payout events:

* Configure payout webhooks using the [Webhooks API](/guides/developer-resources/webhooks/withdraw-webhooks)
* Monitor webhook activity in your merchant dashboard's 'Webhook Activity' tab
* Use webhooks to track KYC completion, payout status changes, and other events

---

## React Environment Properties

| Property                      | Required | Description                                                                                                             |
| :---------------------------- | :------- | :---------------------------------------------------------------------------------------------------------------------- |
| wallet                        | Y        | Set the Solana wallet adapter                                                                                           |
| blockchain                    | Y        | The blockchain for the withdrawal (solana)                                                                              |
| merchantId                    | Y        | The merchant identifier - the source of the withdraw (Contact Coinflow support for this)                                |
| connection                    | Y        | The Solana connection                                                                                                   |
| env                           | N        | The environment - defaults to `prod`, for testing set it to `staging`                                                   |
| onSuccess                     | N        | Specify a function to run when the withdrawal process succeeds                                                          |
| lockAmount                    | N        | By default, the user is allowed to select the amount to withdraw, setting to `true` disables the input                  |
| amount                        | N/Y      | The amount of the withdrawal - only required if `lockAmount=true`                                                       |
| tokens                        | N        | Define the list of available tokens - the UI will only show items from this list                                        |
| lockDefaultToken              | N        | Defaults to `false` but when `true`, the UI will not allow the token to be changed from the default (for example, USDC) |
| email                         | N        | Set the default email to use in email entry fields                                                                      |
| bankAccountLinkRedirect       | N        | The URL to use for bank account setup instead of the default                                                            |
| supportEmail                  | N        | Your support email address, shown to the user if bank linking fails                                                     |
| supportsVersionedTransactions | N        | Instruct the system that you support versioned transactions                                                             |
| additionalWallets             | N        | Define additional wallets beyond the active wallet to associate with the user (see usage pattern below)                 |

#### Advanced: Additional wallets

When using the direct-user-withdrawal flow, you can associate additional wallets with the user beyond the active wallet.

```javascript
const additionalWallets = [
  {
    wallet: '1111111111111111111111111111111111111111111',
    blockchain: 'solana'
  }
]
```