@dmsi/wedgekit-react 0.0.136 → 0.0.137

package/dist/components/index.cjs

@@ -4232,7 +4232,7 @@ var import_react20 = require("react");
 var import_clsx27 = __toESM(require("clsx"), 1);
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function Accordion(props) {
-  const { isOpen, onClick, className } = props;
+  const { isOpen, onClick, className, disabled } = props;
   const {
     title,
     before,
@@ -4257,7 +4257,8 @@ function Accordion(props) {
     Card,
     {
       className: (0, import_clsx27.default)(
-        "overflow-hidden select-none cursor-pointer",
+        "overflow-hidden select-none",
+        { "cursor-pointer": !disabled },
         className
       ),
       selected: isOpen,
@@ -4424,8 +4425,117 @@ function HorizontalDivider({ id, hideOnMobile }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("hr", { id, className: (0, import_clsx29.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
-// src/components/SelectPaymentMethod.tsx
+// src/components/Spinner.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
+var Spinner = ({ size = "small" }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "svg",
+    {
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: size === "large" ? "animate-spin" : "",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/SelectPaymentMethod.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
     amountToPay,
@@ -4439,7 +4549,9 @@ function SelectPaymentMethod(props) {
     customerBanks,
     onPay,
     isPayLoading,
-    withCredits = false
+    withCredits = false,
+    isLoadingCCiframe,
+    cardPaymentUrl
   } = props;
   const payAllWithCredits = withCredits && amountToPay <= 0;
   (0, import_react20.useEffect)(() => {
@@ -4448,12 +4560,12 @@ function SelectPaymentMethod(props) {
     } else {
       onSelectMethod("ACHPayment");
     }
-  }, [payAllWithCredits]);
+  }, [onSelectMethod, payAllWithCredits]);
   function handleToggle(method) {
     onSelectMethod(method);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       CreditsSelector,
       {
         selectedCredits: selectedCredits || [],
@@ -4462,7 +4574,7 @@ function SelectPaymentMethod(props) {
         })
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ACHSelector,
       {
         selectedMethod,
@@ -4473,31 +4585,59 @@ function SelectPaymentMethod(props) {
         customerBanks: customerBanks || [],
         onPay,
         isPayLoading: isPayLoading || false,
-        disabled: payAllWithCredits
+        disabled: payAllWithCredits || !amountToPay
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Accordion,
       {
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Radio,
           {
             label: "Pay by Credit/Debit Card",
             checked: !payAllWithCredits && selectedMethod === "CCPayment",
             onChange: (e) => e.stopPropagation(),
-            disabled: amountToPay <= 0
+            disabled: payAllWithCredits || !amountToPay
           }
         ),
         onClick: () => {
-          if (payAllWithCredits) return;
+          if (payAllWithCredits || !amountToPay) return;
           handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
+        disabled: payAllWithCredits || !amountToPay,
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          Stack,
+          {
+            sizing: "layout-group",
+            width: "full",
+            items: "center",
+            justify: "center",
+            style: {
+              flex: 1
+            },
+            minHeight: 245,
+            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "iframe",
+              {
+                src: cardPaymentUrl,
+                style: { width: "100%", height: "100%", flex: 1 }
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Spinner, {})
+          }
+        )
+      }
+    ),
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      Button,
+      {
+        block: true,
+        onClick: onPay,
+        disabled: isPayLoading || amountToPay <= 0,
+        children: isPayLoading ? "Processing..." : "Submit Payment"
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" }),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -4515,12 +4655,12 @@ function ACHSelector(props) {
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Card,
     {
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
       selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
@@ -4543,22 +4683,22 @@ function CreditsSelector(props) {
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     Accordion,
     {
       isOpen,
       title: "Available Credits",
       onClick: () => setIsOpen((prev) => !prev),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HorizontalDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HorizontalDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Stack,
           {
             sizing: "layout-group",
             width: "full",
             overflowY: "auto",
             maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               Stack,
               {
                 horizontal: true,
@@ -4566,14 +4706,14 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Stack,
                     {
                       sizing: "layout-group",
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
                       flexGrow: 1,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                         Checkbox,
                         {
                           label: credits.InvoiceNumber,
@@ -4583,7 +4723,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`
@@ -4601,9 +4741,17 @@ function CreditsSelector(props) {
 }
 
 // src/components/PaymentOnAccountModal.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function PaymentOnAccountModal(props) {
-  const { isOpen, paymentProps, onClose, onAmountChange } = props;
+  const {
+    isOpen,
+    paymentProps,
+    onClose,
+    onAmountChange,
+    cardPaymentUrl,
+    setCardPaymentUrl,
+    isLoadingCCiframe
+  } = props;
   const [amount, setAmount] = (0, import_react21.useState)(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } = paymentProps;
   (0, import_react21.useEffect)(() => {
@@ -4630,17 +4778,17 @@ function PaymentOnAccountModal(props) {
     }
     return 0;
   }, [creditCardSettings, amount, selectedMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
-    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Paragraph, { children: "Surcharge" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Paragraph, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Paragraph, { children: "Surcharge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Paragraph, { children: [
         "$",
         formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Input,
         {
           type: "number",
@@ -4652,10 +4800,13 @@ function PaymentOnAccountModal(props) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       SelectPaymentMethod,
       __spreadProps(__spreadValues({}, paymentProps), {
-        amountToPay: amount + creditCardSurcharge
+        amountToPay: amount + creditCardSurcharge,
+        cardPaymentUrl,
+        setCardPaymentUrl,
+        isLoadingCCiframe
       })
     )
   ] }) });

package/dist/components/index.js

@@ -6,8 +6,8 @@ import {
 } from "../chunk-Y4HUYAI5.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-DIMHNC5S.js";
-import "../chunk-EQQMFT5H.js";
+} from "../chunk-Z36QJ7ZF.js";
+import "../chunk-XCIBYDVK.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-D2YP2BTN.js";
 import "../chunk-4RJKB7LC.js";
@@ -15,6 +15,7 @@ import "../chunk-CG2NIXZE.js";
 import "../chunk-FWPJ73IK.js";
 import "../chunk-6UI5GABI.js";
 import "../chunk-4JLU7TAC.js";
+import "../chunk-4F6VQXKY.js";
 import "../chunk-J6LETUNM.js";
 import "../chunk-3ZUSYRI7.js";
 import {
@@ -53,7 +54,7 @@ import {
 } from "../chunk-O4M2GISS.js";
 import {
   Accordion
-} from "../chunk-XEUPUTYP.js";
+} from "../chunk-QTD7K43M.js";
 import "../chunk-EO3JJWFW.js";
 import {
   Card

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.136",
+  "version": "0.0.137",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Accordion.tsx

@@ -15,10 +15,11 @@ interface AccordionProps {
   after?: React.ReactNode;
   onClick?: () => void;
   className?: string;
+  disabled?: boolean;
 }
 
 export function Accordion(props: AccordionProps) {
-  const { isOpen, onClick, className } = props;
+  const { isOpen, onClick, className, disabled } = props;
   const {
     title,
     before,
@@ -43,7 +44,8 @@ export function Accordion(props: AccordionProps) {
   return (
     <Card
       className={clsx(
-        "overflow-hidden select-none cursor-pointer",
+        "overflow-hidden select-none",
+        { "cursor-pointer": !disabled },
         className,
       )}
       selected={isOpen}

package/src/components/PaymentOnAccountModal.tsx

@@ -15,9 +15,20 @@ type PaymentOnAccountModalProps = {
   onClose: () => void;
   paymentProps: SelectPaymentMethodProps;
   onAmountChange?: (amount: number) => void;
+  cardPaymentUrl: string | null;
+  setCardPaymentUrl: (url: string | null) => void;
+  isLoadingCCiframe?: boolean;
 };
 export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
-  const { isOpen, paymentProps, onClose, onAmountChange } = props;
+  const {
+    isOpen,
+    paymentProps,
+    onClose,
+    onAmountChange,
+    cardPaymentUrl,
+    setCardPaymentUrl,
+    isLoadingCCiframe,
+  } = props;
   const [amount, setAmount] = useState<number>(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } =
     paymentProps as typeof paymentProps & {
@@ -36,7 +47,7 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
     const inputValue = event.target.value.replace(/[^0-9.-]+/g, "");
     const value = +inputValue || 0;
     setAmount(value);
-    onAmountChange?.(value)
+    onAmountChange?.(value);
   }
 
   const creditCardSurcharge = useMemo(() => {
@@ -85,6 +96,9 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
         <SelectPaymentMethod
           {...paymentProps}
           amountToPay={amount + creditCardSurcharge}
+          cardPaymentUrl={cardPaymentUrl}
+          setCardPaymentUrl={setCardPaymentUrl}
+          isLoadingCCiframe={isLoadingCCiframe}
         />
       </Stack>
     </Modal>

package/src/components/SelectPaymentMethod.tsx

@@ -10,6 +10,7 @@ import { Checkbox } from "./Checkbox";
 import { Subheader } from "./Subheader";
 import { formatCurrencyDisplay } from "../utils/formatting";
 import { HorizontalDivider } from "./HorizontalDivider";
+import { Spinner } from "./Spinner";
 
 export type PaymentMethodType = "ACHPayment" | "CCPayment" | "CreditsOnly";
 export type CustomerBank = {
@@ -31,7 +32,10 @@ export type SelectPaymentMethodProps = {
   allInvoices?: unknown[];
   creditCardSettings?: unknown;
   withCredits?: boolean;
+  cardPaymentUrl?: string | null;
+  isLoadingCCiframe?: boolean;
 
+  setCardPaymentUrl?: (url: string | null) => void;
   onSelectMethod: (method: PaymentMethodType | null) => void;
   onPay: () => void;
   setSelectedCredits?: React.Dispatch<React.SetStateAction<unknown[]>>;
@@ -52,6 +56,8 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
     onPay,
     isPayLoading,
     withCredits = false,
+    isLoadingCCiframe,
+    cardPaymentUrl,
   } = props;
 
   const payAllWithCredits = withCredits && amountToPay <= 0;
@@ -62,7 +68,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
     } else {
       onSelectMethod("ACHPayment");
     }
-  }, [payAllWithCredits]);
+  }, [onSelectMethod, payAllWithCredits]);
 
   function handleToggle(method: PaymentMethodType | null) {
     onSelectMethod(method);
@@ -85,7 +91,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
           customerBanks={customerBanks || []}
           onPay={onPay}
           isPayLoading={isPayLoading || false}
-          disabled={payAllWithCredits}
+          disabled={payAllWithCredits || !amountToPay}
         />
       )}
       {allowedMethods?.includes("CCPayment") && (
@@ -96,22 +102,43 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
               label="Pay by Credit/Debit Card"
               checked={!payAllWithCredits && selectedMethod === "CCPayment"}
               onChange={(e) => e.stopPropagation()}
-              disabled={amountToPay <= 0}
+              disabled={payAllWithCredits || !amountToPay}
             />
           }
           onClick={() => {
-            if (payAllWithCredits) return;
+            if (payAllWithCredits || !amountToPay) return;
             handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
           }}
+          disabled={payAllWithCredits || !amountToPay}
         >
-          <Button className="w-full" onClick={onPay} disabled={isPayLoading}>
-            {isPayLoading ? "Processing..." : "Proceed to Payment"}
-          </Button>
+          <Stack
+            sizing="layout-group"
+            width="full"
+            items="center"
+            justify="center"
+            style={{
+              flex: 1,
+            }}
+            minHeight={245}
+          >
+            {!isLoadingCCiframe && cardPaymentUrl ? (
+              <iframe
+                src={cardPaymentUrl}
+                style={{ width: "100%", height: "100%", flex: 1 }}
+              />
+            ) : (
+              <Spinner />
+            )}
+          </Stack>
         </Accordion>
       )}
 
       {selectedMethod === "ACHPayment" && (
-        <Button block onClick={onPay} disabled={isPayLoading}>
+        <Button
+          block
+          onClick={onPay}
+          disabled={isPayLoading || amountToPay <= 0}
+        >
           {isPayLoading ? "Processing..." : "Submit Payment"}
         </Button>
       )}