@blocklet/payment-react 1.14.21 → 1.14.22

package/es/checkout/donate.d.ts

@@ -20,8 +20,9 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     inlineOptions?: {
         button?: ButtonType;
     };
+    customTheme?: boolean;
 };
-declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions, }: DonateProps): import("react").JSX.Element;
+declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;

package/es/checkout/donate.js

@@ -25,6 +25,7 @@ import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
 import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
 import CheckoutForm from "./form.js";
+import { PaymentThemeProvider } from "../theme/index.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
   if (!donationCache[settings.target]) {
@@ -210,15 +211,7 @@ function useDonation(settings, livemode = true, mode = "default") {
     setState
   };
 }
-export default function CheckoutDonate({
-  settings,
-  livemode,
-  timeout,
-  onPaid,
-  onError,
-  mode,
-  inlineOptions = {}
-}) {
+function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions = {} }) {
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -348,7 +341,7 @@ export default function CheckoutDonate({
         showCloseButton: true,
         disableEscapeKeyDown: true,
         onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
-        children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, mt: -2, height: "100%" }, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, height: "100%" }, children: /* @__PURE__ */ jsx(
           CheckoutForm,
           {
             id: donation.data?.id,
@@ -362,6 +355,12 @@ export default function CheckoutDonate({
     )
   ] });
 }
+export default function CheckoutDonate(props) {
+  if (props.customTheme) {
+    return /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props });
+  }
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props }) });
+}
 CheckoutDonate.defaultProps = {
   livemode: true,
   timeout: 5e3,

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, action, }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, customTheme, }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;

package/es/checkout/form.js

@@ -6,6 +6,7 @@ import { joinURL } from "ufo";
 import api from "../libs/api.js";
 import { getPrefix, mergeExtraParams } from "../libs/util.js";
 import Payment from "../payment/index.js";
+import { PaymentThemeProvider } from "../theme/index.js";
 const promises = {};
 const startFromPaymentLink = (id, params) => {
   if (!promises[id]) {
@@ -29,7 +30,8 @@ export default function CheckoutForm({
   onChange,
   goBack,
   extraParams,
-  action
+  action,
+  customTheme = false
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
@@ -57,6 +59,26 @@ export default function CheckoutForm({
     setState({ appError: err });
     onError?.(err);
   };
+  if (!customTheme) {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(
+      Payment,
+      {
+        checkoutSession: data?.checkoutSession,
+        paymentMethods: data?.paymentMethods,
+        paymentIntent: data?.paymentIntent,
+        paymentLink: data?.paymentLink,
+        customer: data?.customer,
+        completed: state.completed,
+        error: apiError || state.appError,
+        onPaid: handlePaid,
+        onError: handleError,
+        onChange,
+        goBack,
+        mode,
+        action
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsx(
     Payment,
     {

package/es/checkout/table.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;
+export default function CheckoutTable(props: CheckoutProps): import("react").JSX.Element;

package/es/checkout/table.js

@@ -10,6 +10,7 @@ import PricingTable from "../components/pricing-table.js";
 import api from "../libs/api.js";
 import { mergeExtraParams } from "../libs/util.js";
 import CheckoutForm from "./form.js";
+import { PaymentThemeProvider } from "../theme/index.js";
 const fetchData = async (id) => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
   return data;
@@ -20,7 +21,7 @@ const ensureProtocol = (url) => {
   }
   return url;
 };
-export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }) {
+function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams, goBack }) {
   if (!id.startsWith("prctbl_")) {
     throw new Error("A valid pricing table id is required.");
   }
@@ -109,3 +110,9 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
     }
   ) });
 }
+export default function CheckoutTable(props) {
+  if (props.customTheme) {
+    return /* @__PURE__ */ jsx(CheckoutTableInner, { ...props });
+  }
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutTableInner, { ...props }) });
+}

package/es/components/blockchain/tx.js

@@ -21,9 +21,10 @@ export default function TxLink(props) {
         direction: "row",
         alignItems: "center",
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
+        sx: { color: "text.link" },
         spacing: 1,
         children: [
-          /* @__PURE__ */ jsx(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
+          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.link", children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
           /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
         ]
       }

package/es/components/country-select.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+import { CountryIso2 } from 'react-international-phone';
+export type CountrySelectProps = {
+    value: CountryIso2;
+    onChange: (value: CountryIso2) => void;
+    name: string;
+    sx?: SxProps;
+};
+declare function CountrySelect({ value, onChange, name, sx }: CountrySelectProps): JSX.Element;
+declare namespace CountrySelect {
+    var defaultProps: {
+        sx: {};
+    };
+}
+export default CountrySelect;

package/es/components/country-select.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, MenuItem, Select, Typography } from "@mui/material";
+import { useFormContext } from "react-hook-form";
+import { FlagEmoji, defaultCountries, parseCountry } from "react-international-phone";
+CountrySelect.defaultProps = {
+  sx: {}
+};
+export default function CountrySelect({ value, onChange, name, sx }) {
+  const { setValue } = useFormContext();
+  const countryDetail = useMemo(() => {
+    const item = defaultCountries.find((v) => v[1] === value);
+    return value && item ? parseCountry(item) : { name: "" };
+  }, [value]);
+  const onCountryChange = (e) => {
+    onChange(e.target.value);
+    setValue(name, e.target.value);
+  };
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      MenuProps: {
+        style: {
+          height: "300px",
+          top: "10px"
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        }
+      },
+      sx: {
+        width: "100%",
+        // Remove default outline (display only on focus)
+        fieldset: {
+          display: "none"
+        },
+        '&.Mui-focused:has(div[aria-expanded="false"])': {
+          fieldset: {
+            display: "block"
+          }
+        },
+        // Update default spacing
+        ".MuiSelect-select": {
+          padding: "8px",
+          paddingRight: "24px !important"
+        },
+        svg: {
+          right: 0
+        },
+        ".MuiMenuItem-root": {
+          justifyContent: "flex-start"
+          // 确保内容左对齐
+        },
+        ...sx
+      },
+      value,
+      onChange: onCountryChange,
+      renderValue: (code) => {
+        return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexWrap: "nowrap", gap: 0.5, sx: { cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
+          /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name })
+        ] });
+      },
+      children: defaultCountries.map((c) => {
+        const parsed = parseCountry(c);
+        return /* @__PURE__ */ jsxs(MenuItem, { value: parsed.iso2, children: [
+          /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
+          /* @__PURE__ */ jsx(Typography, { marginRight: "8px", children: parsed.name }),
+          /* @__PURE__ */ jsxs(Typography, { color: "gray", children: [
+            "+",
+            parsed.dialCode
+          ] })
+        ] }, parsed.iso2);
+      })
+    }
+  );
+}

package/es/components/input.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
 import { RegisterOptions } from 'react-hook-form';
-type InputProps = TextFieldProps & {
+declare const FormInput: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
     name: string;
-    label?: string;
-    placeholder?: string;
-    errorPosition?: 'right' | 'bottom';
-    rules?: RegisterOptions;
-    wrapperStyle?: React.CSSProperties;
-};
-export declare function FormInputError({ error }: {
-    error: string;
-}): import("react").JSX.Element;
-declare function FormInput({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }: InputProps): import("react").JSX.Element;
-declare namespace FormInput {
-    var defaultProps: {
-        label: string;
-        placeholder: string;
-        errorPosition: string;
-        rules: {};
-        wrapperStyle: {};
-    };
-}
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "right" | "bottom" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
+    name: string;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "right" | "bottom" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
+    name: string;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "right" | "bottom" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export default FormInput;

package/es/components/input.js

@@ -1,7 +1,49 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import { Box, FormLabel, InputAdornment, TextField, Typography } from "@mui/material";
 import get from "lodash/get";
 import { Controller, useFormContext } from "react-hook-form";
+function FormInputError({ error }) {
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
+}
+const FormInput = forwardRef(
+  ({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }, ref) => {
+    const { control, formState } = useFormContext();
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => {
+      return inputRef.current;
+    });
+    const error = get(formState.errors, name)?.message;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control,
+        rules,
+        render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
+          !!label && /* @__PURE__ */ jsx(FormLabel, { sx: { color: "text.primary" }, children: label }),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              error: !!get(formState.errors, name),
+              helperText: errorPosition === "bottom" && error ? error : "",
+              placeholder,
+              size: "small",
+              ...field,
+              ...rest,
+              inputRef,
+              InputProps: Object.assign(
+                rest.InputProps || {},
+                errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
 FormInput.defaultProps = {
   label: "",
   placeholder: "",
@@ -9,45 +51,4 @@ FormInput.defaultProps = {
   rules: {},
   wrapperStyle: {}
 };
-export function FormInputError({ error }) {
-  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
-}
-export default function FormInput({
-  name,
-  label,
-  placeholder,
-  rules,
-  errorPosition,
-  wrapperStyle,
-  ...rest
-}) {
-  const { control, formState } = useFormContext();
-  const error = get(formState.errors, name)?.message;
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      rules,
-      render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
-        !!label && /* @__PURE__ */ jsx(FormLabel, { children: label }),
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            fullWidth: true,
-            error: !!get(formState.errors, name),
-            helperText: errorPosition === "bottom" && error ? error : "",
-            placeholder,
-            size: "small",
-            ...field,
-            ...rest,
-            InputProps: Object.assign(
-              rest.InputProps || {},
-              errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
-            )
-          }
-        )
-      ] })
-    }
-  );
-}
+export default FormInput;

package/es/components/livemode.js

@@ -8,6 +8,7 @@ export default function Livemode({ color, backgroundColor, sx }) {
     {
       label: t("common.livemode"),
       size: "small",
+      color: "warning",
       sx: {
         ml: 2,
         height: 18,

package/es/components/pricing-table.js

@@ -254,7 +254,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                                 color: "text.primary",
                                 fontWeight: 600,
                                 sx: {
-                                  color: "#4B5563",
                                   fontSize: "18px !important",
                                   fontWeight: "600"
                                 },
@@ -288,7 +287,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                               color: "text.secondary",
                               sx: {
                                 marginTop: "0px !important",
-                                color: "#4b5563",
                                 fontWeight: "400",
                                 fontSize: "16px",
                                 textAlign: "left"

package/es/components/status.js

@@ -5,14 +5,13 @@ export default function Status(props) {
     Chip,
     {
       size: "small",
-      variant: "outlined",
+      variant: "filled",
       ...props,
       sx: {
         ...props.sx || {},
         borderRadius: "4px",
         height: 20,
-        textTransform: "capitalize",
-        marginRight: "10px"
+        textTransform: "capitalize"
       }
     }
   );

package/es/components/table.d.ts

@@ -0,0 +1,2 @@
+declare const Table: any;
+export default Table;

package/es/components/table.js

@@ -0,0 +1,186 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import Empty from "@arcblock/ux/lib/Empty";
+import Datatable from "@arcblock/ux/lib/Datatable";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { styled } from "@mui/system";
+import { useMobile } from "../hooks/mobile.js";
+function EmptyStub() {
+  return null;
+}
+const Table = React.memo(
+  ({ options, columns, toolbar = true, footer = true, hasRowLink = false, emptyNodeText = "", ...rest }) => {
+    const { locale, t } = useLocaleContext();
+    const { isMobile } = useMobile();
+    const defaultOptions = {
+      print: false,
+      download: false,
+      filter: false,
+      selectableRows: "none",
+      rowsPerPage: 10,
+      rowsPerPageOptions: [10, 20, 50, 100],
+      searchDebounceTime: 300,
+      tableBodyHeight: "100%",
+      loading: true
+    };
+    const components = {};
+    if (!toolbar) {
+      components.TableToolbar = EmptyStub;
+    }
+    if (!footer) {
+      components.TableFooter = EmptyStub;
+    }
+    return /* @__PURE__ */ jsx(
+      Wrapped,
+      {
+        locale,
+        options: { ...defaultOptions, ...options },
+        columns: columns.map((x) => {
+          x.options = x.options || {};
+          x.options.filter = x.options.filter || false;
+          x.options.sort = x.options.sort || false;
+          return x;
+        }),
+        emptyNode: /* @__PURE__ */ jsx(Empty, { children: emptyNodeText || t("empty.records") }),
+        ...rest,
+        components,
+        hasRowLink,
+        isMobile
+      }
+    );
+  }
+);
+const Wrapped = styled(Datatable)`
+  ${(props) => props.hasRowLink ? `.MuiTableCell-root {
+    font-size: 1rem !important;
+  }` : ""}
+  .MuiPaper-root {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  table.MuiTable-root {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+    overflow: hidden;
+  }
+  [class*='MUIDataTable-responsiveBase'] {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+  }
+
+  th.MuiTableCell-head {
+    padding: 8px 16px 8px 16px;
+    text-transform: inherit;
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+    border-bottom: none;
+    &:first-of-type {
+      border-top-left-radius: 8px;
+      padding-left: 20px;
+    }
+    &:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+
+  tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
+    background: #f5f5f5;
+  }
+  tr.MuiTableRow-root:last-of-type td:first-of-type {
+    border-bottom-left-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:last-of-type td:last-of-type {
+    border-bottom-right-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:nth-of-type(even) {
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+  }
+  td.MuiTableCell-root {
+    border-bottom: none;
+    &:first-of-type {
+      padding-left: 20px;
+    }
+    &.MuiTableCell-footer {
+      border: none;
+    }
+  }
+
+  .datatable-footer {
+    .MuiTableRow-root.MuiTableRow-footer {
+      border: none;
+    }
+    table.MuiTable-root {
+      outline: none;
+      overflow: hidden;
+    }
+    .MuiTablePagination-input {
+      background: none;
+    }
+    div.MuiSelect-select {
+      padding: 0 24px 0 0;
+    }
+  }
+
+  th a,
+  td a {
+    text-decoration: none;
+    display: block;
+    color: inherit;
+    &:first-of-type {
+      padding-left: 0;
+    }
+  }
+
+  > div {
+    overflow: auto;
+  }
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    th a,
+    td a {
+      text-decoration: none;
+      display: block;
+      color: inherit;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+    }
+    tr.MuiTableRow-root {
+      border: none;
+      padding: 20px;
+      display: block;
+    }
+    td.MuiTableCell-root:first-of-type {
+      padding-left: 0;
+      margin-top: 0;
+    }
+    td.MuiTableCell-root {
+      margin: 0;
+      margin-top: 8px;
+      align-items: center;
+      padding: 0;
+      flex-wrap: wrap;
+      flex-direction: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection || "row"};
+      align-items: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "column" ? "flex-start" : "center"};
+      justify-content: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "column" ? "flex-start" : "space-between"};
+    }
+    td.MuiTableCell-root > div {
+      margin-bottom: 4px;
+    }
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      display: flex;
+      flex-direction: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection || "row"};
+      align-items: flex-start;
+      justify-content: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "row" ? "space-between" : "flex-start"};
+      flex-wrap: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "row" ? "nowrap" : "wrap"};
+      word-break: break-all;
+      &.datatables-noprint {
+        justify-content: center;
+      }
+    }
+    [class*='MUIDataTable-responsiveBase'] tr:not([class*='responsiveSimple']) td.MuiTableCell-body > div {
+      width: inherit;
+    }
+  }
+`;
+export default Table;

package/es/contexts/payment.d.ts

@@ -18,6 +18,8 @@ export type PaymentContextType = {
     getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
     setLivemode: (livemode: boolean) => void;
     api: Axios;
+    payable: boolean;
+    setPayable: (status: boolean) => void;
 };
 export type PaymentContextProps = {
     session: import('@arcblock/did-connect/lib/types').SessionContext['session'];

package/es/contexts/payment.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Alert } from "@mui/material";
 import { useLocalStorageState, useRequest } from "ahooks";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 import api from "../libs/api.js";
 import { getPrefix } from "../libs/util.js";
 const PaymentContext = createContext({ api });
@@ -24,6 +24,7 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
   const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
   const prefix = getPrefix();
+  const [payable, setPayable] = useState(true);
   if (error) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
@@ -43,7 +44,9 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
         getMethod: (methodId) => getMethod(methodId, data.paymentMethods),
         refresh: run,
         setLivemode,
-        api
+        api,
+        payable,
+        setPayable
       },
       children
     }