@blocklet/payment-react 1.13.210 → 1.13.212

package/lib/payment/index.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { LiteralUnion } from 'type-fest';
+import type { LiteralUnion } from 'type-fest';
 import { CheckoutCallbacks, CheckoutContext } from '../types';
 type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
@@ -16,7 +16,7 @@ export default Payment;
 type MainProps = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
 };
-export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, onChange, goBack, }: MainProps): import("react").JSX.Element;
+export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, onChange, goBack, action, }: MainProps): import("react").JSX.Element;
 export declare namespace PaymentInner {
     var defaultProps: {
         completed: boolean;

package/lib/payment/index.js

@@ -7,18 +7,18 @@ exports.PaymentInner = PaymentInner;
 exports.Root = void 0;
 module.exports = Payment;
 var _jsxRuntime = require("react/jsx-runtime");
-var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
+var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _reactHookForm = require("react-hook-form");
 var _api = _interopRequireDefault(require("../api"));
 var _payment = require("../contexts/payment");
-var _util = require("../util");
+var _util2 = require("../util");
 var _error = _interopRequireDefault(require("./error"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _form = _interopRequireDefault(require("./form"));
@@ -44,7 +44,8 @@ function Payment({
   onPaid,
   onError,
   onChange,
-  goBack
+  goBack,
+  action
 }) {
   const {
     t
@@ -72,8 +73,9 @@ function Payment({
   }, [checkoutSession, livemode, setLivemode, refresh]);
   if (error) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+      mode,
       title: "Oops",
-      description: (0, _util.formatError)(error)
+      description: (0, _util2.formatError)(error)
     });
   }
   if (!checkoutSession || !delay) {
@@ -92,22 +94,22 @@ function Payment({
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           className: "cko-payment",
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment2.default, {})
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
+        }), mode === "standalone" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
           className: "cko-footer"
         })]
       })
     });
   }
   if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Center.default, {
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
-        title: t("payment.checkout.expired.title"),
-        description: t("payment.checkout.expired.description")
-      })
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+      mode,
+      title: t("payment.checkout.expired.title"),
+      description: t("payment.checkout.expired.description")
     });
   }
   if (checkoutSession.status === "complete") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+      mode,
       title: t("payment.checkout.complete.title"),
       description: t("payment.checkout.complete.description")
     });
@@ -123,7 +125,8 @@ function Payment({
     onError,
     onChange,
     goBack,
-    mode
+    mode,
+    action
   });
 }
 PaymentInner.defaultProps = {
@@ -140,7 +143,8 @@ function PaymentInner({
   onPaid,
   onError,
   onChange,
-  goBack
+  goBack,
+  action
 }) {
   const {
     t
@@ -169,7 +173,7 @@ function PaymentInner({
         line2: "",
         postal_code: ""
       }, customer?.address || {}, {
-        country: (0, _util.isValidCountry)(customer?.address?.country || "") ? customer?.address?.country : "us"
+        country: (0, _util2.isValidCountry)(customer?.address?.country || "") ? customer?.address?.country : "us"
       })
     }
   });
@@ -178,7 +182,7 @@ function PaymentInner({
     name: "payment_currency",
     defaultValue: defaultCurrencyId
   });
-  const currency = (0, _util.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
+  const currency = (0, _util2.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find(x => x.id === currency.payment_method_id);
   (0, _react.useEffect)(() => {
     if (onChange) {
@@ -198,7 +202,7 @@ function PaymentInner({
       });
     } catch (err) {
       console.error(err);
-      _Toast.default.error((0, _util.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const onDownsell = async from => {
@@ -213,7 +217,7 @@ function PaymentInner({
       });
     } catch (err) {
       console.error(err);
-      _Toast.default.error((0, _util.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const onApplyCrossSell = async to => {
@@ -228,7 +232,7 @@ function PaymentInner({
       });
     } catch (err) {
       console.error(err);
-      _Toast.default.error((0, _util.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const onCancelCrossSell = async () => {
@@ -241,7 +245,26 @@ function PaymentInner({
       });
     } catch (err) {
       console.error(err);
-      _Toast.default.error((0, _util.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const onChangeAmount = async ({
+    priceId,
+    amount
+  }) => {
+    try {
+      const {
+        data
+      } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/amount`, {
+        priceId,
+        amount: (0, _util.fromTokenToUnit)(amount, currency.decimal).toString()
+      });
+      setState({
+        checkoutSession: data
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const handlePaid = result => {
@@ -268,7 +291,7 @@ function PaymentInner({
         className: "cko-container",
         sx: {
           gap: {
-            sm: mode === "standalone" ? 0 : 8
+            sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8
           }
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
@@ -288,28 +311,37 @@ function PaymentInner({
               onDownsell,
               onApplyCrossSell,
               onCancelCrossSell,
+              onChangeAmount,
               checkoutSessionId: state.checkoutSession.id,
-              crossSellBehavior: state.checkoutSession.cross_sell_behavior
+              crossSellBehavior: state.checkoutSession.cross_sell_behavior,
+              donationSettings: paymentLink?.donation_settings,
+              action
             })]
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           className: "cko-payment",
           direction: "column",
-          spacing: 4,
+          spacing: {
+            xs: 2,
+            sm: 4
+          },
           children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
-            payee: (0, _util.getStatementDescriptor)(state.checkoutSession.line_items),
+            mode,
+            payee: (0, _util2.getStatementDescriptor)(state.checkoutSession.line_items),
             action: state.checkoutSession.mode,
             invoiceId: state.checkoutSession.invoice_id,
             subscriptionId: state.checkoutSession.subscription_id,
-            message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
+            message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${paymentLink?.donation_settings ? "donate" : state.checkoutSession.mode}`)
           }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
             checkoutSession: state.checkoutSession,
             paymentMethods,
             paymentIntent,
+            paymentLink,
             customer,
             onPaid: handlePaid,
             onError,
-            mode
+            mode,
+            action
           })]
         }), mode === "standalone" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
           className: "cko-footer"

package/lib/payment/product-donation.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { DonationSettings, TLineItemExpanded } from '@blocklet/payment-types';
+export default function ProductDonation({ item, settings, onChange, }: {
+    item: TLineItemExpanded;
+    settings: DonationSettings;
+    onChange: Function;
+}): import("react").JSX.Element;

package/lib/payment/product-donation.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ProductDonation;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _switchButton = _interopRequireDefault(require("../components/switch-button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ProductDonation({
+  item,
+  settings,
+  onChange
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
+  const [state, setState] = (0, _ahooks.useSetState)({
+    selected: preset,
+    input: "",
+    custom: settings.amount.presets?.length === 0,
+    error: ""
+  });
+  (0, _react.useEffect)(() => {
+    if (settings.amount.preset) {
+      setState({
+        selected: settings.amount.preset,
+        custom: false
+      });
+    } else if (settings.amount.presets && settings.amount.presets.length > 0) {
+      setState({
+        selected: settings.amount.presets[0],
+        custom: false
+      });
+    }
+  }, [settings.amount.preset, settings.amount.presets, setState]);
+  const handleSelect = amount => {
+    setState({
+      selected: amount,
+      custom: false,
+      error: ""
+    });
+    onChange({
+      priceId: item.price_id,
+      amount
+    });
+  };
+  const handleInput = event => {
+    const {
+      value
+    } = event.target;
+    const min = parseFloat(settings.amount.minimum || "0");
+    const max = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    if (value < min || value > max) {
+      setState({
+        input: value,
+        error: t("payment.checkout.donation.between", {
+          min,
+          max
+        })
+      });
+      return;
+    }
+    setState({
+      error: "",
+      input: value
+    });
+    onChange({
+      priceId: item.price_id,
+      amount: value
+    });
+  };
+  const handleToggle = event => {
+    if (event.target.checked) {
+      setState({
+        custom: true,
+        input: state.selected,
+        error: ""
+      });
+    } else {
+      setState({
+        custom: false,
+        input: "",
+        error: ""
+      });
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: 1.5,
+    children: [settings.amount.custom && preset !== "0" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+      control: /* @__PURE__ */(0, _jsxRuntime.jsx)(_switchButton.default, {
+        checked: state.custom,
+        sx: {
+          marginRight: 0.4
+        },
+        onChange: handleToggle
+      }),
+      label: state.custom ? t("payment.checkout.donation.select") : t("payment.checkout.donation.custom"),
+      sx: {
+        marginRight: 2,
+        marginLeft: 0.5,
+        color: "text.secondary"
+      }
+    }), !state.custom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gap: 1.5,
+      children: settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map(amount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
+        variant: "outlined",
+        sx: {
+          minWidth: 120,
+          textAlign: "center",
+          ...(state.selected === amount && !state.custom ? {
+            borderColor: "primary.main"
+          } : {})
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CardActionArea, {
+          onClick: () => handleSelect(amount),
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            sx: {
+              py: 1
+            },
+            spacing: 0.5,
+            alignItems: "flex-end",
+            justifyContent: "center",
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "strong",
+              lineHeight: 1,
+              variant: "h5",
+              sx: {
+                fontVariantNumeric: "tabular-nums",
+                fontWeight: 400
+              },
+              children: amount
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "small",
+              lineHeight: 1,
+              fontSize: 12,
+              children: "ABT"
+            }), " "]
+          })
+        })
+      }, amount))
+    }), state.custom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+      label: preset !== "0" ? null : t("payment.checkout.donation.custom"),
+      type: "number",
+      value: state.input,
+      onChange: handleInput,
+      inputProps: {
+        min: settings.amount.minimum,
+        max: settings.amount.maximum
+      },
+      margin: "none",
+      fullWidth: true,
+      error: !!state.error,
+      helperText: state.error
+    })]
+  });
+}

package/lib/payment/skeleton/overview.js

@@ -27,7 +27,7 @@ function OverviewSkeleton() {
           }
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        mt: 3,
+        mt: 2,
         component: "div",
         variant: "h4",
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
@@ -37,7 +37,7 @@ function OverviewSkeleton() {
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         sx: {
-          mt: 3
+          mt: 2
         },
         variant: "rounded",
         width: 200,

package/lib/payment/skeleton/payment.js

@@ -11,7 +11,7 @@ function PaymentSkeleton() {
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      spacing: 3,
+      spacing: 2,
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
@@ -38,16 +38,12 @@ function PaymentSkeleton() {
           variant: "h1",
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
         })]
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
           variant: "h4",
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "div",
-          variant: "h1",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
-        })]
+        })
       })]
     })
   });

package/lib/payment/success.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 type Props = {
+    mode: string;
     message: string;
     action: string;
     payee: string;
     invoiceId?: string;
     subscriptionId?: string;
 };
-declare function PaymentSuccess({ message, action, payee, invoiceId, subscriptionId }: Props): import("react").JSX.Element;
+declare function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId }: Props): import("react").JSX.Element;
 declare namespace PaymentSuccess {
     var defaultProps: {
         invoiceId: string;

package/lib/payment/success.js

@@ -11,6 +11,7 @@ var _system = require("@mui/system");
 var _ufo = require("ufo");
 var _payment = require("../contexts/payment");
 function PaymentSuccess({
+  mode,
   message,
   action,
   payee,
@@ -56,9 +57,9 @@ function PaymentSuccess({
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: mode === "standalone" ? "center" : "flex-start",
       sx: {
-        height: 360
+        height: mode === "standalone" ? 360 : 300
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(Div, {
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {

package/lib/payment/summary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
@@ -8,21 +8,27 @@ type Props = {
     showStaking?: boolean;
     onUpsell?: Function;
     onDownsell?: Function;
+    onChangeAmount?: Function;
     onApplyCrossSell?: Function;
     onCancelCrossSell?: Function;
     checkoutSessionId?: string;
     crossSellBehavior?: string;
+    donationSettings?: DonationSettings;
+    action?: string;
 };
-declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, checkoutSessionId, crossSellBehavior, showStaking, ...rest }: Props): import("react").JSX.Element;
+declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, ...rest }: Props): import("react").JSX.Element;
 declare namespace PaymentSummary {
     var defaultProps: {
         onUpsell: any;
         onDownsell: any;
         onApplyCrossSell: any;
         onCancelCrossSell: any;
+        onChangeAmount: any;
         checkoutSessionId: string;
         crossSellBehavior: string;
         showStaking: boolean;
+        donationSettings: null;
+        action: string;
     };
 }
 export default PaymentSummary;

package/lib/payment/summary.js

@@ -17,6 +17,7 @@ var _api = _interopRequireDefault(require("../api"));
 var _status = _interopRequireDefault(require("../components/status"));
 var _util2 = require("../util");
 var _amount = _interopRequireDefault(require("./amount"));
+var _productDonation = _interopRequireDefault(require("./product-donation"));
 var _productItem = _interopRequireDefault(require("./product-item"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shake = (0, _material.keyframes)`
@@ -78,9 +79,12 @@ PaymentSummary.defaultProps = {
   onDownsell: _noop.default,
   onApplyCrossSell: _noop.default,
   onCancelCrossSell: _noop.default,
+  onChangeAmount: _noop.default,
   checkoutSessionId: "",
   crossSellBehavior: "",
-  showStaking: false
+  showStaking: false,
+  donationSettings: null,
+  action: ""
 };
 function PaymentSummary({
   items,
@@ -91,9 +95,12 @@ function PaymentSummary({
   onDownsell,
   onApplyCrossSell,
   onCancelCrossSell,
+  onChangeAmount,
   checkoutSessionId,
   crossSellBehavior,
   showStaking,
+  donationSettings,
+  action,
   ...rest
 }) {
   const {
@@ -169,7 +176,10 @@ function PaymentSummary({
         direction: "column",
         alignItems: "flex-start",
         sx: {
-          mb: 4
+          mb: {
+            xs: 0,
+            sm: 3
+          }
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
@@ -177,7 +187,7 @@ function PaymentSummary({
             fontSize: "1.15rem",
             color: "text.secondary"
           },
-          children: headlines.action
+          children: action || headlines.action
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
           amount: headlines.amount
         }), headlines.then && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -188,8 +198,15 @@ function PaymentSummary({
           children: headlines.then
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-        spacing: 2,
-        children: items.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
+        spacing: {
+          xs: 1,
+          sm: 2
+        },
+        children: items.map(x => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
+          item: x,
+          settings: donationSettings,
+          onChange: onChangeAmount
+        }, `${x.price_id}-${currency.id}`) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
           item: x,
           items,
           trialInDays,
@@ -217,7 +234,10 @@ function PaymentSummary({
             borderRadius: 1,
             padding: 1,
             animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
-            mt: 3
+            mt: {
+              xs: 1,
+              sm: 2
+            }
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
             item: {
@@ -267,7 +287,10 @@ function PaymentSummary({
           border: "1px solid #eee",
           borderRadius: 1,
           padding: 1,
-          mt: 3
+          mt: {
+            xs: 1,
+            sm: 2
+          }
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",

package/lib/types/index.d.ts

@@ -7,6 +7,7 @@ export type CheckoutContext = {
     paymentIntent?: TPaymentIntent;
     customer?: TCustomer;
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+    action?: string;
 };
 export type CheckoutFormData = {
     customer_name: string;
@@ -26,6 +27,7 @@ export type CheckoutFormData = {
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
     id: string;
     extraParams?: Record<string, any>;
+    action?: string;
     mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 };
 export type CheckoutCallbacks = {

package/lib/util.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => any;
 export declare function formatToDate(date: Date | string | number, locale?: string): any;
 export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
@@ -25,6 +26,7 @@ export declare function formatLineItemPricing(item: TLineItemExpanded, currency:
 export declare function getSubscriptionStatusColor(status: string): "success" | "primary" | "warning" | "error" | "default";
 export declare function getPaymentIntentStatusColor(status: string): "success" | "warning" | "default";
 export declare function getRefundStatusColor(status: string): "success" | "warning" | "default";
+export declare function getPayoutStatusColor(status: string): "success" | "warning" | "default";
 export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
 export declare function getWebhookStatusColor(status: string): "success" | "default";
 export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, trialing?: boolean, upsell?: boolean): {