Fungies.io Help Center
  • 🙌Getting Started
  • Customize your online store
    • General Settings
    • Header
    • Footer
    • Add New Page
    • Add Page Section
    • Text Section
    • Image Section
    • Video Section
    • Gallery Section
    • Points Section
    • Slider Section
    • Recent Products Section
    • Custom Style
  • Add Subscription Product
  • Add Digital Downloads
  • Add Game Keys
  • Add Mobile Game Assets
  • Variants of the product
  • 🛠️Workspace Settings
    • Connect your Stripe account
    • Sandbox Mode
    • Team Management
  • 🧮Store Settings
    • Publish your store
    • Previewing The Store
    • Edit Explore / Search Page (Built-in)
    • Edit Product Page (Built-in)
      • Customize Review Categories
    • Set up Custom Domain
      • Migrating your domain to Cloudflare
  • Tax-inclusive Pricing
  • 🤑Getting Paid
    • Test Payments
    • Checkout Choice
      • Hosted Checkout
      • Overlay Checkout
      • Embedded Checkout
    • Global Availability
    • Customer Payment Methods
      • PayPal Settings
    • Billing Details
    • Payouts
    • Editing Statement Descriptor
    • Transactions Reports
    • Example React checkout
  • 👨‍💻FOR SAAS DEVELOPERS
    • Hosted Checkout (more payment methods)
    • Editing and Pausing Subscriptions
      • Downgrading / Upgrading Subscriptions
    • Creating Plans
    • Free Trials and Custom Intervals
    • Redirecting After Purchase
    • Using Webhooks
    • Types of Webhooks
      • Payment Success
      • Payment Refunded
      • Payment Failed
      • Subscription Created
      • Subscription Interval
      • Subscription Updated
      • Subscription Cancelled
    • Getting Started with the API
    • Orders APIs
      • Managing Orders through API
      • Orders List
      • Cancel Order
      • Update Order
    • Managing Subscriptions through API
    • Managing and Creating Users through API
    • Customizing Subscription Confirmation Page
    • Using CustomFields to parse data from your Software / App
      • Parse e-mails from your Software directly to checkout URL
  • Additional charges on top of Subscriptions
  • Upgrading or Downgrading Plans with API
  • Using Fungies.js npm package
    • Next.js 15 integration guide
  • 🎮For Game Developers
    • Orders
    • Platform Fees
    • Users list
    • Integrating with Game's Back-end
    • Customizing Purchase Confirmation Page
    • Webhooks
  • 💲Selling
    • Payment history
    • Selling FREE products
    • Managing Game Keys
    • Managing Game Assets
    • Pricing
    • Fulfillment of Orders
    • Prohibited Business and Products
    • Invoices and Receipts
    • Google Merchant Center XML Feed
    • SEO Sitemap
  • 🚀Marketing
    • Integrations
      • Google Tag Manager
      • Google Merchant Center
      • Trustpilot
      • Google Analytics (via Google Tag Manager)
    • SEO
    • Discount Codes
    • Pricing Localization
    • Language Localization
    • E-mail Marketing
  • 💰Billing
    • Plans and Usage
    • Invoices
    • Payment Methods
  • 🤩For End-Users
    • How to manage your Subscription?
    • How to buy a Game Key?
    • How to buy a Mobile Game Asset?
    • Getting your product
    • Steam key activation
    • Searching for games
    • Product details page
    • Order details
    • Refunds and chargebacks
  • 🗃️Other
    • FAQ
    • Roadmap
    • Product Changelog
  • 📃Legal
    • General Terms of Use
    • SaaS Terms of Use
    • Privacy Policy
    • Cookies and Tracking
Powered by GitBook
On this page
  1. Getting Paid

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>
  );
};
PreviousTransactions ReportsNextHosted Checkout (more payment methods)

Last updated 10 hours ago

🤑