MoonPay Demo Integrations

⚠️ Disclaimer: This repository contains example/sample code for demonstration and testing purposes only. It should not be considered production-ready. Use at your own risk and always perform a thorough security review before deploying any code to production.

A monorepo of demo projects showing how to integrate MoonPay widgets for buying and selling cryptocurrency. Each project demonstrates a different SDK or integration pattern.

Projects

Project	SDK	Description
moonpay-react-buy	React SDK	Buy crypto widget using @moonpay/moonpay-react
moonpay-react-sell	React SDK	Sell crypto widget using @moonpay/moonpay-react
moonpay-websdk-buy	Web SDK	Buy crypto widget using @moonpay/moonpay-js (vanilla JS)
moonpay-websdk-sell	Web SDK	Sell crypto widget using @moonpay/moonpay-js (vanilla JS)
moonpay-react-sell-oninitiatedeposit	React SDK	Sell widget with onInitiateDeposit callback + MetaMask wallet signing
server	Node.js	Shared HMAC-SHA256 URL signing server

Quick Start

Prerequisites

• Node.js 18+
• npm 9+
• A MoonPay developer account (dashboard.moonpay.com)

1. Install dependencies

npm install

This installs dependencies for all workspaces in one command.

2. Configure environment variables

Copy the example .env files and fill in your keys:

# Signing server (required)
cp server/.env.example server/.env

# React projects (optional — defaults work for local dev)
cp moonpay-react-buy/.env.example moonpay-react-buy/.env
cp moonpay-react-sell/.env.example moonpay-react-sell/.env

At minimum, set your MOONPAY_SECRET_KEY in server/.env:

MOONPAY_SECRET_KEY=sk_test_your_secret_key_here

3. Start the signing server

npm run start:server

This runs on http://localhost:5000 by default. All demo projects point here for URL signing.

4. Start a demo project

In a separate terminal, run any of:

npm run start:react-buy        # React buy widget (port 3000)
npm run start:react-sell        # React sell widget (port 3000)
npm run start:websdk-buy        # WebSDK buy widget (port 8080)
npm run start:websdk-sell       # WebSDK sell widget (port 8080)
npm run start:react-sell-deposit # React sell + onInitiateDeposit (port 3000)
npm run start:wallet-page       # MetaMask wallet signing page (port 3001)

How URL Signing Works

MoonPay requires widget URLs to be signed with HMAC-SHA256 to prevent parameter tampering. The secret key must never be exposed in frontend code.

1. Frontend builds widget URL with parameters (apiKey, walletAddress, amount, etc.)
2. Frontend sends the URL to the signing server (GET /sign-url?url=...)
3. Server signs the URL's query string with HMAC-SHA256 using the secret key
4. Signature is returned to the frontend, which passes it to the MoonPay SDK

Ports

Service	Port	Notes
Signing server	5000	Configurable via PORT env var
React demos	3000	Vite dev server
Hosted wallet page	3001	For onInitiateDeposit flow
WebSDK demos	8080	live-server

Available Scripts

All scripts can be run from the repo root:

npm run setup              # Install all dependencies
npm run start:server       # Start the signing server
npm run start:react-buy    # Start React buy demo
npm run start:react-sell   # Start React sell demo
npm run start:websdk-buy   # Start WebSDK buy demo
npm run start:websdk-sell  # Start WebSDK sell demo
npm run start:react-sell-deposit  # Start React sell + deposit demo
npm run start:wallet-page  # Start wallet signing page

Tech Stack

• React SDK: Vite + React 18 + @moonpay/moonpay-react
• Web SDK: Vanilla JS + @moonpay/moonpay-js via CDN
• Signing Server: Express.js + dotenv + Node.js crypto
• Monorepo: npm workspaces