Mela Pay

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 Blockchain ecosystem provides fast, secure, low-fee transactions and a vision of global interoperability. That sparked a question:

What if I could use Cryptocurrencies 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

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

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