1

2
import { PriceBlocs } from "priceblocs";
3

4
<PriceBlocs apiKey="api-key-123" customer="cus_123">
5
  {({ values: { prices, subscriptions }, checkout }) => {
6
    const activeSub = subscriptions.find(({ active }) => active);
7
    const firstPrice = prices[0]
8
    return !activeSub
9
      ? prices.map(({ id, title }) => (
10
        <div className="flex flex-row">
11
          <div className="header">`Upgrade to ${price.title}` for ${price.formattedAmount}`</div>
12
          <button key={id} onClick={() => checkout(id)}>
13
            Upgrade
14
          </button>
15
        <div>
16
        ))
17
      : null;
18
  }}
19
</PriceBlocs>
20