@402md/checkout

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('Paid!', payment.txHash)
  }
})

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

interface CheckoutSession {
  sessionId: string    // Unique session identifier
  exactAmount: string  // Amount with precision suffix for matching
  expiresAt: string    // ISO 8601 expiration timestamp
  status: string       // CONFIRMED | SETTLED | EXPIRED | CANCELLED
}

npm install @402md/checkout-react

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

function App() {
  return (
    <CheckoutProvider publishableKey="pk_live_xxx">
      <MyApp />
    </CheckoutProvider>
  )
}

import { useCheckout } from '@402md/checkout-react'

function PayButton() {
  const { open, close, isOpen, isLoading, payment } = useCheckout({
    skillId: 'your-skill-id',
    amount: '49.00',
    description: 'Premium Plan',
    type: 'subscription',
    onSuccess: (payment) => {
      console.log('Paid!', payment.txHash)
    }
  })

  return <button onClick={open} disabled={isLoading}>Pay Now</button>
}

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

<CheckoutButton
  skillId="your-skill-id"
  amount="49.00"
  description="Premium Plan"
  checkoutType="subscription"
  onSuccess={(payment) => {
    window.location.href = `/welcome?ticket=${payment.ticket}`
  }}
  className="my-button"
>
  Buy Now - $49.00 USDC
</CheckoutButton>

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

function PricingPage() {
  const router = useRouter()

  return (
    <CheckoutProvider publishableKey="pk_live_xxx">
      <h1>Pricing</h1>

      <CheckoutButton
        skillId="analytics-dashboard"
        amount="49.00"
        description="Analytics Pro - 30 days"
        checkoutType="subscription"
        onSuccess={(payment) => {
          router.push(`/dashboard?ticket=${payment.ticket}`)
        }}
      >
        Subscribe - $49.00/mo
      </CheckoutButton>

      <CheckoutButton
        skillId="widget-store"
        amount="29.99"
        description="Starter Widget"
        checkoutType="product"
        collectShipping
        onSuccess={(payment) => {
          router.push(`/orders/${payment.orderId}`)
        }}
      >
        Buy Widget - $29.99
      </CheckoutButton>
    </CheckoutProvider>
  )
}