@blocklet/payment-react 1.18.56 → 1.19.0

package/es/payment/summary.js

@@ -66,34 +66,21 @@ function getStakingSetup(items, currency, billingThreshold = 0) {
   }
   return "0";
 }
-PaymentSummary.defaultProps = {
-  onUpsell: noop,
-  onDownsell: noop,
-  onApplyCrossSell: noop,
-  onCancelCrossSell: noop,
-  onChangeAmount: noop,
-  checkoutSessionId: "",
-  crossSellBehavior: "",
-  showStaking: false,
-  donationSettings: null,
-  action: "",
-  trialEnd: 0
-};
 export default function PaymentSummary({
   items,
   currency,
   trialInDays,
   billingThreshold,
-  onUpsell,
-  onDownsell,
-  onApplyCrossSell,
-  onCancelCrossSell,
-  onChangeAmount,
-  checkoutSessionId,
-  crossSellBehavior,
-  showStaking,
-  donationSettings,
-  action,
+  onUpsell = noop,
+  onDownsell = noop,
+  onApplyCrossSell = noop,
+  onCancelCrossSell = noop,
+  onChangeAmount = noop,
+  checkoutSessionId = "",
+  crossSellBehavior = "",
+  showStaking = false,
+  donationSettings = void 0,
+  action = "",
   trialEnd = 0,
   ...rest
 }) {
@@ -179,86 +166,128 @@ export default function PaymentSummary({
               currency,
               onUpsell: handleUpsell,
               onDownsell: handleDownsell,
-              children: x.cross_sell && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
-                /* @__PURE__ */ jsx(Typography, {}),
-                /* @__PURE__ */ jsx(
-                  LoadingButton,
-                  {
-                    size: "small",
-                    loadingPosition: "end",
-                    endIcon: null,
-                    color: "error",
-                    variant: "text",
-                    loading: state.loading,
-                    onClick: handleCancelCrossSell,
-                    children: t("payment.checkout.cross_sell.remove")
-                  }
-                )
-              ] })
+              children: x.cross_sell && /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  sx: {
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, {}),
+                    /* @__PURE__ */ jsx(
+                      LoadingButton,
+                      {
+                        size: "small",
+                        loadingPosition: "end",
+                        endIcon: null,
+                        color: "error",
+                        variant: "text",
+                        loading: state.loading,
+                        onClick: handleCancelCrossSell,
+                        children: t("payment.checkout.cross_sell.remove")
+                      }
+                    )
+                  ]
+                }
+              )
             },
             `${x.price_id}-${currency.id}`
           )
         ) }),
-        data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(Stack, { mt: 1, children: /* @__PURE__ */ jsx(
-          ProductItem,
+        data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(
+          Stack,
           {
-            item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
-            items,
-            trialInDays,
-            currency,
-            trialEnd,
-            onUpsell: noop,
-            onDownsell: noop,
-            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
-              /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
-              /* @__PURE__ */ jsx(
-                LoadingButton,
-                {
-                  size: "small",
-                  loadingPosition: "end",
-                  endIcon: null,
-                  color: crossSellBehavior === "required" ? "info" : "info",
-                  variant: crossSellBehavior === "required" ? "text" : "text",
-                  loading: state.loading,
-                  onClick: handleApplyCrossSell,
-                  children: t("payment.checkout.cross_sell.add")
-                }
-              )
-            ] })
+            sx: {
+              mt: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              ProductItem,
+              {
+                item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
+                items,
+                trialInDays,
+                currency,
+                trialEnd,
+                onUpsell: noop,
+                onDownsell: noop,
+                children: /* @__PURE__ */ jsxs(
+                  Stack,
+                  {
+                    direction: "row",
+                    sx: {
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      width: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
+                      /* @__PURE__ */ jsx(
+                        LoadingButton,
+                        {
+                          size: "small",
+                          loadingPosition: "end",
+                          endIcon: null,
+                          color: crossSellBehavior === "required" ? "info" : "info",
+                          variant: crossSellBehavior === "required" ? "text" : "text",
+                          loading: state.loading,
+                          onClick: handleApplyCrossSell,
+                          children: t("payment.checkout.cross_sell.add")
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
           }
-        ) }) })
+        ) })
       ]
     }
   );
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
-    /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", sx: { mb: 2.5 }, children: [
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          title: t("payment.checkout.orderSummary"),
-          sx: {
-            color: "text.primary",
-            fontSize: {
-              xs: "18px",
-              md: "24px"
-            },
-            fontWeight: "700",
-            lineHeight: "32px"
-          },
-          children: action || t("payment.checkout.orderSummary")
-        }
-      ),
-      !settings.livemode && /* @__PURE__ */ jsx(Livemode, {})
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          mb: 2.5
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              title: t("payment.checkout.orderSummary"),
+              sx: {
+                color: "text.primary",
+                fontSize: {
+                  xs: "18px",
+                  md: "24px"
+                },
+                fontWeight: "700",
+                lineHeight: "32px"
+              },
+              children: action || t("payment.checkout.orderSummary")
+            }
+          ),
+          !settings.livemode && /* @__PURE__ */ jsx(Livemode, {})
+        ]
+      }
+    ),
     isMobile && !donationSettings ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Stack,
         {
-          justifyContent: "space-between",
-          flexDirection: "row",
-          alignItems: "center",
-          mb: 1.5,
           onClick: () => setState({ expanded: !state.expanded }),
+          sx: {
+            justifyContent: "space-between",
+            flexDirection: "row",
+            alignItems: "center",
+            mb: 1.5
+          },
           children: [
             /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.productListTotal", { total: items.length }) }),
             /* @__PURE__ */ jsx(ExpandMore, { expand: state.expanded, "aria-expanded": state.expanded, "aria-label": "show more", children: /* @__PURE__ */ jsx(ExpandMoreIcon, {}) })
@@ -269,33 +298,77 @@ export default function PaymentSummary({
     ] }) : ProductCardList,
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     staking > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
-          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
-        ] }),
-        /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
-      ] }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
-          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Typography, { children: [
-          formatAmount(staking, currency.decimal),
-          " ",
-          currency.symbol
-        ] })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                spacing: 0.5,
+                sx: {
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
+                  /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                spacing: 0.5,
+                sx: {
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
+                  /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { children: [
+              formatAmount(staking, currency.decimal),
+              " ",
+              currency.symbol
+            ] })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs(
       Stack,
       {
-        display: "flex",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        alignItems: "center",
-        sx: { width: "100%" },
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center",
+          width: "100%"
+        },
         children: [
           /* @__PURE__ */ jsxs(Box, { className: "base-label", children: [
             t("common.total"),

package/es/theme/index.d.ts

@@ -7,9 +7,4 @@ export declare function PaymentThemeProvider({ children, theme: customTheme, }:
     children: React.ReactNode;
     theme?: PaymentThemeOptions;
 }): JSX.Element;
-export declare namespace PaymentThemeProvider {
-    var defaultProps: {
-        theme: {};
-    };
-}
 export { typography };

package/es/theme/index.js

@@ -7,9 +7,6 @@ import { useMemo } from "react";
 import "./index.css";
 import "./types";
 import { typography } from "./typography.js";
-PaymentThemeProvider.defaultProps = {
-  theme: {}
-};
 export function PaymentThemeProvider({
   children,
   theme: customTheme = {}
@@ -261,7 +258,7 @@ export function PaymentThemeProvider({
                   backgroundColor: palette.chip.default.background,
                   borderColor: palette.chip.default.border
                 },
-                "&.MuiChip-filledSecondary": {
+                "&.MuiChip-filled.MuiChip-colorSecondary": {
                   color: palette.chip.secondary.text,
                   backgroundColor: palette.chip.secondary.background,
                   borderColor: palette.chip.secondary.border
@@ -276,7 +273,7 @@ export function PaymentThemeProvider({
                   backgroundColor: palette.chip.warning.background,
                   borderColor: palette.chip.warning.border
                 },
-                "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
+                "&.MuiChip-filled.MuiChip-colorPrimary,&.MuiChip-filledInfo": {
                   color: palette.chip.info.text,
                   backgroundColor: palette.chip.info.background,
                   borderColor: palette.chip.info.border

package/es/theme/typography.d.ts

@@ -1,2 +1,2 @@
-import type { TypographyOptions } from '@mui/material/styles/createTypography';
-export declare const typography: TypographyOptions;
+import type { TypographyStyleOptions } from '@mui/material/styles/createTypography';
+export declare const typography: TypographyStyleOptions;

package/lib/checkout/donate.d.ts

@@ -50,18 +50,4 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean, donateSettings?: DonationSettings) => React.ReactNode;
 };
 export declare function DonateDetails({ supporters, currency, method }: DonateHistory): import("react").JSX.Element;
-declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
-declare namespace CheckoutDonate {
-    var defaultProps: {
-        theme: string;
-        livemode: undefined;
-        timeout: number;
-        mode: string;
-        inlineOptions: {
-            button: {
-                text: string;
-            };
-        };
-    };
-}
-export default CheckoutDonate;
+export default function CheckoutDonate(rawProps: DonateProps): import("react").JSX.Element;

package/lib/checkout/donate.js

@@ -22,7 +22,7 @@ var _payment = require("../contexts/payment");
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _mobile = require("../hooks/mobile");
 var _donate = require("../contexts/donate");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
   const donationKey = `${settings.target}-${livemode}`;
@@ -98,9 +98,9 @@ function DonateDetails({
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
         spacing: 0.5,
         sx: {
+          alignItems: "center",
           flex: 3,
           overflow: "hidden"
         },
@@ -143,10 +143,10 @@ function DonateDetails({
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
         spacing: 0.5,
         sx: {
+          alignItems: "center",
+          justifyContent: "flex-end",
           flex: 1
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
@@ -184,9 +184,11 @@ function SupporterAvatar({
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
+    sx: {
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
       max: 5,
       sx: {
@@ -262,12 +264,14 @@ function SupporterTable({
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: {
-      xs: 0.5,
-      sm: 1
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: {
+        xs: 0.5,
+        sm: 1
+      }
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
       supporters,
@@ -294,16 +298,20 @@ function SupporterSimple({
   const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: {
-      xs: 0.5,
-      sm: 1
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: {
+        xs: 0.5,
+        sm: 1
+      }
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "p",
-      color: "text.secondary",
+      sx: {
+        color: "text.secondary"
+      },
       children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
         style: emojiFont,
         children: t("payment.checkout.donation.empty")
@@ -485,8 +493,10 @@ function CheckoutDonateInner({
       onClick: handlePopoverOpen,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
         spacing: 0.5,
+        sx: {
+          alignItems: "center"
+        },
         children: [donateSettings.appearance.button.icon, typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             whiteSpace: "nowrap"
@@ -527,17 +537,21 @@ function CheckoutDonateInner({
           },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          display: "flex",
-          alignItems: "center",
-          flexDirection: "column",
-          gap: 2,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+            gap: 2
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             ...inlineOptions.button,
             onClick: () => startDonate(),
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
               direction: "row",
-              alignItems: "center",
               spacing: 0.5,
+              sx: {
+                alignItems: "center"
+              },
               children: [inlineOptions?.button?.icon, typeof inlineText === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 sx: {
                   whiteSpace: "nowrap"
@@ -554,17 +568,17 @@ function CheckoutDonateInner({
   });
   const defaultRender = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: {
+        xs: 1,
+        sm: 2
+      },
       width: "100%",
       minWidth: 300,
       maxWidth: 720
     },
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: {
-      xs: 1,
-      sm: 2
-    },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
       size: donateSettings.appearance?.button?.size || "medium",
       color: donateSettings.appearance?.button?.color || "primary",
@@ -581,8 +595,10 @@ function CheckoutDonateInner({
       onClick: () => startDonate(),
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
         spacing: 0.5,
+        sx: {
+          alignItems: "center"
+        },
         children: [donateSettings.appearance.button.icon && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             mr: 0.5,
@@ -622,9 +638,11 @@ function CheckoutDonateInner({
     children: [renderInnerView(), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: state.open,
       title: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5
+        },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "h3",
           sx: {
@@ -658,10 +676,10 @@ function CheckoutDonateInner({
       }),
       maxWidth: "md",
       toolbar: isMobile ? null : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
         sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
           color: "text.secondary"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
@@ -749,11 +767,25 @@ function CheckoutDonateInner({
     })]
   });
 }
-function CheckoutDonate(props) {
+function CheckoutDonate(rawProps) {
+  const props = Object.assign({
+    theme: "default",
+    livemode: void 0,
+    inlineOptions: {
+      button: {
+        text: "Tip"
+      }
+    },
+    timeout: 5e3,
+    mode: "default"
+  }, rawProps);
   const {
     livemode
   } = (0, _payment.usePaymentContext)();
-  const content = /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
+  const content =
+  // eslint-disable-next-line react/prop-types
+  /* @__PURE__ */
+  (0, _jsxRuntime.jsx)(CheckoutDonateInner, {
     ...props,
     livemode: props.livemode === void 0 ? livemode : props.livemode
   });
@@ -769,15 +801,4 @@ function CheckoutDonate(props) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
     children: content
   });
-}
-CheckoutDonate.defaultProps = {
-  theme: "default",
-  livemode: void 0,
-  timeout: 5e3,
-  mode: "default",
-  inlineOptions: {
-    button: {
-      text: "Tip"
-    }
-  }
-};
+}

package/lib/checkout/form.d.ts

@@ -1,16 +1,2 @@
 import type { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;
-declare namespace CheckoutForm {
-    var defaultProps: {
-        onPaid: any;
-        onError: {
-            (...data: any[]): void;
-            (message?: any, ...optionalParams: any[]): void;
-        };
-        mode: string;
-        action: string;
-        extraParams: {};
-        formType: string;
-    };
-}
-export default CheckoutForm;
+export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;