💳 One-Time Payment Module

Stripe integration for one-time payments with checkout sessions and secure payment processing.

✨ Features

Stripe

Stripe Integration

Secure payment processing with Stripe Checkout

Components

Payment Components

Pre-built PayButton with loading states

Webhooks

Webhook Handling

Secure webhook processing for payment events

Hooks

React Hooks

useCheckout and useStripe for easy integration

Actions

Server Actions

Payment event handlers and business logic

Security

Secure Processing

PCI-compliant payment handling

🚀 Installation

npx shadcn@latest add "https://supremetoolkit.in/r/one-time-payment"

This installs:

• Stripe client and server configuration
• PayButton component with loading states
• useCheckout and useStripe hooks
• Server actions for payment events
• API routes for checkout sessions and webhooks
• Secure webhook signature validation
• Required dependencies (stripe, @stripe/stripe-js)

🔧 Environment Variables & Setup

Stripe Account Required

You need a Stripe account to use this module. Sign up at stripe.com and get your API keys from the dashboard.

1. Add Stripe API Keys:

# .env.local
# Required - Get these from your Stripe Dashboard
STRIPE_SECRET_KEY=sk_test_your_secret_key_here
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here

# Optional - For webhook signature verification (recommended for production)
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here

2. Configure Stripe in config.tsx:

export const toolkitConfig: ToolkitConfig = {
  stripe: {
    apiKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
    productIds: ['prod_your_product_id'], // Replace with your Stripe product IDs
    successUrl: '/payment/success',
    cancelUrl: '/payment/cancel',
    webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
  },
  // ... other config
};

3. Create Products in Stripe Dashboard:

• Go to your Stripe Dashboard → Products

• Create a new product with pricing

• Copy the product ID (starts with 'prod_')

• Add the product ID to your config.tsx file

4. Set up Webhooks (Optional but Recommended):

• Go to Stripe Dashboard → Webhooks

• Add endpoint: https://yourdomain.com/api/stripe/webhooks

• Select events: payment_intent.succeeded, payment_intent.payment_failed

• Copy the webhook signing secret to your .env.local file

Test vs Production

Use test keys (sk_test_... and pk_test_...) during development. Switch to live keys (sk_live_... and pk_live_...) only when ready for production.

📦 What's Included

PayButton

Customizable payment button with Stripe integration

<PayButton priceId="price_xxx" mode="payment">Buy Now</PayButton>

⚙️ Configuration

Environment Variables:

# .env.local
STRIPE_SECRET_KEY=sk_test_your_secret_key_here
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here

# Optional: Configure in config.tsx
NEXT_PUBLIC_APP_URL=https://yourapp.com

Stripe Dashboard Setup:

1. Create products and prices in your Stripe Dashboard

2. Set up webhook endpoint: https://yourapp.com/api/stripe/webhooks

3. Configure webhook events: payment_intent.succeeded, payment_intent.payment_failed

4. Copy webhook signing secret to your environment variables

🔧 Usage Examples

Simple payment button:

import { PayButton } from '@/components/ui/pay-button';

export default function ProductPage() {
  return (
    <div className="max-w-md mx-auto">
      <h1>Premium Plan</h1>
      <p>Get access to all premium features</p>

      <PayButton
        priceId="price_1234567890"
        mode="payment"
        successUrl="/dashboard"
        cancelUrl="/pricing"
        onPaymentSuccess={(sessionId) => {
          console.log('Payment successful!', sessionId);
        }}
        onPaymentError={(error) => {
          console.error('Payment failed:', error);
        }}
      >
        Buy Now - $29.99
      </PayButton>
    </div>
  );
}

Multiple payment options:

import { PayButton } from '@/components/ui/pay-button';

const products = [
  { id: 'basic', name: 'Basic Plan', price: '$9.99', priceId: 'price_basic' },
  { id: 'pro', name: 'Pro Plan', price: '$19.99', priceId: 'price_pro' },
  { id: 'enterprise', name: 'Enterprise', price: '$49.99', priceId: 'price_enterprise' }
];

export default function PricingPage() {
  return (
    <div className="grid md:grid-cols-3 gap-6">
      {products.map((product) => (
        <div key={product.id} className="border rounded-lg p-6">
          <h3 className="text-xl font-bold">{product.name}</h3>
          <p className="text-2xl font-bold text-blue-600">{product.price}</p>

          <PayButton
            priceId={product.priceId}
            mode="payment"
            className="w-full mt-4"
            metadata={{ plan: product.id }}
          >
            Choose {product.name}
          </PayButton>
        </div>
      ))}
    </div>
  );
}

🌟 Best Practices

Test Mode First

Always test with Stripe test keys before going live. Use test card numbers for thorough testing.

Webhook Security

Always verify webhook signatures to ensure events are from Stripe. Never trust webhook data without verification.

Error Handling

Implement comprehensive error handling for payment failures, network issues, and user cancellations.

User Experience

Provide clear loading states, success confirmations, and helpful error messages to users.

Security

Never expose secret keys in client-side code. Use environment variables and secure server-side processing.

Monitoring

Monitor payment success rates, failure reasons, and webhook delivery to identify and resolve issues quickly.