Quick Start

Quick Start

Get started with Agentis Checkout in minutes with this step-by-step guide.

Basic Usage

The simplest way to use Checkout is to wrap any button or element:

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

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

Complete Example

Here’s a more complete example with error handling and success callbacks:

import React, { useState } from 'react';
import { Checkout } from 'robocash-checkout-preview';

function PremiumDataComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  return (
    <div>
      <Checkout
        proxyURL="https://api.example.com/premium-data"
        method="GET"
        headers={{ 'Accept': 'application/json' }}
        onSuccess={(response) => {
          setData(response);
          setLoading(false);
        }}
        onError={(error) => {
          console.error('Payment failed:', error);
          setLoading(false);
        }}
      >
        <button
          onClick={() => setLoading(true)}
          disabled={loading}
        >
          {loading ? 'Processing...' : 'Get Premium Data'}
        </button>
      </Checkout>

      {data && (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      )}
    </div>
  );
}

How It Works

1. Click Detection - When user clicks the wrapped element, Checkout intercepts the click
2. Payment Check - Makes a request to your API to check if payment is required
3. Wallet Connection - If payment needed, shows modal for wallet connection
4. Payment Processing - Handles the crypto payment using EIP-712 signatures
5. API Retry - Retries the original request with payment proof
6. Success Callback - Returns the API response to your application

Next Steps

• Learn about Advanced Usage patterns
• Explore all Component Props
• Understand Supported Networks