Languages
ENGLISH
Work
Experience /
Trainings / Internship
EducationAccepting 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 (
<ConnectionProvider endpoint="https://api.mainnet-beta.solana.com">
<WalletProvider wallets={wallets}>
<WalletModalProvider>
<div className="App">
<h1>Solana Pay Gateway</h1>
<WalletConnectButton />
</div>
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
}
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:
<button onClick={generatePaymentRequest}>Generate Payment QR Code</button>
<div id="qr-code-container"></div>
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!
