Example React checkout

In this example, we have 4 payment plans - this code will ensure that when an user clicks a button on that plan, an Overlay Checkout will be shown with custom field user_id prepopulated from the app.

import React, { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { useChatContext } from "@/contexts/ChatContext";
import { Check } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";

interface PlanProps {
  nameEn: string;
  namePl: string;
  price: string;
  descriptionEn: string;
  descriptionPl: string;
  features: string[];
  advantages: string[];
  popular?: boolean;
  onSelect: (plan: string) => void;
  currentPlan: string;
}

export const PlanCard: React.FC<PlanProps> = ({
  nameEn,
  namePl,
  price,
  descriptionEn,
  descriptionPl,
  features,
  advantages,
  popular = false,
  onSelect,
  currentPlan,
}) => {
  const { language } = useChatContext();
  const { user } = useAuth();
  const isPolish = language === "pl";
  const name = isPolish ? namePl : nameEn;
  const description = isPolish ? descriptionPl : descriptionEn;
  
  const isCurrentPlan = nameEn === currentPlan; // Keep plan name matching with English keys
  const popularText = isPolish ? "Popularne" : "Popular";
  const currentPlanText = isPolish ? "Aktualny Plan" : "Current Plan";
  const selectPlanText = isPolish ? "Wybierz Plan" : "Select Plan";
  const featuresTitle = isPolish ? "Funkcje" : "Features";
  const advantagesTitle = isPolish ? "Korzyści planu" : "Plan Benefits";
  
  // Get the user ID for checkout
  const userId = user?.id || '';
  
  // Define checkout URLs for each plan
  const checkoutUrls = {
    Basic: 'https://doktorek.app.fungies.io/checkout-element/bd36508e-bfff-48d7-bb15-234b7bf093b7',
    Standard: 'https://doktorek.app.fungies.io/checkout-element/5a4a85d6-0116-498e-b234-277f11373052',
    Premium: 'https://doktorek.app.fungies.io/checkout-element/5c195bd3-498e-4d7f-97c2-754f401163f9',
    Pro: 'https://doktorek.app.fungies.io/checkout-element/4ce11d81-2459-4ec7-967d-e74e0e18a795'
  };
  
  // Get the appropriate checkout URL for this plan
  const checkoutUrl = checkoutUrls[nameEn as keyof typeof checkoutUrls];
  
  // Generate the JSON-formatted custom fields string with the user ID
  const customFieldsJson = JSON.stringify({ user_id: userId });
  
  // Determine if this plan uses Fungies checkout (all plans now use it)
  const usesFungiesCheckout = checkoutUrl !== undefined;
  
  // Load Fungies checkout script dynamically
  useEffect(() => {
    if (usesFungiesCheckout) {
      const existingScript = document.getElementById('fungies-checkout-script');
      if (!existingScript) {
        const script = document.createElement('script');
        script.id = 'fungies-checkout-script';
        script.src = 'https://cdn.jsdelivr.net/npm/@fungies/[email protected]';
        script.defer = true;
        script.dataset.autoInit = "";
        document.body.appendChild(script);
      }
    }
  }, [usesFungiesCheckout]);
  
  return (
    <div className={`rounded-lg border ${popular ? 'border-green-500 shadow-md' : 'border-gray-200'} p-6 relative flex flex-col h-full`}>
      {popular && (
        <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-500 text-white text-xs font-semibold py-1 px-3 rounded-full">
          {popularText}
        </div>
      )}
      <h3 className="font-semibold text-lg">{name}</h3>
      <div className="mt-2 mb-4">
        <span className="text-2xl font-bold whitespace-nowrap">{price}</span>
      </div>
      <p className="text-gray-500 mb-4 text-sm">{description}</p>
      
      {/* Plan advantages */}
      {advantages && advantages.length > 0 && (
        <div className="mb-4">
          <h4 className="text-sm font-medium text-gray-700 mb-2">{advantagesTitle}</h4>
          <ul className="space-y-2">
            {advantages.map((advantage, index) => (
              <li key={`advantage-${index}`} className="flex items-center text-sm">
                <Check className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" />
                <span className="text-gray-600 font-medium">{advantage}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
      
      {/* Common features with lighter styling */}
      <div className="mb-4 mt-auto">
        <h4 className="text-xs font-medium text-gray-500 mb-2">{featuresTitle}</h4>
        <ul className="space-y-1">
          {features.map((feature, index) => (
            <li key={`feature-${index}`} className="flex items-center text-xs">
              <Check className="h-3 w-3 text-green-400 mr-1 flex-shrink-0" />
              <span className="text-gray-500">{feature}</span>
            </li>
          ))}
        </ul>
      </div>
      
      {usesFungiesCheckout ? (
        <button 
          className={`w-full mt-4 ${isCurrentPlan ? 'bg-gray-400 hover:bg-gray-500' : 'bg-green-600 hover:bg-green-700'} text-white py-2 px-4 rounded-md`}
          disabled={isCurrentPlan}
          data-fungies-checkout-url={checkoutUrl}
          data-fungies-custom-fields={customFieldsJson}
          data-fungies-mode='overlay'
        >
          {isCurrentPlan ? currentPlanText : selectPlanText}
        </button>
      ) : (
        <Button 
          className={`w-full mt-4 ${isCurrentPlan ? 'bg-gray-400 hover:bg-gray-500' : 'bg-green-600 hover:bg-green-700'} text-white`}
          onClick={() => onSelect(nameEn)}
          disabled={isCurrentPlan}
        >
          {isCurrentPlan ? currentPlanText : selectPlanText}
        </Button>
      )}
    </div>
  );
};