},\\n items: [\\n {\\n price_id: 'price_basic_monthly',\\n product: {\\n name: 'Basic Plan',\\n description: 'For individuals and small teams.',\\n unit_label: 'user',\\n features: [{ name: '5 Projects' }, { name: '10GB Storage' }, { name: 'Basic Support' }],\\n },\\n price: {\\n currency: 'usd',\\n unit_amount: '1000', \u002f\u002f in cents\\n recurring: { interval: 'month', interval_count: 1 },\\n currency_options: [{ currency_id: 'usd', unit_amount: '1000' }],\\n },\\n is_highlight: false,\\n },\\n {\\n price_id: 'price_pro_monthly',\\n product: {\\n name: 'Pro Plan',\\n description: 'For growing businesses.',\\n unit_label: 'user',\\n features: [{ name: 'Unlimited Projects' }, { name: '100GB Storage' }, { name: 'Priority Support' }],\\n },\\n price: {\\n currency: 'usd',\\n unit_amount: '2500',\\n recurring: { interval: 'month', interval_count: 1 },\\n currency_options: [{ currency_id: 'usd', unit_amount: '2500' }],\\n },\\n is_highlight: true,\\n highlight_text: 'Popular',\\n },\\n {\\n price_id: 'price_basic_yearly',\\n product: {\\n name: 'Basic Plan',\\n description: 'For individuals and small teams.',\\n unit_label: 'user',\\n features: [{ name: '5 Projects' }, { name: '10GB Storage' }, { name: 'Basic Support' }],\\n },\\n price: {\\n currency: 'usd',\\n unit_amount: '10000',\\n recurring: { interval: 'year', interval_count: 1 },\\n currency_options: [{ currency_id: 'usd', unit_amount: '10000' }],\\n },\\n is_highlight: false,\\n },\\n {\\n price_id: 'price_pro_yearly',\\n product: {\\n name: 'Pro Plan',\\n description: 'For growing businesses.',\\n unit_label: 'user',\\n features: [{ name: 'Unlimited Projects' }, { name: '100GB Storage' }, { name: 'Priority Support' }],\\n },\\n price: {\\n currency: 'usd',\\n unit_amount: '25000',\\n recurring: { interval: 'year', interval_count: 1 },\\n currency_options: [{ currency_id: 'usd', unit_amount: '25000' }],\\n },\\n is_highlight: true,\\n highlight_text: 'Popular',\\n },\\n ],\\n};\\n\\nfunction MyPricingPage() {\\n const { session, connect } = useSessionContext();\\n\\n const handlePlanSelect = async (priceId: string, currencyId: string) =\u003e {\\n console.log(`Plan selected: ${priceId}, Currency: ${currencyId}`);\\n \u002f\u002f Here, you would typically navigate to a checkout page or open a payment modal.\\n \u002f\u002f For example: `router.push(\\\\\\\"\u002fcheckout?price_id=${priceId}¤cy_id=${currencyId}\\\\\\\")`\\n alert(`Selected Price ID: ${priceId}`);\\n };\\n\\n return (\\n \u003cPaymentProvider session={session} connect={connect}\u003e\\n \u003cdiv style={{ maxWidth: 800, margin: 'auto' }}\u003e\\n \u003cPricingTable table={pricingTableData} onSelect={handlePlanSelect} \u002f\u003e\\n \u003c\u002fdiv\u003e\\n \u003c\u002fPaymentProvider\u003e\\n );\\n}\\n\\nexport default MyPricingPage;\",\"children\":[]}}},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Usage Scenarios\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Mode: \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"checkout\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" vs. \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"select\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h3\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"mode\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" prop changes the call-to-action button to fit different use cases.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":17,\"mode\":\"normal\",\"style\":\"\",\"text\":\"mode='checkout'\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\" (Default):\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" The button text will be context-aware, showing labels like \\\"Subscribe\\\" or \\\"Start Trial\\\". This mode is intended for when the user's click should immediately initiate the payment or checkout process.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":17,\"mode\":\"normal\",\"style\":\"\",\"text\":\"mode='select'\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\":\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" The button text will show \\\"Select\\\" or \\\"Selected\\\". This is useful when the pricing table is part of a larger form or multi-step process. The \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"onSelect\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" callback can be used to update the application's state with the chosen plan, and the UI will visually indicate which plan is currently selected.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Handling \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"onSelect\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h3\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"onSelect\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" callback is the core mechanism for handling user interaction. It's an async function that receives the \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"priceId\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" and \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"currencyId\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" of the chosen plan. Your application logic should reside here. Common actions include:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Storing the selected plan in your application's state.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Redirecting the user to a dedicated checkout page, passing the \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"priceId\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" as a URL parameter.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Using the \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"priceId\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" to create a checkout session with the payment service backend and then opening a payment form.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}","originLink":null,"cover":null,"excerpt":"The PricingTable component is a flexible UI element designed to display subscription plans and pricing options in a structured, responsive table. It a","author":"z1VV21NqNWkiadznN32ALkos5dQqQwnCMty","topicId":null,"boardId":"payment-kit-react","type":"doc","status":"publish","parentId":"Dt9iRoPORbzTkRctEOxFBXcn","pinnedAt":null,"featured":null,"lastCommentedAt":"2025-09-26T13:15:18.310Z","commentCount":0,"publishTime":"2025-09-26T13:15:18.310Z","contentVersion":0,"slug":"components-ui-pricing-table-8b3f3d","accessType":"public","deletedAt":null,"createdAt":"2025-09-26T13:15:18.310Z","updatedAt":"2025-09-26T13:15:18.318Z","locale":"en"}; PricingTable