@blocklet/payment-react 1.13.210 → 1.13.212

package/es/payment/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import Center from "@arcblock/ux/lib/Center";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { ArrowBackOutlined } from "@mui/icons-material";
 import { Box, Fade, Stack } from "@mui/material";
 import { styled } from "@mui/system";
+import { fromTokenToUnit } from "@ocap/util";
 import { useSetState } from "ahooks";
 import { useEffect, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
@@ -35,7 +35,8 @@ export default function Payment({
   onPaid,
   onError,
   onChange,
-  goBack
+  goBack,
+  action
 }) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
@@ -56,28 +57,30 @@ export default function Payment({
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);
   if (error) {
-    return /* @__PURE__ */ jsx(PaymentError, { title: "Oops", description: formatError(error) });
+    return /* @__PURE__ */ jsx(PaymentError, { mode, title: "Oops", description: formatError(error) });
   }
   if (!checkoutSession || !delay) {
     return /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
       /* @__PURE__ */ jsx(Stack, { className: "cko-overview", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }),
       /* @__PURE__ */ jsx(Stack, { className: "cko-payment", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) }),
-      /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
+      mode === "standalone" && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
     ] }) });
   }
   if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
-    return /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       PaymentError,
       {
+        mode,
         title: t("payment.checkout.expired.title"),
         description: t("payment.checkout.expired.description")
       }
-    ) });
+    );
   }
   if (checkoutSession.status === "complete") {
     return /* @__PURE__ */ jsx(
       PaymentError,
       {
+        mode,
         title: t("payment.checkout.complete.title"),
         description: t("payment.checkout.complete.description")
       }
@@ -96,7 +99,8 @@ export default function Payment({
       onError,
       onChange,
       goBack,
-      mode
+      mode,
+      action
     }
   );
 }
@@ -114,7 +118,8 @@ export function PaymentInner({
   onPaid,
   onError,
   onChange,
-  goBack
+  goBack,
+  action
 }) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
@@ -186,6 +191,18 @@ export function PaymentInner({
       Toast.error(formatError(err));
     }
   };
+  const onChangeAmount = async ({ priceId, amount }) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/amount`, {
+        priceId,
+        amount: fromTokenToUnit(amount, currency.decimal).toString()
+      });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
   const handlePaid = (result) => {
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
@@ -199,7 +216,7 @@ export function PaymentInner({
         fontSize: "medium"
       }
     ),
-    /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
+    /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
       /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview", direction: "column", children: [
         mode === "standalone" ? /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }) : null,
         /* @__PURE__ */ jsx(
@@ -214,20 +231,26 @@ export 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__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: 4, children: [
+      /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: { xs: 2, sm: 4 }, children: [
         completed && /* @__PURE__ */ jsx(
           PaymentSuccess,
           {
+            mode,
             payee: 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__ */ jsx(
@@ -236,10 +259,12 @@ export function PaymentInner({
             checkoutSession: state.checkoutSession,
             paymentMethods,
             paymentIntent,
+            paymentLink,
             customer,
             onPaid: handlePaid,
             onError,
-            mode
+            mode,
+            action
           }
         )
       ] }),

package/es/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/es/payment/product-donation.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Card, CardActionArea, FormControlLabel, Stack, TextField, Typography } from "@mui/material";
+import { useSetState } from "ahooks";
+import { useEffect } from "react";
+import Switch from "../components/switch-button.js";
+export default function ProductDonation({
+  item,
+  settings,
+  onChange
+}) {
+  const { t } = useLocaleContext();
+  const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
+  const [state, setState] = useSetState({
+    selected: preset,
+    input: "",
+    custom: settings.amount.presets?.length === 0,
+    error: ""
+  });
+  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__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1.5, children: [
+    settings.amount.custom && preset !== "0" && /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(Switch, { 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__ */ jsx(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__ */ jsx(
+      Card,
+      {
+        variant: "outlined",
+        sx: {
+          minWidth: 120,
+          textAlign: "center",
+          ...state.selected === amount && !state.custom ? { borderColor: "primary.main" } : {}
+        },
+        children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleSelect(amount), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { py: 1 }, spacing: 0.5, alignItems: "flex-end", justifyContent: "center", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "strong",
+              lineHeight: 1,
+              variant: "h5",
+              sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
+              children: amount
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { component: "small", lineHeight: 1, fontSize: 12, children: "ABT" }),
+          " "
+        ] }) })
+      },
+      amount
+    )) }),
+    state.custom && /* @__PURE__ */ jsx(
+      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/es/payment/skeleton/overview.js

@@ -6,8 +6,8 @@ export default function OverviewSkeleton() {
       /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 32, height: 32 }),
       /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } })
     ] }),
-    /* @__PURE__ */ jsx(Typography, { mt: 3, component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+    /* @__PURE__ */ jsx(Typography, { mt: 2, component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
     /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 3 }, variant: "rounded", width: 200, height: 200 })
+    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", width: 200, height: 200 })
   ] }) });
 }

package/es/payment/skeleton/payment.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function PaymentSkeleton() {
-  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 3, children: [
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 2, children: [
     /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
     /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
@@ -11,9 +11,6 @@ export default function PaymentSkeleton() {
       /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
       /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
-    ] })
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }) })
   ] }) });
 }

package/es/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/es/payment/success.js

@@ -4,7 +4,7 @@ import { Grow, Link, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { joinURL } from "ufo";
 import { usePaymentContext } from "../contexts/payment.js";
-export default function PaymentSuccess({ message, action, payee, invoiceId, subscriptionId }) {
+export default function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId }) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
   let next = null;
@@ -13,17 +13,26 @@ export default function PaymentSuccess({ message, action, payee, invoiceId, subs
   } else if (invoiceId) {
     next = /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/invoice/${invoiceId}`), children: t("payment.checkout.next.invoice", { payee }) }) });
   }
-  return /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", justifyContent: "center", sx: { height: 360 }, children: [
-    /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsxs("div", { className: "check-icon", children: [
-      /* @__PURE__ */ jsx("span", { className: "icon-line line-tip" }),
-      /* @__PURE__ */ jsx("span", { className: "icon-line line-long" }),
-      /* @__PURE__ */ jsx("div", { className: "icon-circle" }),
-      /* @__PURE__ */ jsx("div", { className: "icon-fix" })
-    ] }) }),
-    /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", mb: 3, children: message }),
-    /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", children: t("payment.checkout.completed.tip", { payee }) }),
-    next
-  ] }) });
+  return /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      alignItems: "center",
+      justifyContent: mode === "standalone" ? "center" : "flex-start",
+      sx: { height: mode === "standalone" ? 360 : 300 },
+      children: [
+        /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsxs("div", { className: "check-icon", children: [
+          /* @__PURE__ */ jsx("span", { className: "icon-line line-tip" }),
+          /* @__PURE__ */ jsx("span", { className: "icon-line line-long" }),
+          /* @__PURE__ */ jsx("div", { className: "icon-circle" }),
+          /* @__PURE__ */ jsx("div", { className: "icon-fix" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", mb: 3, children: message }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", children: t("payment.checkout.completed.tip", { payee }) }),
+        next
+      ]
+    }
+  ) });
 }
 PaymentSuccess.defaultProps = {
   invoiceId: "",

package/es/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/es/payment/summary.js

@@ -11,6 +11,7 @@ import api from "../api.js";
 import Status from "../components/status.js";
 import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from "../util.js";
 import PaymentAmount from "./amount.js";
+import ProductDonation from "./product-donation.js";
 import ProductItem from "./product-item.js";
 const shake = keyframes`
   0% {
@@ -69,9 +70,12 @@ PaymentSummary.defaultProps = {
   onDownsell: noop,
   onApplyCrossSell: noop,
   onCancelCrossSell: noop,
+  onChangeAmount: noop,
   checkoutSessionId: "",
   crossSellBehavior: "",
-  showStaking: false
+  showStaking: false,
+  donationSettings: null,
+  action: ""
 };
 export default function PaymentSummary({
   items,
@@ -82,9 +86,12 @@ export default function PaymentSummary({
   onDownsell,
   onApplyCrossSell,
   onCancelCrossSell,
+  onChangeAmount,
   checkoutSessionId,
   crossSellBehavior,
   showStaking,
+  donationSettings,
+  action,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -135,35 +142,45 @@ export default function PaymentSummary({
     }
   };
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, 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__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: { xs: 0, sm: 3 } }, children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: action || 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: items.map((x) => /* @__PURE__ */ jsx(
-      ProductItem,
-      {
-        item: x,
-        items,
-        trialInDays,
-        currency,
-        onUpsell: handleUpsell,
-        onDownsell: handleDownsell,
-        children: x.cross_sell && /* @__PURE__ */ jsx(
-          LoadingButton,
-          {
-            size: "small",
-            loadingPosition: "end",
-            color: "error",
-            variant: "text",
-            loading: state.loading,
-            onClick: handleCancelCrossSell,
-            children: t("payment.checkout.cross_sell.remove")
-          }
-        )
-      },
-      `${x.price_id}-${currency.id}`
-    )) }),
+    /* @__PURE__ */ jsx(Stack, { spacing: { xs: 1, sm: 2 }, children: items.map(
+      (x) => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */ jsx(
+        ProductDonation,
+        {
+          item: x,
+          settings: donationSettings,
+          onChange: onChangeAmount
+        },
+        `${x.price_id}-${currency.id}`
+      ) : /* @__PURE__ */ jsx(
+        ProductItem,
+        {
+          item: x,
+          items,
+          trialInDays,
+          currency,
+          onUpsell: handleUpsell,
+          onDownsell: handleDownsell,
+          children: x.cross_sell && /* @__PURE__ */ jsx(
+            LoadingButton,
+            {
+              size: "small",
+              loadingPosition: "end",
+              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__ */ jsxs(
       Stack,
       {
@@ -175,7 +192,7 @@ export default 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__ */ jsx(
@@ -218,7 +235,7 @@ export default function PaymentSummary({
           border: "1px solid #eee",
           borderRadius: 1,
           padding: 1,
-          mt: 3
+          mt: { xs: 1, sm: 2 }
         },
         children: [
           /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [

package/es/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/es/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): {

package/es/util.js

@@ -6,6 +6,9 @@ import { joinURL } from "ufo";
 import dayjs from "./dayjs.js";
 import { t } from "./locales/index.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+export const isPaymentKitMounted = () => {
+  return (window.blocklet?.componentMountPoints || []).some((x) => x.did === PAYMENT_KIT_DID);
+};
 export const getPrefix = () => {
   const componentId = (window?.blocklet?.componentId || "").split("/").pop();
   if (componentId === PAYMENT_KIT_DID) {
@@ -78,6 +81,9 @@ export function formatNumber(n, precision = 6, trim = true) {
   return trim ? trimEnd(num.format(options), "0.") : num.format(options);
 }
 export const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
+  if (price.custom_unit_amount) {
+    return `Custom (${currency.symbol})`;
+  }
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString() : +unit * quantity;
   if (price?.type === "recurring" && price.recurring) {
@@ -143,9 +149,15 @@ export function getPriceUintAmountByCurrency(price, currency) {
   const options = getPriceCurrencyOptions(price);
   const option = options.find((x) => x.currency_id === currency.id);
   if (option) {
+    if (option.custom_unit_amount) {
+      return option.custom_unit_amount.preset || option.custom_unit_amount.presets[0];
+    }
     return option.unit_amount;
   }
   if (price.currency_id === currency.id) {
+    if (price.custom_unit_amount) {
+      return price.custom_unit_amount.preset || price.custom_unit_amount.presets[0];
+    }
     return price.unit_amount;
   }
   console.warn(`Currency ${currency.id} not configured for price`, price);
@@ -155,7 +167,14 @@ export function getPriceCurrencyOptions(price) {
   if (Array.isArray(price.currency_options)) {
     return price.currency_options;
   }
-  return [{ currency_id: price.currency_id, unit_amount: price.unit_amount, tiers: null, custom_unit_amount: null }];
+  return [
+    {
+      currency_id: price.currency_id,
+      unit_amount: price.unit_amount,
+      custom_unit_amount: price.custom_unit_amount || null,
+      tiers: null
+    }
+  ];
 }
 export function formatLineItemPricing(item, currency, trial, locale = "en") {
   const price = item.upsell_price || item.price;
@@ -242,6 +261,19 @@ export function getRefundStatusColor(status) {
       return "default";
   }
 }
+export function getPayoutStatusColor(status) {
+  switch (status) {
+    case "paid":
+      return "success";
+    case "failed":
+      return "warning";
+    case "canceled":
+    case "pending":
+    case "in_transit":
+    default:
+      return "default";
+  }
+}
 export function getInvoiceStatusColor(status) {
   switch (status) {
     case "paid":
@@ -266,14 +298,26 @@ export function getWebhookStatusColor(status) {
   }
 }
 export function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
+  if (items.find((x) => (x.upsell_price || x.price).custom_unit_amount) && items.length > 1) {
+    throw new Error("Multiple items with custom unit amount are not supported");
+  }
   let renew = new BN(0);
   const total = items.filter((x) => {
     const price = upsell ? x.upsell_price || x.price : x.price;
     return price != null;
   }).reduce((acc, x) => {
+    if (x.custom_amount) {
+      return acc.add(new BN(x.custom_amount));
+    }
     const price = upsell ? x.upsell_price || x.price : x.price;
+    const unitPrice = getPriceUintAmountByCurrency(price, currency);
+    if (price.custom_unit_amount) {
+      if (unitPrice) {
+        return acc.add(new BN(unitPrice).mul(new BN(x.quantity)));
+      }
+    }
     if (price?.type === "recurring") {
-      renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+      renew = renew.add(new BN(unitPrice).mul(new BN(x.quantity)));
       if (trialing) {
         return acc;
       }
@@ -281,7 +325,7 @@ export function getCheckoutAmount(items, currency, trialing = false, upsell = tr
         return acc;
       }
     }
-    return acc.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+    return acc.add(new BN(unitPrice).mul(new BN(x.quantity)));
   }, new BN(0)).toString();
   return { subtotal: total, total, renew: renew.toString(), discount: "0", shipping: "0", tax: "0" };
 }