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
User self-custodial wallet payouts
Platforms where users control their crypto wallets
Web3 gaming, DeFi, or NFT platforms

Integration time: Hours, not days

Consider Alternatives If

These scenarios require different implementation methods

Non-React frameworks → Use Bank Authentication UI with iframe
Merchant-initiated payouts → Use API Integration for full control
Custom branded UX → Build custom UI with API Integration
Backend-only systems → Use API Integration without UI components
Complex payout logic → Use API Integration for custom workflows

Merchant Payouts vs User Self-Custodial Payouts

This component is specifically designed for user self-custodial wallet payouts where users withdraw directly from their own crypto wallets. For merchant-initiated payouts from your wallet, use the API Integration method instead.

React SDK Implementation

Install Coinflow Package

Install the Coinflow React SDK using npm:

$ npm i @coinflowlabs/react

Implement the CoinflowWithdraw Component

Add the CoinflowWithdraw component to your React application:

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

Configure Payout Webhooks

Set up webhooks to receive notifications about payout events:

Configure payout webhooks using the Webhooks API
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
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)

Additional Wallets

1 const additionalWallets = [
2   {
3     wallet: '1111111111111111111111111111111111111111111',
4     blockchain: 'solana'
5   }
6 ]