@blocklet/payment-react 1.13.117 → 1.13.119

package/es/api.js

@@ -9,7 +9,7 @@ api.interceptors.request.use(
     config.baseURL = prefix || "";
     config.timeout = 8e3;
     const livemode = localStorage.getItem("livemode");
-    const locale = getLocale(window.blocklet.languages);
+    const locale = getLocale(window.blocklet?.languages);
     config.params = { ...config.params || {}, livemode: isNull(livemode) ? true : JSON.parse(livemode), locale };
     return config;
   },

package/es/components/livemode.d.ts

@@ -1,2 +1,13 @@
 /// <reference types="react" />
-export default function Livemode(): import("react").JSX.Element;
+type Props = {
+    color?: string;
+    backgroundColor?: string;
+};
+declare function Livemode({ color, backgroundColor }: Props): import("react").JSX.Element;
+declare namespace Livemode {
+    var defaultProps: {
+        color: string;
+        backgroundColor: string;
+    };
+}
+export default Livemode;

package/es/components/livemode.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Chip } from "@mui/material";
-export default function Livemode() {
+export default function Livemode({ color, backgroundColor }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsx(
     Chip,
@@ -16,9 +16,13 @@ export default function Livemode() {
         fontSize: "0.8rem",
         fontWeight: "bold",
         borderRadius: "4px",
-        backgroundColor: "#ffde92",
-        color: "#bb5504"
+        backgroundColor,
+        color
       }
     }
   );
 }
+Livemode.defaultProps = {
+  color: "#bb5504",
+  backgroundColor: "#ffde92"
+};

package/es/components/{switch.js → switch-button.js}

@@ -20,7 +20,7 @@ export default styled(Switch)(({ variant = "success", theme }) => ({
       color: "#fff",
       "& + .MuiSwitch-track": {
         opacity: 1,
-        backgroundColor: theme.palette[variant].light
+        backgroundColor: theme.palette[variant]?.light
       }
     }
   },
@@ -29,7 +29,7 @@ export default styled(Switch)(({ variant = "success", theme }) => ({
     width: 12,
     height: 12,
     borderRadius: 6,
-    transition: theme.transitions.create(["width"], {
+    transition: theme.transitions?.create(["width"], {
       duration: 200
     })
   },

package/es/index.d.ts

@@ -5,7 +5,7 @@ import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Status from './components/status';
-import Switch from './components/switch';
+import Switch from './components/switch-button';
 import dayjs from './dayjs';
 import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';

package/es/index.js

@@ -5,7 +5,7 @@ import FormInput from "./components/input.js";
 import Livemode from "./components/livemode.js";
 import PricingTable from "./components/pricing-table.js";
 import Status from "./components/status.js";
-import Switch from "./components/switch.js";
+import Switch from "./components/switch-button.js";
 import dayjs from "./dayjs.js";
 import Amount from "./payment/amount.js";
 import PhoneInput from "./payment/form/phone.js";

package/es/payment/error.js

@@ -4,7 +4,7 @@ export default function PaymentError({ title, description, button }) {
   return /* @__PURE__ */ jsx(Stack, { sx: { height: "100vh" }, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
-    /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", component: Link, href: window.blocklet.appUrl, children: button })
+    /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", component: Link, href: window.blocklet?.appUrl, children: button })
   ] }) });
 }
 PaymentError.defaultProps = {

package/es/payment/product-item.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Stack, Typography } from "@mui/material";
 import Status from "../components/status.js";
-import Switch from "../components/switch.js";
+import Switch from "../components/switch-button.js";
 import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from "../util.js";
 import ProductCard from "./product-card.js";
 ProductItem.defaultProps = {

package/es/util.js

@@ -4,15 +4,15 @@ import dayjs from "./dayjs.js";
 import { t } from "./locales/index.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export const getPrefix = () => {
-  const componentId = (window.blocklet.componentId || "").split("/").pop();
+  const componentId = (window?.blocklet?.componentId || "").split("/").pop();
   if (componentId === PAYMENT_KIT_DID) {
-    return window.blocklet.prefix;
+    return window.blocklet?.prefix;
   }
-  const component = (window.blocklet.componentMountPoints || []).find((x) => x.did === PAYMENT_KIT_DID);
+  const component = (window.blocklet?.componentMountPoints || []).find((x) => x.did === PAYMENT_KIT_DID);
   if (component) {
     return component.mountPoint;
   }
-  return window.blocklet.prefix;
+  return window.blocklet?.prefix;
 };
 export function formatToDate(date, locale = "en") {
   if (!date) {
@@ -95,7 +95,7 @@ export function getStatementDescriptor(items) {
       return item.price?.product?.statement_descriptor;
     }
   }
-  return window.blocklet.appName;
+  return window.blocklet?.appName;
 }
 export function formatRecurring(recurring, translate = true, separator = "per", locale = "en") {
   const intervals = {

package/lib/api.js

@@ -15,7 +15,7 @@ api.interceptors.request.use(config => {
   config.baseURL = prefix || "";
   config.timeout = 8e3;
   const livemode = localStorage.getItem("livemode");
-  const locale = (0, _context.getLocale)(window.blocklet.languages);
+  const locale = (0, _context.getLocale)(window.blocklet?.languages);
   config.params = {
     ...(config.params || {}),
     livemode: (0, _isNull.default)(livemode) ? true : JSON.parse(livemode),

package/lib/components/livemode.d.ts

@@ -1,2 +1,13 @@
 /// <reference types="react" />
-export default function Livemode(): import("react").JSX.Element;
+type Props = {
+    color?: string;
+    backgroundColor?: string;
+};
+declare function Livemode({ color, backgroundColor }: Props): import("react").JSX.Element;
+declare namespace Livemode {
+    var defaultProps: {
+        color: string;
+        backgroundColor: string;
+    };
+}
+export default Livemode;

package/lib/components/livemode.js

@@ -7,7 +7,10 @@ module.exports = Livemode;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
-function Livemode() {
+function Livemode({
+  color,
+  backgroundColor
+}) {
   const {
     t
   } = (0, _context.useLocaleContext)();
@@ -22,8 +25,12 @@ function Livemode() {
       fontSize: "0.8rem",
       fontWeight: "bold",
       borderRadius: "4px",
-      backgroundColor: "#ffde92",
-      color: "#bb5504"
+      backgroundColor,
+      color
     }
   });
-}
+}
+Livemode.defaultProps = {
+  color: "#bb5504",
+  backgroundColor: "#ffde92"
+};

package/lib/components/{switch.js → switch-button.js}

@@ -29,7 +29,7 @@ module.exports = (0, _system.styled)(_material.Switch)(({
       color: "#fff",
       "& + .MuiSwitch-track": {
         opacity: 1,
-        backgroundColor: theme.palette[variant].light
+        backgroundColor: theme.palette[variant]?.light
       }
     }
   },
@@ -38,7 +38,7 @@ module.exports = (0, _system.styled)(_material.Switch)(({
     width: 12,
     height: 12,
     borderRadius: 6,
-    transition: theme.transitions.create(["width"], {
+    transition: theme.transitions?.create(["width"], {
       duration: 200
     })
   },

package/lib/index.d.ts

@@ -5,7 +5,7 @@ import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Status from './components/status';
-import Switch from './components/switch';
+import Switch from './components/switch-button';
 import dayjs from './dayjs';
 import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';

package/lib/index.js

@@ -83,7 +83,7 @@ Object.defineProperty(exports, "Status", {
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () {
-    return _switch.default;
+    return _switchButton.default;
   }
 });
 Object.defineProperty(exports, "api", {
@@ -117,7 +117,7 @@ var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
 var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));
 var _status = _interopRequireDefault(require("./components/status"));
-var _switch = _interopRequireDefault(require("./components/switch"));
+var _switchButton = _interopRequireDefault(require("./components/switch-button"));
 var _dayjs = _interopRequireDefault(require("./dayjs"));
 var _amount = _interopRequireDefault(require("./payment/amount"));
 var _phone = _interopRequireDefault(require("./payment/form/phone"));

package/lib/payment/error.js

@@ -41,7 +41,7 @@ function PaymentError({
         variant: "text",
         size: "small",
         component: _material.Link,
-        href: window.blocklet.appUrl,
+        href: window.blocklet?.appUrl,
         children: button
       })]
     })

package/lib/payment/product-item.js

@@ -8,7 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _status = _interopRequireDefault(require("../components/status"));
-var _switch = _interopRequireDefault(require("../components/switch"));
+var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../util");
 var _productCard = _interopRequireDefault(require("./product-card"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -95,7 +95,7 @@ function ProductItem({
           cursor: "pointer",
           color: "text.primary"
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_switch.default, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_switchButton.default, {
           id: "upsell-switch",
           sx: {
             mr: 1
@@ -137,7 +137,7 @@ function ProductItem({
           cursor: "pointer",
           color: "text.secondary"
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_switch.default, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_switchButton.default, {
           id: "upsell-switch",
           sx: {
             mr: 1

package/lib/util.js

@@ -30,19 +30,19 @@ exports.stopEvent = stopEvent;
 var _util = require("@ocap/util");
 var _reactInternationalPhone = require("react-international-phone");
 var _dayjs = _interopRequireDefault(require("./dayjs"));
-var _index = require("./locales/index");
+var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const PAYMENT_KIT_DID = exports.PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 const getPrefix = () => {
-  const componentId = (window.blocklet.componentId || "").split("/").pop();
+  const componentId = (window?.blocklet?.componentId || "").split("/").pop();
   if (componentId === PAYMENT_KIT_DID) {
-    return window.blocklet.prefix;
+    return window.blocklet?.prefix;
   }
-  const component = (window.blocklet.componentMountPoints || []).find(x => x.did === PAYMENT_KIT_DID);
+  const component = (window.blocklet?.componentMountPoints || []).find(x => x.did === PAYMENT_KIT_DID);
   if (component) {
     return component.mountPoint;
   }
-  return window.blocklet.prefix;
+  return window.blocklet?.prefix;
 };
 exports.getPrefix = getPrefix;
 function formatToDate(date, locale = "en") {
@@ -135,7 +135,7 @@ function getStatementDescriptor(items) {
       return item.price?.product?.statement_descriptor;
     }
   }
-  return window.blocklet.appName;
+  return window.blocklet?.appName;
 }
 function formatRecurring(recurring, translate = true, separator = "per", locale = "en") {
   const intervals = {
@@ -146,14 +146,14 @@ function formatRecurring(recurring, translate = true, separator = "per", locale
     year: "yearly"
   };
   if (+recurring.interval_count === 1) {
-    const interval = (0, _index.t)(`common.${recurring.interval}`, locale);
-    return translate ? (0, _index.t)(`common.${intervals[recurring.interval]}`, locale) : separator ? (0, _index.t)(`common.${separator}`, locale, {
+    const interval = (0, _locales.t)(`common.${recurring.interval}`, locale);
+    return translate ? (0, _locales.t)(`common.${intervals[recurring.interval]}`, locale) : separator ? (0, _locales.t)(`common.${separator}`, locale, {
       interval
     }) : interval;
   }
-  return (0, _index.t)("common.recurring", locale, {
+  return (0, _locales.t)("common.recurring", locale, {
     count: recurring.interval_count,
-    interval: (0, _index.t)(`common.${recurring.interval}s`, locale)
+    interval: (0, _locales.t)(`common.${recurring.interval}s`, locale)
   });
 }
 function getPriceUintAmountByCurrency(price, currency) {
@@ -177,7 +177,7 @@ function getPriceCurrencyOptions(price) {
 }
 function formatLineItemPricing(item, currency, trial, locale = "en") {
   const price = item.upsell_price || item.price;
-  let quantity = (0, _index.t)("common.qty", locale, {
+  let quantity = (0, _locales.t)("common.qty", locale, {
     count: item.quantity
   });
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
@@ -192,14 +192,14 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
     if (price.recurring?.usage_type === "metered" || item.quantity === 1) {
       return alt;
     }
-    return quantity ? (0, _index.t)("common.each", locale, {
+    return quantity ? (0, _locales.t)("common.each", locale, {
       unit
     }) : "";
   };
   if (price.type === "recurring" && price.recurring) {
     if (trial > 0) {
       return {
-        primary: (0, _index.t)("common.trial", locale, {
+        primary: (0, _locales.t)("common.trial", locale, {
           count: trial
         }),
         secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, "slash", locale)}`,
@@ -297,7 +297,7 @@ function formatCheckoutHeadlines(session, currency, locale = "en") {
   const amount = `${(0, _util.fromUnitToToken)(total, currency.decimal)} ${currency.symbol}`;
   if (items.length === 0) {
     return {
-      action: (0, _index.t)("payment.checkout.empty", locale),
+      action: (0, _locales.t)("payment.checkout.empty", locale),
       amount: "0",
       then: ""
     };
@@ -308,7 +308,7 @@ function formatCheckoutHeadlines(session, currency, locale = "en") {
     name: ""
   };
   if (items.every(x => x.price.type === "one_time")) {
-    const action = (0, _index.t)("payment.checkout.pay", locale, {
+    const action = (0, _locales.t)("payment.checkout.pay", locale, {
       payee: brand
     });
     if (items.length > 1) {
@@ -327,7 +327,7 @@ function formatCheckoutHeadlines(session, currency, locale = "en") {
   const recurring = formatRecurring((item?.upsell_price || item?.price)?.recurring, false, "per", locale);
   if (items.every(x => x.price.type === "recurring")) {
     const hasMetered = items.some(x => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
-    const subscription2 = [hasMetered ? (0, _index.t)("payment.checkout.least", locale) : "", (0, _util.fromUnitToToken)(items.reduce((acc, x) => {
+    const subscription2 = [hasMetered ? (0, _locales.t)("payment.checkout.least", locale) : "", (0, _util.fromUnitToToken)(items.reduce((acc, x) => {
       if (x.price.recurring?.usage_type === "metered") {
         return acc;
       }
@@ -336,21 +336,21 @@ function formatCheckoutHeadlines(session, currency, locale = "en") {
     if (items.length > 1) {
       if (trial > 0) {
         return {
-          action: (0, _index.t)("payment.checkout.try2", locale, {
+          action: (0, _locales.t)("payment.checkout.try2", locale, {
             name,
             count: items.length - 1
           }),
-          amount: (0, _index.t)("payment.checkout.free", locale, {
+          amount: (0, _locales.t)("payment.checkout.free", locale, {
             count: trial
           }),
-          then: (0, _index.t)("payment.checkout.then", locale, {
+          then: (0, _locales.t)("payment.checkout.then", locale, {
             subscription: subscription2,
             recurring
           })
         };
       }
       return {
-        action: (0, _index.t)("payment.checkout.sub2", locale, {
+        action: (0, _locales.t)("payment.checkout.sub2", locale, {
           name,
           count: items.length - 1
         }),
@@ -360,20 +360,20 @@ function formatCheckoutHeadlines(session, currency, locale = "en") {
     }
     if (trial > 0) {
       return {
-        action: (0, _index.t)("payment.checkout.try1", locale, {
+        action: (0, _locales.t)("payment.checkout.try1", locale, {
           name
         }),
-        amount: (0, _index.t)("payment.checkout.free", locale, {
+        amount: (0, _locales.t)("payment.checkout.free", locale, {
           count: trial
         }),
-        then: (0, _index.t)("payment.checkout.then", locale, {
+        then: (0, _locales.t)("payment.checkout.then", locale, {
           subscription: subscription2,
           recurring
         })
       };
     }
     return {
-      action: (0, _index.t)("payment.checkout.sub1", locale, {
+      action: (0, _locales.t)("payment.checkout.sub1", locale, {
         name
       }),
       amount,
@@ -387,11 +387,11 @@ function formatCheckoutHeadlines(session, currency, locale = "en") {
     return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new _util.BN(x.quantity)));
   }, new _util.BN(0)), currency.decimal);
   return {
-    action: (0, _index.t)("payment.checkout.pay", locale, {
+    action: (0, _locales.t)("payment.checkout.pay", locale, {
       payee: brand
     }),
     amount,
-    then: (0, _index.t)("payment.checkout.then", locale, {
+    then: (0, _locales.t)("payment.checkout.then", locale, {
       subscription: `${subscription} ${currency.symbol}`,
       recurring
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.117",
+  "version": "1.13.119",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -24,7 +24,9 @@
     "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
     "test": "node tools/jest.js",
-    "coverage": "npm run test -- --coverage"
+    "coverage": "npm run test -- --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "bugs": {
     "url": "https://github.com/blocklet/payment-kit/issues"
@@ -60,6 +62,7 @@
     "@ocap/util": "^1.18.108",
     "@stripe/react-stripe-js": "^2.4.0",
     "@stripe/stripe-js": "^2.2.0",
+    "@vitejs/plugin-legacy": "^5.3.0",
     "ahooks": "^3.7.8",
     "axios": "^0.27.2",
     "dayjs": "^1.11.10",
@@ -86,19 +89,34 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "@blocklet/payment-types": "1.13.117",
+    "@blocklet/payment-types": "1.13.119",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-vite": "^7.6.10",
+    "@storybook/test": "^7.6.10",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-legacy": "^5.3.0",
     "eslint": "^8.56.0",
     "glob": "^10.3.3",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
     "prettier": "^2.8.8",
     "prettier-plugin-import-sort": "^0.0.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "storybook": "^7.6.10",
     "ts-jest": "^29.1.2",
     "type-fest": "^4.8.3",
     "typescript": "^4.9.5",
-    "unbuild": "^2.0.0"
+    "unbuild": "^2.0.0",
+    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "8cb6598da65c927de5beaf94f59b1884ba95162b"
+  "gitHead": "476ee7af8213287b3953330a4ad179f4d29d4902"
 }

package/src/api.ts

@@ -13,7 +13,7 @@ api.interceptors.request.use(
     config.timeout = 8000;
 
     const livemode = localStorage.getItem('livemode');
-    const locale = getLocale(window.blocklet.languages);
+    const locale = getLocale(window.blocklet?.languages);
     config.params = { ...(config.params || {}), livemode: isNull(livemode) ? true : JSON.parse(livemode), locale };
 
     return config;

package/src/components/livemode.tsx

@@ -1,7 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Chip } from '@mui/material';
 
-export default function Livemode() {
+type Props = {
+  color?: string;
+  backgroundColor?: string;
+};
+
+export default function Livemode({ color, backgroundColor }: Props) {
   const { t } = useLocaleContext();
   return (
     <Chip
@@ -15,9 +20,14 @@ export default function Livemode() {
         fontSize: '0.8rem',
         fontWeight: 'bold',
         borderRadius: '4px',
-        backgroundColor: '#ffde92',
-        color: '#bb5504',
+        backgroundColor,
+        color,
       }}
     />
   );
 }
+
+Livemode.defaultProps = {
+  color: '#bb5504',
+  backgroundColor: '#ffde92',
+};

package/src/components/{switch.tsx → switch-button.tsx}

@@ -26,7 +26,7 @@ export default styled(Switch)<SwitchProps>(({ variant = 'success', theme }) => (
       color: '#fff',
       '& + .MuiSwitch-track': {
         opacity: 1,
-        backgroundColor: theme.palette[variant].light,
+        backgroundColor: theme.palette[variant]?.light,
       },
     },
   },
@@ -35,7 +35,7 @@ export default styled(Switch)<SwitchProps>(({ variant = 'success', theme }) => (
     width: 12,
     height: 12,
     borderRadius: 6,
-    transition: (theme.transitions as any).create(['width'], {
+    transition: (theme.transitions as any)?.create(['width'], {
       duration: 200,
     }),
   },

package/src/index.ts

@@ -5,7 +5,7 @@ import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Status from './components/status';
-import Switch from './components/switch';
+import Switch from './components/switch-button';
 import dayjs from './dayjs';
 import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';

package/src/payment/error.tsx

@@ -16,7 +16,7 @@ export default function PaymentError({ title, description, button }: Props) {
         <Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
           {description}
         </Typography>
-        <Button variant="text" size="small" component={Link} href={window.blocklet.appUrl}>
+        <Button variant="text" size="small" component={Link} href={window.blocklet?.appUrl}>
           {button}
         </Button>
       </Stack>

package/src/payment/product-item.tsx

@@ -8,7 +8,7 @@ import type {
 import { Stack, Typography } from '@mui/material';
 
 import Status from '../components/status';
-import Switch from '../components/switch';
+import Switch from '../components/switch-button';
 import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from '../util';
 import ProductCard from './product-card';
 

package/src/util.ts

@@ -14,21 +14,21 @@ import { BN, fromUnitToToken } from '@ocap/util';
 import { defaultCountries } from 'react-international-phone';
 
 import dayjs from './dayjs';
-import { t } from './locales/index';
+import { t } from './locales';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
 export const getPrefix = () => {
-  const componentId = (window.blocklet.componentId || '').split('/').pop();
+  const componentId = (window?.blocklet?.componentId || '').split('/').pop();
   if (componentId === PAYMENT_KIT_DID) {
-    return window.blocklet.prefix;
+    return window.blocklet?.prefix;
   }
-  const component = (window.blocklet.componentMountPoints || []).find((x: any) => x.did === PAYMENT_KIT_DID);
+  const component = (window.blocklet?.componentMountPoints || []).find((x: any) => x.did === PAYMENT_KIT_DID);
   if (component) {
     return component.mountPoint;
   }
 
-  return window.blocklet.prefix;
+  return window.blocklet?.prefix;
 };
 
 export function formatToDate(date: Date | string | number, locale = 'en') {
@@ -156,7 +156,7 @@ export function getStatementDescriptor(items: any[]) {
     }
   }
 
-  return window.blocklet.appName;
+  return window.blocklet?.appName;
 }
 
 export function formatRecurring(

package/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+
+export default defineConfig({
+    plugins: [ nodePolyfills({ protocolImports: true })]
+});