@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

npm install @fanbasis/checkout-core

Basic Usage

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

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

Optional Parameters

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

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

2. Fluent Builder

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)

<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

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:

<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 - Comprehensive guide and API reference
• Hosted JavaScript Quick Start - CDN integration guide
• JavaScript Library Guide - Detailed API documentation
• Migration Guide - Upgrading from older versions

🧪 Testing

# 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

# Development build
npm run build

# Production build
npm run build:prod

# CDN build
npm run build:cdn

🔍 Bundle Analysis

# 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
• Issues: GitHub Issues
• Support: [email protected]

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