Skip to main content

Integration Builder

React
Solana
Checkout

Using the Coinflow Integration Builder

This quick start guide is designed to help you seamlessly integrate Coinflow payment solutions directly onto your app. Simply copy and paste the files as is, or customize the code snippets where you see fit.

If you face any problems or questions along the way, reach out to support@coinflow.cash!

Install Solana Libraries

npm install @solana/web3.js @solana/spl-token @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets
Source

Fixing WebPack 5 issues

While using create-react-app, you may run into issues building. This is because NodeJS polyfills are not included in the latest version of webpack 5.

Dev Dependencies​

To resolve, Add the following in the devDependencies of your package.json file.

Source

Config Overrides​

Copy the file contents of config-overrides.js into your application.

Source

Solana Wallet Configuration

You're now ready to build out a Solana wallet! The following code snippet will allow you to set up a Solana wallet connection to the Solana network.

Wallet connection​

Utilizing a wallet connector streamlines the process of accessing your wallet, making it easier to manage your funds. In this example, we demonstrate how to connect to your wallet using various Solana wallet adapters.

Source

You can optionally choose to customize your wallet's functionality to fit your preferences, as long as the returned wallet object matches Coinflow's expected wallet interface, as outlined below:

{  
    publicKey: PublicKey;  
    sendTransaction: (transaction: Transaction) => Promise<string>;  
}
Source

Integrate Coinflow component

Import the Coinflow Modules into your project​

This is the main Plug and Play Modal package that contains the Coinflow SDK with the UI, giving you a simple way of implementing Coinflow within your interface.

Source

Configure the Solana Transaction​

Initialize a Solana transaction calling your program exactly like you normally would for a user traditionally paying with USDC. You will also be required to set the amount property to be the amount of USDC you are sending to the program.

Read more about how to customize a Solana purchase transaction here.

Source

Configure the Coinflow Purchase Component​

Add the CoinflowPurchase component into your UI and configure the props with the following information:

  • wallet - The Solana Wallet
  • merchantId - Your Merchant ID
  • env - Use sandbox for testing and prod for production
  • connection - The Solana Connection
  • transaction - Represents the purchase being made
  • amount - The amount of USDC you're sending to the program
  • blockchain - The Blockchain you are using (in this case, solana)
  • onSuccess - (optional) A callback function that is called when the purchase is successful
  • email - (optional) Email of the user that will be prefilled for them
  • webhookInfo - (optional) An object containing any information you want to send to your webhook
Source

Add the Coinflow component to your application​

Add the component to your application, and Coinflow will take care of the rest!

Source