@blocklet/payment-react 1.13.210 → 1.13.211

package/es/checkout/donate.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import { CheckoutProps } from '../types';
+export type DonateHistory = {
+    supporters: TCheckoutSessionExpanded[];
+    currency: TPaymentCurrency;
+    method: TPaymentMethod;
+    total: number;
+};
+export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
+    settings: DonationSettings;
+    livemode?: boolean;
+};
+declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element;
+declare namespace CheckoutDonate {
+    var defaultProps: {
+        livemode: boolean;
+    };
+}
+export default CheckoutDonate;

package/es/checkout/donate.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Dialog from "@arcblock/ux/lib/Dialog";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import {
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Box,
+  Button,
+  CircularProgress,
+  Hidden,
+  Stack,
+  Table,
+  TableCell,
+  TableRow,
+  Typography
+} from "@mui/material";
+import { useRequest, useSetState } from "ahooks";
+import omit from "lodash/omit";
+import uniqBy from "lodash/unionBy";
+import { useEffect } from "react";
+import api from "../api.js";
+import TxLink from "../components/blockchain/tx.js";
+import { formatAmount, formatDateTime, formatError } from "../util.js";
+import CheckoutForm from "./form.js";
+const donationCache = {};
+const createOrUpdateDonation = (settings, livemode = true) => {
+  if (!donationCache[settings.target]) {
+    donationCache[settings.target] = api.post(`/api/donations?livemode=${livemode}`, omit(settings, ["appearance"])).then((res) => res.data).finally(() => {
+      setTimeout(() => {
+        delete donationCache[settings.target];
+      }, 3e3);
+    });
+  }
+  return donationCache[settings.target];
+};
+const supporterCache = {};
+const fetchSupporters = (target) => {
+  if (!supporterCache[target]) {
+    supporterCache[target] = api.get(`/api/donations?&target=${target}`).then((res) => res.data).finally(() => {
+      setTimeout(() => {
+        delete supporterCache[target];
+      }, 3e3);
+    });
+  }
+  return supporterCache[target];
+};
+function SupporterAvatar({ supporters = [], total, currency, method }) {
+  const { t } = useLocaleContext();
+  const customers = uniqBy(supporters, "customer_did");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      sx: {
+        ".MuiAvatar-root": {
+          width: "32px",
+          height: "32px"
+        }
+      },
+      gap: {
+        xs: 0.5,
+        sm: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
+        /* @__PURE__ */ jsx(AvatarGroup, { total, max: 20, children: customers.map((x) => /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            title: x.customer?.name,
+            src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+            variant: "circular",
+            sx: { width: 32, height: 32 }
+          },
+          x.id
+        )) })
+      ]
+    }
+  );
+}
+function SupporterTable({ supporters = [], total, currency, method }) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", sx: { width: "100%" }, gap: { xs: 0.5, sm: 1 }, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
+    /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: supporters.map((x) => /* @__PURE__ */ jsxs(
+      TableRow,
+      {
+        sx: {
+          "> td": { padding: "8px 16px 8px 0", borderTop: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0" }
+        },
+        children: [
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+                variant: "circular",
+                sx: { width: 24, height: 24 }
+              },
+              x.id
+            ),
+            /* @__PURE__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(Typography, { children: x.customer?.name }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, children: [
+            /* @__PURE__ */ jsx(Typography, { fontWeight: 500, component: "strong", children: formatAmount(x.amount_total, currency.decimal) }),
+            /* @__PURE__ */ jsx(Typography, { component: "span", children: currency.symbol })
+          ] }) }),
+          /* @__PURE__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatDateTime(x.created_at) }) }) }),
+          /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(TxLink, { method, details: x.payment_details, mode: "customer", align: "right" }) })
+        ]
+      },
+      x.id
+    )) })
+  ] });
+}
+export default function CheckoutDonate({ settings, livemode, onPaid, onError }) {
+  const [state, setState] = useSetState({
+    open: false,
+    supporterLoaded: false,
+    exist: false
+  });
+  const donation = useRequest(() => createOrUpdateDonation(settings, livemode));
+  const supporters = useRequest(() => donation.data ? fetchSupporters(donation.data.id) : Promise.resolve({}));
+  useEffect(() => {
+    if (donation.data && state.supporterLoaded === false) {
+      setState({ supporterLoaded: true });
+      supporters.runAsync().catch(console.error);
+    }
+  }, [donation.data]);
+  const handlePaid = (...args) => {
+    if (onPaid) {
+      onPaid(...args);
+    }
+    supporters.runAsync().catch(console.error);
+    setTimeout(() => {
+      setState({ open: false });
+    }, 3e3);
+  };
+  if (donation.error) {
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(donation.error) });
+  }
+  if (donation.loading || !donation.data) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: { width: "100%", minWidth: 300, maxWidth: 720 },
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: { xs: 1, sm: 2 },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: settings.appearance?.button?.size || "medium",
+            color: settings.appearance?.button?.color || "primary",
+            variant: settings.appearance?.button?.variant || "contained",
+            onClick: () => setState({ open: true }),
+            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+              settings.appearance.button.icon,
+              typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: settings.appearance.button.text }) : settings.appearance.button.text
+            ] })
+          }
+        ),
+        supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
+        supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data }),
+        /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: state.open,
+            title: settings.title,
+            maxWidth: "md",
+            showCloseButton: true,
+            disableBackdropClick: true,
+            disableEscapeKeyDown: true,
+            onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
+            children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, mt: -2 }, children: /* @__PURE__ */ jsx(
+              CheckoutForm,
+              {
+                id: donation.data.id,
+                onPaid: handlePaid,
+                onError,
+                action: settings.appearance?.button?.text,
+                mode: "inline"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+CheckoutDonate.defaultProps = {
+  livemode: true
+};

package/es/checkout/form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;
@@ -9,6 +9,7 @@ declare namespace CheckoutForm {
             (message?: any, ...optionalParams: any[]): void;
         };
         mode: string;
+        action: string;
         extraParams: {};
     };
 }

package/es/checkout/form.js

@@ -21,7 +21,16 @@ const fetchCheckoutSession = async (id) => {
   const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
   return data;
 };
-export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams }) {
+export default function CheckoutForm({
+  id,
+  mode,
+  onPaid,
+  onError,
+  onChange,
+  goBack,
+  extraParams,
+  action
+}) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
   }
@@ -62,7 +71,8 @@ export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBa
       onError: handleError,
       onChange,
       goBack,
-      mode
+      mode,
+      action
     }
   );
 }
@@ -70,5 +80,6 @@ CheckoutForm.defaultProps = {
   onPaid: noop,
   onError: console.error,
   mode: "inline",
+  action: "",
   extraParams: {}
 };

package/es/components/blockchain/tx.d.ts

@@ -4,10 +4,12 @@ declare function TxLink(props: {
     details: PaymentDetails;
     method: TPaymentMethod;
     mode?: 'customer' | 'dashboard';
+    align?: 'left' | 'right';
 }): import("react").JSX.Element;
 declare namespace TxLink {
     var defaultProps: {
         mode: string;
+        align: string;
     };
 }
 export default TxLink;

package/es/components/blockchain/tx.js

@@ -4,7 +4,8 @@ import { OpenInNewOutlined } from "@mui/icons-material";
 import { Link, Stack, Typography } from "@mui/material";
 import { getTxLink } from "../../util.js";
 TxLink.defaultProps = {
-  mode: "dashboard"
+  mode: "dashboard",
+  align: "left"
 };
 export default function TxLink(props) {
   const { t } = useLocaleContext();
@@ -13,10 +14,20 @@ export default function TxLink(props) {
   }
   const { text, link } = getTxLink(props.method, props.details);
   if (link) {
-    return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(Stack, { component: "span", direction: "row", alignItems: "center", spacing: 1, children: [
-      /* @__PURE__ */ jsx(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text }),
-      /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
-    ] }) });
+    return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        component: "span",
+        direction: "row",
+        alignItems: "center",
+        justifyContent: props.align === "left" ? "flex-start" : "flex-end",
+        spacing: 1,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text }),
+          /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
+        ]
+      }
+    ) });
   }
   return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: t("common.none") });
 }

package/es/index.d.ts

@@ -1,4 +1,5 @@
 import api from './api';
+import CheckoutDonate from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
 import TxLink from './components/blockchain/tx';
@@ -23,4 +24,4 @@ import PaymentSummary from './payment/summary';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };

package/es/index.js

@@ -1,4 +1,5 @@
 import api from "./api.js";
+import CheckoutDonate from "./checkout/donate.js";
 import CheckoutForm from "./checkout/form.js";
 import CheckoutTable from "./checkout/table.js";
 import TxLink from "./components/blockchain/tx.js";
@@ -36,6 +37,7 @@ export {
   ConfirmDialog,
   CheckoutForm,
   CheckoutTable,
+  CheckoutDonate,
   CurrencySelector,
   Payment,
   PaymentSummary,

package/es/locales/en.js

@@ -87,6 +87,7 @@ export default flat({
       try: "Try for free",
       include: "This includes:",
       subscription: "Subscribe",
+      donate: "Donate",
       select: "Select",
       selected: "Selected",
       noPricing: "No items to purchase",
@@ -102,6 +103,12 @@ export default flat({
         title: "Staking Required",
         tooltip: "Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription."
       },
+      donation: {
+        between: "Please enter an amount between {min} and {max}.",
+        custom: "Custom Amount",
+        select: "Select Amount",
+        summary: "{total} supporters"
+      },
       cardPay: "{action} with card",
       empty: "No thing to pay",
       per: "per",
@@ -117,6 +124,7 @@ export default flat({
         payment: "Thanks for your purchase",
         subscription: "Thanks for your subscribing",
         setup: "Thanks for your subscribing",
+        donate: "Thanks for your support",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
       confirm: "By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.",

package/es/locales/zh.js

@@ -87,6 +87,7 @@ export default flat({
       try: "\u514D\u8D39\u8BD5\u7528",
       include: "\u5305\u62EC\uFF1A",
       subscription: "\u8BA2\u9605",
+      donate: "\u6350\u8D60",
       select: "\u9009\u62E9",
       selected: "\u5DF2\u9009",
       noPricing: "\u6CA1\u6709\u53EF\u8D2D\u4E70\u7684\u7269\u54C1",
@@ -102,6 +103,12 @@ export default flat({
         title: "\u8D28\u62BC\u6570\u91CF",
         tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
       },
+      donation: {
+        between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
+        custom: "\u8F93\u5165\u91D1\u989D",
+        select: "\u9009\u62E9\u91D1\u989D",
+        summary: "\u5DF2\u7ECF\u6709 {total} \u4EBA\u652F\u6301"
+      },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
@@ -117,6 +124,7 @@ export default flat({
         payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",
         subscription: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
         setup: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
+        donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
         tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
       confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",

package/es/payment/error.d.ts

@@ -3,11 +3,13 @@ type Props = {
     title: string;
     description: string;
     button?: string;
+    mode?: string;
 };
-declare function PaymentError({ title, description, button }: Props): import("react").JSX.Element;
+declare function PaymentError({ title, description, button, mode }: Props): import("react").JSX.Element;
 declare namespace PaymentError {
     var defaultProps: {
         button: string;
+        mode: string;
     };
 }
 export default PaymentError;

package/es/payment/error.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Link, Stack, Typography } from "@mui/material";
-export default function PaymentError({ title, description, button }) {
-  return /* @__PURE__ */ jsx(Stack, { sx: { height: "100vh" }, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
+export default function PaymentError({ title, description, button, mode }) {
+  return /* @__PURE__ */ jsx(Stack, { sx: { height: mode === "inline" ? "auto" : "100vh" }, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
     /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", component: Link, href: window.blocklet?.appUrl, children: button })
   ] }) });
 }
 PaymentError.defaultProps = {
-  button: "Back"
+  button: "Back",
+  mode: "standalone"
 };

package/es/payment/form/currency.js

@@ -5,6 +5,7 @@ export default function CurrencySelector({ value, currencies, onChange }) {
   return /* @__PURE__ */ jsx(
     Root,
     {
+      count: currencies.length,
       style: {
         display: currencies.length > 1 ? "grid" : "block",
         gridTemplateColumns: "50% 50%",
@@ -35,9 +36,9 @@ export default function CurrencySelector({ value, currencies, onChange }) {
 const Root = styled("section")`
   .cko-payment-card {
     position: relative;
-    border: 2px solid ${(props) => props.theme.palette.primary.main};
-    padding: 5px 10px;
-    margin: 5px 0;
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    padding: 4px 8px;
+    margin: 8px 0 0;
     cursor: pointer;
   }
 
@@ -52,18 +53,15 @@ const Root = styled("section")`
   }
 
   .cko-payment-card-unselect {
-    border: 2px solid #ddd;
-    padding: 5px 10px;
-    margin: 5px 0;
+    border: 1px solid #ddd;
+    padding: 4px 8px;
+    margin: 8px 0 0;
     cursor: pointer;
   }
 
-  .cko-payment-card:nth-child(odd) {
-    margin-right: 8px;
-  }
-
+  .cko-payment-card:nth-child(odd),
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 8px;
+    margin-right: ${(props) => props.count > 1 ? 8 : 0}px;
   }
 
   .cko-payment-card::after {
@@ -73,7 +71,7 @@ const Root = styled("section")`
     position: absolute;
     right: 3px;
     bottom: 3px;
-    border: 2px solid #fff;
+    border: 1px solid #fff;
     border-top-color: transparent;
     border-left-color: transparent;
     transform: rotate(35deg);

package/es/payment/form/index.d.ts

@@ -2,7 +2,7 @@
 import 'react-international-phone/style.css';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 type PageData = CheckoutContext & CheckoutCallbacks;
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, customer, onPaid, onError, mode, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, mode, action, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {};
 }

package/es/payment/form/index.js

@@ -44,10 +44,12 @@ export default function PaymentForm({
   checkoutSession,
   paymentMethods,
   paymentIntent,
+  paymentLink,
   customer,
   onPaid,
   onError,
-  mode
+  mode,
+  action
 }) {
   const theme = useTheme();
   const { t } = useLocaleContext();
@@ -94,7 +96,17 @@ 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}`) });
+  let buttonText = "";
+  if (paymentLink?.donation_settings) {
+    if (action) {
+      buttonText = action;
+    } else {
+      buttonText = t("payment.checkout.donate");
+    }
+  } else {
+    buttonText = t(`payment.checkout.${checkoutSession.mode}`);
+  }
+  buttonText = session?.user ? buttonText : t("payment.checkout.connect", { action: buttonText });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
   const handleConnected = async () => {
     try {
@@ -287,7 +299,7 @@ export default function PaymentForm({
     ] }) }),
     /* @__PURE__ */ jsx(AddressForm, { mode: checkoutSession.billing_address_collection, stripe: method?.type === "stripe" }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { mb: 2, color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.method") }),
+      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.method") }),
       /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
         Controller,
         {

package/es/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;