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>
);
};
Last updated