Mela Pay

Landing Page
Courses Page
Cart page

Inspiration

Access to high-quality education is still limited in many parts of the world due to payment barriers. Many international platforms support only global payment methods like credit cards or PayPal, which many students in developing regions do not have.

At the same time, the Polkadot ecosystem provides fast, secure, low-fee transactions and a vision of global interoperability. That sparked a question:

What if I could use Polkadot to pay for digital education anywhere in the world?

Mela Pay was born from this idea, enabling students to buy courses (starting with edX) using DOT directly from their Polkadot wallets, instantly and without barriers.

What It Does

Mela Pay is a Web3 payment gateway that converts DOT from the Polkadot network into USD for purchasing online courses.

Before using the platform, users must install the Polkadot.js browser extension and connect their wallet: Polkadot.js Extension

Core features

Connect any Polkadot wallet (Polkadot.js extension, Nova integration planned)
Purchase courses using DOT
Automatic currency conversion (DOT to USD)
Secure on-chain transactions using Polkadot API
Real-time transaction confirmation
Clean, simple checkout experience for education platforms

In short, Mela Pay allows students to buy courses with cryptocurrency easily, safely, and globally.

How I Built It

I built Mela Pay using a modern Web3 stack.

Frontend

Next.js + React
Tailwind CSS for fast, responsive UI
Polkadot.js extension-dapp for wallet integration
React Context API for global state management

Backend

Node.js / Express
Polkadot.js API for signing and sending transactions
Currency conversion service for live DOT/USD pricing

Blockchain

Polkadot RPC (wss://rpc.polkadot.io) for chain connection
web3Enable, web3Accounts, web3FromAddress for wallet access
api.tx.balances.transfer() for secure on-chain transfers

Before interacting with any payment feature, users are required to install the Polkadot.js extension and connect their wallet to enable transactions: Polkadot.js Extension

Mathematical Conversion

DOT to USD:

[ \text{DOT_required} = \frac{\text{USD_Price}}{\text{DOT_USD_Rate}} ]

DOT to plancks:

[\text{plancks} = \text{DOT} \times 10^{12}]

These formulas ensure accurate and consistent payment amounts.

Challenges I Ran Into

Wallet compatibility

Nova Wallet does not directly sync with Polkadot.js extension. I had to design for:

Desktop extension flow
Mobile wallet

Next.js SSR vs CSR issues

Polkadot.js relies on the window object, which does not exist in server-side rendering. This produced: ReferenceError: window is not defined

I solved this by:

Lazy-loading Polkadot wallet functions
Ensuring wallet interactions run only on the client side

Transaction signing errors

I handled:

Injected signature providers
web3FromAddress signer setup
Correct Polkadot payload encoding

DOT price volatility

Real-time exchange rate fetching was required to ensure accurate payment amounts.

User experience

Designing Web3 payments to feel like a normal checkout experience required significant UX planning.

Accomplishments That I'm Proud Of

Integrated real Polkadot wallets into a functioning payment flow
Sent live on-chain transactions directly from the browser
Successfully converted DOT to USD amounts during checkout
Built a reusable Polkadot React Context
Created a working prototype that demonstrates Web3 payments for education

What I Learned

Deep knowledge of Polkadot.js APIs
Handling Web3 libraries inside SSR frameworks like Next.js
Blockchain transaction signing flow
Designing simple and reliable Web3 user experiences
Understanding the real-world use cases of interoperable blockchains