React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StripePaymentElement

Stripe payment integration with support for cards, wallets, and alternative payment methods

Interactive Playground

Configure the payment element options

Amount in cents (e.g., 1099 = $10.99)

Features

  • ✓Multiple Payment Methods: Supports credit cards, debit cards, Apple Pay, Google Pay, and alternative payment methods
  • ✓Theme Integration: Automatically adapts to the current theme's color scheme
  • ✓Internationalization: Supports multiple currencies and locales
  • ✓Payment Intent Management: Automatically creates and updates Stripe payment intents
  • ✓Error Handling: Built-in validation and error messaging
  • ✓Stripe Connect Support: Works with both platform and connected accounts
  • ✓Address Collection: Conditional address element for payment methods that require it
  • ✓Analytics Integration: Tracks payment events for analytics

API Reference

Props

displayMode

'live' | 'preview' - Display mode (default: 'live')

username

string (required) - Creator username

previewAmount

number (optional) - Amount in cents for preview mode (default: 1099)

previewCurrency

string (optional) - Currency code for preview mode (default: 'usd')

showWallet

boolean (optional) - Show Apple Pay / Google Pay options (default: true)

pageId

number (optional) - Product page ID

fanName

string (optional) - Customer name for billing details

fanEmail

string (optional) - Customer email for billing details

onPaymentSuccess

() => void (optional) - Callback when payment succeeds

onPaymentError

(error: { message: string }) => void (optional) - Callback when payment fails

Usage Notes

Environment Variables: Requires NEXT_PUBLIC_STRIPE_KEY to be set in your environment variables.

Preview Mode: Use displayMode="preview" for testing and demonstrations without creating real payment intents.

Live Mode: In live mode, the component automatically creates payment intents and handles the full payment flow.

Ref Methods: The component exposes processPayment() and updatePaymentData() methods via ref for programmatic control.