initial screen
idle screen
checkout and converting
autofilled

A lot of people hold money in stablecoins like USDC, but actually using that money to shop online is still frustrating. Most websites only take credit cards, and existing “crypto cards” usually come with long wait times, full KYC, or require handing your crypto over to a custodial service.

At the same time, Mastercard has been exploring stablecoin settlement and ways to connect digital assets to their existing payment network. That got us thinking:

What if you could turn your USDC into a one-time Mastercard virtual card right at checkout?

That idea is what inspired this project.

While building this project, we learned:

How Mastercard is experimenting with stablecoin-based settlement flows.

How Chrome Extensions can interact with checkout pages, detect card fields, and inject new UI elements.

How to monitor blockchain activity directly from the frontend using public RPC endpoints.

How challenging it is to bridge three different layers:

the website the user is shopping on

a blockchain transfer

and a virtual card provisioning system

We also learned how to design a simple hackathon prototype that can scale to a real backend-powered service later.

For this hackathon, the frontend is intentionally lightweight and built entirely with:

JavaScript

HTML

CSS

Chrome Extension Manifest V3

There is a backend, but right now it only handles Solana devnet USDC transfers, written in TypeScript. In the demo, it moves USDC between two devnet accounts that I control. This simulates the real workflow without requiring full mainnet integration.

In a full production version:

the backend will run on mainnet,

transfers will go from the user’s wallet to the bank’s institutional USDC address,

and the backend will handle real settlement, confirmations, and card activation.

This separation lets us demonstrate the concept today while preparing the architecture for real-world deployment.

Key Parts of the Project

Checkout Detection

The extension scans the checkout page’s HTML to locate card number, CVV, expiration date, ZIP code, and price fields. Because every website structures these differently, we wrote flexible JavaScript logic to detect them reliably.

“Pay with USDC” Button

A custom button is injected next to the payment form. Clicking it begins the USDC payment process.

Simulated USDC Transfer (Backend in TypeScript)

For the hackathon version:

The backend handles Solana devnet transfers using TypeScript.

It sends USDC between two devnet accounts I own.

This simulates what a future mainnet transfer from a user → bank would look like.

Virtual Card Autofill

After the “transfer” is confirmed (mocked for now), the extension fills the virtual Mastercard details into the checkout form and submits it. To the website, it looks like a normal credit card transaction.

Some of the biggest challenges we encountered:

Every site designs its checkout fields differently, so writing a general-purpose detector was hard.

Doing most of the logic in the browser forced us to simulate backend features creatively.

Polling blockchain data from JS introduced timing and reliability issues.

We had to think ahead about how this prototype would fit into Mastercard’s real stablecoin settlement infrastructure.

This project explores how stablecoins could be used as everyday payment methods online. With just a browser extension, a user could turn USDC into a one-time Mastercard card and check out anywhere — instantly and with no extra merchant integration.

While the frontend is built entirely in JavaScript for hackathon speed, the backend is already written in TypeScript for handling Solana devnet USDC transfers. This sets the foundation for a future version with real mainnet transfers, real settlement, and actual card issuance.

It’s a small look at what online payments could become when blockchain and traditional payment systems finally meet.