Page cover image

Cryptocurrency Payment Gateways

1.1 Overview

CapsureLabs integrates with cryptocurrency payment gateways to facilitate secure, decentralized payments using popular crypto wallets such as MetaMask. This section provides sample code and setup instructions for integrating these gateways within CapsureLabs applications.


1.2 MetaMask Integration for Cryptocurrency Payments

1.2.1 Prerequisites

  • MetaMask is installed in the user’s browser (or mobile app).

  • Your dApp is connected to an Ethereum or compatible blockchain.

  • You have basic familiarity with Web3.js or Ethers.js libraries.

1.2.2 Installation and Setup

# Using npm for Web3.js
npm install web3

# Using npm for Ethers.js
npm install ethers

1.2.3 MetaMask Connection

// Import Web3.js or Ethers.js
const Web3 = require('web3');

// Detect MetaMask
if (typeof window.ethereum !== 'undefined') {
    const web3 = new Web3(window.ethereum);

    async function connectMetaMask() {
        try {
            // Request account access
            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
            console.log('Connected account:', accounts[0]);
        } catch (error) {
            console.error('User denied account access:', error);
        }
    }

    connectMetaMask();
} else {
    console.log('MetaMask is not installed');
}

1.2.4 Transaction

async function sendTransaction() {
    const sender = (await web3.eth.getAccounts())[0];
    const receiver = '0xYourReceiverAddressHere';
    const amountInEther = '0.01';

    try {
        const transactionHash = await web3.eth.sendTransaction({
            from: sender,
            to: receiver,
            value: web3.utils.toWei(amountInEther, 'ether'),
        });
        console.log('Transaction successful:', transactionHash);
    } catch (error) {
        console.error('Transaction failed:', error);
    }
}

sendTransaction();

1.2.5 Error Handling and Fallback

// Error handling example
if (typeof window.ethereum === 'undefined') {
    alert('MetaMask is not installed. Please install it to continue.');
} else {
    window.ethereum.on('accountsChanged', (accounts) => {
        if (accounts.length === 0) {
            console.log('User has disconnected MetaMask');
        } else {
            console.log('MetaMask account connected:', accounts[0]);
        }
    });
}

1.3 Integration with Other Wallets

1.3.1 Install WalletConnect

# Install WalletConnect and Ethers.js
npm install @walletconnect/client ethers

1.3.2 WalletConnect Initialization and Connection

const WalletConnectProvider = require("@walletconnect/client").default;
const ethers = require("ethers");

const provider = new WalletConnectProvider({
    infuraId: "YOUR_INFURA_PROJECT_ID",
});

async function connectWalletConnect() {
    // Enable session (triggers QR Code modal)
    await provider.enable();

    const web3Provider = new ethers.providers.Web3Provider(provider);
    const signer = web3Provider.getSigner();
    const address = await signer.getAddress();
    console.log('Connected WalletConnect address:', address);
}

connectWalletConnect();

1.3.3 Sending Payments through WalletConnect

async function sendPayment() {
    const signer = web3Provider.getSigner();
    const receiverAddress = "0xReceiverAddressHere";
    const tx = {
        to: receiverAddress,
        value: ethers.utils.parseEther("0.01"),
    };

    try {
        const txResponse = await signer.sendTransaction(tx);
        console.log('Transaction sent:', txResponse);
        const receipt = await txResponse.wait();
        console.log('Transaction confirmed:', receipt);
    } catch (error) {
        console.error('Payment error:', error);
    }
}

sendPayment();

Last updated