@metrifox/react-sdk 0.0.9 → 0.0.11

package/README.md

@@ -39,7 +39,9 @@ metrifoxInit({
 
 ---
 
-## Core Widget: `CustomerPortal`
+## Widgets
+
+## `CustomerPortal`
 
 Displays a customizable customer dashboard with plans, subscriptions, billing, credits, and more.
 
@@ -64,7 +66,7 @@ export default function MyPortalPage() {
 
 ---
 
-## Section Configuration
+#### Section Configuration
 
 The `sectionsConfig` prop controls what appears in the portal.
 
@@ -75,7 +77,7 @@ The `sectionsConfig` prop controls what appears in the portal.
 | `component` | `React.ComponentType`     | Replace the default section with your own component |
 | `props`     | `Record<string, unknown>` | Extra props passed to the custom or default section |
 
-### Built-in Section Keys
+#### Built-in Section Keys
 
 | Key                | Description                   |
 | ------------------ | ----------------------------- |
@@ -87,7 +89,7 @@ The `sectionsConfig` prop controls what appears in the portal.
 | `billingHistory`   | List of past transactions     |
 | `plan`             | Current plan details          |
 
-### Section Anchors
+#### Section Anchors
 
 Each portal section now renders inside a `<section id="...">` wrapper so you can link directly to segments of a customer portal view. The default anchor IDs are:
 
@@ -105,6 +107,39 @@ Use these anchors when embedding the SDK or sharing deep links (e.g., `https://a
 
 ---
 
+## Pricing Table
+
+Displays subscription plans and one-time purchases in a configurable pricing table component.
+
+```tsx
+import { PricingTable } from "@metrifox/react-sdk"
+
+export default function PricingPage() {
+  return( 
+    <PricingTable 
+      checkoutUsername="your-checkout-username" 
+      productKey="your-product-key" 
+    />
+  )
+}
+```
+
+---
+
+#### Props
+
+The props control how the pricing table is configured.
+
+| Property              | Type      | Required | Default | Description                                                                      |
+| --------------------- | --------- | -------- | ------- | -------------------------------------------------------------------------------- |
+| `checkoutUsername`    | `string`  | Yes      | —       | Unique username used for checkout. This can be found in **Settings → Checkout**. |
+| `productKey`          | `string`  | Yes      | —       | Unique product identifier. This can be found on the product page.                |
+| `plansOnly`           | `boolean` | No       | `false` | Controls whether only subscription plans are rendered.                           |
+| `singlePurchasesOnly` | `boolean` | No       | `false` | Controls whether only single purchases are rendered.                             |
+| `showTabHeader`       | `boolean` | No       | `true`  | Controls whether the tab header for switching between offerings is rendered.     |
+
+> **Note:** If both `plansOnly` and `singlePurchasesOnly` are `false` or undefined, both plans and single purchases are displayed.
+
 ## Styling
 
 Import the SDK’s global styles into your app entry (e.g., `src/index.tsx` or `_app.tsx`):
@@ -115,6 +150,115 @@ import "@metrifox/react-sdk/dist/styles.css"
 
 > This is required for proper styling of all widgets.
 
+#### Pricing Table
+The SDK accepts an optional `pricingTableTheme` object during initialization. This theme is applied to Pricing Table component and UI elements within it to match your brand styles.
+
+Any values not provided will fall back to the default theme.
+
+```ts
+// Pricing table theme configuration
+pricingTableTheme?: {
+  card?: {
+    background?: string
+    borderColor?: string
+    descriptionColor?: string
+
+    header?: {
+      background?: string
+      textColor?: string
+    }
+
+    description?: {
+      textColor?: string
+      textButtonColor?: string
+    }
+
+    price?: {
+      amountColor?: string
+      primaryTextColor?: string
+      secondaryTextColor?: string
+      textButtonColor?: string
+      background?: string
+      borderColor?: string
+    }
+  }
+
+  button?: {
+    background?: string
+    textColor?: string
+    secondaryBackground?: string
+    secondaryTextColor?: string
+    textButtonColor?: string
+  }
+
+  featureList?: {
+    textColor?: string
+    iconColor?: string
+  }
+
+  tabs?: {
+    inactiveText?: string
+    activeText?: string
+    indicator?: string
+    borderColor?: string
+  }
+
+  intervalToggle?: {
+    background?: string
+    activeBackground?: string
+    activeText?: string
+    inactiveText?: string
+  }
+
+  currentSubscriptionCard?: {
+    header?: {
+      background?: string
+      textColor?: string
+    }
+    gradientColor?: string
+  }
+
+  freeTrialTag?: {
+    background?: string
+    textColor?: string
+  }
+
+  checkoutBar?: {
+    background?: string
+    borderColor?: string
+    textColor?: string
+    buttonBackground?: string
+    buttonTextColor?: string
+  }
+}
+```
+###### Example usage
+```tsx
+import { metrifoxInit } from "@metrifox/react-sdk"
+
+const pricingTableTheme = {
+  pricingTable: {
+    card: {
+      background: "#ffffff",
+      price: {
+        amountColor: "#111827",
+        textButtonColor: "#2563eb",
+      },
+    },
+    button: {
+      background: "#2563eb",
+    },
+    tabs: {
+      activeText: "#2563eb",
+    },
+  },
+}
+
+metrifoxInit({
+  clientKey: "your-client-key",
+  pricingTableTheme,
+})
+```
 ---
 
 ## Local Development