@blocklet/payment-react 1.13.282 → 1.13.284

package/es/checkout/table.js

@@ -31,10 +31,12 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
   if (data.items.length === 0) {
     return /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("payment.checkout.noPricing") });
   }
-  const handleSelect = (priceId) => {
+  const handleSelect = (priceId, currencyId) => {
     api.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`).then((res) => {
       if (mode === "standalone") {
-        window.location.replace(res.data.url);
+        let { url } = res.data;
+        url = url.indexOf("?") > -1 ? `${url}&currencyId=${currencyId}` : `${url}?currencyId=${currencyId}`;
+        window.location.replace(url);
       } else {
         window.location.hash = res.data.id;
         setSessionId(res.data.id);

package/es/components/pricing-table.d.ts

@@ -2,7 +2,7 @@
 import type { TPricingTableExpanded } from '@blocklet/payment-types';
 type Props = {
     table: TPricingTableExpanded;
-    onSelect: (priceId: string) => void;
+    onSelect: (priceId: string, currencyId: string) => void;
     alignItems?: 'center' | 'left';
     mode?: 'checkout' | 'select';
     interval?: string;

package/es/components/pricing-table.js

@@ -10,6 +10,8 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
+  MenuItem,
+  Select,
   Stack,
   ToggleButton,
   ToggleButtonGroup,
@@ -17,7 +19,8 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { usePaymentContext } from "../contexts/payment.js";
 import { formatError, formatPriceAmount, formatRecurring } from "../libs/util.js";
 import Amount from "../payment/amount.js";
 const groupItemsByRecurring = (items) => {
@@ -40,8 +43,31 @@ PricingTable.defaultProps = {
 };
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
   const { t, locale } = useLocaleContext();
+  const {
+    settings: { paymentMethods = [] }
+  } = usePaymentContext();
+  const [currency, setCurrency] = useState(table.currency);
   const { recurring, grouped } = groupItemsByRecurring(table.items);
   const [state, setState] = useSetState({ interval });
+  const currencyMap = useMemo(() => {
+    const { payment_currencies: paymentCurrencies = [] } = paymentMethods[0];
+    return paymentCurrencies.reduce((acc, x) => {
+      acc[x.id] = x;
+      return acc;
+    }, {});
+  }, [paymentMethods]);
+  const currencyList = useMemo(() => {
+    const visited = {};
+    if (!state.interval) {
+      return [];
+    }
+    grouped[state.interval].forEach((x) => {
+      x.price.currency_options.forEach((c) => {
+        visited[c?.currency_id] = true;
+      });
+    });
+    return Object.keys(visited).map((x) => currencyMap[x]);
+  }, [currencyMap, grouped, state.interval]);
   useEffect(() => {
     if (table) {
       if (!state.interval || !grouped[state.interval]) {
@@ -53,10 +79,21 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
   }, [table]);
   const Root = styled(Box)`
+    .btn-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      gap: 20px;
+    }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
       .price-table-item {
         width: 90% !important;
       }
+      .btn-row {
+        padding: 0 20px;
+      }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
@@ -82,47 +119,59 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         }
       },
       children: [
-        Object.keys(recurring).length > 1 && /* @__PURE__ */ jsx(
-          ToggleButtonGroup,
-          {
-            size: "small",
-            value: state.interval,
-            sx: {
-              padding: "4px",
-              borderRadius: "36px",
-              height: "40px",
-              boxSizing: "border-box",
-              backgroundColor: "#f1f3f5",
-              border: 0
-            },
-            onChange: (_, value) => {
-              if (value !== null) {
-                setState({ interval: value });
-              }
-            },
-            exclusive: true,
-            children: Object.keys(recurring).map((x) => /* @__PURE__ */ jsx(
-              ToggleButton,
-              {
-                size: "small",
-                value: x,
-                sx: {
-                  textTransform: "capitalize",
-                  padding: "5px 12px",
-                  fontSize: "13px",
-                  backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
-                  border: "0px",
-                  "&.Mui-selected": {
-                    borderRadius: "9999px !important",
-                    border: "1px solid #e5e7eb"
-                  }
-                },
-                children: formatRecurring(recurring[x], true, "", locale)
+        /* @__PURE__ */ jsxs("div", { className: "btn-row", children: [
+          Object.keys(recurring).length > 1 && /* @__PURE__ */ jsx(
+            ToggleButtonGroup,
+            {
+              size: "small",
+              value: state.interval,
+              sx: {
+                padding: "4px",
+                borderRadius: "36px",
+                height: "40px",
+                boxSizing: "border-box",
+                backgroundColor: "#f1f3f5",
+                border: 0
               },
-              x
-            ))
-          }
-        ),
+              onChange: (_, value) => {
+                if (value !== null) {
+                  setState({ interval: value });
+                }
+              },
+              exclusive: true,
+              children: Object.keys(recurring).map((x) => /* @__PURE__ */ jsx(
+                ToggleButton,
+                {
+                  size: "small",
+                  value: x,
+                  sx: {
+                    textTransform: "capitalize",
+                    padding: "5px 12px",
+                    fontSize: "13px",
+                    backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
+                    border: "0px",
+                    "&.Mui-selected": {
+                      borderRadius: "9999px !important",
+                      border: "1px solid #e5e7eb"
+                    }
+                  },
+                  children: formatRecurring(recurring[x], true, "", locale)
+                },
+                x
+              ))
+            }
+          ),
+          currencyList.length > 1 && /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: currency.id,
+              onChange: (e) => setCurrency(currencyList.find((v) => v.id === e.target.value)),
+              size: "small",
+              sx: { m: 1, width: 120 },
+              children: currencyList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.id, children: /* @__PURE__ */ jsx(Typography, { color: x.id === currency.id ? "text.primary" : "text.secondary", children: x.symbol }) }, x.id))
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           Stack,
           {
@@ -204,7 +253,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                             /* @__PURE__ */ jsx(
                               Amount,
                               {
-                                amount: formatPriceAmount(x.price, table.currency, x.product.unit_label),
+                                amount: formatPriceAmount(x.price, currency, x.product.unit_label),
                                 sx: { my: 0, marginTop: "0px !important", fontSize: "48px", fontWeight: "bold" }
                               }
                             ),
@@ -265,7 +314,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                           )
                         ] }, f.name))
                       ] }) }),
-                      /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect })
+                      /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect, currencyId: currency.id })
                     ]
                   },
                   x?.price_id
@@ -278,12 +327,12 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
   ) });
 }
-function Subscribe({ x, action, onSelect }) {
+function Subscribe({ x, action, onSelect, currencyId }) {
   const [state, setState] = useState({ loading: "", loaded: false });
   const handleSelect = async (priceId) => {
     try {
       setState({ loading: priceId, loaded: true });
-      await onSelect(priceId);
+      await onSelect(priceId, currencyId);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));

package/es/libs/util.d.ts

@@ -67,3 +67,4 @@ export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails
     text: string;
     gas: any;
 };
+export declare function getQueryParams(url: string): Record<string, string>;

package/es/libs/util.js

@@ -205,11 +205,9 @@ export function formatLineItemPricing(item, currency, trial, locale = "en") {
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
     quantity = "";
   }
-  const total = `${fromUnitToToken(
-    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(item.quantity)),
-    currency.decimal
-  )} ${currency.symbol}`;
-  const unit = `${fromUnitToToken(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+  const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
+  const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
   const appendUnit = (v, alt) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -609,3 +607,11 @@ export const getTxLink = (method, details) => {
   }
   return { text: "N/A", link: "", gas: "" };
 };
+export function getQueryParams(url) {
+  const queryParams = {};
+  const urlObj = new URL(url);
+  urlObj.searchParams.forEach((value, key) => {
+    queryParams[key] = value;
+  });
+  return queryParams;
+}

package/es/payment/form/index.js

@@ -18,7 +18,7 @@ import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
 import api from "../../libs/api.js";
-import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from "../../libs/util.js";
+import { flattenPaymentMethods, formatError, getPrefix, getQueryParams, getStatementDescriptor } from "../../libs/util.js";
 import UserButtons from "./addon.js";
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
@@ -72,7 +72,11 @@ export default function PaymentForm({
     stripePaying: false
   });
   const currencies = flattenPaymentMethods(paymentMethods);
-  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
+  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(() => {
+    const query = getQueryParams(window.location.href);
+    const index = currencies.findIndex((x) => x.id === query.currencyId);
+    return index >= 0 ? index : 0;
+  });
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
     if (response.id === checkoutSession.id && state.paid === false) {
       await handleConnected();

package/lib/checkout/table.js

@@ -60,10 +60,14 @@ function CheckoutTable({
       children: t("payment.checkout.noPricing")
     });
   }
-  const handleSelect = priceId => {
+  const handleSelect = (priceId, currencyId) => {
     _api.default.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${(0, _util.mergeExtraParams)(extraParams)}`).then(res => {
       if (mode === "standalone") {
-        window.location.replace(res.data.url);
+        let {
+          url
+        } = res.data;
+        url = url.indexOf("?") > -1 ? `${url}&currencyId=${currencyId}` : `${url}?currencyId=${currencyId}`;
+        window.location.replace(url);
       } else {
         window.location.hash = res.data.id;
         setSessionId(res.data.id);

package/lib/components/pricing-table.d.ts

@@ -2,7 +2,7 @@
 import type { TPricingTableExpanded } from '@blocklet/payment-types';
 type Props = {
     table: TPricingTableExpanded;
-    onSelect: (priceId: string) => void;
+    onSelect: (priceId: string, currencyId: string) => void;
     alignItems?: 'center' | 'left';
     mode?: 'checkout' | 'select';
     interval?: string;

package/lib/components/pricing-table.js

@@ -13,6 +13,7 @@ var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
+var _payment = require("../contexts/payment");
 var _util = require("../libs/util");
 var _amount = _interopRequireDefault(require("../payment/amount"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -48,6 +49,12 @@ function PricingTable({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    settings: {
+      paymentMethods = []
+    }
+  } = (0, _payment.usePaymentContext)();
+  const [currency, setCurrency] = (0, _react.useState)(table.currency);
   const {
     recurring,
     grouped
@@ -55,6 +62,27 @@ function PricingTable({
   const [state, setState] = (0, _ahooks.useSetState)({
     interval
   });
+  const currencyMap = (0, _react.useMemo)(() => {
+    const {
+      payment_currencies: paymentCurrencies = []
+    } = paymentMethods[0];
+    return paymentCurrencies.reduce((acc, x) => {
+      acc[x.id] = x;
+      return acc;
+    }, {});
+  }, [paymentMethods]);
+  const currencyList = (0, _react.useMemo)(() => {
+    const visited = {};
+    if (!state.interval) {
+      return [];
+    }
+    grouped[state.interval].forEach(x => {
+      x.price.currency_options.forEach(c => {
+        visited[c?.currency_id] = true;
+      });
+    });
+    return Object.keys(visited).map(x => currencyMap[x]);
+  }, [currencyMap, grouped, state.interval]);
   (0, _react.useEffect)(() => {
     if (table) {
       if (!state.interval || !grouped[state.interval]) {
@@ -68,12 +96,23 @@ function PricingTable({
     }
   }, [table]);
   const Root = (0, _system.styled)(_material.Box)`
+    .btn-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      gap: 20px;
+    }
     @media (max-width: ${({
     theme
   }) => theme.breakpoints.values.sm}px) {
       .price-table-item {
         width: 90% !important;
       }
+      .btn-row {
+        padding: 0 20px;
+      }
     }
     @media (min-width: ${({
     theme
@@ -99,41 +138,59 @@ function PricingTable({
           sm: mode === "select" ? 3 : 5
         }
       },
-      children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
-        size: "small",
-        value: state.interval,
-        sx: {
-          padding: "4px",
-          borderRadius: "36px",
-          height: "40px",
-          boxSizing: "border-box",
-          backgroundColor: "#f1f3f5",
-          border: 0
-        },
-        onChange: (_, value) => {
-          if (value !== null) {
-            setState({
-              interval: value
-            });
-          }
-        },
-        exclusive: true,
-        children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+        className: "btn-row",
+        children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
           size: "small",
-          value: x,
+          value: state.interval,
           sx: {
-            textTransform: "capitalize",
-            padding: "5px 12px",
-            fontSize: "13px",
-            backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
-            border: "0px",
-            "&.Mui-selected": {
-              borderRadius: "9999px !important",
-              border: "1px solid #e5e7eb"
+            padding: "4px",
+            borderRadius: "36px",
+            height: "40px",
+            boxSizing: "border-box",
+            backgroundColor: "#f1f3f5",
+            border: 0
+          },
+          onChange: (_, value) => {
+            if (value !== null) {
+              setState({
+                interval: value
+              });
             }
           },
-          children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
-        }, x))
+          exclusive: true,
+          children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+            size: "small",
+            value: x,
+            sx: {
+              textTransform: "capitalize",
+              padding: "5px 12px",
+              fontSize: "13px",
+              backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
+              border: "0px",
+              "&.Mui-selected": {
+                borderRadius: "9999px !important",
+                border: "1px solid #e5e7eb"
+              }
+            },
+            children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
+          }, x))
+        }), currencyList.length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+          value: currency.id,
+          onChange: e => setCurrency(currencyList.find(v => v.id === e.target.value)),
+          size: "small",
+          sx: {
+            m: 1,
+            width: 120
+          },
+          children: currencyList.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
+            value: x.id,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              color: x.id === currency.id ? "text.primary" : "text.secondary",
+              children: x.symbol
+            })
+          }, x.id))
+        })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         flexWrap: "wrap",
         direction: "row",
@@ -205,7 +262,7 @@ function PricingTable({
                     }
                   })]
                 }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-                  amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label),
+                  amount: (0, _util.formatPriceAmount)(x.price, currency, x.product.unit_label),
                   sx: {
                     my: 0,
                     marginTop: "0px !important",
@@ -279,7 +336,8 @@ function PricingTable({
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(Subscribe, {
               x,
               action,
-              onSelect
+              onSelect,
+              currencyId: currency.id
             })]
           }, x?.price_id);
         })
@@ -290,7 +348,8 @@ function PricingTable({
 function Subscribe({
   x,
   action,
-  onSelect
+  onSelect,
+  currencyId
 }) {
   const [state, setState] = (0, _react.useState)({
     loading: "",
@@ -302,7 +361,7 @@ function Subscribe({
         loading: priceId,
         loaded: true
       });
-      await onSelect(priceId);
+      await onSelect(priceId, currencyId);
     } catch (err) {
       console.error(err);
       _Toast.default.error((0, _util.formatError)(err));

package/lib/libs/util.d.ts

@@ -67,3 +67,4 @@ export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails
     text: string;
     gas: any;
 };
+export declare function getQueryParams(url: string): Record<string, string>;

package/lib/libs/util.js

@@ -28,6 +28,7 @@ exports.getPayoutStatusColor = getPayoutStatusColor;
 exports.getPrefix = void 0;
 exports.getPriceCurrencyOptions = getPriceCurrencyOptions;
 exports.getPriceUintAmountByCurrency = getPriceUintAmountByCurrency;
+exports.getQueryParams = getQueryParams;
 exports.getRecurringPeriod = getRecurringPeriod;
 exports.getRefundStatusColor = getRefundStatusColor;
 exports.getStatementDescriptor = getStatementDescriptor;
@@ -263,8 +264,9 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
     quantity = "";
   }
-  const total = `${(0, _util.fromUnitToToken)(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
-  const unit = `${(0, _util.fromUnitToToken)(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+  const unitValue = new _util.BN(getPriceUintAmountByCurrency(price, currency));
+  const total = `${(0, _util.fromUnitToToken)(unitValue.mul(new _util.BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
+  const unit = `${(0, _util.fromUnitToToken)(unitValue, currency.decimal)} ${currency.symbol}`;
   const appendUnit = (v, alt) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -724,4 +726,12 @@ const getTxLink = (method, details) => {
     gas: ""
   };
 };
-exports.getTxLink = getTxLink;
+exports.getTxLink = getTxLink;
+function getQueryParams(url) {
+  const queryParams = {};
+  const urlObj = new URL(url);
+  urlObj.searchParams.forEach((value, key) => {
+    queryParams[key] = value;
+  });
+  return queryParams;
+}

package/lib/payment/form/index.js

@@ -91,7 +91,11 @@ function PaymentForm({
     stripePaying: false
   });
   const currencies = (0, _util.flattenPaymentMethods)(paymentMethods);
-  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = (0, _react.useState)(0);
+  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = (0, _react.useState)(() => {
+    const query = (0, _util.getQueryParams)(window.location.href);
+    const index = currencies.findIndex(x => x.id === query.currencyId);
+    return index >= 0 ? index : 0;
+  });
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
     response
   }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.282",
+  "version": "1.13.284",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.13.282",
+    "@blocklet/payment-types": "1.13.284",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "38f01328afa9704e945163ce3f3006cb4e4d5e54"
+  "gitHead": "c844c5590104d35d4bffedddec6f909684bacc4b"
 }

package/src/checkout/table.tsx

@@ -41,12 +41,14 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
     return <Alert severity="warning">{t('payment.checkout.noPricing')}</Alert>;
   }
 
-  const handleSelect = (priceId: string) => {
+  const handleSelect = (priceId: string, currencyId: string) => {
     api
       .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`)
       .then((res) => {
         if (mode === 'standalone') {
-          window.location.replace(res.data.url);
+          let { url } = res.data;
+          url = url.indexOf('?') > -1 ? `${url}&currencyId=${currencyId}` : `${url}?currencyId=${currencyId}`;
+          window.location.replace(url);
         } else {
           window.location.hash = res.data.id;
           setSessionId(res.data.id);

package/src/components/pricing-table.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@blocklet/payment-types';
+import type { PriceCurrency, PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@blocklet/payment-types';
 import { CheckOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import {
@@ -11,6 +11,8 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
+  MenuItem,
+  Select,
   Stack,
   ToggleButton,
   ToggleButtonGroup,
@@ -18,8 +20,9 @@ import {
 } from '@mui/material';
 import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
+import { usePaymentContext } from '../contexts/payment';
 import { formatError, formatPriceAmount, formatRecurring } from '../libs/util';
 import Amount from '../payment/amount';
 
@@ -44,7 +47,7 @@ const groupItemsByRecurring = (items: TPricingTableItem[]) => {
 
 type Props = {
   table: TPricingTableExpanded;
-  onSelect: (priceId: string) => void;
+  onSelect: (priceId: string, currencyId: string) => void;
   alignItems?: 'center' | 'left';
   mode?: 'checkout' | 'select';
   interval?: string;
@@ -58,8 +61,32 @@ PricingTable.defaultProps = {
 
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
   const { t, locale } = useLocaleContext();
+  const {
+    settings: { paymentMethods = [] },
+  } = usePaymentContext();
+  const [currency, setCurrency] = useState(table.currency);
   const { recurring, grouped } = groupItemsByRecurring(table.items);
   const [state, setState] = useSetState({ interval });
+  const currencyMap = useMemo(() => {
+    const { payment_currencies: paymentCurrencies = [] } = paymentMethods[0];
+    return paymentCurrencies.reduce((acc: any, x: { id: string; symbol: string }) => {
+      acc[x.id] = x;
+      return acc;
+    }, {});
+  }, [paymentMethods]);
+
+  const currencyList = useMemo(() => {
+    const visited: { [key: string]: boolean } = {};
+    if (!state.interval) {
+      return [];
+    }
+    grouped[state.interval].forEach((x: TPricingTableItem) => {
+      x.price.currency_options.forEach((c: PriceCurrency) => {
+        visited[c?.currency_id] = true;
+      });
+    });
+    return Object.keys(visited).map((x) => currencyMap[x]);
+  }, [currencyMap, grouped, state.interval]);
 
   useEffect(() => {
     if (table) {
@@ -74,10 +101,21 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   }, [table]);
 
   const Root = styled(Box)`
+    .btn-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      gap: 20px;
+    }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
       .price-table-item {
         width: 90% !important;
       }
+      .btn-row {
+        padding: 0 20px;
+      }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
@@ -102,45 +140,60 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             sm: mode === 'select' ? 3 : 5,
           },
         }}>
-        {Object.keys(recurring).length > 1 && (
-          <ToggleButtonGroup
-            size="small"
-            value={state.interval}
-            sx={{
-              padding: '4px',
-              borderRadius: '36px',
-              height: '40px',
-              boxSizing: 'border-box',
-              backgroundColor: '#f1f3f5',
-              border: 0,
-            }}
-            onChange={(_, value) => {
-              if (value !== null) {
-                setState({ interval: value });
-              }
-            }}
-            exclusive>
-            {Object.keys(recurring).map((x) => (
-              <ToggleButton
-                size="small"
-                key={x}
-                value={x}
-                sx={{
-                  textTransform: 'capitalize',
-                  padding: '5px 12px',
-                  fontSize: '13px',
-                  backgroundColor: x === state.interval ? '#fff !important' : '#f1f3f5 !important',
-                  border: '0px',
-                  '&.Mui-selected': {
-                    borderRadius: '9999px !important',
-                    border: '1px solid #e5e7eb',
-                  },
-                }}>
-                {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
-              </ToggleButton>
-            ))}
-          </ToggleButtonGroup>
-        )}
+        <div className="btn-row">
+          {Object.keys(recurring).length > 1 && (
+            <ToggleButtonGroup
+              size="small"
+              value={state.interval}
+              sx={{
+                padding: '4px',
+                borderRadius: '36px',
+                height: '40px',
+                boxSizing: 'border-box',
+                backgroundColor: '#f1f3f5',
+                border: 0,
+              }}
+              onChange={(_, value) => {
+                if (value !== null) {
+                  setState({ interval: value });
+                }
+              }}
+              exclusive>
+              {Object.keys(recurring).map((x) => (
+                <ToggleButton
+                  size="small"
+                  key={x}
+                  value={x}
+                  sx={{
+                    textTransform: 'capitalize',
+                    padding: '5px 12px',
+                    fontSize: '13px',
+                    backgroundColor: x === state.interval ? '#fff !important' : '#f1f3f5 !important',
+                    border: '0px',
+                    '&.Mui-selected': {
+                      borderRadius: '9999px !important',
+                      border: '1px solid #e5e7eb',
+                    },
+                  }}>
+                  {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
+          )}
+          {currencyList.length > 1 && (
+            <Select
+              value={currency.id}
+              onChange={(e) => setCurrency(currencyList.find((v) => v.id === e.target.value))}
+              size="small"
+              sx={{ m: 1, width: 120 }}>
+              {currencyList.map((x) => (
+                <MenuItem key={x.id} value={x.id}>
+                  <Typography color={x.id === currency.id ? 'text.primary' : 'text.secondary'}>{x.symbol}</Typography>
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+        </div>
         <Stack
           flexWrap="wrap"
           direction="row"
@@ -216,7 +269,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         )}
                       </Box>
                       <Amount
-                        amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)}
+                        amount={formatPriceAmount(x.price, currency, x.product.unit_label)}
                         sx={{ my: 0, marginTop: '0px !important', fontSize: '48px', fontWeight: 'bold' }}
                       />
                       <Typography
@@ -271,7 +324,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       </List>
                     </Box>
                   )}
-                  <Subscribe x={x} action={action} onSelect={onSelect} />
+                  <Subscribe x={x} action={action} onSelect={onSelect} currencyId={currency.id} />
                 </Stack>
               );
             }
@@ -282,13 +335,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   );
 }
 
-function Subscribe({ x, action, onSelect }: any) {
+function Subscribe({ x, action, onSelect, currencyId }: any) {
   const [state, setState] = useState({ loading: '', loaded: false });
 
   const handleSelect = async (priceId: string) => {
     try {
       setState({ loading: priceId, loaded: true });
-      await onSelect(priceId);
+      await onSelect(priceId, currencyId);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));

package/src/libs/util.ts

@@ -298,11 +298,11 @@ export function formatLineItemPricing(
     quantity = '';
   }
 
-  const total = `${fromUnitToToken(
-    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(item.quantity)),
-    currency.decimal
-  )} ${currency.symbol}`;
-  const unit = `${fromUnitToToken(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+  const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
+
+  const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
+
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
 
   const appendUnit = (v: string, alt: string) => {
     if (price.product.unit_label) {
@@ -793,3 +793,12 @@ export const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
 
   return { text: 'N/A', link: '', gas: '' };
 };
+
+export function getQueryParams(url: string): Record<string, string> {
+  const queryParams: Record<string, string> = {};
+  const urlObj = new URL(url);
+  urlObj.searchParams.forEach((value, key) => {
+    queryParams[key] = value;
+  });
+  return queryParams;
+}

package/src/payment/form/index.tsx

@@ -26,7 +26,7 @@ import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
 import api from '../../libs/api';
-import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from '../../libs/util';
+import { flattenPaymentMethods, formatError, getPrefix, getQueryParams, getStatementDescriptor } from '../../libs/util';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 import UserButtons from './addon';
 import AddressForm from './address';
@@ -119,7 +119,12 @@ export default function PaymentForm({
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
-  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
+
+  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(() => {
+    const query = getQueryParams(window.location.href);
+    const index = currencies.findIndex((x) => x.id === query.currencyId);
+    return index >= 0 ? index : 0;
+  });
 
   const onCheckoutComplete = useMemoizedFn(async ({ response }: { response: TCheckoutSession }) => {
     if (response.id === checkoutSession.id && state.paid === false) {