@palakdhaliwal/stripe-app

A premium, high-performance Stripe integration package for Next.js 16+ applications. Part of the Micro-frontend Service architecture.

Features

• 🚀 Next.js 16+ Support: Built for the latest React and NextJS ecosystems.
• 💎 Premium UI: Ultra-modern, glassmorphic design system with smooth animations.
• 🛡️ Secure: Direct Stripe API integration via @stripe/react-stripe-js.
• 🎨 Granular Styling: Individual props for colors, font size, and border radius.
• 🌍 Multi-Currency Support: Support for usd, inr, and other Stripe-supported currencies.
• 🔑 Auth Modes: Choose between paymentIntent (intent flow) or token (card tokens).
• 📦 NPM Ready: Easy to install and use in any React environment.

🔐 Security Best Practices

[!IMPORTANT] Never expose your Stripe Secret Key (sk_test_...) in the frontend code.

• Use only the Publishable Key (pk_test_...) in the StripeClientPage component.
• The Secret Key (sk_test_...) must stay on your server/backend environment variables.
• The component retrieves a temporary Client Secret from your backend for each transaction.

Installation

npm install @palakdhaliwal/stripe-app @stripe/stripe-js @stripe/react-stripe-js

Quick Start

1. Import the Component

import { StripeClientPage } from "@palakdhaliwal/stripe-app";
import "@palakdhaliwal/stripe-app/styles.css";

const MyPaymentPage = () => {
  return (
    <StripeClientPage
      publishableKey="pk_test_..."
      primaryColor="#6366f1"
      bgColor="#0f172a"
      textColor="#f8fafc"
      accentColor="#818cf8"
      amount={49.99}
      currency="usd"
      mode="paymentIntent"
      title="Pro Subscription"
      onSuccess={(data) => console.log("Payment Successful!", data)}
      onError={(err) => console.error("Payment failed", err)}
    />
  );
};

2. Backend Setup

This package expects a backend endpoint to create a PaymentIntent. By default, it calls /api/create-payment-intent.

Example Next.js API route:

// app/api/create-payment-intent/route.ts
import { NextResponse } from "next/server";
import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: Request) {
  try {
    const { amount, currency, description, metadata } = await req.json();

    const paymentIntent = await stripe.paymentIntents.create({
      amount: Math.round(amount), // Amount is already in cents from the component
      currency: currency || "usd",
      description,
      metadata,
      automatic_payment_methods: { enabled: true },
    });

    return NextResponse.json({ clientSecret: paymentIntent.client_secret });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

[!TIP] Troubleshooting: "Unexpected token '<' ..." error. This happens if the component can't find your backend API route. Ensure your API is created at /api/create-payment-intent OR pass the apiEndpoint prop to point to your custom URL.

API Reference

StripeClientPage

| Prop | Type | Default | Description | | :------------------ | :-------------------- | :----------------------------- | :---------------------------------------- | | publishableKey | string | Required | Your Stripe Publishable Key. | | amount | number | 20 | Amount (supports decimals like 49.99). | | currency | string | "usd" | ISO currency code (usd, inr, etc). | | description | string | -"Micro-frontend..." | Description for the Payment Intent. | | metadata | object | {} | Custom metadata object for Stripe. | | apiEndpoint | string | "/api/create-payment-intent" | Path to your Payment Intent API route. | | fetchClientSecret | function | - | Custom callback to override API fetching. | | primaryColor | string | "#6366f1" | Main brand color. | | accentColor | string | "#6366f1" | Highlight/Accent color. | | title | string | "Secure Payment" | Page heading. | | onSuccess | (data: any) => void | - | Callback after success. | | onError | (err: any) => void | - | Callback after error. | | borderRadius | string | "12px" | Corner radius for UI elements. | | fontSize | string | "16px" | Base font size. |

CheckoutForm

Individual form component for custom layouts.

| Prop | Type | Description | | :------------- | :--------- | :------------------------------ | | primaryColor | string | Main brand color. | | amount | number | Amount to process. | | mode | string | 'paymentIntent' or 'token'. | | onSuccess | function | Success callback. | | onError | function | Error callback. |

License

MIT