robocash-checkout-preview

Robocash Checkout Preview

Note: This is a preview package published temporarily. The final package will be published as robocash-checkout under the official Robocash organization.

One-line React component for x402 crypto payment integration. Enable API monetization with crypto payments in seconds.

Installation

npm install robocash-checkout-preview

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom @rainbow-me/rainbowkit@^2.0.0 @tanstack/react-query@^5.18.0 viem@^2.7.0 wagmi@^2.5.0

Usage

import { Checkout } from 'robocash-checkout-preview';

function App() {
  return (
    <Checkout proxyURL="https://api.example.com/protected">
      <button>Access Premium API</button>
    </Checkout>
  );
}

Note: CSS styles are automatically injected, no separate CSS import needed!

That's it! When users click the button, Robocash Checkout will:

• Check if the API requires payment (402 status)
• Parse payment requirements from the response headers
• Show a payment modal with wallet connection
• Handle the crypto payment flow
• Retry the API request with payment proof
• Cache successful payments for future requests

Features

• 🚀 Zero Configuration - Works out of the box
• 💳 Auto Payment Detection - Dynamically reads 402 requirements
• 🔌 Built-in Wallet Support - MetaMask, WalletConnect, Coinbase
• 🎨 Auto Theme Detection - Light/dark mode support
• 💾 Smart Caching - Payments and API responses cached based on server session duration
• 🔒 TypeScript Support - Full type safety

Next.js Integration

Robocash Checkout works seamlessly with Next.js App Router. The package includes 'use client' directives for all components.

// app/page.tsx
import { Checkout } from 'robocash-checkout-preview';

export default function Page() {
  return (
    <Checkout proxyURL="https://api.example.com/data">
      <button>Access API</button>
    </Checkout>
  );
}

Advanced Usage

<Checkout
  proxyURL="https://api.example.com/data"
  method="POST"
  headers={{ 'Custom-Header': 'value' }}
  body={{ data: 'payload' }}
  theme="dark"
  onSuccess={(response) => console.log('Success!', response)}
  onError={(error) => console.error('Error:', error)}
>
  <button>Make API Call</button>
</Checkout>

Props

• proxyURL (required): The API endpoint to access
• method: HTTP method (default: 'GET')
• headers: Custom headers to include
• body: Request body for POST/PUT requests
• theme: 'light' | 'dark' | 'auto' (default: 'auto')
• onSuccess: Callback when API call succeeds
• onError: Callback when API call fails

How It Works

• Your server responds with HTTP 402 and payment requirements in headers:

  HTTP/1.1 402 Payment Required
  X-Payment-Requirements: {"amount":"0.01","token":"USDC","recipient":"0x...","chain":1}
  

If your APIs are not x402 compatible, you can make a simple gateway here https://userobo.cash/gateway to instantly transform your API into a paid endpoint with no code.

• Robocash Checkout automatically:

• Parses the requirements
• Connects user's wallet
• Creates EIP-712 typed data
• Gets signature from user
• Submits payment
• Retries request with proof

• Your server verifies payment and returns the protected resource

License

MIT