npm package: @palakdhaliwal/stripe-app
Description: A premium, high-performance Stripe integration package for Next.js 16+ applications. Part of the Micro-frontend Service architecture.
Latest version: 0.2.7

# @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

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

## Quick Start

### 1. Import the Component

```tsx
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:

```ts
// 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