# 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/fungies-js@0.0.6';
        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>
  );
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fungies.io/getting-paid/example-react-checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.