usePricingTable

import { useCheckout, usePricingTable } from "priceos/react";

export function Pricing() {
  const { pricingTable, isLoading } = usePricingTable({
    pricingTableKey: "marketing-pricing",
  });
  const { openCheckout } = useCheckout();

  if (isLoading || !pricingTable) return null;

  return pricingTable.plans.map((plan) => (
    <article key={plan.productKey}>
      <h2>{plan.name}</h2>
      <p>{plan.monthlyPrice?.label}</p>
      <button
        onClick={() => openCheckout({
          productKey: plan.productKey,
          stripePriceId: plan.monthlyPrice?.stripePriceId,
          pricingTableReleaseId: pricingTable.table?.releaseId,
        })}
      >
        Choose {plan.name}
      </button>
    </article>
  ));
}