@stble/react

React components for stble checkout - Premium, drop-in payment buttons and embeds.

Installation

npm install @stble/react @stble/sdk
# or
yarn add @stble/react @stble/sdk
# or
pnpm add @stble/react @stble/sdk

Quick Start

import { CheckoutProvider, StblePayButton } from '@stble/react';

function App() {
  return (
    <CheckoutProvider apiKey="ck_test_xxx">
      <ProductPage />
    </CheckoutProvider>
  );
}

function ProductPage() {
  return (
    <div>
      <h1>Premium Product - $10</h1>
      <StblePayButton
        mode="payment"
        amount={10_000000}
        currency="USD"
        chain="base"
        successUrl="https://yoursite.com/success"
        cancelUrl="https://yoursite.com/cancel"
      />
    </div>
  );
}

Components

CheckoutProvider

Wrap your app with the provider to enable checkout functionality.

<CheckoutProvider 
  apiKey="ck_test_xxx"
  baseUrl="https://api.stble.cc" // optional
>
  {children}
</CheckoutProvider>

StblePayButton

A premium, animated, and borderless button that handles the entire payment flow. It features:

• Chain cycling animation: Smoothly cycles through supported networks (Solana, Base, Polygon).
• Vibrant aesthetics: Interactive glow effects matching the active chain.
• Official branding: Integrated stble logo.

<StblePayButton
  mode="payment"
  amount={10_000000}       // $10 USD in micro-units
  currency="USD"           // or "USDC", "EUR", etc.
  chain="base"             // primary chain for checkout
  successUrl="/success"
  cancelUrl="/cancel"
  metadata={{ orderId: '123' }}
  
  // Optional styling overrides
  className="my-custom-class"
  style={{ maxWidth: '400px' }}
  
  // Callbacks
  onError={(error) => console.error(error)}
/>

CheckoutEmbed

Embed the checkout directly in your page.

<CheckoutEmbed
  sessionId="cs_xxx"
  width="100%"
  height={600}
  onComplete={(data) => {
    console.log('Payment complete:', data.paymentId);
  }}
  onCancel={() => {
    console.log('Payment cancelled');
  }}
  onError={(error) => {
    console.error('Checkout error:', error);
  }}
/>

Hooks

useCheckout

Access checkout functionality anywhere in your app.

function CustomCheckout() {
  const { createSession, redirectToCheckout, isLoading, error } = useCheckout();

  const handleCustomFlow = async () => {
    const session = await createSession({
      mode: 'payment',
      amount: 10_000000,
      chain: 'base',
      successUrl: '/success',
      cancelUrl: '/cancel',
    });
    
    // Redirect when ready
    window.location.href = session.checkoutUrl;
  };

  return (
    <button onClick={handleCustomFlow} disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Checkout Now'}
    </button>
  );
}

License

MIT