Skip to navigation
PayoutsImplementation Methods

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

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

1

Install Coinflow Package

Install the Coinflow React SDK using npm:

npm i @coinflowlabs/react
2

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.

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}
/>
3

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

PropertyRequiredDescription
walletYSet the Solana wallet adapter
blockchainYThe blockchain for the withdrawal (solana)
merchantIdYThe merchant identifier - the source of the withdraw (Contact Coinflow support for this)
connectionYThe Solana connection
envNThe environment - defaults to prod, for testing set it to staging
onSuccessNSpecify a function to run when the withdrawal process succeeds
lockAmountNBy default, the user is allowed to select the amount to withdraw, setting to true disables the input
amountN/YThe amount of the withdrawal - only required if lockAmount=true
tokensNDefine the list of available tokens - the UI will only show items from this list
lockDefaultTokenNDefaults to false but when true, the UI will not allow the token to be changed from the default (for example, USDC)
emailNSet the default email to use in email entry fields
bankAccountLinkRedirectNThe URL to use for bank account setup instead of the default
supportEmailNYour support email address, shown to the user if bank linking fails
supportsVersionedTransactionsNInstruct the system that you support versioned transactions
additionalWalletsNDefine additional wallets beyond the active wallet to associate with the user (see usage pattern below)

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'
  }
]