Build a Crypto Payment Gateway Using Solana Pay and React

Accepting cryptocurrency payments is becoming increasingly popular for businesses, and Solana Pay makes it fast, secure, and affordable. Whether you're building a payment gateway or exploring DeFi development services, this dev blog guide will show you how to create your own crypto payment gateway using React and Solana Pay.

Explore | A Guide to Meme Coin Development on Solana

What is Solana Pay?

Solana Pay is a payment protocol that allows businesses to accept cryptocurrency directly from customers. It's:

Fast: Transactions are completed in seconds.

Affordable: Almost zero transaction fees.

Easy to Integrate: With ready-made tools and SDKs, it's developer-friendly.

Prerequisites

Before we get started, ensure you have:

A Solana Wallet, such as Phantom.

Node.js and npm installed.

Basic knowledge of React and JavaScript.

Also Read | Distinctive Features for Solana Wallet Development

Step 1: Set Up Your Project

Create a React app:

npx create-react-app solana-pay-gateway
cd solana-pay-gateway

Install necessary libraries:

npm install @solana/web3.js @solana/pay @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets

This installs tools for connecting to Solana and managing wallets.

Step 2: Add Wallet Connection

To accept payments, users need to connect their Solana wallet.

Import the wallet libraries in App.js:

import {
  ConnectionProvider,
  WalletProvider,
  WalletModalProvider,
} from '@solana/wallet-adapter-react-ui';
import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';

Set up the wallet connection:

const wallets = [new PhantomWalletAdapter()];

function App() {
  return (
    
      
        
          
            Solana Pay Gateway
            
          
        
      
    
  );
}

export default App;

This adds a Connect Wallet button to your app. When clicked, users can link their Phantom wallet to the app.

Step 3: Generate a Payment Request

Next, we'll generate a payment link or QR code that customers can use to pay.

Import Solana Pay tools in App.js:

import { createQR, encodeURL } from '@solana/pay';
import { Keypair, PublicKey } from '@solana/web3.js';
import BigNumber from 'bignumber.js'; // Install with `npm install bignumber.js`

Create a function to generate a payment request:

const generatePaymentRequest = () => {
  const recipient = new PublicKey('Your-Solana-Wallet-Address'); // Replace with your address
  const amount = new BigNumber(1); // Payment amount in SOL
  const reference = Keypair.generate().publicKey;

  const paymentURL = encodeURL({
    recipient,
    amount,
    reference,
    label: 'Your Business Name',
    message: 'Thank you for your payment!',
  });

  const qrCode = createQR(paymentURL, { size: 256 });
  qrCode.append(document.getElementById('qr-code-container'));
};

Add a button and a container for the QR code in your app:

When the button is clicked, it generates a QR code customers can scan to pay in SOL.

Explore | Compressed NFTs (cNFTs) | Solana's Cost-Effective NFT standard

Step 4: Confirm Payments

After a payment is made, you'll want to verify it on the blockchain.

Set up a connection to Solana:

import { Connection } from '@solana/web3.js';

const connection = new Connection('https://api.mainnet-beta.solana.com');

Create a function to check for a payment:

const checkPaymentStatus = async (reference) => {
  const signatureInfo = await connection.getSignaturesForAddress(reference);

  if (signatureInfo.length > 0) {
    alert('Payment received!');
  } else {
    alert('Payment not found. Please try again.');
  }
};

Call this function with the payment reference key after generating the QR code.

Step 5: Test Your App

Start the app:

npm start

Connect your Phantom wallet using the Connect Wallet button.

Click the Generate Payment QR Code button.

Scan the QR code with your wallet and complete a test payment.

Verify the payment by calling checkPaymentStatus.

Also, Check | DeFi in Real Estate | Exploring New Horizons and Potentials

Conclusion

Solana Pay is revolutionizing crypto payments by making them fast, affordable, and easy to integrate. Whether you're a developer or a business owner, building a payment gateway with Solana Pay opens doors to the Web3 economy. Need Help with Your Project?

Looking to build advanced blockchain applications or integrate Solana Pay? Our expert crypto developers can help you create seamless and secure payment gateways tailored to your business needs. Contact us today to bring your Web3 vision to life!