@lavapayments/checkout v0.1.3

Lava Checkout

A React package that provides hooks for integrating Lava's wallet-based checkout experience into your AI application.

Installation

npm install --save @lavapayments/checkout
# or
yarn add @lavapayments/checkout

Usage

Basic Implementation

import { useLavaCheckout } from '@lavapayments/checkout';
import { useState } from 'react';

function CheckoutButton() {
  const [connectionId, setConnectionId] = useState(null);
  
  const { open } = useLavaCheckout({
    onSuccess: ({ connectionId }) => {
      console.log('Checkout successful!');
      setConnectionId(connectionId);
      // Store the connectionId for your application
      saveConnectionIdToDatabase(userId, connectionId);
    },
    onCancel: ({ checkoutSessionId }) => {
      console.log('Checkout cancelled:', checkoutSessionId);
    }
  });

  return (
    <button
      onClick={() => {
        // Request a checkout session token from your backend
        fetch('/api/create-checkout-session')
          .then(res => res.json())
          .then(data => {
            // Open the checkout modal with the session token
            open(data.checkout_session_token);
          });
      }}
    >
      Connect Wallet
    </button>
  );
}

Top-up Implementation

To allow users to add funds to an existing wallet:

import { useLavaCheckout } from '@lavapayments/checkout';

function TopUpButton({ connectionId }) {
  const { open } = useLavaCheckout({
    onSuccess: () => {
      console.log('Top-up successful!');
      // Refresh balance display
    },
    onCancel: () => {
      console.log('Top-up cancelled');
    }
  });

  return (
    <button
      onClick={() => {
        // Request a top-up checkout session token from your backend
        fetch('/api/create-topup-session', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ connectionId })
        })
          .then(res => res.json())
          .then(data => {
            // Open the checkout modal with the session token
            open(data.checkout_session_token);
          });
      }}
    >
      Add Funds
    </button>
  );
}

Related Documentation

For complete documentation on Lava's usage-based billing system and backend integration, visit lavapayments.com.