Accept Payments on Your Website

Create a skill

Install

<script src="https://js.402.md/v1/checkout.js"></script>

npm install @402md/checkout

Create a checkout and open it

<button id="pay-btn">Pay $49.00 USDC</button>

<script>
const checkout = FourOhTwo.createCheckout({
  publishableKey: 'pk_live_xxx',
  skillId: 'your-skill-id',
  amount: '49.00',
  description: 'Premium Plan - 30 days',
  type: 'subscription',

  onSuccess: (payment) => {
    console.log('Payment confirmed!', payment.txHash)
    window.location.href = `/welcome?ticket=${payment.ticket}`
  },
  onClose: () => {
    console.log('User closed checkout')
  },
  onError: (err) => {
    console.error('Checkout error:', err)
  }
})

document.getElementById('pay-btn').onclick = () => checkout.open()
</script>

npm install @402md/checkout-react

import { CheckoutProvider, CheckoutButton } from '@402md/checkout-react'

function App() {
  return (
    <CheckoutProvider publishableKey="pk_live_xxx">
      <CheckoutButton
        skillId="your-skill-id"
        amount="49.00"
        description="Premium Plan - 30 days"
        checkoutType="subscription"
        onSuccess={(payment) => {
          window.location.href = `/welcome?ticket=${payment.ticket}`
        }}
      >
        Pay $49.00 USDC
      </CheckoutButton>
    </CheckoutProvider>
  )
}

Handle the payment result

The onSuccess callback receives a PaymentResult:

interface PaymentResult {
  sessionId: string      // Checkout session ID
  txHash: string         // On-chain transaction hash
  transactionId: string  // 402.md transaction ID
  amount: string         // Confirmed amount in USDC
  ticket?: string        // JWT ticket (for subscriptions)
  orderId?: string       // Order ID (for products)
}

Use payment.ticket to grant access on your backend, or payment.txHash to verify the payment on-chain.

Verify the ticket server-side

If your skill issues tickets (subscriptions, content), verify them on your backend before granting access. See the Checkout SDK Reference for details.

Checkout types

// SaaS subscription
{ type: 'subscription', amount: '49.00' }

// Physical product (collects shipping address)
{ type: 'product', amount: '99.99', collectShipping: true }

// One-time service
{ type: 'service', amount: '25.00' }

// API call
{ type: 'api_call', amount: '0.05' }

// Content paywall
{ type: 'content', amount: '0.10' }

What happens

User clicks the button
A modal appears with a QR code, wallet address, and exact USDC amount
User sends USDC from any wallet (or connects a browser wallet directly)
402.md detects the payment on-chain and confirms in real-time via WebSocket
Your onSuccess callback fires with the payment details

Accept Payments on Your Website

Create a skill

Install

Create a checkout and open it

Handle the payment result

Verify the ticket server-side

Checkout types

What happens

Checkout SDK Reference

Webhooks

Escrow & Refunds

On this page