# @fanbasis/checkout-core

Core payment checkout functionality for the Fanbasis SDK. This package provides the foundational JavaScript library for integrating Fanbasis checkout into any web application.

## 🚀 Quick Start

### Installation

```bash
npm install @fanbasis/checkout-core
```

### Basic Usage

```javascript
import { PaymentCheckout } from '@fanbasis/checkout-core';

const checkout = PaymentCheckout.create({
  creatorId: 'your-creator-id',
  productId: 'your-product-id',
  checkoutSessionSecret: 'your-session-secret',
  environment: 'sandbox'
});

// Attach to DOM element and initialize
const container = document.getElementById('checkout-container');
checkout.attachToElement(container);
await checkout.init();
```

## 📦 Package Contents

### Core Exports

- **`PaymentCheckout`** - Main checkout class for creating and managing checkout instances
- **`EventEmitter`** - Event system for handling checkout lifecycle events
- **Type definitions** - Complete TypeScript support

### Embed Exports

- **`/embed`** - Hosted JavaScript solution for CDN integration
- **Global API** - `window.PaymentCheckout` for browser environments
- **Attribute parsing** - Automatic configuration from HTML data attributes

## 🎯 Key Features

- **Framework Agnostic** - Works with any JavaScript framework or vanilla JS
- **TypeScript Support** - Full type definitions included
- **Event System** - Comprehensive event handling for checkout lifecycle
- **Theme Customization** - Extensive styling and layout options
- **Multiple Integration Methods** - Configuration objects, fluent builder, data attributes
- **Hosted Solution** - CDN-ready embed script for quick integration
- **Production Ready** - Built-in error handling, validation, and security features

## 📋 Configuration

### Required Parameters

```typescript
interface CheckoutConfig {
  creatorId: string;              // Your creator identifier
  productId: string;              // The product to sell
  checkoutSessionSecret: string;  // Session secret for security
  environment: 'sandbox' | 'production';
}
```

### Optional Parameters

```typescript
interface CheckoutConfig {
  // Additional products to offer
  bumpProductIds?: string[];
  
  // Pre-applied coupon and affiliate tracking
  couponCode?: string;
  affiliateCode?: string;
  
  // Custom API endpoint
  overrideBaseUrl?: string;
  
  // Theme customization
  theme?: CustomizationParams;
  
  // Container styling
  containerOptions?: {
    width?: string;
    height?: string;
  };
  
  // Redirect behavior
  redirectSettings?: RedirectSettings;
  
  // Submit button control
  showSubmitButton?: boolean;
}
```

## 🔧 Integration Methods

### 1. Configuration Object

```javascript
const checkout = PaymentCheckout.create({
  creatorId: 'creator_123',
  productId: 'product_456',
  checkoutSessionSecret: 'secret_789',
  environment: 'sandbox'
});
```

### 2. Fluent Builder

```javascript
const checkout = PaymentCheckout.create()
  .creatorId('creator_123')
  .productId('product_456')
  .checkoutSessionSecret('secret_789')
  .environment('sandbox')
  .theme({
    theme: 'dark',
    accent_color: '#ff6b6b'
  })
  .build();
```

### 3. Data Attributes (Embed)

```html
<div data-checkout
     data-creator-id="creator_123"
     data-product-id="product_456"
     data-checkout-session-secret="secret_789"
     data-environment="sandbox">
</div>
```

## 📡 Event Handling

```javascript
checkout.on('checkout:opened', () => {
  console.log('Checkout opened');
});

checkout.on('checkout:success', (data) => {
  console.log('Payment successful:', data.transactionId);
});

checkout.on('checkout:error', (error) => {
  console.error('Payment failed:', error.message);
});
```

## 🌐 Hosted JavaScript

For quick integration without a build process, use the hosted JavaScript:

```html
<script src="https://cdn.embedded.fanbasis.io/embed/index.js"></script>
<script>
  PaymentCheckout.create({
    creatorId: 'creator_123',
    productId: 'product_456',
    checkoutSessionSecret: 'secret_789',
    environment: 'sandbox'
  }).attachTo(document.getElementById('checkout-container'));
</script>
```

## 📚 Documentation

- **[Complete Documentation](https://demo.embedded.fanbasis.io/docs)** - Comprehensive guide and API reference
- **[Hosted JavaScript Quick Start](https://demo.embedded.fanbasis.io/docs/hosted-javascript)** - CDN integration guide
- **[JavaScript Library Guide](https://demo.embedded.fanbasis.io/docs/javascript-sdk)** - Detailed API documentation
- **[Migration Guide](./docs/migration-guide.md)** - Upgrading from older versions

## 🧪 Testing

```bash
# Run unit tests
npm test

# Run tests in watch mode
npm run test:watch

# Run integration tests
npm run test:e2e

# Run with coverage
npm run test:coverage
```

## 📦 Build

```bash
# Development build
npm run build

# Production build
npm run build:prod

# CDN build
npm run build:cdn
```

## 🔍 Bundle Analysis

```bash
# Analyze bundle size
npm run analyze

# Check size limits
npm run size
```

## 📄 License

This package is part of the Fanbasis Payment SDK. See the main project for license information.

## 🆘 Support

- **Documentation**: [docs.fanbasis.com](https://docs.fanbasis.com)
- **Issues**: [GitHub Issues](https://github.com/fanbasis/payments-sdk/issues)
- **Support**: [support@fanbasis.com](mailto:support@fanbasis.com)

---

**Size**: ~50KB (gzipped)  
**Dependencies**: eventemitter3  
**Browser Support**: Modern browsers with ES2020+ support