@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/payment/README.md

@@ -1,345 +0,0 @@
-# Payment Components
-
-Comprehensive payment components for Stripe integration, including payment method management and checkout flows.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Components
-
-### Checkout
-Main checkout wrapper component that supports both subscription and one-time payment modes.
-
-### SubscriptionCheckout
-Full subscription checkout flow with Stripe Elements integration.
-
-### PaymentMethods
-Display and manage a list of saved payment methods with delete and set-default actions.
-
-### DefaultPaymentMethod
-Display the default payment method with a badge.
-
-## Usage
-
-### Checkout Component
-
-```stx
-<script server>
-const products = [
-  {
-    id: 1,
-    name: 'Premium Subscription',
-    price: 99900, // $999.00 in cents
-    images: '/images/subscription.jpg',
-    quantity: 1
-  }
-]
-
-const mode = 'subscription'
-const stripePublicKey = 'pk_test_...'
-const apiUrl = 'https://api.example.com'
-const redirectUrl = '/thank-you'
-const shipping = 4500
-const taxes = 552
-
-const onSubmit = (result) => {
-  if (result.success) {
-    console.log('Payment successful!')
-    window.location.href = redirectUrl
-  }
-}
-
-const onRemoveProduct = (productId) => {
-  console.log('Remove product:', productId)
-  // Update cart state
-}
-</script>
-
-<Checkout
-  :products="products"
-  :mode="mode"
-  :stripePublicKey="stripePublicKey"
-  :apiUrl="apiUrl"
-  :redirectUrl="redirectUrl"
-  :shipping="shipping"
-  :taxes="taxes"
-  :onSubmit="onSubmit"
-  :onRemoveProduct="onRemoveProduct"
-/>
-```
-
-### PaymentMethods Component
-
-```stx
-<script server>
-const methods = [
-  {
-    id: 1,
-    brand: 'Visa',
-    last_four: '4242',
-    exp_month: 12,
-    exp_year: 2025
-  },
-  {
-    id: 2,
-    brand: 'Mastercard',
-    last_four: '5555',
-    exp_month: 6,
-    exp_year: 2026
-  }
-]
-
-const handleDelete = (id) => {
-  console.log('Delete payment method:', id)
-  // Call your API to delete
-}
-
-const handleMakeDefault = (id) => {
-  console.log('Make default:', id)
-  // Call your API to set as default
-}
-</script>
-
-<PaymentMethods
-  :paymentMethods="methods"
-  :onDeletePaymentMethod="handleDelete"
-  :onMakeDefault="handleMakeDefault"
-/>
-```
-
-### DefaultPaymentMethod Component
-
-```stx
-<script server>
-const defaultMethod = {
-  id: 1,
-  brand: 'Visa',
-  last_four: '4242',
-  exp_month: 12,
-  exp_year: 2025
-}
-</script>
-
-<DefaultPaymentMethod :paymentMethod="defaultMethod" />
-```
-
-### SubscriptionCheckout Component
-
-```stx
-<script server>
-const cartProducts = [
-  {
-    id: 1,
-    name: 'Premium Subscription',
-    price: 99900, // $999.00 in cents
-    images: '/images/subscription.jpg',
-    quantity: 1
-  }
-]
-
-const handleCheckoutComplete = (result) => {
-  if (result.success) {
-    console.log('Payment successful!')
-    // Redirect to success page
-  }
-}
-</script>
-
-<SubscriptionCheckout
-  :products="cartProducts"
-  stripePublicKey="pk_test_..."
-  apiUrl="https://api.example.com/payments"
-  :shipping="4500"
-  :taxes="552"
-  :onSubmit="handleCheckoutComplete"
-/>
-```
-
-## Props
-
-### Checkout Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `products` | `Product[]` | `[]` | Products in cart |
-| `mode` | `'subscription' \| 'one-time'` | `'subscription'` | Payment mode |
-| `stripePublicKey` | `string` | - | Stripe publishable key (required) |
-| `apiUrl` | `string` | - | Base API URL (required) |
-| `redirectUrl` | `string` | `''` | Redirect URL after payment |
-| `onSubmit` | `function` | - | Callback when payment completes |
-| `onRemoveProduct` | `function` | - | Callback when product removed from cart |
-| `shipping` | `number` | `0` | Shipping cost in cents |
-| `taxes` | `number` | `0` | Tax amount in cents |
-| `className` | `string` | `''` | Additional CSS classes |
-
-### PaymentMethods Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `paymentMethods` | `PaymentMethod[]` | `[]` | Array of payment methods |
-| `onDeletePaymentMethod` | `function` | - | Callback when delete clicked |
-| `onMakeDefault` | `function` | - | Callback when make default clicked |
-| `isLoading` | `boolean` | `false` | Show loading state |
-| `className` | `string` | `''` | Additional CSS classes |
-
-### DefaultPaymentMethod Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `paymentMethod` | `PaymentMethod \| null` | - | Default payment method or null |
-| `isLoading` | `boolean` | `false` | Show loading state |
-| `className` | `string` | `''` | Additional CSS classes |
-
-### SubscriptionCheckout Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `products` | `Product[]` | `[]` | Products in cart |
-| `stripePublicKey` | `string` | - | Stripe publishable key (required) |
-| `apiUrl` | `string` | - | Base API URL (required) |
-| `onSubmit` | `function` | - | Callback when payment completes |
-| `onRemoveProduct` | `function` | - | Callback when product removed from cart |
-| `shipping` | `number` | `0` | Shipping cost in cents |
-| `taxes` | `number` | `0` | Tax amount in cents |
-| `className` | `string` | `''` | Additional CSS classes |
-
-## TypeScript Interfaces
-
-```typescript
-interface PaymentMethod {
-  id: string | number
-  brand: string
-  last_four: string
-  exp_month: number
-  exp_year: number
-  is_default?: boolean
-}
-
-interface Product {
-  id: string | number
-  name: string
-  price: number // in cents
-  images?: string
-  quantity?: number
-}
-```
-
-## Backend API Requirements
-
-### Create Subscription Endpoint
-
-Your `apiUrl` should implement a `POST /stripe/create-subscription` endpoint:
-
-```typescript
-// Example Express.js endpoint
-app.post('/stripe/create-subscription', async (req, res) => {
-  const { amount, quantity } = req.body
-
-  const paymentIntent = await stripe.paymentIntents.create({
-    amount: amount,
-    currency: 'usd',
-    automatic_payment_methods: {
-      enabled: true,
-    },
-  })
-
-  res.json({
-    client_secret: paymentIntent.client_secret,
-  })
-})
-```
-
-**Note**: The endpoint path must be `{apiUrl}/stripe/create-subscription` to match the component's expectations.
-
-## Features
-
-- **Stripe Elements** - Integrated Stripe payment form
-- **Payment Management** - View, delete, set default payment methods
-- **Dark Mode** - Full dark mode support
-- **Loading States** - Skeleton loaders while fetching data
-- **Empty States** - Friendly messages when no payment methods
-- **Responsive** - Mobile-friendly layouts
-- **Accessible** - Proper ARIA labels and keyboard navigation
-- **Confirmation** - Delete confirmation dialogs
-- **Error Handling** - Graceful error messages
-- **Modern ES Modules** - Clean export syntax
-- **Headwind Styling** - Utility-first CSS classes
-
-## Stripe.js Integration
-
-The `SubscriptionCheckout` component automatically loads Stripe.js from the CDN. Make sure you have a valid Stripe account and publishable key.
-
-### Test Cards
-
-Use these test cards in development:
-
-- **Success**: `4242 4242 4242 4242`
-- **Decline**: `4000 0000 0000 0002`
-- **Requires 3DS**: `4000 0027 6000 3184`
-
-Use any future expiration date and any 3-digit CVC.
-
-## Example: Full Payment Flow
-
-```stx
-<script server>
-// Fetch payment methods
-const paymentMethods = await fetch('/api/payment-methods').then(r => r.json())
-
-// Fetch default payment method
-const defaultMethod = paymentMethods.find(m => m.is_default)
-
-// Cart products
-const cart = [
-  { id: 1, name: 'Product 1', price: 5000, quantity: 2 },
-  { id: 2, name: 'Product 2', price: 3000, quantity: 1 },
-]
-
-const handleDelete = async (id) => {
-  await fetch(`/api/payment-methods/${id}`, { method: 'DELETE' })
-  // Refetch payment methods
-}
-
-const handleMakeDefault = async (id) => {
-  await fetch(`/api/payment-methods/${id}/default`, { method: 'POST' })
-  // Refetch payment methods
-}
-
-const handleCheckout = (result) => {
-  if (result.success) {
-    window.location.href = '/thank-you'
-  }
-}
-</script>
-
-<!-- Default Payment Method -->
-<DefaultPaymentMethod :paymentMethod="defaultMethod" />
-
-<!-- All Payment Methods -->
-<PaymentMethods
-  :paymentMethods="paymentMethods"
-  :onDeletePaymentMethod="handleDelete"
-  :onMakeDefault="handleMakeDefault"
-/>
-
-<!-- Checkout Form -->
-<SubscriptionCheckout
-  :products="cart"
-  stripePublicKey="pk_test_..."
-  apiUrl="https://api.example.com/payments"
-  :shipping="1000"
-  :taxes="800"
-  :onSubmit="handleCheckout"
-/>
-```
-
-## Security Notes
-
-- **Never** expose your Stripe secret key in client code
-- Always validate payment amounts on the server
-- Use HTTPS in production
-- Implement proper authentication for payment management endpoints
-- Verify webhook signatures from Stripe

package/src/ui/payment/SubscriptionCheckout.stx

@@ -1,323 +0,0 @@
-<script server>
-export const products = $props.products || []
-export const stripePublicKey = $props.stripePublicKey || ''
-export const apiUrl = $props.apiUrl || ''
-export const showRemoveProduct = $props.showRemoveProduct ?? true
-export const shipping = $props.shipping || 0
-export const taxes = $props.taxes || 0
-export const className = $props.className || ''
-
-export const subtotal = products.reduce((sum, product) => sum + (product.price * (product.quantity || 1)), 0)
-export const total = subtotal + shipping + taxes
-
-export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const stripePublicKey = {{ stripePublicKey }}
-const apiUrl = {{ apiUrl }}
-const products = {{ products }}
-const total = {{ total }}
-
-let stripe = null
-let elements = null
-let paymentElement = null
-
-function onRemoveProduct(productId) {
-  emit('removeProduct', productId)
-}
-
-async function setupStripeElements() {
-  if (!stripe || !apiUrl) return
-  try {
-    const response = await fetch(`${apiUrl}/stripe/create-subscription`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
-      body: JSON.stringify({
-        amount: total,
-        quantity: products.reduce((sum, p) => sum + (p.quantity || 1), 0),
-      }),
-    })
-    const paymentIntent = await response.json()
-    const { clientSecret } = paymentIntent
-    if (!clientSecret) {
-      console.error('No client secret returned from API')
-      return
-    }
-    elements = stripe.elements({
-      clientSecret,
-      appearance: {
-        theme: document.documentElement.classList.contains('dark') ? 'night' : 'stripe',
-      },
-    })
-    paymentElement = elements.create('payment')
-    paymentElement.mount('#payment-element')
-  }
-  catch (error) {
-    console.error('Error setting up Stripe elements:', error)
-  }
-}
-
-async function initializeStripe() {
-  if (!stripePublicKey) {
-    console.error('Stripe public key is required')
-    return
-  }
-  if (window.Stripe) {
-    stripe = window.Stripe(stripePublicKey)
-    await setupStripeElements()
-    return
-  }
-  const script = document.createElement('script')
-  script.src = 'https://js.stripe.com/v3/'
-  script.async = true
-  script.onload = async () => {
-    stripe = window.Stripe(stripePublicKey)
-    await setupStripeElements()
-  }
-  document.head.appendChild(script)
-}
-
-async function onSubmit(event) {
-  event.preventDefault()
-  if (!stripe || !elements) {
-    emit('error', { message: 'Stripe not initialized' })
-    return
-  }
-  try {
-    const { error } = await stripe.confirmPayment({
-      elements,
-      redirect: 'if_required',
-      confirmParams: { return_url: window.location.href },
-    })
-    if (error) {
-      emit('error', error)
-    }
-    else {
-      emit('submit', { success: true })
-    }
-  }
-  catch (error) {
-    emit('error', error)
-  }
-}
-
-onMount(() => initializeStripe())
-</script>
-
-<div class="{{ containerClasses }}">
-  <div class="mx-auto max-w-2xl px-4 pb-24 pt-16 lg:max-w-7xl lg:px-8 sm:px-6">
-    <h2 class="sr-only">Checkout</h2>
-
-    <form class="lg:grid lg:grid-cols-2 lg:gap-x-12 xl:gap-x-16" @submit="onSubmit($event)">
-      <!-- Left Column - Contact & Payment -->
-      <div>
-        <!-- Contact Information -->
-        <div>
-          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
-            Contact information
-          </h2>
-
-          <div class="mt-4">
-            <label for="email-address" class="block text-sm text-gray-700 dark:text-gray-300 font-medium">
-              Email address
-            </label>
-            <div class="mt-1">
-              <input
-                id="email-address"
-                type="email"
-                name="email-address"
-                autocomplete="email"
-                required
-                class="block w-full border border-gray-300 dark:border-gray-600 rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-gray-900 dark:text-gray-100 focus:border-indigo-500 dark:focus:border-indigo-400 sm:text-sm focus:ring-indigo-500 dark:focus:ring-indigo-400"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Billing Information -->
-        <div class="mt-10 border-t border-gray-200 dark:border-gray-700 pt-10">
-          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
-            Billing information
-          </h2>
-
-          <div class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
-            <div class="sm:col-span-2">
-              <label for="card-name" class="block text-sm text-gray-700 dark:text-gray-300 font-medium">
-                Name on card
-              </label>
-              <div class="mt-1">
-                <input
-                  type="text"
-                  id="card-name"
-                  name="card-name"
-                  autocomplete="cc-name"
-                  required
-                  class="block w-full border border-gray-300 dark:border-gray-600 rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-gray-900 dark:text-gray-100 focus:border-indigo-500 sm:text-sm focus:ring-indigo-500"
-                />
-              </div>
-            </div>
-
-            <!-- Stripe Element Mount Point -->
-            <div class="sm:col-span-2">
-              <div id="payment-element" class="mt-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 p-3"></div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Payment Type -->
-        <div class="mt-10 border-t border-gray-200 dark:border-gray-700 pt-10">
-          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
-            Payment
-          </h2>
-
-          <fieldset class="mt-4">
-            <legend class="sr-only">Payment type</legend>
-            <div class="sm:flex sm:items-center space-y-4 sm:space-x-10 sm:space-y-0">
-              <div class="flex items-center">
-                <input
-                  id="credit-card"
-                  name="payment-type"
-                  type="radio"
-                  checked
-                  class="h-4 w-4 border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400"
-                />
-                <label for="credit-card" class="ml-3 block text-sm text-gray-700 dark:text-gray-300 font-medium">
-                  Credit card
-                </label>
-              </div>
-            </div>
-          </fieldset>
-        </div>
-      </div>
-
-      <!-- Right Column - Order Summary -->
-      <div class="mt-10 lg:mt-0">
-        <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
-          Order summary
-        </h2>
-
-        <div class="mt-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow-sm">
-          <h3 class="sr-only">Items in your cart</h3>
-
-          <!-- Product List -->
-          <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
-            @foreach(product in products)
-              <li class="flex px-4 py-6 sm:px-6">
-                <div class="flex-shrink-0">
-                  @if(product.images)
-                    <img src="{{ product.images }}" alt="{{ product.name }}" class="w-20 rounded-md" />
-                  @else
-                    <div class="w-20 h-20 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
-                      <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                      </svg>
-                    </div>
-                  @endif
-                </div>
-
-                <div class="ml-6 flex flex-1 flex-col">
-                  <div class="flex">
-                    <div class="min-w-0 flex-1">
-                      <h4 class="text-sm">
-                        <a href="#" class="text-gray-700 dark:text-gray-300 font-medium hover:text-gray-800 dark:hover:text-gray-200">
-                          {{ product.name }}
-                        </a>
-                      </h4>
-                    </div>
-
-                    @if(showRemoveProduct)
-                      <div class="ml-4 flow-root flex-shrink-0">
-                        <button
-                          type="button"
-                          class="flex items-center justify-center bg-white dark:bg-blue-gray-700 p-2.5 text-gray-400 dark:text-gray-500 -m-2.5 hover:text-gray-500 dark:hover:text-gray-400"
-                          @click="onRemoveProduct('{{ product.id }}')"
-                          title="Remove"
-                        >
-                          <span class="sr-only">Remove</span>
-                          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                            <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
-                          </svg>
-                        </button>
-                      </div>
-                    @endif
-                  </div>
-
-                  <div class="flex flex-1 items-end justify-between pt-2">
-                    <p class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-medium">
-                      ${{ (product.price / 100).toFixed(2) }}
-                    </p>
-
-                    <div class="ml-4">
-                      <label for="quantity-{{ product.id }}" class="sr-only">Quantity</label>
-                      <select
-                        id="quantity-{{ product.id }}"
-                        name="quantity"
-                        class="border border-gray-300 dark:border-gray-600 rounded-md text-left text-base text-gray-700 dark:text-gray-300 font-medium shadow-sm bg-white dark:bg-blue-gray-700 focus:border-indigo-500 sm:text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                      >
-                        <option value="1" {{ (product.quantity || 1) === 1 ? 'selected' : '' }}>1</option>
-                        <option value="2" {{ (product.quantity || 1) === 2 ? 'selected' : '' }}>2</option>
-                        <option value="3" {{ (product.quantity || 1) === 3 ? 'selected' : '' }}>3</option>
-                        <option value="4" {{ (product.quantity || 1) === 4 ? 'selected' : '' }}>4</option>
-                        <option value="5" {{ (product.quantity || 1) === 5 ? 'selected' : '' }}>5</option>
-                        <option value="6" {{ (product.quantity || 1) === 6 ? 'selected' : '' }}>6</option>
-                        <option value="7" {{ (product.quantity || 1) === 7 ? 'selected' : '' }}>7</option>
-                        <option value="8" {{ (product.quantity || 1) === 8 ? 'selected' : '' }}>8</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            @endforeach
-          </ul>
-
-          <!-- Summary Totals -->
-          <dl class="border-t border-gray-200 dark:border-gray-700 px-4 py-6 space-y-6 sm:px-6">
-            <div class="flex items-center justify-between">
-              <dt class="text-sm text-gray-600 dark:text-gray-400">Subtotal</dt>
-              <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
-                ${{ (subtotal / 100).toFixed(2) }}
-              </dd>
-            </div>
-
-            @if(shipping > 0)
-              <div class="flex items-center justify-between">
-                <dt class="text-sm text-gray-600 dark:text-gray-400">Shipping</dt>
-                <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
-                  ${{ (shipping / 100).toFixed(2) }}
-                </dd>
-              </div>
-            @endif
-
-            @if(taxes > 0)
-              <div class="flex items-center justify-between">
-                <dt class="text-sm text-gray-600 dark:text-gray-400">Taxes</dt>
-                <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
-                  ${{ (taxes / 100).toFixed(2) }}
-                </dd>
-              </div>
-            @endif
-
-            <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-6">
-              <dt class="text-base text-gray-900 dark:text-gray-100 font-medium">Total</dt>
-              <dd class="text-base text-gray-900 dark:text-gray-100 font-medium">
-                ${{ (total / 100).toFixed(2) }}
-              </dd>
-            </div>
-          </dl>
-
-          <!-- Submit Button -->
-          <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-6 sm:px-6">
-            <button
-              type="submit"
-              class="w-full border border-transparent rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-3 text-base text-white font-medium shadow-sm hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900"
-            >
-              Confirm order
-            </button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>