@blocklet/payment-react 1.13.210 → 1.13.212

package/lib/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/lib/checkout/donate.js

@@ -0,0 +1,284 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CheckoutDonate;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _unionBy = _interopRequireDefault(require("lodash/unionBy"));
+var _react = require("react");
+var _api = _interopRequireDefault(require("../api"));
+var _tx = _interopRequireDefault(require("../components/blockchain/tx"));
+var _util = require("../util");
+var _form = _interopRequireDefault(require("./form"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const donationCache = {};
+const createOrUpdateDonation = (settings, livemode = true) => {
+  if (!donationCache[settings.target]) {
+    donationCache[settings.target] = _api.default.post(`/api/donations?livemode=${livemode}`, (0, _omit.default)(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.default.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
+  } = (0, _context.useLocaleContext)();
+  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    sx: {
+      ".MuiAvatar-root": {
+        width: "32px",
+        height: "32px"
+      }
+    },
+    gap: {
+      xs: 0.5,
+      sm: 1
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "p",
+      color: "text.secondary",
+      children: t("payment.checkout.donation.summary", {
+        total
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+      total,
+      max: 20,
+      children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    sx: {
+      width: "100%"
+    },
+    gap: {
+      xs: 0.5,
+      sm: 1
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "p",
+      color: "text.secondary",
+      children: t("payment.checkout.donation.summary", {
+        total
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Table, {
+      size: "small",
+      sx: {
+        width: "100%",
+        overflow: "hidden"
+      },
+      children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.TableRow, {
+        sx: {
+          "> td": {
+            padding: "8px 16px 8px 0",
+            borderTop: "1px solid #e0e0e0",
+            borderBottom: "1px solid #e0e0e0"
+          }
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.5,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+              smDown: true,
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                children: x.customer?.name
+              })
+            })]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            spacing: 0.5,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              fontWeight: 500,
+              component: "strong",
+              children: (0, _util.formatAmount)(x.amount_total, currency.decimal)
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "span",
+              children: currency.symbol
+            })]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+          smDown: true,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "right",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: (0, _util.formatDateTime)(x.created_at)
+            })
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+          align: "right",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
+            method,
+            details: x.payment_details,
+            mode: "customer",
+            align: "right"
+          })
+        })]
+      }, x.id))
+    })]
+  });
+}
+function CheckoutDonate({
+  settings,
+  livemode,
+  onPaid,
+  onError
+}) {
+  const [state, setState] = (0, _ahooks.useSetState)({
+    open: false,
+    supporterLoaded: false,
+    exist: false
+  });
+  const donation = (0, _ahooks.useRequest)(() => createOrUpdateDonation(settings, livemode));
+  const supporters = (0, _ahooks.useRequest)(() => donation.data ? fetchSupporters(donation.data.id) : Promise.resolve({}));
+  (0, _react.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__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "error",
+      children: (0, _util.formatError)(donation.error)
+    });
+  }
+  if (donation.loading || !donation.data) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      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: settings.appearance?.button?.size || "medium",
+      color: settings.appearance?.button?.color || "primary",
+      variant: settings.appearance?.button?.variant || "contained",
+      onClick: () => setState({
+        open: true
+      }),
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: settings.appearance.button.text
+        }) : settings.appearance.button.text]
+      })
+    }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
+      ...supporters.data
+    }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
+      ...supporters.data
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
+      open: state.open,
+      title: settings.title,
+      maxWidth: "md",
+      showCloseButton: true,
+      disableBackdropClick: true,
+      disableEscapeKeyDown: true,
+      onClose: (e, reason) => setState({
+        open: reason === "backdropClick"
+      }),
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mb: 1,
+          mt: -2
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
+          id: donation.data.id,
+          onPaid: handlePaid,
+          onError,
+          action: settings.appearance?.button?.text,
+          mode: "inline"
+        })
+      })
+    })]
+  });
+}
+CheckoutDonate.defaultProps = {
+  livemode: true
+};

package/lib/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/lib/checkout/form.js

@@ -37,7 +37,8 @@ function CheckoutForm({
   onError,
   onChange,
   goBack,
-  extraParams
+  extraParams,
+  action
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
@@ -81,12 +82,14 @@ function CheckoutForm({
     onError: handleError,
     onChange,
     goBack,
-    mode
+    mode,
+    action
   });
 }
 CheckoutForm.defaultProps = {
   onPaid: _noop.default,
   onError: console.error,
   mode: "inline",
+  action: "",
   extraParams: {}
 };

package/lib/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/lib/components/blockchain/tx.js

@@ -10,7 +10,8 @@ var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _util = require("../../util");
 TxLink.defaultProps = {
-  mode: "dashboard"
+  mode: "dashboard",
+  align: "left"
 };
 function TxLink(props) {
   const {
@@ -36,6 +37,7 @@ function TxLink(props) {
         component: "span",
         direction: "row",
         alignItems: "center",
+        justifyContent: props.align === "left" ? "flex-start" : "flex-end",
         spacing: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "span",

package/lib/components/safe-guard.d.ts

@@ -0,0 +1,3 @@
+export default function SafeGuard({ children }: {
+    children: any;
+}): any;

package/lib/components/safe-guard.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = SafeGuard;
+var _util = require("../util");
+function SafeGuard({
+  children
+}) {
+  return (0, _util.isPaymentKitMounted)() ? children : null;
+}

package/lib/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';
@@ -6,6 +7,7 @@ import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
+import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
@@ -23,4 +25,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, SafeGuard, };

package/lib/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   api: true,
+  CheckoutDonate: true,
   CheckoutForm: true,
   CheckoutTable: true,
   TxLink: true,
@@ -12,6 +13,7 @@ var _exportNames = {
   FormInput: true,
   Livemode: true,
   PricingTable: true,
+  SafeGuard: true,
   Status: true,
   Switch: true,
   dayjs: true,
@@ -41,6 +43,12 @@ Object.defineProperty(exports, "Amount", {
     return _amount.default;
   }
 });
+Object.defineProperty(exports, "CheckoutDonate", {
+  enumerable: true,
+  get: function () {
+    return _donate.default;
+  }
+});
 Object.defineProperty(exports, "CheckoutForm", {
   enumerable: true,
   get: function () {
@@ -125,6 +133,12 @@ Object.defineProperty(exports, "ProductSkeleton", {
     return _productSkeleton.default;
   }
 });
+Object.defineProperty(exports, "SafeGuard", {
+  enumerable: true,
+  get: function () {
+    return _safeGuard.default;
+  }
+});
 Object.defineProperty(exports, "Status", {
   enumerable: true,
   get: function () {
@@ -174,6 +188,7 @@ Object.defineProperty(exports, "translations", {
   }
 });
 var _api = _interopRequireDefault(require("./api"));
+var _donate = _interopRequireDefault(require("./checkout/donate"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
 var _tx = _interopRequireDefault(require("./components/blockchain/tx"));
@@ -181,6 +196,7 @@ var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
 var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));
+var _safeGuard = _interopRequireDefault(require("./components/safe-guard"));
 var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
 var _dayjs = _interopRequireDefault(require("./dayjs"));

package/lib/locales/en.js

@@ -94,6 +94,7 @@ module.exports = (0, _flat.default)({
       try: "Try for free",
       include: "This includes:",
       subscription: "Subscribe",
+      donate: "Donate",
       select: "Select",
       selected: "Selected",
       noPricing: "No items to purchase",
@@ -109,6 +110,12 @@ module.exports = (0, _flat.default)({
         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",
@@ -124,6 +131,7 @@ module.exports = (0, _flat.default)({
         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/lib/locales/zh.js

@@ -94,6 +94,7 @@ module.exports = (0, _flat.default)({
       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",
@@ -109,6 +110,12 @@ module.exports = (0, _flat.default)({
         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",
@@ -124,6 +131,7 @@ module.exports = (0, _flat.default)({
         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/lib/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/lib/payment/error.js

@@ -9,11 +9,12 @@ var _material = require("@mui/material");
 function PaymentError({
   title,
   description,
-  button
+  button,
+  mode
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
     sx: {
-      height: "100vh"
+      height: mode === "inline" ? "auto" : "100vh"
     },
     alignItems: "center",
     justifyContent: "center",
@@ -48,5 +49,6 @@ function PaymentError({
   });
 }
 PaymentError.defaultProps = {
-  button: "Back"
+  button: "Back",
+  mode: "standalone"
 };

package/lib/payment/form/currency.js

@@ -13,6 +13,7 @@ function CurrencySelector({
   onChange
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+    count: currencies.length,
     style: {
       display: currencies.length > 1 ? "grid" : "block",
       gridTemplateColumns: "50% 50%",
@@ -60,9 +61,9 @@ function CurrencySelector({
 const Root = (0, _system.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;
   }
 
@@ -77,18 +78,15 @@ const Root = (0, _system.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 {
@@ -98,7 +96,7 @@ const Root = (0, _system.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/lib/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/lib/payment/form/index.js

@@ -53,10 +53,12 @@ function PaymentForm({
   checkoutSession,
   paymentMethods,
   paymentIntent,
+  paymentLink,
   customer,
   onPaid,
   onError,
-  mode
+  mode,
+  action
 }) {
   const theme = (0, _Theme.useTheme)();
   const {
@@ -116,8 +118,18 @@ function PaymentForm({
     return false;
   }, [domSize, theme]);
   const payee = (0, _util.getStatementDescriptor)(checkoutSession.line_items);
-  const buttonText = session?.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", {
-    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 () => {
@@ -369,7 +381,7 @@ function PaymentForm({
         className: "cko-payment-methods",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
-            mb: 2,
+            mb: 1,
             color: "text.primary",
             fontWeight: 600
           },