Event Listing Component

The EventListPageContainer component provides a complete event listing solution with built-in filtering, search, pagination, and responsive design. It automatically handles data fetching and state management using the Toutix Whitelabel SDK.

Frontend Integration

Folder Structure

app/
└── events/
    ├── EventListClient.jsx  # Client component
    └── page.jsx             # Main /events route

Install

npm install @toutix/whitelabel

Run

npm run dev

Visit http://localhost:3000/events You’ll see the Toutix event listing embedded into your site.

Next.js Integration

This example shows how to integrate Toutix Event List in a Next.js application:

• Create the client component with SDK initialization
• Create the page route to render the component
• Handle loading states during initialization
• Access at /events route in your Next.js app

Create EventListClient.jsx

This component initializes the whitelabel SDK and renders the event list.

"use client";

import React, { useEffect, useState } from 'react';
import { EventListPageContainer, initWhiteLabel } from '@toutix/whitelabel';
import '@toutix/whitelabel/dist/index.css';

export default function EventListClient() {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    initWhiteLabel({
      baseUrl: '<YOUR_BASE_URL>',
      whiteLabelToken: '<YOUR_WHITELABEL_TOKEN>',
      stripePublicKey: '<YOUR_STRIPE_PUBLIC_KEY>',
      googleMapsApiKey: '<YOUR_GOOGLE_MAPS_API_KEY>',
    });

    setIsLoaded(true);
  }, []);

  if (!isLoaded) return <div>Loading events...</div>;
  return <EventListPageContainer />;
}

Create page.jsx

This links your route /events to the component above.

import EventListClient from "./EventListClient";

export default function Page() {
  return <EventListClient />;
}

initWhiteLabel() Options

| Option | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------ | | baseUrl | Base API URL of your Toutix environment or backend (e.g., https://api.toutix.com). | | whiteLabelToken | Token returned from the Toutix initialize API; identifies your tenant. | | stripePublicKey | Your public Stripe key for checkout and payments. | | googleMapsApiKey | Google Maps key used to enable location and map components. |

Best Practices

Always call the initialize API on your backend — never expose your private key to the frontend.

• Pass only the whiteLabelToken to the client when calling initWhiteLabel().
• Test the integration in a staging environment first.
• Include error handling for network requests and token initialization.
• Implement loading states while the SDK initializes.
• Ensure your Stripe and Google Maps API keys are valid and properly configured.

Single Event Page

The Single Event Page dynamically loads and displays event details using the SingleEventPageContainer from the Toutix SDK. It initializes the SDK and fetches specific event data based on the URL parameter.

Frontend Integration

Folder Structure

app/
└── events/
    └── [id]/
        ├── SingleEventClient.jsx  # Client component
        └── page.jsx               # Dynamic route

Install

npm install @toutix/whitelabel

Run

npm run dev

Visit http://localhost:3000/events/eventId You’ll see the Toutix single event page embedded into your site.

Next.js Integration

This example shows how to integrate Toutix Single Event Page in a Next.js application:

• Create dynamic route with [id] parameter
• Create client component with SDK initialization
• Pass eventId from URL params to component
• Handle loading states during initialization
• Access at /events/[id] route in your Next.js app

Create SingleEventClient.jsx

This component initializes the whitelabel SDK and renders the single event page.

"use client";

import React, { useEffect, useState } from 'react';
import { SingleEventPageContainer, initWhiteLabel } from '@toutix/whitelabel';
import '@toutix/whitelabel/dist/index.css';

export default function SingleEventClient({ eventId }) {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    initWhiteLabel({
      baseUrl: '<YOUR_BASE_URL>',
      whiteLabelToken: '<YOUR_WHITELABEL_TOKEN>',
      stripePublicKey: '<YOUR_STRIPE_PUBLIC_KEY>',
      googleMapsApiKey: '<YOUR_GOOGLE_MAPS_API_KEY>',
    });
    setIsLoading(true);
  }, []);

  if (!isLoading) return <div>Loading event...</div>;

  return <SingleEventPageContainer eventId={eventId} />;
}

Create page.jsx

This links your route /events/[id] to the component above.

import SingleEventClient from './SingleEventClient';

export default function Page({ params }) {
  return <SingleEventClient eventId={params.id} />;
}

Folder Structure

Create the following folder structure in your Next.js project:

app/
└── events/
    └── [id]/
        ├── page.jsx               # Dynamic route file (/events/[id])
        └── SingleEventClient.jsx  # Client component initializing Toutix

The page will be accessible at host/events/[id] (e.g., http://localhost:3000/events/123)

How It Works

1. User visits /events/[id] (e.g., /events/123).
2. SingleEventClient runs in the browser and initializes Toutix with your keys.
3. SingleEventPageContainer automatically fetches and displays that specific event’s details.

Best Practices

• 🗝 Keep all keys and tokens in environment variables (.env.local) instead of hardcoding them.
• 🔁 Use the same whiteLabelToken creation flow described in the Event Listing setup (/whitelabel/api-keys/initialize).
• ⚙️ This setup works seamlessly with Next.js 13+ and 14+ App Router.

Payment Success Component

The PaymentSuccess component confirms successful payments using the Toutix Whitelabel SDK. It reads payment details from the URL and renders a confirmation interface powered by PaymentSuccessPageContainer.

Frontend Integration

Folder Structure

app/
└── payment-success/
    ├── PaymentSuccessClient.jsx  # Client component
    └── page.jsx                  # Main route

Install

npm install @toutix/whitelabel

Run

npm run dev

Visit http://localhost:3000/payment-success You’ll see the Toutix payment success page embedded into your site.

Next.js Integration

This example shows how to integrate Toutix Payment Success Page in a Next.js application:

• Create payment-success route
• Create client component with SDK initialization
• Extract payment parameters from URL search params
• Handle loading states during initialization
• Access at /payment-success route in your Next.js app

Create PaymentSuccessClient.jsx

This component initializes the whitelabel SDK and renders the payment success page.

"use client";

import React, { useEffect, useState } from 'react';
import { PaymentSuccessPageContainer, initWhiteLabel } from '@toutix/whitelabel';
import { useSearchParams } from 'next/navigation';
import '@toutix/whitelabel/dist/index.css';

export default function PaymentSuccessClient() {
  const [isLoaded, setIsLoaded] = useState(false);
  const searchParams = useSearchParams();

  useEffect(() => {
    initWhiteLabel({
      baseUrl: '<YOUR_BASE_URL>',
      whiteLabelToken: '<YOUR_WHITELABEL_TOKEN>',
      stripePublicKey: '<YOUR_STRIPE_PUBLIC_KEY>',
      googleMapsApiKey: '<YOUR_GOOGLE_MAPS_API_KEY>',
    });
    setIsLoaded(true);
  }, []);

  if (!isLoaded) return <div>Loading payment success...</div>;

  const paymentIntent = searchParams.get('payment_intent') || '';
  const paymentRecordId = searchParams.get('payment_record_id') || '';

  return (
    <PaymentSuccessPageContainer
      paymentIntent={paymentIntent}
      paymentRecordId={paymentRecordId}
    />
  );
}

Create page.jsx

This links your route /payment-success to the component above.

import PaymentSuccessClient from './PaymentSuccessClient';

export default function Page() {
  return <PaymentSuccessClient />;
}

Folder Structure

Create the following folder structure in your Next.js project:

app/
└── payment-success/
    ├── page.jsx                  # Main route file (/payment-success)
    └── PaymentSuccessClient.jsx  # Client component for initializing Toutix

The page will be accessible at host/payment-success (e.g., http://localhost:3000/payment-success)

How It Works

1. User completes checkout and is redirected to /payment-success. Example:

   /payment-success?payment_intent=pi_12345&payment_record_id=rec_6789

2. PaymentSuccess component reads payment_intent and payment_record_id from the URL parameters.

3. initWhiteLabel() sets up the Toutix SDK.

4. PaymentSuccessPageContainer fetches and displays the payment confirmation details.

Best Practices

• 🔐 Always keep your keys and tokens in environment variables (.env.local).
• 💳 paymentIntent and paymentRecordId are automatically passed from Stripe/Toutix after payment.
• ⚙️ Works with Next.js 13+ / 14+ App Router.
• 🎨 You can customize your loading state or container class if needed.