@blocklet/payment-react 1.13.113 → 1.13.115

package/README.md

@@ -1,18 +1,59 @@
 # Payment Kit Components
 
 ```tsx
-import { PaymentProvider, Checkout, PricingTable } from '@blocklet/payment-react';
+import { CheckoutForm, CheckoutTable, PaymentProvider } from '@blocklet/payment-react';
+import { Paper, Typography } from '@mui/material';
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
 
-export default function Payment() {
+import { useSessionContext } from '../contexts/session';
+
+export default function CheckoutPage() {
+  const [params] = useSearchParams();
   const { session, connectApi } = useSessionContext();
-  const { locale } = useLocaleContext();
 
-  return (<PaymentProvider session={session} connect={connectApi} locale={locale}>
-    <Checkout checkoutSessionId="" onComplete={noop} onError={noop} params={{}} />
-    <Checkout paymentLinkId="" onComplete={noop} onError={noop} params={{}} />
-    <Checkout pricingTableId="" onSelect={noop} onComplete={noop} onError={noop} params={{}} />
-  </PaymentProvider>);
+  if (params.get('type') === 'session') {
+    return (
+      <PaymentProvider session={session} connect={connectApi}>
+        <Typography variant="h4" gutterBottom>
+          Checkout with session
+        </Typography>
+        <Paper sx={{ p: 3, display: 'inline-block' }} elevation={3}>
+          <CheckoutForm id="cs_9zeD2yCgPXT9Vit9bab2vVC3V7DFjHiKvyoLzVTVzAf4XSU2oLWY67vKy7" mode="inline" />
+        </Paper>
+      </PaymentProvider>
+    );
+  }
+
+  if (params.get('type') === 'link') {
+    return (
+      <PaymentProvider session={session} connect={connectApi}>
+        <Typography variant="h4" gutterBottom>
+          Checkout with payment link
+        </Typography>
+        <Paper sx={{ p: 3, display: 'inline-block' }} elevation={3}>
+          <CheckoutForm id="plink_oB1I6FNeHKSkuq81fhJy0vIZ" mode="inline" />
+        </Paper>
+      </PaymentProvider>
+    );
+  }
+
+  if (params.get('type') === 'table') {
+    return (
+      <PaymentProvider session={session} connect={connectApi}>
+        <Typography variant="h4" gutterBottom>
+          Checkout with pricing table
+        </Typography>
+        <Paper sx={{ p: 3, display: 'inline-block' }} elevation={3}>
+          <CheckoutTable id="prctbl_kOsaIiPrsHAwwALaKgy17mIl" mode="inline" />
+        </Paper>
+      </PaymentProvider>
+    );
+  }
+
+  return null;
 }
+
 ```
 
 ## I18n

package/es/checkout/{index.d.ts → form.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function Checkout({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
-declare namespace Checkout {
+declare function CheckoutForm({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;
         onError: {
@@ -12,4 +12,4 @@ declare namespace Checkout {
         extraParams: {};
     };
 }
-export default Checkout;
+export default CheckoutForm;

package/es/checkout/{index.js → form.js}

@@ -14,9 +14,9 @@ const fetchCheckoutSession = async (id) => {
   const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
   return data;
 };
-export default function Checkout({ id, onPaid, onError, mode, extraParams }) {
+export default function CheckoutForm({ id, onPaid, onError, mode, extraParams }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
-    throw new Error("Either a checkout session or a payment link id is required.");
+    throw new Error("Either a checkoutSession or a paymentLink id is required.");
   }
   const type = id.startsWith("plink_") ? "paymentLink" : "checkoutSession";
   const [state, setState] = useSetState({ completed: false, appError: null });
@@ -53,7 +53,7 @@ export default function Checkout({ id, onPaid, onError, mode, extraParams }) {
     }
   );
 }
-Checkout.defaultProps = {
+CheckoutForm.defaultProps = {
   onPaid: noop,
   onError: console.error,
   mode: "inline",

package/es/checkout/table.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckoutProps } from '../types';
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;

package/es/checkout/table.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { Alert, Stack, Typography } from "@mui/material";
+import { useRequest } from "ahooks";
+import { useState } from "react";
+import api from "../api.js";
+import Livemode from "../components/livemode.js";
+import PricingTable from "../components/pricing-table.js";
+import ProductSkeleton from "../payment/product-skeleton.js";
+import { mergeExtraParams } from "../util.js";
+import CheckoutForm from "./form.js";
+const fetchData = async (id) => {
+  const { data } = await api.get(`/api/pricing-tables/${id}`);
+  return data;
+};
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }) {
+  if (!id.startsWith("prctbl_")) {
+    throw new Error("A valid pricing table id is required.");
+  }
+  const { t } = useLocaleContext();
+  const [sessionId, setSessionId] = useState("");
+  const { error, loading, data } = useRequest(() => fetchData(id));
+  if (error) {
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
+  }
+  if (loading || !data) {
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        flexWrap: "wrap",
+        direction: "row",
+        gap: { xs: 3, sm: 5, md: mode === "checkout" ? 10 : 5 },
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ jsx(ProductSkeleton, { count: 2 }, 1),
+          /* @__PURE__ */ jsx(ProductSkeleton, { count: 3 }, 2),
+          /* @__PURE__ */ jsx(ProductSkeleton, { count: 4 }, 3)
+        ]
+      }
+    );
+  }
+  if (data.items.length === 0) {
+    return /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("payment.checkout.noPricing") });
+  }
+  const handleSelect = (priceId) => {
+    api.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`).then((res) => {
+      if (mode === "standalone") {
+        window.location.replace(res.data.url);
+      } else {
+        setSessionId(res.data.id);
+      }
+    }).catch((err) => {
+      console.error(err);
+      Toast.error(err.message);
+    });
+  };
+  if (!sessionId) {
+    if (mode === "standalone") {
+      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", spacing: 4, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "h4", color: "text.primary", fontWeight: 600, children: [
+          data.name,
+          !data.livemode && /* @__PURE__ */ jsx(Livemode, {})
+        ] }),
+        /* @__PURE__ */ jsx(PricingTable, { table: data, onSelect: handleSelect })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(PricingTable, { mode: "select", table: data, onSelect: handleSelect });
+  }
+  return /* @__PURE__ */ jsx(CheckoutForm, { id: sessionId, onPaid, onError, mode });
+}

package/es/components/pricing-table.js

@@ -59,8 +59,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
-    } finally {
-      setState({ loading: "" });
     }
   };
   return /* @__PURE__ */ jsxs(

package/es/index.d.ts

@@ -1,5 +1,6 @@
 import api from './api';
-import Checkout from './checkout';
+import CheckoutForm from './checkout/form';
+import CheckoutTable from './checkout/table';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
@@ -13,4 +14,4 @@ import ProductSkeleton from './payment/product-skeleton';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, Checkout, Payment, PricingTable, ProductSkeleton, Amount, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, };

package/es/index.js

@@ -1,5 +1,6 @@
 import api from "./api.js";
-import Checkout from "./checkout/index.js";
+import CheckoutForm from "./checkout/form.js";
+import CheckoutTable from "./checkout/table.js";
 import FormInput from "./components/input.js";
 import Livemode from "./components/livemode.js";
 import PricingTable from "./components/pricing-table.js";
@@ -21,7 +22,8 @@ export {
   Status,
   Livemode,
   Switch,
-  Checkout,
+  CheckoutForm,
+  CheckoutTable,
   Payment,
   PricingTable,
   ProductSkeleton,

package/es/payment/form/addon.js

@@ -9,6 +9,6 @@ export default function UserButtons() {
   const { session } = usePaymentContext();
   return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
     /* @__PURE__ */ jsx(LocaleSelector, { showText: false }),
-    session.user ? /* @__PURE__ */ jsx(SessionManager, { session }) : /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.login"), arrow: true, children: /* @__PURE__ */ jsx(SessionManager, { session }) })
+    session?.user ? /* @__PURE__ */ jsx(SessionManager, { session }) : /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.login"), arrow: true, children: /* @__PURE__ */ jsx(SessionManager, { session }) })
   ] });
 }

package/es/payment/form/index.js

@@ -60,7 +60,7 @@ export default function PaymentForm({
     stripePaying: false
   });
   useEffect(() => {
-    if (session.user) {
+    if (session?.user) {
       const values = getValues();
       if (!values.customer_name) {
         setValue("customer_name", session.user.fullName);
@@ -72,7 +72,7 @@ export default function PaymentForm({
         setValue("customer_phone", session.user.phone);
       }
     }
-  }, [session.user, getValues, setValue]);
+  }, [session?.user, getValues, setValue]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
   const paymentCurrency = useWatch({ control, name: "payment_currency" });
   const paymentCurrencies = paymentMethods.find((x) => x.id === paymentMethod)?.payment_currencies || [];
@@ -86,7 +86,7 @@ export default function PaymentForm({
     return false;
   }, [domSize, theme]);
   const payee = getStatementDescriptor(checkoutSession.line_items);
-  const buttonText = session.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", { action: t(`payment.checkout.${checkoutSession.mode}`) });
+  const buttonText = session?.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", { action: t(`payment.checkout.${checkoutSession.mode}`) });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
   const handleMethodChange = (e) => {
     setValue("payment_method", e.target.value);
@@ -190,10 +190,10 @@ export default function PaymentForm({
     }
   };
   const onAction = () => {
-    if (session.user) {
+    if (session?.user) {
       handleSubmit(onSubmit)();
     } else {
-      session.login({
+      session?.login({
         onSuccess: onUserLoggedIn,
         extraParams: {}
       });

package/es/payment/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { LiteralUnion } from 'type-fest';
 import { CheckoutCallbacks, CheckoutContext } from '../types';
 type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
@@ -24,5 +25,5 @@ export declare namespace PaymentInner {
 export declare const Root: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
-    mode: string;
+    mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 }, {}, {}>;

package/es/payment/index.js

@@ -109,9 +109,9 @@ export function PaymentInner({
   const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
   const methods = useForm({
     defaultValues: {
-      customer_name: customer?.name || session.user?.fullName || "",
-      customer_email: customer?.email || session.user?.email || "",
-      customer_phone: customer?.phone || session.user?.phone || "",
+      customer_name: customer?.name || session?.user?.fullName || "",
+      customer_email: customer?.email || session?.user?.email || "",
+      customer_phone: customer?.phone || session?.user?.phone || "",
       payment_method: defaultMethodId,
       payment_currency: defaultCurrencyId,
       billing_address: Object.assign(
@@ -166,9 +166,9 @@ export function PaymentInner({
       Toast.error(formatError(err));
     }
   };
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", children: [
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview", direction: "column", children: [
-      /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }),
+      mode === "standalone" ? /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }) : null,
       /* @__PURE__ */ jsx(
         PaymentSummary,
         {
@@ -203,7 +203,7 @@ export function PaymentInner({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
+    mode === "standalone" && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
   ] }) }) });
 }
 export const Root = styled(Box)`
@@ -212,10 +212,10 @@ export const Root = styled(Box)`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  min-height: ${(props) => props.mode === "standalone" ? "100vh" : "auto"};
   position: relative;
 
-  &:before {
+  ${(props) => props.mode === "standalone" ? `&:before {
     animation-fill-mode: both;
     background: #ffffff;
     content: '';
@@ -226,7 +226,7 @@ export const Root = styled(Box)`
     transform-origin: right;
     width: 50%;
     box-shadow: 15px 0 30px 0 rgba(0, 0, 0, 0.18);
-  }
+  }` : ""}
 
   .cko-container {
     width: 100%;
@@ -235,12 +235,12 @@ export const Root = styled(Box)`
     flex-direction: row;
     justify-content: space-between;
     position: relative;
-    padding: 0 16px;
+    padding: ${(props) => props.mode === "standalone" ? "0 16px" : "0"};
   }
 
   .cko-overview {
     width: 400px;
-    min-height: 540px;
+    min-height: ${(props) => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
   }
   .cko-header {
@@ -251,6 +251,9 @@ export const Root = styled(Box)`
     top: 0;
     transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
   }
+  .cko-product {
+    margin-top: ${(props) => props.mode === "standalone" ? "64px" : "0"};
+  }
   .cko-product-summary {
   }
 

package/es/payment/summary.js

@@ -90,89 +90,79 @@ export default function PaymentSummary({
       setState({ loading: false });
     }
   };
-  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      className: "cko-product",
-      direction: "column",
-      sx: {
-        mt: 8
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: 4 }, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: headlines.action }),
-          /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
-          headlines.then && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
-        ] }),
-        /* @__PURE__ */ jsx(Stack, { spacing: 2, children: checkoutSession.line_items.map((x) => /* @__PURE__ */ jsx(
-          ProductItem,
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", children: [
+    /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: 4 }, children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: headlines.action }),
+      /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
+      headlines.then && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { spacing: 2, children: checkoutSession.line_items.map((x) => /* @__PURE__ */ jsx(
+      ProductItem,
+      {
+        item: x,
+        session: checkoutSession,
+        currency,
+        onUpsell: handleUpsell,
+        onDownsell: handleDownsell,
+        children: x.cross_sell && /* @__PURE__ */ jsx(
+          LoadingButton,
           {
-            item: x,
-            session: checkoutSession,
-            currency,
-            onUpsell: handleUpsell,
-            onDownsell: handleDownsell,
-            children: x.cross_sell && /* @__PURE__ */ jsx(
+            size: "small",
+            loadingPosition: "end",
+            color: "error",
+            variant: "text",
+            loading: state.loading,
+            onClick: handleCancelCrossSell,
+            children: t("payment.checkout.cross_sell.remove")
+          }
+        )
+      },
+      x.price_id
+    )) }),
+    data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "column",
+        alignItems: "flex-end",
+        spacing: 0.5,
+        sx: {
+          border: "1px solid #eee",
+          borderRadius: 1,
+          padding: 1,
+          animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
+          mt: {
+            xs: 4,
+            md: 8
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            ProductItem,
+            {
+              item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
+              session: checkoutSession,
+              currency,
+              onUpsell: noop,
+              onDownsell: noop
+            }
+          ),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
+            /* @__PURE__ */ jsx(Typography, { children: checkoutSession.cross_sell_behavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
+            /* @__PURE__ */ jsx(
               LoadingButton,
               {
                 size: "small",
                 loadingPosition: "end",
-                color: "error",
-                variant: "text",
+                color: checkoutSession.cross_sell_behavior === "required" ? "info" : "info",
+                variant: checkoutSession.cross_sell_behavior === "required" ? "text" : "text",
                 loading: state.loading,
-                onClick: handleCancelCrossSell,
-                children: t("payment.checkout.cross_sell.remove")
+                onClick: handleApplyCrossSell,
+                children: t("payment.checkout.cross_sell.add")
               }
             )
-          },
-          x.price_id
-        )) }),
-        data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            direction: "column",
-            alignItems: "flex-end",
-            spacing: 0.5,
-            sx: {
-              border: "1px solid #eee",
-              borderRadius: 1,
-              padding: 1,
-              animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
-              mt: {
-                xs: 4,
-                md: 8
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                ProductItem,
-                {
-                  item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
-                  session: checkoutSession,
-                  currency,
-                  onUpsell: noop,
-                  onDownsell: noop
-                }
-              ),
-              /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
-                /* @__PURE__ */ jsx(Typography, { children: checkoutSession.cross_sell_behavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
-                /* @__PURE__ */ jsx(
-                  LoadingButton,
-                  {
-                    size: "small",
-                    loadingPosition: "end",
-                    color: checkoutSession.cross_sell_behavior === "required" ? "info" : "info",
-                    variant: checkoutSession.cross_sell_behavior === "required" ? "text" : "text",
-                    loading: state.loading,
-                    onClick: handleApplyCrossSell,
-                    children: t("payment.checkout.cross_sell.add")
-                  }
-                )
-              ] })
-            ]
-          }
-        ) })
-      ]
-    }
-  ) });
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
 }

package/lib/checkout/{index.d.ts → form.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function Checkout({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
-declare namespace Checkout {
+declare function CheckoutForm({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;
         onError: {
@@ -12,4 +12,4 @@ declare namespace Checkout {
         extraParams: {};
     };
 }
-export default Checkout;
+export default CheckoutForm;

package/lib/checkout/{index.js → form.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = Checkout;
+module.exports = CheckoutForm;
 var _jsxRuntime = require("react/jsx-runtime");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
@@ -25,7 +25,7 @@ const fetchCheckoutSession = async id => {
   } = await _api.default.get(`/api/checkout-sessions/retrieve/${id}`);
   return data;
 };
-function Checkout({
+function CheckoutForm({
   id,
   onPaid,
   onError,
@@ -33,7 +33,7 @@ function Checkout({
   extraParams
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
-    throw new Error("Either a checkout session or a payment link id is required.");
+    throw new Error("Either a checkoutSession or a paymentLink id is required.");
   }
   const type = id.startsWith("plink_") ? "paymentLink" : "checkoutSession";
   const [state, setState] = (0, _ahooks.useSetState)({
@@ -75,7 +75,7 @@ function Checkout({
     mode
   });
 }
-Checkout.defaultProps = {
+CheckoutForm.defaultProps = {
   onPaid: _noop.default,
   onError: console.error,
   mode: "inline",

package/lib/checkout/table.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckoutProps } from '../types';
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;

package/lib/checkout/table.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CheckoutTable;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _api = _interopRequireDefault(require("../api"));
+var _livemode = _interopRequireDefault(require("../components/livemode"));
+var _pricingTable = _interopRequireDefault(require("../components/pricing-table"));
+var _productSkeleton = _interopRequireDefault(require("../payment/product-skeleton"));
+var _util = require("../util");
+var _form = _interopRequireDefault(require("./form"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const fetchData = async id => {
+  const {
+    data
+  } = await _api.default.get(`/api/pricing-tables/${id}`);
+  return data;
+};
+function CheckoutTable({
+  id,
+  onPaid,
+  onError,
+  mode,
+  extraParams
+}) {
+  if (!id.startsWith("prctbl_")) {
+    throw new Error("A valid pricing table id is required.");
+  }
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [sessionId, setSessionId] = (0, _react.useState)("");
+  const {
+    error,
+    loading,
+    data
+  } = (0, _ahooks.useRequest)(() => fetchData(id));
+  if (error) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "error",
+      children: error.message
+    });
+  }
+  if (loading || !data) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      flexWrap: "wrap",
+      direction: "row",
+      gap: {
+        xs: 3,
+        sm: 5,
+        md: mode === "checkout" ? 10 : 5
+      },
+      justifyContent: "center",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productSkeleton.default, {
+        count: 2
+      }, 1), /* @__PURE__ */(0, _jsxRuntime.jsx)(_productSkeleton.default, {
+        count: 3
+      }, 2), /* @__PURE__ */(0, _jsxRuntime.jsx)(_productSkeleton.default, {
+        count: 4
+      }, 3)]
+    });
+  }
+  if (data.items.length === 0) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "warning",
+      children: t("payment.checkout.noPricing")
+    });
+  }
+  const handleSelect = priceId => {
+    _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);
+      } else {
+        setSessionId(res.data.id);
+      }
+    }).catch(err => {
+      console.error(err);
+      _Toast.default.error(err.message);
+    });
+  };
+  if (!sessionId) {
+    if (mode === "standalone") {
+      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "column",
+        alignItems: "center",
+        spacing: 4,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          variant: "h4",
+          color: "text.primary",
+          fontWeight: 600,
+          children: [data.name, !data.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_pricingTable.default, {
+          table: data,
+          onSelect: handleSelect
+        })]
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_pricingTable.default, {
+      mode: "select",
+      table: data,
+      onSelect: handleSelect
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
+    id: sessionId,
+    onPaid,
+    onError,
+    mode
+  });
+}

package/lib/components/pricing-table.js

@@ -76,10 +76,6 @@ function PricingTable({
     } catch (err) {
       console.error(err);
       _Toast.default.error((0, _util.formatError)(err));
-    } finally {
-      setState({
-        loading: ""
-      });
     }
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 import api from './api';
-import Checkout from './checkout';
+import CheckoutForm from './checkout/form';
+import CheckoutTable from './checkout/table';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
@@ -13,4 +14,4 @@ import ProductSkeleton from './payment/product-skeleton';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, Checkout, Payment, PricingTable, ProductSkeleton, Amount, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, };

package/lib/index.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   api: true,
-  Checkout: true,
+  CheckoutForm: true,
+  CheckoutTable: true,
   FormInput: true,
   Livemode: true,
   PricingTable: true,
@@ -25,10 +26,16 @@ Object.defineProperty(exports, "Amount", {
     return _amount.default;
   }
 });
-Object.defineProperty(exports, "Checkout", {
+Object.defineProperty(exports, "CheckoutForm", {
   enumerable: true,
   get: function () {
-    return _checkout.default;
+    return _form.default;
+  }
+});
+Object.defineProperty(exports, "CheckoutTable", {
+  enumerable: true,
+  get: function () {
+    return _table.default;
   }
 });
 Object.defineProperty(exports, "FormInput", {
@@ -104,7 +111,8 @@ Object.defineProperty(exports, "translations", {
   }
 });
 var _api = _interopRequireDefault(require("./api"));
-var _checkout = _interopRequireDefault(require("./checkout"));
+var _form = _interopRequireDefault(require("./checkout/form"));
+var _table = _interopRequireDefault(require("./checkout/table"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
 var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));

package/lib/payment/form/addon.js

@@ -24,7 +24,7 @@ function UserButtons() {
     justifyContent: "space-between",
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_selector.default, {
       showText: false
-    }), session.user ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionManager.default, {
+    }), session?.user ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionManager.default, {
       session
     }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
       title: t("payment.checkout.login"),

package/lib/payment/form/index.js

@@ -79,7 +79,7 @@ function PaymentForm({
     stripePaying: false
   });
   (0, _react.useEffect)(() => {
-    if (session.user) {
+    if (session?.user) {
       const values = getValues();
       if (!values.customer_name) {
         setValue("customer_name", session.user.fullName);
@@ -91,7 +91,7 @@ function PaymentForm({
         setValue("customer_phone", session.user.phone);
       }
     }
-  }, [session.user, getValues, setValue]);
+  }, [session?.user, getValues, setValue]);
   const paymentMethod = (0, _reactHookForm.useWatch)({
     control,
     name: "payment_method"
@@ -111,7 +111,7 @@ function PaymentForm({
     return false;
   }, [domSize, theme]);
   const payee = (0, _util.getStatementDescriptor)(checkoutSession.line_items);
-  const buttonText = session.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", {
+  const buttonText = session?.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", {
     action: t(`payment.checkout.${checkoutSession.mode}`)
   });
   const method = paymentMethods.find(x => x.id === paymentMethod);
@@ -242,10 +242,10 @@ function PaymentForm({
     }
   };
   const onAction = () => {
-    if (session.user) {
+    if (session?.user) {
       handleSubmit(onSubmit)();
     } else {
-      session.login({
+      session?.login({
         onSuccess: onUserLoggedIn,
         extraParams: {}
       });

package/lib/payment/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { LiteralUnion } from 'type-fest';
 import { CheckoutCallbacks, CheckoutContext } from '../types';
 type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
@@ -24,5 +25,5 @@ export declare namespace PaymentInner {
 export declare const Root: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
-    mode: string;
+    mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 }, {}, {}>;

package/lib/payment/index.js

@@ -135,9 +135,9 @@ function PaymentInner({
   const defaultMethodId = paymentMethods.find(m => m.payment_currencies.some(c => c.id === defaultCurrencyId))?.id;
   const methods = (0, _reactHookForm.useForm)({
     defaultValues: {
-      customer_name: customer?.name || session.user?.fullName || "",
-      customer_email: customer?.email || session.user?.email || "",
-      customer_phone: customer?.phone || session.user?.phone || "",
+      customer_name: customer?.name || session?.user?.fullName || "",
+      customer_email: customer?.email || session?.user?.email || "",
+      customer_phone: customer?.phone || session?.user?.phone || "",
       payment_method: defaultMethodId,
       payment_currency: defaultCurrencyId,
       billing_address: Object.assign({
@@ -219,14 +219,19 @@ function PaymentInner({
       mode,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-container",
+        sx: {
+          gap: {
+            sm: mode === "standalone" ? 0 : 8
+          }
+        },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
           in: true,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             className: "cko-overview",
             direction: "column",
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_header.default, {
+            children: [mode === "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_header.default, {
               checkoutSession: state.checkoutSession
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
+            }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
               checkoutSession: state.checkoutSession,
               currency,
               onUpsell,
@@ -252,7 +257,7 @@ function PaymentInner({
             onError,
             mode
           })]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
+        }), mode === "standalone" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
           className: "cko-footer"
         })]
       })
@@ -265,10 +270,10 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  min-height: ${props => props.mode === "standalone" ? "100vh" : "auto"};
   position: relative;
 
-  &:before {
+  ${props => props.mode === "standalone" ? `&:before {
     animation-fill-mode: both;
     background: #ffffff;
     content: '';
@@ -279,7 +284,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     transform-origin: right;
     width: 50%;
     box-shadow: 15px 0 30px 0 rgba(0, 0, 0, 0.18);
-  }
+  }` : ""}
 
   .cko-container {
     width: 100%;
@@ -288,12 +293,12 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     flex-direction: row;
     justify-content: space-between;
     position: relative;
-    padding: 0 16px;
+    padding: ${props => props.mode === "standalone" ? "0 16px" : "0"};
   }
 
   .cko-overview {
     width: 400px;
-    min-height: 540px;
+    min-height: ${props => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
   }
   .cko-header {
@@ -304,6 +309,9 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     top: 0;
     transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
   }
+  .cko-product {
+    margin-top: ${props => props.mode === "standalone" ? "64px" : "0"};
+  }
   .cko-product-summary {
   }
 

package/lib/payment/summary.js

@@ -121,9 +121,6 @@ function PaymentSummary({
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       className: "cko-product",
       direction: "column",
-      sx: {
-        mt: 8
-      },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-product-summary",
         direction: "column",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.113",
+  "version": "1.13.115",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -86,7 +86,7 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "@blocklet/payment-types": "1.13.113",
+    "@blocklet/payment-types": "1.13.115",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "eslint": "^8.56.0",
@@ -100,5 +100,5 @@
     "typescript": "^4.9.5",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "d1a99d9bbdb06d4e7742d7741ec511fa0fee4663"
+  "gitHead": "60a62f67098162dcba38edb26b6efbacdb98dd00"
 }

package/src/checkout/{index.tsx → form.tsx}

@@ -20,9 +20,10 @@ const fetchCheckoutSession = async (id: string): Promise<CheckoutContext> => {
   return data;
 };
 
-export default function Checkout({ id, onPaid, onError, mode, extraParams }: CheckoutProps) {
+// FIXME: @wangshijun support popup
+export default function CheckoutForm({ id, onPaid, onError, mode, extraParams }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
-    throw new Error('Either a checkout session or a payment link id is required.');
+    throw new Error('Either a checkoutSession or a paymentLink id is required.');
   }
 
   const type = id.startsWith('plink_') ? 'paymentLink' : 'checkoutSession';
@@ -66,7 +67,7 @@ export default function Checkout({ id, onPaid, onError, mode, extraParams }: Che
   );
 }
 
-Checkout.defaultProps = {
+CheckoutForm.defaultProps = {
   onPaid: noop,
   onError: console.error,
   mode: 'inline',

package/src/checkout/table.tsx

@@ -0,0 +1,85 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPricingTableExpanded } from '@blocklet/payment-types';
+import { Alert, Stack, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useState } from 'react';
+
+import api from '../api';
+import Livemode from '../components/livemode';
+import PricingTable from '../components/pricing-table';
+import ProductSkeleton from '../payment/product-skeleton';
+import { CheckoutProps } from '../types';
+import { mergeExtraParams } from '../util';
+import CheckoutForm from './form';
+
+const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
+  const { data } = await api.get(`/api/pricing-tables/${id}`);
+  return data;
+};
+
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }: CheckoutProps) {
+  if (!id.startsWith('prctbl_')) {
+    throw new Error('A valid pricing table id is required.');
+  }
+
+  const { t } = useLocaleContext();
+  const [sessionId, setSessionId] = useState('');
+  const { error, loading, data } = useRequest(() => fetchData(id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return (
+      <Stack
+        flexWrap="wrap"
+        direction="row"
+        gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
+        justifyContent="center">
+        <ProductSkeleton key={1} count={2} />
+        <ProductSkeleton key={2} count={3} />
+        <ProductSkeleton key={3} count={4} />
+      </Stack>
+    );
+  }
+
+  if (data.items.length === 0) {
+    return <Alert severity="warning">{t('payment.checkout.noPricing')}</Alert>;
+  }
+
+  const handleSelect = (priceId: string) => {
+    api
+      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`)
+      .then((res) => {
+        if (mode === 'standalone') {
+          window.location.replace(res.data.url);
+        } else {
+          setSessionId(res.data.id);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        Toast.error(err.message);
+      });
+  };
+
+  if (!sessionId) {
+    if (mode === 'standalone') {
+      return (
+        <Stack direction="column" alignItems="center" spacing={4}>
+          <Typography variant="h4" color="text.primary" fontWeight={600}>
+            {data.name}
+            {!data.livemode && <Livemode />}
+          </Typography>
+          <PricingTable table={data} onSelect={handleSelect} />
+        </Stack>
+      );
+    }
+
+    return <PricingTable mode="select" table={data} onSelect={handleSelect} />;
+  }
+
+  return <CheckoutForm id={sessionId} onPaid={onPaid} onError={onError} mode={mode} />;
+}

package/src/components/pricing-table.tsx

@@ -80,8 +80,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
-    } finally {
-      setState({ loading: '' });
     }
   };
 

package/src/index.ts

@@ -1,5 +1,6 @@
 import api from './api';
-import Checkout from './checkout';
+import CheckoutForm from './checkout/form';
+import CheckoutTable from './checkout/table';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
@@ -24,7 +25,8 @@ export {
   Status,
   Livemode,
   Switch,
-  Checkout,
+  CheckoutForm,
+  CheckoutTable,
   Payment,
   PricingTable,
   ProductSkeleton,

package/src/payment/form/addon.tsx

@@ -12,7 +12,7 @@ export default function UserButtons() {
   return (
     <Stack direction="row" alignItems="center" justifyContent="space-between">
       <LocaleSelector showText={false} />
-      {session.user ? (
+      {session?.user ? (
         <SessionManager session={session} />
       ) : (
         <Tooltip title={t('payment.checkout.login')} arrow>

package/src/payment/form/index.tsx

@@ -99,7 +99,7 @@ export default function PaymentForm({
   });
 
   useEffect(() => {
-    if (session.user) {
+    if (session?.user) {
       const values = getValues();
       if (!values.customer_name) {
         setValue('customer_name', session.user.fullName);
@@ -111,7 +111,7 @@ export default function PaymentForm({
         setValue('customer_phone', session.user.phone);
       }
     }
-  }, [session.user, getValues, setValue]);
+  }, [session?.user, getValues, setValue]);
 
   const paymentMethod = useWatch({ control, name: 'payment_method' });
   const paymentCurrency = useWatch({ control, name: 'payment_currency' });
@@ -129,7 +129,7 @@ export default function PaymentForm({
   }, [domSize, theme]);
 
   const payee = getStatementDescriptor(checkoutSession.line_items);
-  const buttonText = session.user
+  const buttonText = session?.user
     ? t(`payment.checkout.${checkoutSession.mode}`)
     : t('payment.checkout.connect', { action: t(`payment.checkout.${checkoutSession.mode}`) });
 
@@ -243,10 +243,10 @@ export default function PaymentForm({
   };
 
   const onAction = () => {
-    if (session.user) {
+    if (session?.user) {
       handleSubmit(onSubmit)();
     } else {
-      session.login({
+      session?.login({
         onSuccess: onUserLoggedIn,
         extraParams: {},
       });

package/src/payment/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCustomer, TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
@@ -6,6 +7,7 @@ import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { LiteralUnion } from 'type-fest';
 
 import api from '../api';
 import { usePaymentContext } from '../contexts/payment';
@@ -134,9 +136,9 @@ export function PaymentInner({
 
   const methods = useForm({
     defaultValues: {
-      customer_name: customer?.name || session.user?.fullName || '',
-      customer_email: customer?.email || session.user?.email || '',
-      customer_phone: customer?.phone || session.user?.phone || '',
+      customer_name: customer?.name || session?.user?.fullName || '',
+      customer_email: customer?.email || session?.user?.email || '',
+      customer_phone: customer?.phone || session?.user?.phone || '',
       payment_method: defaultMethodId,
       payment_currency: defaultCurrencyId,
       billing_address: Object.assign(
@@ -202,10 +204,10 @@ export function PaymentInner({
   return (
     <FormProvider {...methods}>
       <Root mode={mode}>
-        <Stack className="cko-container">
+        <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : 8 } }}>
           <Fade in>
             <Stack className="cko-overview" direction="column">
-              <PaymentHeader checkoutSession={state.checkoutSession} />
+              {mode === 'standalone' ? <PaymentHeader checkoutSession={state.checkoutSession} /> : null}
               <PaymentSummary
                 checkoutSession={state.checkoutSession}
                 currency={currency}
@@ -239,23 +241,25 @@ export function PaymentInner({
               />
             )}
           </Stack>
-          <CheckoutFooter className="cko-footer" />
+          {mode === 'standalone' && <CheckoutFooter className="cko-footer" />}
         </Stack>
       </Root>
     </FormProvider>
   );
 }
 
-export const Root = styled(Box)<{ mode: string }>`
+export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | 'popup', string> }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  min-height: ${(props) => (props.mode === 'standalone' ? '100vh' : 'auto')};
   position: relative;
 
-  &:before {
+  ${(props) =>
+    props.mode === 'standalone'
+      ? `&:before {
     animation-fill-mode: both;
     background: #ffffff;
     content: '';
@@ -266,7 +270,8 @@ export const Root = styled(Box)<{ mode: string }>`
     transform-origin: right;
     width: 50%;
     box-shadow: 15px 0 30px 0 rgba(0, 0, 0, 0.18);
-  }
+  }`
+      : ''}
 
   .cko-container {
     width: 100%;
@@ -275,12 +280,12 @@ export const Root = styled(Box)<{ mode: string }>`
     flex-direction: row;
     justify-content: space-between;
     position: relative;
-    padding: 0 16px;
+    padding: ${(props) => (props.mode === 'standalone' ? '0 16px' : '0')};
   }
 
   .cko-overview {
     width: 400px;
-    min-height: 540px;
+    min-height: ${(props) => (props.mode === 'standalone' ? '540px' : 'auto')};
     position: relative;
   }
   .cko-header {
@@ -291,6 +296,9 @@ export const Root = styled(Box)<{ mode: string }>`
     top: 0;
     transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
   }
+  .cko-product {
+    margin-top: ${(props) => (props.mode === 'standalone' ? '64px' : '0')};
+  }
   .cko-product-summary {
   }
 

package/src/payment/summary.tsx

@@ -112,12 +112,7 @@ export default function PaymentSummary({
 
   return (
     <Fade in>
-      <Stack
-        className="cko-product"
-        direction="column"
-        sx={{
-          mt: 8,
-        }}>
+      <Stack className="cko-product" direction="column">
         <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: 4 }}>
           <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
             {headlines.action}