Blockchain

Integrating WalletConnect to your website for accepting Crypto payments

William

• 5 min read
Integrating WalletConnect to your website for accepting Crypto payments
Photo by rc.xyz NFT gallery / Unsplash

To integrate WalletConnect for accepting cryptocurrency payments on your website, you need to set up a system that allows users to connect their crypto wallets to your site via WalletConnect and process payments securely. WalletConnect is an open-source protocol that facilitates secure connections between decentralized applications (dApps) and crypto wallets through QR code scanning or deep linking. Below is a step-by-step guide to help you integrate WalletConnect into your website, along with a sample implementation using JavaScript and HTML.

Step-by-Step Guide to Integrate WalletConnect

  1. Understand WalletConnect: WalletConnect enables users to connect their crypto wallets (e.g., MetaMask, Trust Wallet) to your website, allowing them to sign transactions for payments across supported blockchains like Ethereum, Solana, Polygon, and more. It’s not a payment gateway itself but a bridge to facilitate wallet interactions. You’ll need a backend or a payment processor to handle transaction logic.
  2. Choose a Crypto Payment Processor: While WalletConnect handles wallet connections, you’ll likely need a payment processor (e.g., Coinbase Commerce, BitPay, or CryptoCloud) to manage payment flows, convert crypto to fiat (if desired), and handle settlements. Some processors, like CryptoCloud, natively support WalletConnect for streamlined payments.
  3. Set Up Your Development Environment:
  • Ensure you have a web server or a framework (e.g., Node.js, React) to host your website.
  • Install Node.js and npm (Node Package Manager) to manage dependencies.
  • Use a crypto wallet for testing (e.g., MetaMask).

4. Install WalletConnect Dependencies:

  • Use the WalletConnect Web3 Provider to interact with Ethereum-based wallets.
  • Run the following command to install the necessary package:
npm install @walletconnect/web3-provider ethers
  • ethers.js is used to interact with Ethereum-based blockchains.

5. Integrate WalletConnect into Your Website:

  • Create a button for users to connect their wallets via WalletConnect.
  • Use WalletConnect to establish a connection and prompt the user to scan a QR code or use a deep link.
  • Handle payment transactions by sending requests to the connected wallet.

6. Handle Transactions:

  • After the wallet is connected, use the provider to send transaction requests (e.g., for transferring cryptocurrency to your merchant wallet).
  • Ensure you specify the recipient address (your merchant wallet), the amount, and the currency (e.g., ETH, USDC).
  • Use a payment processor’s API (if applicable) to confirm and settle transactions.

7. Test the Integration:

  • Test with a wallet like MetaMask on testnets (e.g., Ethereum Sepolia) to ensure the connection and payment flow work.
  • Verify that transactions are secure, and notifications are received in real-time.

8. Ensure Security and Compliance:

  • Enable two-factor authentication (2FA) on your wallet and payment platforms.
  • Implement Know Your Customer (KYC) and Anti-Money Laundering (AML) checks if required in your region.
  • Monitor transactions for fraud and ensure your wallet uses strong encryption.
  • Consult a legal expert to comply with cryptocurrency regulations in your country.

9. Go Live and Monitor:

  • Deploy the integration to your live website.
  • Regularly update your WalletConnect library and payment processor plugins to maintain compatibility and security.

Sample Code for WalletConnect Integration

Below is a basic example of integrating WalletConnect into a website to connect a user’s wallet and initiate a payment. This example uses HTML, JavaScript, and the WalletConnect Web3 Provider with ethers.js for Ethereum-based transactions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WalletConnect Payment Integration</title>
  <script src="https://cdn.jsdelivr.net/npm/@walletconnect/web3-provider@1.8.0/dist/umd/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.umd.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
    #status { margin-top: 20px; color: #333; }
  </style>
</head>
<body>
  <h1>Accept Crypto Payments with WalletConnect</h1>
  <button id="connectButton">Connect Wallet</button>
  <button id="payButton" style="display: none;">Pay 0.01 ETH</button>
  <p id="status">Status: Not connected</p>

  <script>
    // Initialize WalletConnect
    const provider = new WalletConnectProvider({
      infuraId: "YOUR_INFURA_PROJECT_ID", // Replace with your Infura Project ID
      chainId: 1, // Ethereum Mainnet (use 11155111 for Sepolia testnet)
    });

    const connectButton = document.getElementById("connectButton");
    const payButton = document.getElementById("payButton");
    const status = document.getElementById("status");

    // Connect wallet
    connectButton.addEventListener("click", async () => {
      try {
        await provider.enable(); // Prompt user to connect wallet (QR code or deep link)
        status.textContent = "Status: Wallet connected!";
        connectButton.style.display = "none";
        payButton.style.display = "inline-block";

        // Initialize ethers.js provider
        const ethersProvider = new ethers.providers.Web3Provider(provider);
        const signer = ethersProvider.getSigner();
        const userAddress = await signer.getAddress();
        console.log("Connected address:", userAddress);
      } catch (error) {
        status.textContent = `Status: Connection failed - ${error.message}`;
        console.error("Connection error:", error);
      }
    });

    // Handle payment
    payButton.addEventListener("click", async () => {
      try {
        const ethersProvider = new ethers.providers.Web3Provider(provider);
        const signer = ethersProvider.getSigner();
        const merchantAddress = "YOUR_MERCHANT_WALLET_ADDRESS"; // Replace with your wallet address
        const amount = ethers.utils.parseEther("0.01"); // 0.01 ETH

        // Send transaction
        const tx = await signer.sendTransaction({
          to: merchantAddress,
          value: amount,
        });
        status.textContent = `Status: Payment sent! Tx Hash: ${tx.hash}`;
        console.log("Transaction:", tx);

        // Wait for transaction confirmation
        await tx.wait();
        status.textContent = `Status: Payment confirmed! Tx Hash: ${tx.hash}`;
      } catch (error) {
        status.textContent = `Status: Payment failed - ${error.message}`;
        console.error("Payment error:", error);
      }
    });

    // Handle disconnection
    provider.on("disconnect", () => {
      status.textContent = "Status: Wallet disconnected";
      connectButton.style.display = "inline-block";
      payButton.style.display = "none";
    });
  </script>
</body>
</html>

How It Works

  • Dependencies: The code uses WalletConnect’s Web3 Provider and ethers.js via CDNs for simplicity. You can also bundle them with a build tool like Webpack.
  • Connection: Clicking "Connect Wallet" triggers WalletConnect to display a QR code or deep link, which users scan or click to connect their wallet (e.g., MetaMask).
  • Payment: After connecting, the "Pay 0.01 ETH" button sends a transaction to your merchant wallet address. The amount and currency can be customized.
  • Status Updates: The UI updates to reflect connection and payment status.
  • Security: The code handles errors and disconnection events to ensure a smooth user experience.

Additional Notes

  • Infura Project ID: Replace "YOUR_INFURA_PROJECT_ID" with your Infura or Alchemy API key to connect to the Ethereum network. Sign up at infura.io or alchemy.com to get one.
  • Merchant Wallet Address: Replace "YOUR_MERCHANT_WALLET_ADDRESS" with your actual crypto wallet address.
  • Supported Chains: WalletConnect supports multiple chains (Ethereum, Polygon, Solana, etc.). Adjust the chainId in the code to target the desired blockchain (e.g., 137 for Polygon).
  • Stablecoins: To mitigate volatility, consider accepting stablecoins like USDC or USDT, which are supported by many wallets and processors.
  • Payment Processor Integration: For a production environment, integrate with a processor like CryptoCloud or Coinbase Commerce. They provide APIs to handle payments via WalletConnect, manage conversions, and ensure compliance.
  • Testing: Test on a testnet first (e.g., Sepolia) to avoid real fund transactions. Update chainId to 11155111 for Sepolia.
  • User Experience: Ensure the payment button is clear and the QR code is easily scannable. Test with multiple wallets (e.g., MetaMask, Trust Wallet) and devices.

Compliance and Security

  • Volatility: Use stablecoins or instant fiat conversion via processors like Coinbase Commerce to avoid price fluctuations.
  • Legal: Check local regulations for cryptocurrency payments and implement KYC/AML if needed.
  • Security: Use secure wallets, enable 2FA, and monitor transactions for suspicious activity.

For further details, visit WalletConnect’s documentation or explore payment processors like CryptoCloud or Coinbase Commerce.