@lineai/agent-pay

A reusable React component library for creating beautiful payment cards with Stripe integration. Built for AI agents and humans alike.

Features

• 🎨 Beautiful, customizable payment card UI
• 🌓 Light and dark theme support
• 💳 Built on official Stripe React components
• 🔒 Secure payment processing with Stripe Elements
• 📱 Responsive design
• 🎯 Full TypeScript support
• ⚡ Easy to integrate
• 🤖 AI agent-friendly design

Installation

yarn add @lineai/agent-pay
# or
npm install @lineai/agent-pay

Quick Start

import { PaymentCard } from '@lineai/agent-pay';
import type { Product, PaymentConfig } from '@lineai/agent-pay';

const product: Product = {
  id: 'prod_123',
  name: 'Pro Plan',
  description: 'Best for growing businesses',
  price: 2999, // $29.99 in cents
  currency: 'usd',
  features: ['Feature 1', 'Feature 2'],
  recurring: { interval: 'month' }
};

const config: PaymentConfig = {
  publishableKey: 'pk_test_...',
  apiEndpoint: '/api/create-payment-intent',
  theme: 'light'
};

<PaymentCard
  product={product}
  config={config}
  onSuccess={(paymentIntent) => console.log('Success!')}
  onError={(error) => console.error('Error:', error)}
/>

Server Setup

You need a server endpoint to create payment intents:

app.post('/api/create-payment-intent', async (req, res) => {
  const { amount, currency, productId } = req.body;
  
  const paymentIntent = await stripe.paymentIntents.create({
    amount,
    currency,
    metadata: { productId }
  });
  
  res.json({ clientSecret: paymentIntent.client_secret });
});

API Reference

PaymentCard Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | product | Product | Yes | Product details to display | | config | PaymentConfig | Yes | Stripe configuration | | onSuccess | (paymentIntent) => void | No | Success callback | | onError | (error) => void | No | Error callback | | className | string | No | Additional CSS classes |

Product Interface

interface Product {
  readonly id: string;
  readonly name: string;
  readonly description: string;
  readonly price: number; // in cents
  readonly currency: string;
  readonly features?: readonly string[];
  readonly badge?: string;
  readonly recurring?: {
    readonly interval: 'month' | 'year';
    readonly intervalCount?: number;
  };
}

PaymentConfig Interface

interface PaymentConfig {
  readonly publishableKey: string;
  readonly apiEndpoint?: string;
  readonly theme?: 'light' | 'dark';
  readonly tokenAuth?: string;
}

Functional Programming Design

This library is built with functional programming principles:

• Pure functions with no side effects
• Immutable data structures
• No classes - only functions and constants
• Minimal abstractions
• Composable utilities

Development

# Install dependencies
yarn install

# Build the library
yarn build

# Run tests
yarn test

# Fix linting issues
yarn fix

License

MIT © Line AI