npm install @deessejs/payments-react

'use client'

import { CheckoutForm } from '@deessejs/payments-react'

export default function PaymentPage() {
  return (
    <CheckoutForm
      amount={99.99}
      currency="usd"
      onSuccess={(payment) => {
        console.log('Payment successful:', payment)
        // Redirect to success page
      }}
      onError={(error) => {
        console.error('Payment failed:', error)
      }}
    />
  )
}

<CheckoutForm
  amount={99.99}
  currency="usd"
  appearance={{
    theme: 'stripe',
    variables: {
      colorPrimary: '#0570de',
      colorBackground: '#ffffff',
      colorText: '#30313d',
    },
  }}
  billingDetails={{
    name: 'required',
    email: 'required',
    address: 'optional',
  }}
/>

<CheckoutForm
  items={[
    {
      name: 'Pro Plan',
      amount: 29.99,
      quantity: 1,
    },
    {
      name: 'Add-on Pack',
      amount: 9.99,
      quantity: 2,
    },
  ]}
  metadata={{
    orderId: 'order_123',
    userId: 'user_456',
  }}
/>

import { PricingCard } from '@deessejs/payments-react'

export function Pricing() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <PricingCard
        name="Basic"
        price={9}
        interval="month"
        features={[
          '5 projects',
          'Basic support',
          '1GB storage',
        ]}
        onSubscribe={() => handleSubscribe('basic')}
      />
      <PricingCard
        name="Pro"
        price={29}
        interval="month"
        features={[
          'Unlimited projects',
          'Priority support',
          '100GB storage',
          'Advanced analytics',
        ]}
        highlighted
        onSubscribe={() => handleSubscribe('pro')}
      />
      <PricingCard
        name="Enterprise"
        price={99}
        interval="month"
        features={[
          'Custom solutions',
          'Dedicated support',
          'Unlimited storage',
          'SLA guarantee',
        ]}
        onSubscribe={() => handleSubscribe('enterprise')}
      />
    </div>
  )
}

<PricingCard
  name="Pro Plan"
  price={29}
  interval="month"
  subscription={{
    priceId: 'price_pro_monthly',
    trialDays: 14,
  }}
  features={[
    'Unlimited projects',
    'Priority support',
  ]}
  onSubscribe={async () => {
    // Create subscription and redirect to checkout
    await createSubscription('price_pro_monthly')
  }}
/>

'use client'

import { useState } from 'react'
import { PricingCards } from '@deessejs/payments-react'

export function PricingWithToggle() {
  const [annual, setAnnual] = useState(false)

  return (
    <div>
      <BillingToggle annual={annual} onChange={setAnnual} />
      <PricingCards
        annual={annual}
        plans={[
          {
            id: 'basic',
            name: 'Basic',
            monthlyPrice: 9,
            yearlyPrice: 90, // 10 months for the price of 12
            features: ['5 projects', 'Basic support'],
          },
          {
            id: 'pro',
            name: 'Pro',
            monthlyPrice: 29,
            yearlyPrice: 290,
            features: ['Unlimited projects', 'Priority support'],
          },
        ]}
        onSelectPlan={(plan) => handleSubscribe(plan.id)}
      />
    </div>
  )
}

'use client'

import { SubscriptionDisplay } from '@deessejs/payments-react'

export function AccountPage() {
  return (
    <SubscriptionDisplay
      subscriptionId="sub_123"
      onUpgrade={() => setShowPricing(true)}
      onManage={() => openPortal()}
      onCancel={async () => {
        await cancelSubscription('sub_123')
      }}
    />
  )
}

'use client'

import { UsageMeter } from '@deessejs/payments-react'

export function Dashboard() {
  return (
    <UsageMeter
      subscriptionItemId="si_123"
      label="API Calls"
      used={75000}
      limit={100000}
      unit="calls"
      onUpgrade={() => setShowPricing(true)}
    />
  )
}

'use client'

import { PaymentMethodsList } from '@deessejs/payments-react'

export function BillingSettings() {
  return (
    <PaymentMethodsList
      customerId="cus_123"
      onAdd={(method) => console.log('Added:', method)}
      onRemove={(methodId) => removePaymentMethod(methodId)}
      onSetDefault={(methodId) => setDefaultPaymentMethod(methodId)}
    />
  )
}

'use client'

import { AddPaymentMethod } from '@deessejs/payments-react'

export function AddCard() {
  return (
    <AddPaymentMethod
      customerId="cus_123"
      onSuccess={(paymentMethod) => {
        console.log('Payment method added:', paymentMethod)
      }}
    />
  )
}

'use client'

import { InvoiceList } from '@deessejs/payments-react'

export function Invoices() {
  return (
    <InvoiceList
      customerId="cus_123"
      downloadable
      onDownload={(invoice) => {
        window.open(invoice.pdf, '_blank')
      }}
    />
  )
}

'use client'

import { PurchaseButton } from '@deessejs/payments-react'

export function ProductCard({ product }) {
  return (
    <div>
      <h2>{product.name}</h2>
      <p>${product.price}</p>
      <PurchaseButton
        amount={product.price}
        currency="usd"
        metadata={{ productId: product.id }}
        onPaymentSuccess={() => {
          // Grant access to product
        }}
      >
        Buy Now
      </PurchaseButton>
    </div>
  )
}

<PurchaseButton
  amount={99}
  currency="usd"
  loading={processing}
  disabled={alreadyPurchased}
  onPaymentSuccess={handleSuccess}
>
  {alreadyPurchased ? 'Purchased' : 'Buy Now'}
</PurchaseButton>

'use client'

import { PortalLink } from '@deessejs/payments-react'

export function ManageSubscription() {
  return (
    <PortalLink
      customerId="cus_123"
      return_url={`${window.location.origin}/account`}
    >
      Manage Subscription
    </PortalLink>
  )
}

import { PaymentProvider } from '@deessejs/payments-react'

export function App() {
  return (
    <PaymentProvider
      theme={{
        colors: {
          primary: '#3b82f6',
          success: '#10b981',
          error: '#ef4444',
          warning: '#f59e0b',
        },
        typography: {
          fontFamily: 'Inter, sans-serif',
        },
        components: {
          button: {
            base: 'px-4 py-2 rounded',
            variants: {
              primary: 'bg-blue-500 text-white',
              secondary: 'bg-gray-200 text-gray-800',
            },
          },
        },
      }}
    >
      <YourApp />
    </PaymentProvider>
  )
}

// app/checkout/page.tsx
import { CheckoutServer } from '@deessejs/payments-react/server'

export default async function CheckoutPage({
  searchParams,
}: {
  searchParams: { priceId: string }
}) {
  const session = await getServerSession()

  if (!session) {
    redirect('/login')
  }

  const price = await getPriceById(searchParams.priceId)

  return (
    <CheckoutServer
      price={price}
      customerId={session.user.stripeCustomerId}
      successUrl="/success"
      cancelUrl="/checkout"
    />
  )
}