Skip to main content

Implementation Guides

Welcome to the Fanfare implementation guides. These step-by-step tutorials show you how to integrate Fanfare into your application for specific use cases.

Guide Categories

Integration Patterns

Choose the right integration pattern for your application architecture:
GuideBest ForComplexity
SPA IntegrationReact, Vue, Angular appsBeginner
SSR IntegrationNext.js, Remix, Nuxt appsIntermediate
Headless IntegrationCustom UI, mobile appsAdvanced
Mobile WebViewiOS/Android WebView appsIntermediate

Authentication

Understand how to authenticate consumers in your Fanfare integration:
GuideDescriptionComplexity
Anonymous ConsumersGuest checkout flowsBeginner
Identified ConsumersLogged-in user flowsIntermediate
Consumer LinkingConverting anonymous to identifiedIntermediate
JWT TokensServer-side authenticationAdvanced

Checkout Integration

Connect Fanfare with your checkout flow:
GuideDescriptionComplexity
Checkout OverviewUnderstanding checkout flowsBeginner
Cart ReservationReserving inventory during checkoutIntermediate
Payment ProcessingIntegrating with payment providersIntermediate
Order CompletionHandling order webhooksIntermediate

Platform Integrations

Platform-specific integration guides:
GuidePlatformComplexity
ShopifyShopify storesBeginner
WooCommerceWordPress/WooCommerceIntermediate
Custom PlatformCustom e-commerceAdvanced

Use Cases

End-to-end implementation guides for common scenarios:
GuideScenarioDistribution Type
Product LaunchHigh-demand product releaseQueue
Flash SaleTime-limited sale eventDraw (Lottery)
Limited EditionExclusive item releaseAuction
Appointment BookingService schedulingAppointment
Event TicketingConcert/event ticketsQueue + Draw

Advanced Topics

Deep dives into advanced integration patterns:
GuideTopicComplexity
WebhooksServer-side event handlingIntermediate
Real-time UpdatesLive UI updatesIntermediate
Error HandlingRobust error managementAdvanced

Prerequisites

Before starting any guide, ensure you have:
  1. A Fanfare account - Sign up if you don’t have one
  2. API credentials - Your organizationId and publishableKey from the dashboard
  3. Development environment - Node.js 18+ and your preferred package manager

Guide Structure

Each guide follows a consistent structure:
  • Overview - What you’ll build and learn
  • Prerequisites - Required setup and knowledge
  • Step-by-step instructions - Numbered implementation steps
  • Code examples - Complete, working code samples
  • Testing - How to verify your implementation
  • Troubleshooting - Common issues and solutions
  • Next steps - Related guides and resources

Quick Start Path

If you’re new to Fanfare, we recommend this learning path:
  1. Start here: SPA Integration - Basic SDK setup
  2. Add auth: Anonymous Consumers - Guest flow
  3. Connect checkout: Checkout Overview - Checkout basics
  4. Go live: Product Launch - Complete example

Getting Help