Base Sepolia Token Payment Flow — A Web2-to-Web3 Beginner's Guide

Welcome! This guide is designed for developers who are familiar with traditional (Web2) web development and want to learn how to build a simple Web3 payment flow using Ethereum smart contracts, MetaMask, and JavaScript. We'll break down every step and concept so you can understand not just the "how" but also the "why" behind each part.

---

What is Web3?

Web2 is the internet you know: websites, apps, and servers you control. Web3 is the next evolution, where users interact directly with decentralized networks (blockchains) and own their data, assets, and identity. Instead of logging in with a username and password, users connect with a wallet (like MetaMask) and interact with smart contracts (programs that run on the blockchain).

---

1. Deploying Your First Smart Contract (contract.sol) on Base Sepolia Testnet

Think of a smart contract as a backend program that lives on the blockchain. In this project, you'll deploy an ERC20 token contract (like a digital currency) to the Base Sepolia Testnet (a free, public Ethereum test network).

Step 1: Open Remix IDE

• Go to Remix IDE. Remix is an online code editor and deployment tool for Ethereum smart contracts. No installation needed!

Step 2: Add the Contract

• In Remix, create a new file named contract.sol.
• Copy and paste the following code:

// SPDX-License-Identifier: MIT
// Compatible with OpenZeppelin Contracts ^5.0.0
pragma solidity ^0.8.27;

import {ERC20} from "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import {ERC20Permit} from "@openzeppelin/contracts/token/ERC20/extensions/ERC20Permit.sol";

contract MyToken is ERC20, ERC20Permit {
    constructor() ERC20("MyToken", "MTK") ERC20Permit("MyToken") {}
}

What does this contract do?

• It creates a new token called MyToken with the symbol MTK.
• Anyone who deploys this contract becomes the owner of all the initial tokens.
• It's based on the ERC20 standard, which is like the "API" for tokens on Ethereum.

Step 3: Compile the Contract

• In Remix, go to the Solidity Compiler tab (left sidebar, looks like a "Solidity" logo).
• Select version 0.8.27 (or compatible).
• Click Compile contract.sol.

Step 4: Connect to Base Sepolia Testnet

• In the Deploy & Run Transactions tab, select Injected Provider - MetaMask.
• Make sure MetaMask is set to the Base Sepolia Testnet. If you don't see it, add it manually:
  • Network Name: Base Sepolia Testnet
  • RPC URL: https://sepolia.base.org
  • Chain ID: 84532
  • Currency Symbol: ETH
  • Block Explorer: https://sepolia.basescan.org

Step 5: Deploy the Contract

• Select the MyToken contract in Remix.
• Click Deploy.
• Approve the transaction in MetaMask (you'll need some testnet ETH, see Resources below).
• After deployment, copy the contract address — you'll need it for payments.

Analogy:

Think of deploying a smart contract like uploading your backend code to a public server, except this server is decentralized and everyone can see and interact with your code!

---

2. Understanding connection.js — Connecting Your Web App to Web3

In Web2, you might use OAuth or JWTs to authenticate users. In Web3, users "connect" their wallet (like MetaMask) to your app. This file helps your app talk to the user's wallet and the blockchain.

What does connection.js do?

• Network Configuration: Tells MetaMask about the Base Sepolia Testnet (so users can switch to it easily).
• Auto-Connect: Checks if the user is already connected and updates your app's state.
• Add/Switch Network: Lets users add or switch to the correct network with one click.
• Connect/Disconnect Wallet: Handles connecting and disconnecting the wallet, updating your UI.

How does it work?

1. Connect Wallet:
   • When the user clicks "Connect Wallet", the app asks MetaMask for permission to access their account.
   • If successful, the app stores the user's wallet address and updates the UI.
2. Switch/Add Network:
   • If the user is on the wrong network, the app can prompt MetaMask to switch or add the Base Sepolia Testnet.
3. Disconnect Wallet:
   • The app can "forget" the user's address and update the UI accordingly.

Important:

• The functions expect you to implement setWalletAddress, setIsConnected, and setIsConnecting — these are just ways to update your app's state (e.g., with React's useState).

Analogy:

Imagine MetaMask as a universal login for Web3. Instead of email/password, users prove who they are by signing with their wallet.

---

3. Understanding payment-flow.js — Accepting Payments in Your App

In Web2, you might use Stripe or PayPal to accept payments. In Web3, you can accept payments directly from the user's wallet to your smart contract or treasury address. This file shows how to do that using ethers.js.

What does payment-flow.js do?

• Connects to the blockchain using ethers.js and MetaMask.
• Interacts with your deployed token contract (using its address and ABI).
• Transfers tokens from the user's wallet to your treasury address.
• Handles errors (e.g., if MetaMask isn't installed or the transaction fails).

How does it work?

1. User clicks "Pay" in your app.
2. The app asks MetaMask to sign and send a transaction to transfer tokens.
3. If successful, the payment is complete and you can unlock features, show a success message, etc.

How to use it in your app

1. Install ethers.js (if you haven't):

   npm install ethers

2. Import and call the function:

   import { payEntryFeeBase } from './payment-flow.js';
   
   async function handlePayment() {
     const txHash = await payEntryFeeBase();
     if (txHash) {
       // Payment successful! Do something here:
       alert('Payment successful!');
       // e.g., unlock content, update user status, etc.
     } else {
       alert('Payment failed.');
     }
   }

3. After successful payment:
   • You can grant access, update the UI, or store the transaction hash for your records.

Analogy:

Think of this like calling a payment API, but instead of a credit card, the user pays directly from their wallet, and the transaction is recorded on the blockchain for everyone to see.

---

4. Putting It All Together — The Web3 Payment Flow

Here's how the pieces fit together:

1. User visits your app.
2. User connects their wallet (using connection.js).
3. User pays the entry fee (using payment-flow.js).
4. Your app checks for payment success and unlocks features or access.

Key Differences from Web2:

• No central server is needed to process payments — it's all peer-to-peer and trustless.
• Users control their own funds and identity.
• All transactions are transparent and verifiable on the blockchain.

---

5. Common Questions for Web2 Developers

Q: What is MetaMask? A: It's a browser extension that acts as a wallet for Ethereum and other blockchains. It lets users manage their accounts and sign transactions.

Q: What is a smart contract? A: It's a program that runs on the blockchain. Once deployed, it can't be changed, and anyone can interact with it.

Q: What is a testnet? A: A public blockchain for testing. You use fake (test) ETH and tokens, so you don't risk real money while learning or developing.

Q: What is an ABI? A: The Application Binary Interface — like an API spec for smart contracts. It tells your app how to call functions on the contract.

Q: What is an ERC20 token? A: A standard for fungible tokens on Ethereum. Think of it as the blueprint for digital currencies.

---

6. Notes & Best Practices

• Make sure users have enough testnet ETH (for gas) and your token (MTK) on Base Sepolia.
• You can get testnet ETH from Base Sepolia faucets (see Resources).
• The contract address and treasury address in payment-flow.js should match your deployed contract and intended recipient.
• Always handle errors gracefully and guide users if something goes wrong (e.g., wrong network, not enough funds).

---

7. Resources & Further Reading

• Remix IDE
• Base Sepolia Faucet
• Base Sepolia Block Explorer
• Ethers.js Documentation
• MetaMask
• What is Web3? (Ethereum.org)

---

Happy building! If you have questions or want to go deeper, check out the resources above or reach out to the Web3 community.