💳 Payment Components Demo

Receipt Component & Stripe OAuth Wizard

Complete payment processing integration for POS systems

🧾 Receipt Component

  • • Print-ready format
  • • html2canvas screenshots
  • • Email export
  • • QR code integration

🔗 Stripe Connect

  • • 3-step OAuth wizard
  • • Account verification
  • • Secure authorization
  • • Connection management

âš¡ API Endpoints

  • • OAuth authorize/callback
  • • Create payment intent
  • • Capture payment
  • • Process refunds

Receipt Component Demo

Interactive receipt with print, screenshot, and email capabilities

The Burger Palace

123 Main Street

San Francisco, CA 94102

(415) 555-1234

info@burgerpalace.com

Tax ID: 12-3456789

Order #:ORD-2024-001
Date:Apr 5, 2026, 1:30 AM
Table:12
Server:Jane Smith
Customer:John Doe

Items

2x Cheeseburger$25.98
Note: No pickles
2x French Fries$9.98
2x Coca Cola$5.98
1x Caesar Salad$8.99
Subtotal:$47.94
Tax:$3.84
Tip:$9.59
TOTAL:$61.37
Payment Method:stripe
Status:paid
Transaction ID:pi_3AbCdEfGhIjKlMnOpQrS

Scan for receipt details

Thank you for your business!

Please come again

Integration Guide

Using Receipt Component

import Receipt from '@/components/payment/Receipt';

<Receipt
  order={orderData}
  businessInfo={businessInfo}
  onClose={() => setShowReceipt(false)}
/>

Using Stripe Wizard

import StripeConnectWizard from '@/components/payment/StripeConnectWizard';

<StripeConnectWizard
  embedId={embedId}
  onComplete={(data) => console.log(data)}
  onCancel={() => setShowWizard(false)}
/>