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 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

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 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. For most merchant-initiated payouts to a user’s bank or debit card, use the 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.

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

Advanced: Additional wallets

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

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