> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fype.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# E commerce nextjs

# Tutorial: E-commerce Integration (Next.js)

This tutorial demonstrates how to integrate fype into a Next.js e-commerce application using the Node.js SDK and AI Agents.

## 1. Environment Setup

Add your fype keys to `.env.local`:

```bash theme={null}
FYPE_SECRET_KEY=fype_test_your_key
FYPE_WEBHOOK_SECRET=whsec_your_secret
NEXT_PUBLIC_BASE_URL=http://localhost:3000
```

## 2. Create a Payment API Route

Ask your AI Agent (e.g., Gemini or Cursor):

> "Create a Next.js API route `/api/checkout` that uses the `@fype/nodejs-sdk` to create a payment. It should take a `productId` from the request body, look up the price in a local map, and return the `checkout_url` from fype."

**Example Implementation:**

```typescript theme={null}
import { fype } from '@fype/nodejs-sdk';

const fype = new fype({ apiKey: process.env.FYPE_SECRET_KEY! });

export async function POST(req: Request) {
 const { productId } = await req.json();
 const price = getPrice(productId); // Your logic

 const payment = await fype.payments.create({
 amount: price * 100, // Convert to paise
 currency: 'INR',
 customer_email: 'user@example.com',
 success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success?id={PAYMENT_ID}`,
 cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cart`,
 reference_id: `order_${Date.now()}`,
 });

 return Response.json({ url: payment.checkout_url });
}
```

## 3. Frontend "Buy" Button

```tsx theme={null}
const handleBuy = async () => {
 const res = await fetch('/api/checkout', {
 method: 'POST',
 body: JSON.stringify({ productId: 'shirt_123' }),
 });
 const { url } = await res.json();
 window.location.href = url; // Redirect to fype Checkout
};
```

## 4. Secure Webhook Listener

Ask your AI Agent:

> "Create a Next.js API route `/api/webhooks/fype` that listens for `POST` requests. It must verify the fype signature using the raw body. If the event is `payment.succeeded`, log the successful payment ID."

**Example Implementation:**

```typescript theme={null}
import { fype } from '@fype/nodejs-sdk';
import { buffer } from 'stream/consumers';

const fype = new fype({ apiKey: process.env.FYPE_SECRET_KEY! });

export async function POST(req: Request) {
 const rawBody = await req.text();
 const signature = req.headers.get('x-fype-signature')!;

 try {
 // Throws if invalid
 fype.webhooks.verifySignature(
 rawBody,
 signature,
 process.env.FYPE_WEBHOOK_SECRET!
 );

 const event = JSON.parse(rawBody);
 if (event.type === 'payment.succeeded') {
 console.log('Payment Success:', event.data.object.id);
 // Fulfill the order in your DB
 }

 return new Response('OK', { status: 200 });
 } catch (err) {
 return new Response('Webhook Error', { status: 400 });
 }
}
```

## 5. Testing with Simulator

1. Trigger the `handleBuy` function.
2. You will be redirected to `checkout.fype.dev`.
3. Click **Simulate Success**.
4. You will be redirected back to your `success_url`.
5. Check your server logs to see the webhook confirmation.