MoonPay Widget

npm install @moonpay/moonpay-js

import { loadMoonPay } from '@moonpay/moonpay-js';

<script src="https://static.moonpay.com/web-sdk/v1/moonpay-web-sdk.min.js" defer></script>

import { loadMoonPay } from '@moonpay/moonpay-js';
 
// First, fetch a signed URL from your backend (see URL Signing)
const signedUrl = await fetch('/api/moonpay/sign-url', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    flow: 'buy',
    currencyCode: 'eth',
    walletAddress: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe',
    baseCurrencyCode: 'idr',
    baseCurrencyAmount: '500000',
    externalTransactionId: 'koramp_order_abc123',
  }),
}).then((r) => r.json()).then((d) => d.signedUrl);
 
// Initialize the SDK with the signed URL
const init = await loadMoonPay();
const sdk = new init({
  flow: 'buy',
  environment: 'sandbox',
  variant: 'overlay',
  params: { signedUrl },
  onCloseOverlay: () => {
    console.log('Widget closed by user');
  },
});
 
sdk.show();

const sdk = new init({
  flow: 'buy',
  environment: 'sandbox',
  variant: 'embedded',
  containerNodeSelector: '#moonpay-container',
  params: {
    apiKey: process.env.NEXT_PUBLIC_MOONPAY_API_KEY,
    currencyCode: 'eth',
    baseCurrencyCode: 'idr',
    externalTransactionId: 'koramp_order_abc123',
    // If walletAddress is included, a signed URL is REQUIRED
  },
});
// For embedded, do not call sdk.show()

import { loadMoonPay } from '@moonpay/moonpay-js';
 
const init = await loadMoonPay();
const sdk = new init({
  flow: 'sell',
  environment: 'sandbox',
  variant: 'overlay',
  params: {
    apiKey: process.env.NEXT_PUBLIC_MOONPAY_API_KEY,
    baseCurrencyCode: 'eth',         // crypto to sell
    quoteCurrencyCode: 'idr',        // fiat the user receives
    baseCurrencyAmount: '0.01',
    email: 'user@example.com',
    externalTransactionId: 'koramp_sell_xyz789',
    // refundWalletAddress: '0x...' → if included, a signed URL is REQUIRED
  },
  onCloseOverlay: () => console.log('Widget closed'),
});
 
sdk.show();

import crypto from 'crypto';
 
export function signMoonPayUrl(url: string, secretKey: string): string {
  // Extract the query string (includes the leading '?')
  const urlObj = new URL(url);
  const queryString = urlObj.search; // e.g. "?apiKey=pk_test_...&walletAddress=0x..."
 
  // Generate HMAC-SHA256, encode to base64
  const signature = crypto
    .createHmac('sha256', secretKey)
    .update(queryString)
    .digest('base64');
 
  // URL-encode the signature and append it last
  return `${url}&signature=${encodeURIComponent(signature)}`;
}
 
// Example usage in a Next.js API route
// app/api/moonpay/sign-url/route.ts
import { NextRequest, NextResponse } from 'next/server';
 
export async function POST(req: NextRequest) {
  const { currencyCode, walletAddress, baseCurrencyCode, baseCurrencyAmount, externalTransactionId } =
    await req.json();
 
  const params = new URLSearchParams({
    apiKey: process.env.MOONPAY_PUBLISHABLE_KEY!,
    currencyCode,
    walletAddress,
    baseCurrencyCode,
    baseCurrencyAmount: String(baseCurrencyAmount),
    externalTransactionId,
  });
 
  const baseUrl = `https://buy-sandbox.moonpay.com/?${params.toString()}`;
  const signedUrl = signMoonPayUrl(baseUrl, process.env.MOONPAY_SECRET_KEY!);
 
  return NextResponse.json({ signedUrl });
}

npm install moonpay-node

import MoonPay from 'moonpay-node';
 
const moonPay = new MoonPay(process.env.MOONPAY_SECRET_KEY!);
 
// Return only the signature (no URL-encoding — the SDK handles it)
const signature = moonPay.url.generateSignature(
  'https://buy-sandbox.moonpay.com/?apiKey=pk_test_...&walletAddress=0x...'
);
 
// Or return the full signed URL
const signedUrl = moonPay.url.generateSignature(
  'https://buy-sandbox.moonpay.com/?apiKey=pk_test_...&walletAddress=0x...',
  { returnFullURL: true }
);

import crypto from 'crypto';
import { NextRequest, NextResponse } from 'next/server';
 
export async function POST(req: NextRequest) {
  const rawBody = await req.text();
  const signatureHeader = req.headers.get('moonpay-signature-v2') ?? '';
 
  // Parse header: "t=1234567890,s=abc123..."
  const parts = Object.fromEntries(
    signatureHeader.split(',').map((part) => part.split('=') as [string, string])
  );
  const timestamp = parts['t'];
  const receivedSig = parts['s'];
 
  // Compute expected signature
  const expectedSig = crypto
    .createHmac('sha256', process.env.MOONPAY_WEBHOOK_KEY!) // Webhook API Key
    .update(`${timestamp}.${rawBody}`)
    .digest('hex');
 
  if (expectedSig !== receivedSig) {
    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
  }
 
  const event = JSON.parse(rawBody);
 
  // Idempotency: check whether this event has already been processed
  // use event.type + event.data.id + event.data.updatedAt as the dedup key
 
  console.log('MoonPay webhook event:', event.type, event.data?.id);
 
  return NextResponse.json({ received: true });
}