Rate Matrix Pricing Block for React

Edit METRICS for the metered rows: each has its label, a note under the name, the unit a rate buys ("per message"), and rates with each plan's included allowance (left out where the plan has none) and its overage rate in dollars per unit, or null for a custom rate. Rates are written with at least two decimals and up to four, so $0.02 and $0.0079 both read right. ROWS holds the platform and support rows, each with a value per plan: true for included, false for not included, or a short text. PLANS sets the columns, their base price (0 shows "No monthly fee", null shows "Custom"), call to action and recommended.

Each button in the head row is a real link: point it at a route that subscribes the customer to the plan's base price and attaches a metered price for each unit at the rates in the table, so your billing provider charges the overage at the end of each period. The On demand plan has no base price, so it needs only the metered prices. Each button is a ShineButton with render set to an a element and nativeButton={false}.

Below the md breakpoint the table gives way to a second view of the same data: a Segment Group of the four plan names, with Growth selected, over one plan's price and button and then its rows as a list of names and values. Switching plan swaps the values and nothing scrolls sideways, even at 320 px, where the four names share the width.

Set recommended: true on that plan and false on the others. Its whole column takes a light tint, the Recommended badge sits beside its name, and its button takes the primary style while the others are outline. The phone tabs open on Growth; change the initial useState to open on another.

Use a matrix when buyers price your product by usage and need to compare specific numbers, allowances and per-unit rates across several metrics and tiers, to estimate their own bill. Use plan cards when the difference between plans is mostly which features they include rather than how much each unit costs.