Skip to main content

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.

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

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:
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.