Skip to main content

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:

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:

3. Frontend “Buy” Button

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:

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.