{
      "permission": "plan_read",
      "purpose": "Need to get plan and price details"
    },
    {
      "permission": "plan_write",
      "purpose": "Enable creating plan and price"
    },
    {
      "permission": "product_read",
      "purpose": "Enable creating plan and price"
    },
    {
      "permission": "product_write",
      "purpose": "Enable creating plan and price"
    },
  

// ...

  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.product.detail",
        "component": "Product"
      }
    ],

import {
  createHttpClient,
  STRIPE_API_KEY
} from "@stripe/ui-extension-sdk/http_client";

// Initiate communication with the stripe client.
const stripe = new Stripe(STRIPE_API_KEY, {
  httpClient: createHttpClient(),
  apiVersion: "2023-08-16"
});

const Product = ({environment, userContext}) => {

  const downloadProduct = async () => {
    try {
      const product = await stripe.products.retrieve(environment.objectContext.id);
      console.log(JSON.stringify(product, null, '  '));
      showToast("downlaoded product ", { type: "success" });
    } catch (err) {
      showToast("Failed to download product", { type: "caution" });
    }
    console.log(JSON.stringify(environment));
    console.log(JSON.stringify(userContext));
  }

  const downloadPlans = async () => {
    try {
      const plans = await stripe.plans.list({ limit: 50 });
      console.log(JSON.stringify(plans, null, '  '));
      showToast("downlaoded plans ", { type: "success" });
    } catch (err) {
      showToast("Failed to download plan", { type: "caution" });
    }
  }

  return (
    <Box>
      <Box><Button  current Product</Button></Box>
      <Box><Button  Products</Button></Box>
    </Box>
  );
}