Configuration

The BuyButton component accepts various configuration props to customize its behavior and appearance. This page documents all available configuration options.

BuyButton Props

Name	Type	Default
`config`	`BuyButtonConfig` Payment configuration object containing backend URL, callback URL, products, and metadata	`-`
`label`	`string` Text displayed on the button	`"Pay Now"`
`variant`	`'default' \| 'outline' \| 'ghost' \| 'destructive'` Visual style variant of the button	`"default"`
`size`	`'sm' \| 'md' \| 'lg'` Size of the button	`"md"`
`disabled`	`boolean` Whether the button is disabled	`false`
`className`	`string` Additional CSS classes to apply to the button	`""`
`style`	`React.CSSProperties` Inline styles to apply to the button	`{}`
`onSuccess`	`(sessionId: string) => void` Callback function called when payment session is successfully created	`-`
`onError`	`(error: string) => void` Callback function called when payment session creation fails	`-`

BuyButtonConfig Interface

The config prop accepts a BuyButtonConfig object with the following properties:

Name	Type	Default
`backendUrl`	`string` Your API endpoint URL for creating payment sessions (e.g., '/api/okito')	`-`
`callbackUrl`	`string` URL where users are redirected after successful payment (your app's success page)	`-`
`products`	`Product[]` Array of products to purchase	`-`
`metadata`	`Record<string, any>` Optional metadata object for tracking and analytics	`undefined`

Product Interface

Each product in the products array should follow the Product interface:

Name	Type	Default
`id`	`string` Unique identifier for the product	`undefined`
`name`	`string` Display name of the product	`-`
`price`	`number` Price of the product in USD	`-`
`description`	`string` Optional description of the product	`undefined`
`quantity`	`number` Quantity of the product (defaults to 1)	`1`
`metadata`	`Record<string, any>` Optional product-specific metadata	`undefined`

Configuration Examples

Basic Configuration


<BuyButton
  config={{
    backendUrl: "/api/okito",
    callbackUrl: "https://your-app.com/success",
    products: [
      { name: "Premium Plan", price: 29.99 }
    ]
  }}
  label="Subscribe Now"
/>

Advanced Configuration


<BuyButton
  config={{
    backendUrl: "/api/okito",
    callbackUrl: "https://your-app.com/success",
    products: [
      {
        id: "premium-monthly",
        name: "Premium Plan",
        price: 29.99,
        description: "Monthly subscription with all features",
        quantity: 1,
        metadata: {
          category: "subscription",
          plan: "premium"
        }
      }
    ],
    metadata: {
      userId: "user-123",
      source: "landing-page",
      campaign: "summer-sale"
    }
  }}
  label="Get Premium"
  variant="outline"
  size="lg"
  onSuccess={(sessionId) => {
    console.log("Payment started:", sessionId);
    // Track analytics or redirect
  }}
  onError={(error) => {
    console.error("Payment failed:", error);
    // Show error message to user
  }}
/>

Styling Configuration


<BuyButton
  config={config}
  className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
  style={{
    borderRadius: "12px",
    fontWeight: "bold"
  }}
  size="lg"
/>

Required vs Optional Props

Required Props

config: Must include backendUrl, callbackUrl, and products
products: Each product must have name and price

Optional Props

All other props have default values or are optional
metadata can be omitted if not needed
onSuccess and onError callbacks are optional but recommended

Best Practices

Always provide meaningful product names for better user experience
Use descriptive callback URLs that clearly indicate success
Include metadata for analytics and tracking purposes
Handle errors gracefully with the onError callback
Test thoroughly with different product configurations
Use HTTPS for callback URLs in production
Validate products on your backend before creating payment sessions

TypeScript Support

The component is fully typed with TypeScript interfaces:


interface BuyButtonConfig {
  backendUrl: string;
  callbackUrl: string;
  products: Product[];
  metadata?: Record<string, any>;
}
 
interface Product {
  id?: string;
  name: string;
  price: number;
  description?: string;
  quantity?: number;
  metadata?: Record<string, any>;
}

This ensures type safety and provides excellent IDE support with autocomplete and error checking.