@miden-npm/react 0.1.0 → 1.0.0

package/dist/index.cjs

@@ -106,17 +106,25 @@ function usePaymentIntents() {
 }
 
 // src/buzapay-checkout/checkout-button.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/utils/object.util.ts
 var checkObjectTruthy = (obj) => {
   if (obj == null || typeof obj !== "object") return false;
   return Object.values(obj).every(Boolean);
 };
+var getQueryParams = (url) => {
+  const params = {};
+  const searchParams = new URL(url).searchParams;
+  searchParams.forEach((value, key) => {
+    params[key] = value;
+  });
+  return params;
+};
 
 // src/utils/api.util.ts
 var getBaseUrl = (mode) => {
-  return mode === "sandbox" ? "https://sandbox-api.midencards.io/payment-gateway-api" : "";
+  return mode === "sandbox" ? "https://sandbox-api.buzapay.com/payment-gateway-api" : "";
 };
 
 // src/utils/string.util.ts
@@ -168,6 +176,246 @@ var restrictToNumericKeys = (event) => {
   }
 };
 
+// src/utils/error.util.ts
+var validateRegex = (value, regex) => regex.test(value);
+function parseRules(rules) {
+  if (!rules) return [];
+  return rules.split("|").map((chunk) => {
+    const [rule, val] = chunk.split(":");
+    return { rule, value: val };
+  });
+}
+function getValidationErrorMessage(rulesStr, inputValue, label) {
+  const errors = [];
+  const rules = parseRules(rulesStr);
+  const lowerLabel = (label || "This field").toLowerCase();
+  const v = inputValue ?? "";
+  const num = Number(v);
+  const hasNum = !Number.isNaN(num);
+  for (const r of rules) {
+    switch (r.rule) {
+      case "required":
+        if (!v) errors.push(`The ${lowerLabel} field is required`);
+        break;
+      case "alpha":
+        if (!validateRegex(v, /^[a-zA-Z]+$/))
+          errors.push(
+            `The ${lowerLabel} field must only contain alphabetic characters`
+          );
+        break;
+      case "at_least_one_uppercase":
+        if (!validateRegex(v, /.*[A-Z].*/))
+          errors.push(
+            `The ${lowerLabel} field must contain at least one uppercase character`
+          );
+        break;
+      case "at_least_one_lowercase":
+        if (!validateRegex(v, /.*[a-z].*/))
+          errors.push(
+            `The ${lowerLabel} field must contain at least one lowercase character`
+          );
+        break;
+      case "at_least_one_number":
+        if (!validateRegex(v, /.*\d.*/))
+          errors.push(
+            `The ${lowerLabel} field must contain at least one number`
+          );
+        break;
+      case "alpha_num":
+        if (!validateRegex(v, /^[a-z0-9]+$/i))
+          errors.push(
+            `The ${lowerLabel} field must only contain alphabetic characters and numbers`
+          );
+        break;
+      case "num_spaces":
+        if (!validateRegex(v, /^[0-9\s]+$/i))
+          errors.push(
+            `The ${lowerLabel} field must only contain space and numbers`
+          );
+        break;
+      case "alpha_spaces":
+        if (!validateRegex(v, /^[A-Za-z\s]*$/))
+          errors.push(
+            `The ${lowerLabel} field must only contain alphabetic characters and spaces`
+          );
+        break;
+      case "numeric":
+        if (!validateRegex(v, /^\d+$/))
+          errors.push(`The ${lowerLabel} field must only contain numbers`);
+        break;
+      case "no_special":
+        if (validateRegex(v, /[^a-zA-Z0-9\s]/))
+          errors.push(
+            `The ${lowerLabel} field must not contain special characters`
+          );
+        break;
+      case "at_least_one_special":
+        if (!validateRegex(v, /[^a-zA-Z0-9\s]/))
+          errors.push(
+            `The ${lowerLabel} field must contain at least one special character`
+          );
+        break;
+      case "email":
+        if (!validateRegex(v, /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/)) {
+          errors.push("Please enter a valid email address");
+        }
+        break;
+      case "is":
+        if (r.value !== v) errors.push(`Value entered must be ${r.value}`);
+        break;
+      case "is_not":
+        if (r.value === v) errors.push(`Value entered must not be ${r.value}`);
+        break;
+      case "char_length":
+        if (v.length !== Number(r.value))
+          errors.push(
+            `The ${lowerLabel} field must be ${r.value} characters long`
+          );
+        break;
+      case "min_char_length":
+        if (v.length < Number(r.value))
+          errors.push(
+            `The ${lowerLabel} field must not be less than ${r.value} characters long`
+          );
+        break;
+      case "max_char_length":
+        if (v.length > Number(r.value))
+          errors.push(
+            `The ${lowerLabel} field must not be greater than ${r.value} characters long`
+          );
+        break;
+      // Age rules treat the value as a number (strict numeric compare)
+      case "age":
+        if (!hasNum || num !== Number(r.value))
+          errors.push(`Age entered must be ${r.value}`);
+        break;
+      case "min_age":
+        if (!hasNum || num < Number(r.value))
+          errors.push(`Age entered must not be less than ${r.value}`);
+        break;
+      case "max_age":
+        if (!hasNum || num > Number(r.value))
+          errors.push(`Age entered must not be greater than ${r.value}`);
+        break;
+      // Numeric value rules (general numbers)
+      case "num_is":
+        if (!hasNum || num !== Number(r.value))
+          errors.push(`Number entered must be ${r.value}`);
+        break;
+      case "num_is_not":
+        if (hasNum && num === Number(r.value))
+          errors.push(`Number entered must not be ${r.value}`);
+        break;
+      case "min_number":
+        if (!hasNum || num < Number(r.value))
+          errors.push(`Number entered must not be less than ${r.value}`);
+        break;
+      case "max_number":
+        if (!hasNum || num > Number(r.value))
+          errors.push(`Number entered must not be greater than ${r.value}`);
+        break;
+      default:
+        break;
+    }
+  }
+  return errors.length > 0 ? errors[0] : null;
+}
+var validateGroup = (values, rulesMap, prettyLabels) => {
+  const out = {};
+  for (const [field, rules] of Object.entries(rulesMap)) {
+    if (!rules) continue;
+    const label = prettyLabels?.[field] ?? field;
+    const err = getValidationErrorMessage(rules, values[field] ?? "", label);
+    if (err) out[field] = err;
+  }
+  return out;
+};
+
+// src/utils/card-scheme.util.ts
+var CardSchemes = /* @__PURE__ */ ((CardSchemes2) => {
+  CardSchemes2[CardSchemes2["Visa"] = 1] = "Visa";
+  CardSchemes2[CardSchemes2["MasterCard"] = 2] = "MasterCard";
+  CardSchemes2[CardSchemes2["Verve"] = 3] = "Verve";
+  CardSchemes2[CardSchemes2["MastercardAndVisa"] = 4] = "MastercardAndVisa";
+  CardSchemes2[CardSchemes2["AmericanExpress"] = 5] = "AmericanExpress";
+  CardSchemes2[CardSchemes2["Discover"] = 6] = "Discover";
+  CardSchemes2[CardSchemes2["JCB"] = 7] = "JCB";
+  CardSchemes2[CardSchemes2["DinersClub"] = 8] = "DinersClub";
+  CardSchemes2[CardSchemes2["Maestro"] = 9] = "Maestro";
+  CardSchemes2[CardSchemes2["UnionPay"] = 10] = "UnionPay";
+  CardSchemes2[CardSchemes2["UnionPay3DS"] = 11] = "UnionPay3DS";
+  CardSchemes2[CardSchemes2["UnionPayNon3DS"] = 12] = "UnionPayNon3DS";
+  CardSchemes2[CardSchemes2["UATP"] = 13] = "UATP";
+  CardSchemes2[CardSchemes2["PayPak"] = 14] = "PayPak";
+  CardSchemes2[CardSchemes2["Jaywan"] = 15] = "Jaywan";
+  CardSchemes2[CardSchemes2["Mada"] = 16] = "Mada";
+  CardSchemes2[CardSchemes2["MadaVisa"] = 17] = "MadaVisa";
+  CardSchemes2[CardSchemes2["MadaMastercard"] = 18] = "MadaMastercard";
+  CardSchemes2[CardSchemes2["Unknown"] = 19] = "Unknown";
+  return CardSchemes2;
+})(CardSchemes || {});
+var VISA_RE = /^4\d{12}(\d{3}){0,2}$/;
+var MC_RE = /^(?:5[1-5]\d{14}|2(?:2(?:2[1-9]|[3-9]\d)|[3-6]\d{2}|7(?:[01]\d|20))\d{12})(?:\d{0,3})?$/;
+var AMEX_RE = /^(34|37)\d{13}$/;
+var DISCOVER_RE = /^(?:6011|65|64[4-9]|622(?:12[6-9]|1[3-9]\d|[2-8]\d{2}|9(?:0\d|1\d|2[0-5])))\d{12,15}$/;
+var JCB_RE = /^(?:35(?:2[8-9]|[3-8]\d))\d{12,15}$/;
+var DINERS_RE = /^(?:3(?:0[0-5]\d|095|6\d|[89]\d))\d{11,13}$/;
+var MAESTRO_RE = /^(?:50|5[6-9]|6[0-9])\d{10,17}$/;
+var UNIONPAY_RE = /^62\d{14,17}$/;
+var UATP_RE = /^1\d{14}$/;
+var VERVE_BIN6_RANGES = [
+  [506099, 506198],
+  [650002, 650027]
+];
+var VERVE_BIN6_SINGLES = /* @__PURE__ */ new Set([507865, 507866]);
+var PAYPAK_BIN6 = /* @__PURE__ */ new Set([220545, 220543]);
+var JAYWAN_BIN7 = /* @__PURE__ */ new Set([6690109]);
+var MADA_ONLY_BIN6 = /* @__PURE__ */ new Set([968209, 873646]);
+var MADA_VISA_BIN6 = /* @__PURE__ */ new Set([422818, 486094]);
+var MADA_MC_BIN6 = /* @__PURE__ */ new Set([529741, 543357]);
+var UNIONPAY_3DS_BIN6 = /* @__PURE__ */ new Set([620108]);
+var UNIONPAY_NON3DS_BIN6 = /* @__PURE__ */ new Set([621423]);
+function cardTypeHandler(cardNumber) {
+  const scheme = detect(cardNumber);
+  return CardSchemes[scheme];
+}
+function detect(cardNumber) {
+  if (!cardNumber || !cardNumber.trim()) return 19 /* Unknown */;
+  const digits = cardNumber.replace(/\D/g, "");
+  if (digits.length < 12 || digits.length > 19) return 19 /* Unknown */;
+  if (digits.length >= 6) {
+    const bin6 = parseInt(digits.slice(0, 6), 10);
+    if (MADA_ONLY_BIN6.has(bin6) && digits.length >= 16 && digits.length <= 19)
+      return 16 /* Mada */;
+    if (MADA_VISA_BIN6.has(bin6) && VISA_RE.test(digits)) return 17 /* MadaVisa */;
+    if (MADA_MC_BIN6.has(bin6) && MC_RE.test(digits)) return 18 /* MadaMastercard */;
+    if (PAYPAK_BIN6.has(bin6) && digits.length === 16) return 14 /* PayPak */;
+    if (UNIONPAY_3DS_BIN6.has(bin6) && UNIONPAY_RE.test(digits)) return 11 /* UnionPay3DS */;
+    if (UNIONPAY_NON3DS_BIN6.has(bin6) && UNIONPAY_RE.test(digits))
+      return 12 /* UnionPayNon3DS */;
+    if (isVerve(bin6, digits.length)) return 3 /* Verve */;
+  }
+  if (digits.length >= 7) {
+    const bin7 = parseInt(digits.slice(0, 7), 10);
+    if (JAYWAN_BIN7.has(bin7) && digits.length === 16) return 15 /* Jaywan */;
+  }
+  if (UATP_RE.test(digits)) return 13 /* UATP */;
+  if (AMEX_RE.test(digits)) return 5 /* AmericanExpress */;
+  if (DISCOVER_RE.test(digits)) return 6 /* Discover */;
+  if (JCB_RE.test(digits)) return 7 /* JCB */;
+  if (DINERS_RE.test(digits)) return 8 /* DinersClub */;
+  if (MC_RE.test(digits)) return 2 /* MasterCard */;
+  if (VISA_RE.test(digits)) return 1 /* Visa */;
+  if (UNIONPAY_RE.test(digits)) return 10 /* UnionPay */;
+  if (MAESTRO_RE.test(digits)) return 9 /* Maestro */;
+  return 19 /* Unknown */;
+}
+function isVerve(bin6, length) {
+  if (length < 16 || length > 19) return false;
+  const inRange = VERVE_BIN6_RANGES.some(([start, end]) => bin6 >= start && bin6 <= end);
+  return inRange || VERVE_BIN6_SINGLES.has(bin6);
+}
+
 // src/apis/checkout.api.ts
 async function createPaymentLink(paymentObject, environment, secretKey) {
   try {
@@ -181,7 +429,189 @@ async function createPaymentLink(paymentObject, environment, secretKey) {
           Accept: "application/json",
           merchantId: secretKey
         },
-        body: JSON.stringify(paymentObject)
+        body: JSON.stringify({
+          ...paymentObject,
+          LinkName: `${Date.now()}-Link`
+        })
+      }
+    );
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function authorizeCardPayment(environment, { merchantId, ...rest }) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(
+      `${baseUrl}/api/v1/checkout/authorize-card-3ds-payment-sdk`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          merchantId
+        },
+        body: JSON.stringify(rest)
+      }
+    );
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function getPaymentReferenceDetails(environment, paymentReference) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(
+      `${baseUrl}/api/v1/checkout/details/${paymentReference}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        }
+      }
+    );
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function generatePaymentAccount(environment, { merchantId, ...rest }) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(
+      `${baseUrl}/api/v1/checkout/generate-payment-account`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          merchantId
+        },
+        body: JSON.stringify(rest)
+      }
+    );
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function generateStableCoinAddress(environment, { merchantId, ...rest }) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(
+      `${baseUrl}/api/v1/checkout/generate-payment-walletaddress`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          merchantId
+        },
+        body: JSON.stringify(rest)
+      }
+    );
+    return await res.json();
+  } catch (error) {
+  }
+}
+
+// src/apis/encrypt.api.ts
+var import_crypto_js = __toESM(require("crypto-js"), 1);
+function encryptPayload(merchantId, formData = {}) {
+  const merchId = merchantId.replace(/-/g, "");
+  const first16Key = merchId.slice(0, 16);
+  const last16Iv = merchId.slice(-16);
+  const key = import_crypto_js.default.enc.Utf8.parse(first16Key);
+  const iv = import_crypto_js.default.enc.Utf8.parse(last16Iv);
+  const postDataObj = JSON.stringify(formData);
+  const encryptedData = import_crypto_js.default.AES.encrypt(
+    import_crypto_js.default.enc.Utf8.parse(postDataObj),
+    key,
+    {
+      keySize: 128 / 8,
+      iv,
+      mode: import_crypto_js.default.mode.CBC,
+      padding: import_crypto_js.default.pad.Pkcs7
+    }
+  );
+  return {
+    requestParam: encryptedData.toString()
+  };
+}
+function decryptPayload(merchantId, payload) {
+  const merchId = merchantId.replace(/-/g, "");
+  const first16Key = merchId.slice(0, 16);
+  const last16Iv = merchId.slice(-16);
+  const key = import_crypto_js.default.enc.Utf8.parse(first16Key);
+  const iv = import_crypto_js.default.enc.Utf8.parse(last16Iv);
+  const decryptedData = import_crypto_js.default.AES.decrypt(payload, key, {
+    keySize: 128 / 8,
+    iv,
+    mode: import_crypto_js.default.mode.CBC,
+    padding: import_crypto_js.default.pad.Pkcs7
+  });
+  const decryptedText = decryptedData.toString(import_crypto_js.default.enc.Utf8);
+  return JSON.parse(decryptedText);
+}
+
+// src/apis/resources.api.ts
+async function getCountries(environment, secretKey) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(`${baseUrl}/api/v1/countries-iso`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        merchantId: secretKey
+      }
+    });
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function getCountryStates(countryIso3, environment, secretKey) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(
+      `${baseUrl}/api/v1/state-by-country/${countryIso3}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          merchantId: secretKey
+        }
+      }
+    );
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function getStableCoins(environment) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(`${baseUrl}/api/v1/checkout/stable-coin`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      }
+    });
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function getStableCoinNetworks(environment, stableCoin) {
+  try {
+    const baseUrl = getBaseUrl(environment);
+    const res = await fetch(
+      `${baseUrl}/api/v1/checkout/networks/${stableCoin}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        }
       }
     );
     return await res.json();
@@ -839,13 +1269,33 @@ var BaseLabelInfo = ({
 
 // src/components/base/success.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var BaseSuccess = ({}) => {
+var BaseSuccess = ({
+  amount,
+  currency,
+  redirectUrl,
+  successObject = {
+    paymentDate: "",
+    paymentId: "",
+    paymentStatus: ""
+  }
+}) => {
+  const formatAmountHandler = formatAmount(amount, currency);
+  const goToRedirectUrl = () => {
+    window.open(redirectUrl, "_self", "noopener,noreferrer");
+  };
+  const paymentDate = new Date(
+    successObject.paymentDate ?? ""
+  ).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "2-digit"
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-8 p-16", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-8", children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconCheckCircle, { color: "#F47A1F", className: "mx-auto" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col text-center", style: { gap: "2px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-heading-text font-medium text-header-2xl", children: "\u20A62,500.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-heading-text font-medium text-header-2xl", children: formatAmountHandler }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sub-copy font-regular text-body-3xs", children: "Has been paid successfully" })
         ] })
       ] }),
@@ -855,7 +1305,7 @@ var BaseSuccess = ({}) => {
           {
             type: "horizontal",
             label: "Order ID",
-            value: "9900009000-8890-8829hd7"
+            value: successObject.paymentId
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -863,7 +1313,7 @@ var BaseSuccess = ({}) => {
           {
             type: "horizontal",
             label: "Payment date",
-            value: "July 24, 2025"
+            value: paymentDate
           }
         ) })
       ] })
@@ -873,7 +1323,8 @@ var BaseSuccess = ({}) => {
       {
         label: "Return to Merchant Website",
         type: "secondary",
-        customClass: "w-full"
+        customClass: "w-full",
+        onClick: goToRedirectUrl
       }
     ) })
   ] });
@@ -893,6 +1344,7 @@ var BaseSelect = ({
   value,
   defaultValue,
   onChange,
+  onBlur,
   placeholder = "Select an option",
   hasSearch = true,
   disabled = false,
@@ -965,6 +1417,7 @@ var BaseSelect = ({
   const commit = (val) => {
     if (!isControlled) setInternalValue(val);
     onChange?.(val);
+    onBlur?.(val);
     closeMenu();
   };
   const onSearchInput = (e) => {
@@ -1115,6 +1568,7 @@ var BaseSelect = ({
               ref: searchRef,
               type: "text",
               onChange: onSearchInput,
+              onBlur: onSearchInput,
               placeholder: `Search ${label || "options"}`,
               className: "bg-transparent outline-none border-b pb-2 w-full focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal"
             }
@@ -1189,105 +1643,240 @@ var BaseCurrencyAmount = ({
   ] });
 };
 
-// src/buzapay-checkout/checkout-iframe.tsx
-var import_react5 = require("react");
+// src/components/base/input.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_imask = require("react-imask");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-function BzpCheckoutIframe({
-  style = {
-    width: "100%",
-    height: "100vh",
-    border: "0",
-    borderRadius: "6px",
-    overflow: "hidden"
-  },
-  url,
-  secretKey,
-  environment = "sandbox",
-  paymentObject = {
-    amount: 0,
-    currency: "",
-    email: "",
-    phoneNumber: "",
-    narration: "",
-    redirectUrl: ""
-  }
-}) {
-  const containerRef = (0, import_react5.useRef)(null);
-  const iframeRef = (0, import_react5.useRef)(null);
-  const [message, setMessage] = (0, import_react5.useState)("");
-  const [launchUrl, setLaunchUrl] = (0, import_react5.useState)("");
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const launchIframe = (0, import_react5.useCallback)(
-    (url2) => {
-      if (!containerRef.current) return;
-      if (iframeRef.current && iframeRef.current.parentNode) {
-        iframeRef.current.parentNode.removeChild(iframeRef.current);
-      }
-      const iframe = document.createElement("iframe");
-      iframe.src = url2;
-      if (style.width) iframe.style.width = style.width;
-      if (style.height) iframe.style.height = style.height;
-      if (style.border) iframe.style.border = style.border;
-      if (style.borderRadius) iframe.style.borderRadius = style.borderRadius;
-      if (style.overflow) iframe.style.overflow = style.overflow;
-      containerRef.current.appendChild(iframe);
-      iframeRef.current = iframe;
-    },
-    [style]
+var BaseInput = ({
+  label = "",
+  type = "text",
+  mask,
+  placeholder,
+  validationError = "",
+  hint = "",
+  rules = [],
+  isAmountInput = false,
+  required = false,
+  disabled = false,
+  loading = false,
+  showCopyIcon = false,
+  preventPaste = false,
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  prefix,
+  suffix,
+  className = ""
+}) => {
+  const isControlled = value !== void 0;
+  const [rawValue, setRawValue] = import_react5.default.useState(
+    defaultValue ?? value ?? ""
   );
-  const generatePaymentLinkHandler = async () => {
-    if (url) {
-      launchIframe(url);
-      return;
-    }
-    if (!secretKey) {
-      return setMessage("Secret key is required.");
-    }
-    if (!checkObjectTruthy(paymentObject)) {
-      return setMessage("Secret key is required.");
-    }
-    setLoading(true);
-    const response = await createPaymentLink(
-      paymentObject,
-      environment,
-      secretKey
-    );
-    if (response?.isSuccessful) {
-      setLaunchUrl(response.launchUrl ?? "");
-      setMessage("Payment link created successfully");
-      if (launchUrl) {
-        launchIframe(launchUrl);
-      }
-    } else {
-      setMessage("Failed to create payment link");
+  const [localHint, setLocalHint] = import_react5.default.useState("");
+  const [localError, setLocalError] = import_react5.default.useState("");
+  import_react5.default.useEffect(() => {
+    if (isControlled) setRawValue(value ?? "");
+  }, [isControlled, value]);
+  const formattedValue = isAmountInput ? formatAmount(rawValue.replace(/,/g, "")) : rawValue;
+  const handleChange = (e) => {
+    const incoming = e.target.value.replace(/,/g, "");
+    if (!isControlled) setRawValue(incoming);
+    onChange?.(incoming);
+    setTimeout(() => {
+      const el = e.target;
+      el.selectionStart = el.selectionEnd = el.value.length;
+    });
+  };
+  const handleBlur = () => {
+    onBlur?.(rawValue);
+  };
+  const handleKeyDown = (e) => {
+    if (rules.includes("numeric")) restrictToNumericKeys(e);
+  };
+  const handlePaste = (e) => {
+    if (preventPaste) {
+      e.preventDefault();
+      setLocalError("Pasting is disabled for this input");
     }
   };
-  (0, import_react5.useEffect)(() => {
-    (async () => {
-      await generatePaymentLinkHandler();
-    })();
-  }, []);
-  return loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full h-48 flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLoader, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: containerRef, style });
-}
+  const containerBg = disabled ? "bg-grey-50 cursor-not-allowed" : "bg-white";
+  const containerBorder = validationError || localError ? "border-red-300 bg-red-50" : "border-grey-100";
+  const copyToClipboard = (text) => {
+    return navigator.clipboard.writeText(text);
+  };
+  const copyHandler = () => {
+    copyToClipboard(rawValue).then(() => {
+      setLocalHint("Text copied to clipboard");
+    }).catch(() => {
+      setLocalError("Failed to copy text to clipboard");
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `flex flex-col gap-2 ${className}`, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "mb-0 text-body-2xs font-normal text-heading-text", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-orange-required", children: " *" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        className: `border-c px-3 py-2 flex items-center justify-between rounded-md h-12 ${containerBg} ${containerBorder}`,
+        children: [
+          prefix,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react_imask.IMaskInput,
+            {
+              type,
+              mask,
+              value: formattedValue,
+              onChange: handleChange,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              disabled,
+              placeholder: placeholder ?? (label ? `Enter ${label.toLowerCase()}` : void 0),
+              inputMode: isAmountInput ? "decimal" : void 0,
+              className: "search-input bg-transparent outline-none border-none focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal w-full"
+            }
+          ),
+          !loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+            suffix,
+            showCopyIcon && rawValue && rawValue.trim() !== "" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              BaseImage,
+              {
+                src: "assets/images/copyIcon.svg",
+                alt: "copy",
+                width: 16,
+                height: 16,
+                customClass: "cursor-pointer hover:opacity-70 transition-opacity",
+                onClick: copyHandler
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" })
+        ]
+      }
+    ),
+    (hint || localHint) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-body-3xs text-light-copy", children: localHint || hint }),
+    (validationError || localError) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-body-3xs text-red-500", children: localError || validationError })
+  ] });
+};
 
-// src/buzapay-checkout/checkout-button.tsx
+// src/buzapay-checkout/checkout-iframe.tsx
+var import_react6 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-function BzpCheckoutButton({
+function BzpCheckoutIframe({
+  style = {
+    width: "100%",
+    height: "100vh",
+    border: "0",
+    borderRadius: "6px",
+    overflow: "hidden"
+  },
+  url,
   secretKey,
   environment = "sandbox",
   paymentObject = {
+    merchantName: "",
     amount: 0,
     currency: "",
     email: "",
     phoneNumber: "",
     narration: "",
-    redirectUrl: ""
+    redirectUrl: "https://sandbox-merchant.buzapay.com/account/three-ds-status"
   },
-  mode = "redirect"
+  onError
 }) {
+  const containerRef = (0, import_react6.useRef)(null);
+  const iframeRef = (0, import_react6.useRef)(null);
   const [message, setMessage] = (0, import_react6.useState)("");
   const [launchUrl, setLaunchUrl] = (0, import_react6.useState)("");
   const [loading, setLoading] = (0, import_react6.useState)(false);
+  const launchIframe = (0, import_react6.useCallback)(
+    (url2) => {
+      if (iframeRef.current && iframeRef.current.parentNode) {
+        iframeRef.current.parentNode.removeChild(iframeRef.current);
+      }
+      const iframe = document.createElement("iframe");
+      iframe.src = url2;
+      if (style.width) iframe.style.width = style.width;
+      if (style.height) iframe.style.height = style.height;
+      if (style.border) iframe.style.border = style.border;
+      if (style.borderRadius) iframe.style.borderRadius = style.borderRadius;
+      if (style.overflow) iframe.style.overflow = style.overflow;
+      containerRef.current?.appendChild(iframe);
+      iframeRef.current = iframe;
+    },
+    [style]
+  );
+  const generatePaymentLinkHandler = async () => {
+    if (url) {
+      launchIframe(url);
+      return;
+    }
+    if (!secretKey) {
+      return setMessage("Secret key is required.");
+    }
+    if (!checkObjectTruthy(paymentObject)) {
+      return setMessage("Secret key is required.");
+    }
+    setLoading(true);
+    try {
+      const response = await createPaymentLink(
+        paymentObject,
+        environment,
+        secretKey
+      );
+      if (response?.isSuccessful) {
+        setLaunchUrl(response.launchUrl ?? "");
+        setMessage("Payment link created successfully");
+        if (response.launchUrl) {
+          setLoading(false);
+          launchIframe(`${response.launchUrl}&merchantId=${btoa(secretKey)}`);
+        }
+      } else {
+        setLoading(false);
+        setMessage("Failed to create payment link");
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to create payment link");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  (0, import_react6.useEffect)(() => {
+    if (!containerRef.current) return;
+    generatePaymentLinkHandler();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: containerRef, className: "w-full h-full" }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 grid place-items-center bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconLoader, {}) })
+  ] });
+}
+
+// src/buzapay-checkout/checkout-button.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function BzpCheckoutButton({
+  secretKey,
+  environment = "sandbox",
+  paymentObject = {
+    merchantName: "",
+    amount: 0,
+    currency: "",
+    email: "",
+    phoneNumber: "",
+    narration: "",
+    redirectUrl: "https://sandbox-merchant.buzapay.com/account/three-ds-status"
+  },
+  mode = "redirect",
+  onError
+}) {
+  const [message, setMessage] = (0, import_react7.useState)("");
+  const [launchUrl, setLaunchUrl] = (0, import_react7.useState)("");
+  const [urlLaunchUrl, setUrlLaunchUrl] = (0, import_react7.useState)("");
+  const [loading, setLoading] = (0, import_react7.useState)(false);
   const generatePaymentLinkHandler = async () => {
     if (!secretKey) {
       setMessage("Secret key is required.");
@@ -1307,6 +1896,7 @@ function BzpCheckoutButton({
       );
       if (response?.isSuccessful && response.launchUrl) {
         setLaunchUrl(response.launchUrl);
+        setUrlLaunchUrl(`${response.launchUrl}&merchantId=${btoa(secretKey)}`);
         setMessage("Payment link created successfully");
         if (mode === "redirect") {
           window.open(response.launchUrl, "_blank", "noopener,noreferrer");
@@ -1316,19 +1906,22 @@ function BzpCheckoutButton({
       }
     } catch (e) {
       setMessage(e?.message || "Failed to create payment link");
+      onError?.({
+        errorMessage: message
+      });
     } finally {
       setLoading(false);
     }
   };
-  return launchUrl && mode === "iframe" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return urlLaunchUrl && mode === "iframe" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     BzpCheckoutIframe,
     {
-      url: launchUrl,
+      url: urlLaunchUrl,
       secretKey,
       environment
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       BaseButton,
       {
         label: "Pay",
@@ -1338,7 +1931,7 @@ function BzpCheckoutButton({
         onClick: generatePaymentLinkHandler
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BaseInputError, { errorMessage: message })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BaseInputError, { errorMessage: message })
   ] });
 }
 
@@ -1347,137 +1940,367 @@ var import_react11 = require("react");
 
 // src/components/pay-by-card.tsx
 var import_react8 = require("react");
-
-// src/components/base/input.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var BaseInput = ({
-  label = "",
-  type = "text",
-  placeholder,
-  validationError = "",
-  hint = "",
-  rules = [],
-  isAmountInput = false,
-  required = false,
-  disabled = false,
-  loading = false,
-  showCopyIcon = false,
-  value,
-  defaultValue,
-  onChange,
-  onBlur,
-  prefix,
-  suffix,
-  className = ""
-}) => {
-  const isControlled = value !== void 0;
-  const [rawValue, setRawValue] = import_react7.default.useState(
-    defaultValue ?? value ?? ""
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function PayByCard({
+  secretKey,
+  paymentObject,
+  environment = "sandbox",
+  onPaymentAuthorized,
+  onError
+}) {
+  const [formIndex, setFormIndex] = (0, import_react8.useState)(0);
+  const [message, setMessage] = (0, import_react8.useState)("");
+  const [isMakingPayment, setIsMakingPayment] = (0, import_react8.useState)(false);
+  const [loading, setLoading] = (0, import_react8.useState)(false);
+  const [cardType, setCardType] = (0, import_react8.useState)("");
+  const [transactionReference, setTransactionReference] = (0, import_react8.useState)("");
+  const [loadingCountries, setLoadingCountries] = (0, import_react8.useState)(false);
+  const [loadingStates, setLoadingStates] = (0, import_react8.useState)(false);
+  const [rawCountries, setRawCountries] = (0, import_react8.useState)([]);
+  const [countries, setCountries] = (0, import_react8.useState)([]);
+  const [countryStates, setCountryStates] = (0, import_react8.useState)([]);
+  const [billingForm, setBillingForm] = (0, import_react8.useState)({
+    address1: "",
+    address2: "",
+    postalCode: "",
+    state: "",
+    city: "",
+    country: "",
+    emailAddress: "",
+    phoneNumber: ""
+  });
+  const [payForm, setPayForm] = (0, import_react8.useState)({
+    customerName: "",
+    cardNo: "",
+    expireDate: "",
+    cvv: "",
+    cardPin: ""
+    // Only required for Verve cards
+  });
+  const [billingErrors, setBillingErrors] = (0, import_react8.useState)(
+    {}
   );
-  const [localHint, setLocalHint] = import_react7.default.useState("");
-  const [localError, setLocalError] = import_react7.default.useState("");
-  import_react7.default.useEffect(() => {
-    if (isControlled) setRawValue(value ?? "");
-  }, [isControlled, value]);
-  const formattedValue = isAmountInput ? formatAmount(rawValue.replace(/,/g, "")) : rawValue;
-  const handleChange = (e) => {
-    const incoming = e.target.value.replace(/,/g, "");
-    if (!isControlled) setRawValue(incoming);
-    onChange?.(incoming);
-    setTimeout(() => {
-      const el = e.target;
-      el.selectionStart = el.selectionEnd = el.value.length;
-    });
+  const [payErrors, setPayErrors] = (0, import_react8.useState)({});
+  const billingRules = {
+    address1: "required",
+    address2: "",
+    // optional
+    country: "required",
+    state: "required",
+    city: "required",
+    postalCode: "required|no_special|char_length:6",
+    emailAddress: "required|email",
+    phoneNumber: "required"
   };
-  const handleBlur = () => {
-    onBlur?.(rawValue);
+  const payRules = {
+    customerName: "required",
+    cardNo: "required|num_spaces",
+    expireDate: "required",
+    cvv: "required|numeric",
+    cardPin: ""
+    // optional unless Verve
   };
-  const handleKeyDown = (e) => {
-    if (rules.includes("numeric")) restrictToNumericKeys(e);
+  const formatAmountHandler = formatAmount(
+    paymentObject.amount,
+    paymentObject.currency
+  );
+  const billingLabels = {
+    address1: "Address Line 1",
+    address2: "Address Line 2",
+    postalCode: "Postal Code",
+    state: "State",
+    city: "City",
+    country: "Country",
+    emailAddress: "Email",
+    phoneNumber: "Phone Number"
   };
-  const containerBg = disabled ? "bg-grey-50 cursor-not-allowed" : "bg-white";
-  const containerBorder = validationError || localError ? "border-red-300 bg-red-50" : "border-grey-100";
-  const copyToClipboard = (text) => {
-    return navigator.clipboard.writeText(text);
+  const payLabels = {
+    customerName: "Card Name",
+    cardNo: "Card Number",
+    expireDate: "Expiry Date",
+    cvv: "CVV",
+    cardPin: "Card PIN"
   };
-  const copyHandler = () => {
-    copyToClipboard(rawValue).then(() => {
-      setLocalHint("Text copied to clipboard");
-    }).catch((err) => {
-      setLocalError("Failed to copy text to clipboard");
-    });
+  const proceedHandler = async () => {
+    if (formIndex === 0) {
+      const errs = validateGroup(billingForm, billingRules, billingLabels);
+      setBillingErrors(errs);
+      if (Object.keys(errs).length === 0) {
+        setFormIndex(1);
+      }
+      return;
+    }
+    if (formIndex === 1) {
+      const errs = validateGroup(payForm, payRules, payLabels);
+      setPayErrors(errs);
+      if (Object.keys(errs).length > 0) {
+        return;
+      }
+      try {
+        setIsMakingPayment(true);
+        setMessage("");
+        const cardDetails = {
+          pan: payForm.cardNo ?? "",
+          expiryDate: payForm.expireDate ?? "",
+          cvv: payForm.cvv ?? "",
+          cardScheme: cardType,
+          nameOnCard: payForm.customerName ?? "",
+          ...cardType === "Verve" && { pin: payForm.cardPin ?? "" }
+        };
+        const billingDetails = {
+          address1: billingForm.address1 ?? "",
+          address2: billingForm.address2 ?? "",
+          postalCode: billingForm.postalCode ?? "",
+          state: billingForm.state ?? "",
+          city: billingForm.city ?? "",
+          country: billingForm.country ?? "",
+          emailAddress: billingForm.emailAddress ?? "",
+          phoneNumber: billingForm.phoneNumber ?? ""
+        };
+        const encryptedCardDetails = encryptPayload(secretKey, cardDetails);
+        const payload = {
+          customerId: paymentObject?.email || payForm.customerName || "",
+          amount: String(paymentObject?.amount ?? ""),
+          currency: paymentObject?.currency || "USD",
+          narration: paymentObject?.narration || "Test transaction",
+          encryptedCardDetails: encryptedCardDetails.requestParam,
+          billingDetails,
+          redirectUrl: paymentObject?.redirectUrl || "",
+          paymentReference: transactionReference,
+          isCheckout: true
+        };
+        const request = { ...payload, merchantId: secretKey };
+        let response = await authorizeCardPayment(environment, request);
+        if (response?.responseParam) {
+          response = decryptPayload(environment, response.responseParam);
+        }
+        if (response?.isSuccessful) {
+          if (response.threeDsInteractionRequired === true) {
+            const threeDsData = {
+              transactionReference: response.transactionReference,
+              threeDsHtml: response.threeDsHtml,
+              amount: response.amount,
+              responseMessage: response.responseMessage,
+              paReq: response.threeDsHtml?.paReq,
+              termUrl: response.threeDsHtml?.termUrl,
+              action: response.threeDsHtml?.action,
+              acsUrl: response.threeDsHtml?.acsUrl,
+              md: response.threeDsHtml?.md
+            };
+            const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
+            const threeDsUrl = `https://sandbox-merchant.buzapay.com/account/three-ds-confirm?threeDsData=${encodeURIComponent(
+              stringifiedThreeDsData
+            )}&paymentReference=${response.transactionReference}`;
+            window.open(threeDsUrl, "_self", "noopener,noreferrer");
+            setMessage(
+              "3D Secure authentication opened in new tab. Please complete the verification"
+            );
+            setIsMakingPayment(false);
+            return;
+          }
+          if (response.responseMessage === "Payer Interaction Required" && response.threeDsHtml) {
+            const threeDsData = {
+              transactionReference: response.transactionReference,
+              threeDsHtml: response.threeDsHtml,
+              amount: response.amount,
+              responseMessage: response.responseMessage,
+              paReq: response.threeDsHtml?.paReq,
+              termUrl: response.threeDsHtml?.termUrl,
+              action: response.threeDsHtml?.action,
+              acsUrl: response.threeDsHtml?.acsUrl,
+              md: response.threeDsHtml?.md
+            };
+            const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
+            const threeDsUrl = `https://sandbox-merchant.buzapay.com/account/three-ds-confirm?threeDsData=${encodeURIComponent(
+              stringifiedThreeDsData
+            )}&paymentReference=${response.transactionReference}`;
+            window.open(threeDsUrl, "_self", "noopener,noreferrer");
+            setMessage(
+              "3D Secure authentication opened in new tab. Please complete the verification"
+            );
+            setIsMakingPayment(false);
+            return;
+          }
+          if (response.transactionReference?.trim()) {
+            onPaymentAuthorized?.({
+              paymentId: response.transactionReference,
+              paymentDate: response?.data?.updatedAt,
+              // optional if present
+              paymentStatus: "authorized",
+              message
+            });
+          }
+          setMessage("Card payment authorized successfully");
+          setIsMakingPayment(false);
+          return;
+        }
+        setMessage(response?.responseMessage || "Payment failed");
+        onPaymentAuthorized?.({
+          paymentId: response?.transactionReference,
+          paymentDate: response?.data?.updatedAt,
+          paymentStatus: "payment failed",
+          message
+        });
+        setIsMakingPayment(false);
+      } catch (err) {
+        let friendly = "Payment failed";
+        if (err?.error?.responseParam) {
+          try {
+            const decryptedError = decryptPayload(
+              environment,
+              err.error.responseParam
+            );
+            friendly = decryptedError?.responseMessage || friendly;
+          } catch {
+            friendly = err?.error?.responseMessage || err?.error?.message || friendly;
+          }
+        } else {
+          friendly = err?.error?.responseMessage || err?.error?.message || "Payment failed";
+        }
+        setMessage(friendly);
+        setIsMakingPayment(false);
+        onError?.({
+          errorMessage: message
+        });
+      }
+    }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `flex flex-col gap-2 ${className}`, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "mb-0 text-body-2xs font-normal text-heading-text", children: [
-      label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-orange-required", children: " *" })
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      "div",
-      {
-        className: `border-c px-3 py-2 flex items-center justify-between rounded-md h-12 ${containerBg} ${containerBorder}`,
-        children: [
-          prefix,
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "input",
-            {
-              type,
-              value: formattedValue,
-              onChange: handleChange,
-              onBlur: handleBlur,
-              onKeyDown: handleKeyDown,
-              disabled,
-              placeholder: placeholder ?? (label ? `Enter ${label.toLowerCase()}` : void 0),
-              inputMode: isAmountInput ? "decimal" : void 0,
-              className: "search-input bg-transparent outline-none border-none focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal w-full"
-            }
-          ),
-          !loading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-            suffix,
-            showCopyIcon && rawValue && rawValue.trim() !== "" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              BaseImage,
-              {
-                src: "assets/images/copyIcon.svg",
-                alt: "copy",
-                width: 16,
-                height: 16,
-                customClass: "cursor-pointer hover:opacity-70 transition-opacity",
-                onClick: copyHandler
-              }
-            )
-          ] }) : (
-            // Simple loader placeholder; swap for your icon component if desired
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" })
-          )
-        ]
+  const generatePaymentLinkHandler = async () => {
+    if (!secretKey) {
+      setMessage("Secret key is required.");
+      return;
+    }
+    if (!checkObjectTruthy(paymentObject)) {
+      setMessage("Kindly ensure you are passing all the required data.");
+      return;
+    }
+    setLoading(true);
+    setMessage("");
+    try {
+      const response = await createPaymentLink(
+        paymentObject,
+        environment,
+        secretKey
+      );
+      if (response?.isSuccessful && response.launchUrl) {
+        const queryParams = getQueryParams(response.launchUrl);
+        setTransactionReference(queryParams["paymentReference"]);
+        setMessage("Payment link created successfully");
+      } else {
+        setMessage("Failed to create payment link");
       }
-    ),
-    (hint || localHint) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-body-3xs text-light-copy", children: localHint || hint }),
-    (validationError || localError) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-body-3xs text-red-500", children: localError || validationError })
-  ] });
-};
-
-// src/components/pay-by-card.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-function PayByCard({}) {
-  const [formIndex, setFormIndex] = (0, import_react8.useState)(0);
+    } catch (e) {
+      setMessage(e?.message || "Failed to create payment link");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const getAllCountries = async () => {
+    setLoadingCountries(true);
+    try {
+      const response = await getCountries(
+        environment,
+        secretKey
+      );
+      if (response?.isSuccessful) {
+        setRawCountries(response.data);
+        setCountries(
+          (response.data ?? []).map((c) => {
+            return { label: c.countryName, value: c.iso2 };
+          })
+        );
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to get countries");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoadingCountries(false);
+    }
+  };
+  const getStates = async (countryIso2) => {
+    const country = rawCountries.find((c) => c.iso2 === countryIso2);
+    if (!country) return;
+    setLoadingStates(true);
+    try {
+      const response = await getCountryStates(
+        country.iso3,
+        environment,
+        secretKey
+      );
+      if (response?.isSuccessful) {
+        setCountryStates(
+          (response.data ?? []).map((s) => ({
+            label: s.name,
+            value: s.name
+          }))
+        );
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to get country states");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoadingStates(false);
+    }
+  };
+  const cardNumberInputHandler = (event) => {
+    setCardType(cardTypeHandler(event));
+    payRules.cardPin = cardType === "Verve" ? "required|numeric" : "";
+  };
+  (0, import_react8.useEffect)(() => {
+    (async () => {
+      await generatePaymentLinkHandler();
+      await getAllCountries();
+    })();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-6", children: [
     formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-2 gap-6 overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "First Name", required: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Last Name", required: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Email", required: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Phone Number", required: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseInput,
+        {
+          label: "Address Line 1",
+          required: true,
+          value: billingForm.address1,
+          onChange: (e) => {
+            setBillingForm({ ...billingForm, address1: e });
+            if (billingErrors.address1) {
+              setBillingErrors((er) => ({ ...er, address1: "" }));
+            }
+          },
+          validationError: billingErrors.address1 ?? ""
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseInput,
+        {
+          label: "Address Line 2",
+          value: billingForm.address2,
+          onChange: (e) => setBillingForm({ ...billingForm, address2: e }),
+          validationError: billingErrors.address2 ?? ""
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         BaseSelect,
         {
           label: "Select Country",
           required: true,
-          options: [
-            { label: "United States", value: "US" },
-            { label: "Canada", value: "CA" },
-            { label: "United Kingdom", value: "UK" }
-          ]
+          options: countries,
+          loading: loadingCountries,
+          value: billingForm.country,
+          onChange: (e) => {
+            setBillingForm({ ...billingForm, country: e, state: "" });
+            getStates(e);
+            if (billingErrors.country) {
+              setBillingErrors((er) => ({ ...er, country: "" }));
+            }
+          },
+          validationError: billingErrors.country ?? ""
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -1485,37 +2308,180 @@ function PayByCard({}) {
         {
           label: "Select State",
           required: true,
-          options: [
-            { label: "California", value: "CA" },
-            { label: "Texas", value: "TX" },
-            { label: "New York", value: "NY" }
-          ]
+          options: countryStates,
+          loading: loadingStates,
+          value: billingForm.state,
+          onChange: (e) => {
+            setBillingForm({ ...billingForm, state: e });
+            if (billingErrors.state) {
+              setBillingErrors((er) => ({ ...er, state: "" }));
+            }
+          },
+          validationError: billingErrors.state ?? ""
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseInput,
+        {
+          label: "City",
+          required: true,
+          value: billingForm.city,
+          onChange: (e) => {
+            setBillingForm({ ...billingForm, city: e });
+            if (billingErrors.city) {
+              setBillingErrors((er) => ({ ...er, city: "" }));
+            }
+          },
+          validationError: billingErrors.city ?? ""
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseInput,
+        {
+          label: "Postal Code",
+          required: true,
+          value: billingForm.postalCode,
+          onChange: (e) => {
+            setBillingForm({ ...billingForm, postalCode: e });
+            if (billingErrors.postalCode) {
+              setBillingErrors((er) => ({ ...er, postalCode: "" }));
+            }
+          },
+          validationError: billingErrors.postalCode ?? ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "City", required: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Postal Code", required: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Street Address", required: true }) })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseInput,
+        {
+          label: "Email",
+          required: true,
+          value: billingForm.emailAddress,
+          onChange: (e) => {
+            setBillingForm({ ...billingForm, emailAddress: e });
+            if (billingErrors.emailAddress) {
+              setBillingErrors((er) => ({ ...er, emailAddress: "" }));
+            }
+          },
+          validationError: billingErrors.emailAddress ?? ""
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        BaseInput,
+        {
+          label: "Phone Number",
+          required: true,
+          value: billingForm.phoneNumber,
+          onChange: (e) => {
+            setBillingForm({ ...billingForm, phoneNumber: e });
+            if (billingErrors.phoneNumber) {
+              setBillingErrors((er) => ({ ...er, phoneNumber: "" }));
+            }
+          },
+          validationError: billingErrors.phoneNumber ?? ""
+        }
+      )
     ] }),
     formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
         className: "grid grid-cols-2 gap-6 overflow-y-auto",
-        style: { maxHeight: "320px" },
+        style: { maxHeight: 320 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Card Name", required: true }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Card Number", required: true }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "Expiry Date", required: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BaseInput, { label: "CVV", required: true })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            BaseInput,
+            {
+              label: "Card Name",
+              required: true,
+              value: payForm.customerName,
+              onChange: (e) => {
+                setPayForm({ ...payForm, customerName: e });
+                if (payErrors.customerName) {
+                  setPayErrors((er) => ({ ...er, customerName: "" }));
+                }
+              },
+              validationError: payErrors.customerName ?? ""
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            BaseInput,
+            {
+              label: "Card Number",
+              required: true,
+              rules: ["numeric"],
+              mask: "0000 0000 0000 0000",
+              placeholder: "0000 0000 0000 0000",
+              value: payForm.cardNo,
+              preventPaste: true,
+              onChange: (e) => {
+                setPayForm({ ...payForm, cardNo: e });
+                if (payErrors.cardNo)
+                  setPayErrors((er) => ({ ...er, cardNo: "" }));
+                cardNumberInputHandler(e);
+              },
+              validationError: payErrors.cardNo ?? ""
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            BaseInput,
+            {
+              label: "Expiry Date",
+              required: true,
+              value: payForm.expireDate,
+              mask: "00/00",
+              placeholder: "00/00",
+              onChange: (e) => {
+                setPayForm({ ...payForm, expireDate: e });
+                if (payErrors.expireDate)
+                  setPayErrors((er) => ({ ...er, expireDate: "" }));
+              },
+              validationError: payErrors.expireDate ?? ""
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            BaseInput,
+            {
+              label: "CVV",
+              required: true,
+              rules: ["numeric"],
+              value: payForm.cvv,
+              mask: "000",
+              placeholder: "000",
+              onChange: (e) => {
+                setPayForm({ ...payForm, cvv: e });
+                if (payErrors.cvv) setPayErrors((er) => ({ ...er, cvv: "" }));
+              },
+              validationError: payErrors.cvv ?? ""
+            }
+          ),
+          cardType === "Verve" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            BaseInput,
+            {
+              label: "Card Pin",
+              required: true,
+              rules: ["numeric"],
+              value: payForm.cardPin,
+              mask: "0000",
+              placeholder: "0000",
+              onChange: (e) => {
+                setPayForm({ ...payForm, cardPin: e });
+                if (payErrors.cardPin)
+                  setPayErrors((er) => ({ ...er, cardPin: "" }));
+              },
+              validationError: payErrors.cardPin ?? ""
+            }
+          )
         ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       BaseButton,
       {
-        label: formIndex === 0 ? "Proceed" : "Pay",
+        label: formIndex === 0 ? "Proceed" : `Pay ${formatAmountHandler}`,
         type: "primary",
         customClass: "w-full",
-        onClick: formIndex === 0 ? () => setFormIndex(1) : void 0
+        loading: isMakingPayment,
+        onClick: proceedHandler,
+        disabled: isMakingPayment
       }
     )
   ] });
@@ -1525,92 +2491,302 @@ function PayByCard({}) {
 var import_react9 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var PayByTransfer = ({
-  amountDisplay = "NGN 200,500.00",
-  bankName = "Teerus MFB",
-  accountNumber = "0001928940",
-  initialSeconds = 30 * 60,
-  onConfirmPaid,
-  onCancel
+  secretKey,
+  paymentObject,
+  environment = "sandbox",
+  onPaymentAuthorized,
+  onCancel,
+  onError
 }) => {
-  const [remaining, setRemaining] = (0, import_react9.useState)(initialSeconds);
+  const [formIndex, setFormIndex] = (0, import_react9.useState)(0);
+  const [isMakingPayment, setIsMakingPayment] = (0, import_react9.useState)(false);
+  const [isConfirmCall, setIsConfirmCall] = (0, import_react9.useState)(false);
+  const [isPaymentConfirmed, setIsPaymentConfirmed] = (0, import_react9.useState)(false);
+  const [transactionReference, setTransactionReference] = (0, import_react9.useState)("");
+  const [paymentReferenceStatus, setPaymentReferenceStatus] = (0, import_react9.useState)("");
+  const [isFetchingPaymentDetails, setIsFetchingPaymentDetails] = (0, import_react9.useState)(false);
+  const [paymentReferenceDetails, setPaymentReferenceDetails] = (0, import_react9.useState)(null);
+  const [paymentAccountDetails, setPaymentAccountDetails] = (0, import_react9.useState)(null);
+  const [paymentMade, setPaymentMade] = (0, import_react9.useState)(false);
+  const [loading, setLoading] = (0, import_react9.useState)(false);
+  const [message, setMessage] = (0, import_react9.useState)("");
+  const [remainingSeconds, setRemainingSeconds] = (0, import_react9.useState)(60);
+  const [countDownTime, setCountDownTime] = (0, import_react9.useState)("00:00");
   const intervalRef = (0, import_react9.useRef)(null);
-  const countDownTime = (0, import_react9.useMemo)(() => {
-    const clamped = Math.max(0, remaining);
-    const m = Math.floor(clamped / 60);
-    const s = clamped % 60;
-    return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-  }, [remaining]);
-  (0, import_react9.useEffect)(() => {
-    intervalRef.current = window.setInterval(() => {
-      setRemaining((prev) => prev - 1);
-    }, 1e3);
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
+  const [transferForm, setTransferForm] = (0, import_react9.useState)({
+    customerName: ""
+  });
+  const [transferErrors, setTransferErrors] = (0, import_react9.useState)(
+    {}
+  );
+  const transferRules = {
+    customerName: "required"
+  };
+  const transferLabels = {
+    customerName: "Customer Name"
+  };
+  const formatAmountHandler = formatAmount(
+    paymentObject.amount,
+    paymentObject.currency
+  );
+  const payHandler = async () => {
+    if (formIndex === 0) {
+      const errs = validateGroup(transferForm, transferRules, transferLabels);
+      setTransferErrors(errs);
+      if (Object.keys(errs).length === 0) {
+        const payload = {
+          paymentReference: transactionReference,
+          channel: "virtual_account",
+          customerName: transferForm.customerName ?? "",
+          merchantId: secretKey
+        };
+        setIsMakingPayment(true);
+        try {
+          const response = await generatePaymentAccount(environment, payload);
+          if (response?.isSuccessful) {
+            setPaymentAccountDetails(response.data);
+            startTimer();
+            setMessage("Virtual account generated successfully for payment.");
+            setIsMakingPayment(true);
+            setFormIndex(1);
+          }
+        } catch (err) {
+          setIsMakingPayment(false);
+          setMessage(err.error.responseMessage || err.error.message);
+          onError?.({
+            errorMessage: message
+          });
+        }
       }
-    };
+      return;
+    }
+  };
+  const getReferenceDetails = async () => {
+    setIsFetchingPaymentDetails(true);
+    try {
+      const response = await getPaymentReferenceDetails(
+        environment,
+        transactionReference
+      );
+      if (response?.isSuccessful) {
+        setPaymentReferenceDetails(response.data);
+        const made = response.data?.paymentStatus === "Payment Received";
+        setPaymentMade(made);
+        const noServerStatus = response.data?.finalTransactionStatus == null || response.data?.paymentStatus == null;
+        if (noServerStatus) {
+          if (isConfirmCall) {
+            setMessage("Transaction not confirmed !!");
+          }
+          if (!isPaymentConfirmed && !made) {
+            setPaymentReferenceStatus("pending");
+            onPaymentAuthorized?.({
+              paymentId: transactionReference,
+              paymentDate: response.data?.updatedAt,
+              paymentStatus: "pending",
+              message
+            });
+          } else {
+            setPaymentReferenceStatus("confirmed");
+            onPaymentAuthorized?.({
+              paymentId: transactionReference,
+              paymentDate: response.data?.updatedAt,
+              paymentStatus: "confirmed",
+              message
+            });
+          }
+        } else if (response.data?.finalTransactionStatus === "Success" || response.data?.paymentStatus === "Received" || response.data?.paymentStatus === "Payment Received") {
+          setPaymentReferenceStatus("confirmed");
+          setIsPaymentConfirmed(true);
+          setMessage("Transaction confirmed !!");
+          onPaymentAuthorized?.({
+            paymentId: transactionReference,
+            paymentDate: response.data?.updatedAt,
+            paymentStatus: "confirmed",
+            message
+          });
+        }
+      } else if (!response?.isSuccessful && response?.responseCode === "119") {
+        setPaymentReferenceStatus("used");
+        setMessage(response.responseMessage || "");
+        onPaymentAuthorized?.({
+          paymentId: transactionReference,
+          paymentDate: null,
+          paymentStatus: "used",
+          message
+        });
+      }
+    } catch (err) {
+      setPaymentReferenceStatus("");
+      setMessage(
+        err?.error?.responseMessage || err?.error?.message || "Something went wrong"
+      );
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setIsFetchingPaymentDetails(false);
+    }
+  };
+  const generatePaymentLinkHandler = async () => {
+    if (!secretKey) {
+      setMessage("Secret key is required.");
+      return;
+    }
+    if (!checkObjectTruthy(paymentObject)) {
+      setMessage("Kindly ensure you are passing all the required data.");
+      return;
+    }
+    setLoading(true);
+    setMessage("");
+    try {
+      const response = await createPaymentLink(
+        paymentObject,
+        environment,
+        secretKey
+      );
+      if (response?.isSuccessful && response.launchUrl) {
+        const queryParams = getQueryParams(response.launchUrl);
+        setTransactionReference(queryParams["paymentReference"]);
+        setMessage("Payment link created successfully");
+      } else {
+        setMessage("Failed to create payment link");
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to create payment link");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const updateDisplay = (0, import_react9.useCallback)((secs) => {
+    const minutes = String(Math.floor(secs / 60)).padStart(2, "0");
+    const seconds = String(secs % 60).padStart(2, "0");
+    setCountDownTime(`${minutes}:${seconds}`);
   }, []);
-  (0, import_react9.useEffect)(() => {
-    if (remaining < 0 && intervalRef.current) {
+  const startTimer = (0, import_react9.useCallback)(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    updateDisplay(remainingSeconds);
+    intervalRef.current = setInterval(() => {
+      setRemainingSeconds((prev) => {
+        const next = prev - 1;
+        if (next < 0) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+          setCountDownTime("00:00");
+          return 0;
+        }
+        updateDisplay(next);
+        return next;
+      });
+    }, 1e3);
+  }, [remainingSeconds, updateDisplay]);
+  const stopTimer = () => {
+    if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
     }
-  }, [remaining]);
+  };
+  (0, import_react9.useEffect)(() => {
+    (async () => {
+      await generatePaymentLinkHandler();
+    })();
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    if (remainingSeconds < 0 && intervalRef.current) {
+      stopTimer();
+    }
+  }, [remainingSeconds]);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-10", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-sub-copy text-sm font-semibold text-center", children: [
-      "Amount to Pay ",
-      amountDisplay
+    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        BaseInput,
+        {
+          label: "Customer Name",
+          required: true,
+          value: transferForm.customerName,
+          onChange: (e) => {
+            setTransferForm({ ...transferForm, customerName: e });
+            if (transferForm.customerName) {
+              setTransferErrors((er) => ({ ...er, customerName: "" }));
+            }
+          },
+          validationError: transferErrors.customerName ?? ""
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        BaseButton,
+        {
+          label: `Pay ${formatAmountHandler}`,
+          type: "primary",
+          customClass: "w-full",
+          loading: isMakingPayment,
+          onClick: payHandler
+        }
+      )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseLabelInfo, { label: "Bank Name", value: bankName, type: "horizontal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between", children: [
+    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           BaseLabelInfo,
           {
-            label: "Account Number",
-            value: accountNumber,
-            type: "horizontal"
+            label: "Bank Name",
+            value: `${paymentAccountDetails?.bank} ${paymentAccountDetails?.accountName}`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseCopy, { color: "#9DBFDE", copyText: accountNumber })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            BaseLabelInfo,
+            {
+              label: "Account Number",
+              value: paymentAccountDetails?.accountNumber
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            BaseCopy,
+            {
+              color: "#9DBFDE",
+              copyText: paymentAccountDetails?.accountNumber ?? ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseLabelInfo, { label: "Amount", value: formatAmountHandler }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseCopy, { color: "#9DBFDE", copyText: formatAmountHandler })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy", children: [
+        "This account is for this transaction only and expires in",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-orange-500", children: remainingSeconds >= 0 ? countDownTime : "00:00" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          BaseLabelInfo,
+          BaseButton,
           {
-            label: "Amount",
-            value: amountDisplay,
-            type: "horizontal"
+            label: "I have paid the money",
+            type: "primary",
+            customClass: "w-full",
+            loading: isFetchingPaymentDetails,
+            onClick: getReferenceDetails
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BaseCopy, { color: "#9DBFDE", copyText: amountDisplay })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: "text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer",
+            children: "Cancel Payment"
+          }
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy", children: [
-      "This account is for this transaction only and expires in",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-orange-500", children: remaining >= 0 ? countDownTime : "00:00" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        BaseButton,
-        {
-          label: "I have paid the money",
-          type: "primary",
-          customClass: "w-full",
-          onClick: onConfirmPaid
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer",
-          children: "Cancel Payment"
-        }
-      )
     ] })
   ] });
 };
@@ -1618,12 +2794,219 @@ var PayByTransfer = ({
 // src/components/pay-by-stable-coin.tsx
 var import_react10 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var PayByStableCoin = ({ onProceedToPay }) => {
+var PayByStableCoin = ({
+  secretKey,
+  paymentObject,
+  environment = "sandbox",
+  onPaymentAuthorized,
+  onError
+}) => {
   const [formIndex, setFormIndex] = (0, import_react10.useState)(0);
-  const payHandler = () => {
-    setFormIndex(1);
-    onProceedToPay?.();
+  const [message, setMessage] = (0, import_react10.useState)("");
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const [generatingAddress, setGeneratingAddress] = (0, import_react10.useState)(false);
+  const [loadingStableCoins, setLoadingStableCoins] = (0, import_react10.useState)(false);
+  const [loadingStableCoinNetworks, setLoadingStableCoinNetworks] = (0, import_react10.useState)(false);
+  const [transactionReference, setTransactionReference] = (0, import_react10.useState)("");
+  const [stableCoins, setStableCoins] = (0, import_react10.useState)([]);
+  const [networkList, setNetworkList] = (0, import_react10.useState)([]);
+  const [addressDetails, setAddressDetails] = (0, import_react10.useState)(null);
+  const [generateAddressPayload, setGenerateAddressPayload] = (0, import_react10.useState)(null);
+  const [isConfirmingPayment, setIsConfirmingPayment] = (0, import_react10.useState)(false);
+  const [paymentReferenceDetails, setPaymentReferenceDetails] = (0, import_react10.useState)(null);
+  const [paymentReferenceStatus, setPaymentReferenceStatus] = (0, import_react10.useState)("");
+  const [stableCoinForm, setStableCoinForm] = (0, import_react10.useState)({
+    stableCoin: "",
+    network: ""
+  });
+  const [stableCoinErrors, setStableCoinErrors] = (0, import_react10.useState)({});
+  const stableCoinRules = {
+    stableCoin: "required",
+    network: "required"
+  };
+  const stableCoinLabels = {
+    stableCoin: "Stable Coin",
+    network: "Network"
+  };
+  const generatePaymentLinkHandler = async () => {
+    if (!secretKey) {
+      setMessage("Secret key is required.");
+      return;
+    }
+    if (!checkObjectTruthy(paymentObject)) {
+      setMessage("Kindly ensure you are passing all the required data.");
+      return;
+    }
+    setLoading(true);
+    setMessage("");
+    try {
+      const response = await createPaymentLink(
+        paymentObject,
+        environment,
+        secretKey
+      );
+      if (response?.isSuccessful && response.launchUrl) {
+        const queryParams = getQueryParams(response.launchUrl);
+        setTransactionReference(queryParams["paymentReference"]);
+        setMessage("Payment link created successfully");
+      } else {
+        setMessage("Failed to create payment link");
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to create payment link");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const generateAddress = async (payload) => {
+    if (!payload) return;
+    setGeneratingAddress(true);
+    try {
+      const response = await generateStableCoinAddress(
+        environment,
+        payload
+      );
+      if (response?.isSuccessful) {
+        setAddressDetails(response.data);
+        setFormIndex(1);
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to generate address");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setGeneratingAddress(false);
+    }
+  };
+  const getAllStableCoins = async () => {
+    setLoadingStableCoins(true);
+    try {
+      const response = await getStableCoins(environment);
+      if (response?.isSuccessful) {
+        setStableCoins(
+          response.data?.map((c) => ({
+            label: c.name,
+            value: c.name
+          })) ?? []
+        );
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to get stable coins");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoadingStableCoins(false);
+    }
+  };
+  const getAllStableCoinNetworks = async (stableCoin) => {
+    setLoadingStableCoinNetworks(true);
+    try {
+      const response = await getStableCoinNetworks(
+        environment,
+        stableCoin
+      );
+      if (response?.isSuccessful) {
+        setNetworkList(
+          response.networks?.map((n) => ({
+            label: n,
+            value: n
+          })) ?? []
+        );
+      }
+    } catch (e) {
+      setMessage(e?.message || "Failed to get stable coin networks");
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setLoadingStableCoinNetworks(false);
+    }
+  };
+  const confirmPaymentHandler = async () => {
+    setIsConfirmingPayment(true);
+    try {
+      const response = await getPaymentReferenceDetails(environment, transactionReference);
+      if (response?.isSuccessful) {
+        setPaymentReferenceDetails(response.data);
+        const needsConfirm = response.data?.finalTransactionStatus == null || response.data?.paymentStatus == null;
+        if (needsConfirm) {
+          setMessage("Transaction not confirmed !!");
+          setPaymentReferenceStatus("pending");
+          onPaymentAuthorized?.({
+            paymentId: transactionReference,
+            paymentDate: response.data?.updatedAt ?? "",
+            paymentStatus: "pending",
+            message
+          });
+        } else if (response.data?.finalTransactionStatus === "Success" || response.data?.paymentStatus === "Payment Received") {
+          setMessage("Transaction confirmed !!");
+          setPaymentReferenceStatus("confirmed");
+          onPaymentAuthorized?.({
+            paymentId: transactionReference,
+            paymentDate: response.data?.updatedAt,
+            paymentStatus: "confirmed",
+            message
+          });
+        }
+      } else if (!response?.isSuccessful && response?.responseCode === "119") {
+        setPaymentReferenceStatus("used");
+        setMessage(response.responseMessage || "");
+        onPaymentAuthorized?.({
+          paymentId: transactionReference,
+          paymentDate: null,
+          paymentStatus: "used",
+          message
+        });
+      }
+    } catch (err) {
+      setPaymentReferenceStatus("");
+      setMessage(
+        err?.error?.responseMessage || err?.error?.message || "Something went wrong"
+      );
+      onError?.({
+        errorMessage: message
+      });
+    } finally {
+      setIsConfirmingPayment(false);
+    }
+  };
+  const formatAmountHandler = formatAmount(
+    paymentObject.amount,
+    paymentObject.currency
+  );
+  const payHandler = async () => {
+    const errs = validateGroup(
+      stableCoinForm,
+      stableCoinRules,
+      stableCoinLabels
+    );
+    setStableCoinErrors(errs);
+    if (Object.keys(errs).length === 0) {
+      const payload = {
+        paymentReference: transactionReference,
+        currency: stableCoinForm.stableCoin,
+        chain: stableCoinForm.network,
+        transactionAmount: paymentObject.amount,
+        merchantId: secretKey
+      };
+      setGenerateAddressPayload(payload);
+      await generateAddress(payload);
+    } else {
+      return;
+    }
   };
+  const amountPlusNetworkFee = addressDetails ? Number(addressDetails.transactionAmount) + addressDetails.networkFee : 0;
+  (0, import_react10.useEffect)(() => {
+    (async () => {
+      await generatePaymentLinkHandler();
+      await getAllStableCoins();
+    })();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-6", children: [
     formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "grid grid-cols-1 gap-6", children: [
@@ -1632,11 +3015,17 @@ var PayByStableCoin = ({ onProceedToPay }) => {
           {
             label: "Select Crypto",
             required: true,
-            options: [
-              { label: "USDT", value: "USDT" },
-              { label: "USDC", value: "USDC" },
-              { label: "BUSD", value: "BUSD" }
-            ]
+            options: stableCoins,
+            loading: loadingStableCoins,
+            value: stableCoinForm.stableCoin,
+            onChange: (e) => {
+              setStableCoinForm({ ...stableCoinForm, stableCoin: e });
+              getAllStableCoinNetworks(e);
+              if (stableCoinErrors.stableCoin) {
+                setStableCoinErrors((er) => ({ ...er, stableCoin: "" }));
+              }
+            },
+            validationError: stableCoinErrors.stableCoin ?? ""
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -1644,52 +3033,46 @@ var PayByStableCoin = ({ onProceedToPay }) => {
           {
             label: "Select Network",
             required: true,
-            options: [
-              { label: "Ethereum", value: "ETH" },
-              { label: "Binance Smart Chain", value: "BSC" },
-              { label: "Polygon", value: "MATIC" }
-            ]
+            options: networkList,
+            loading: loadingStableCoinNetworks,
+            value: stableCoinForm.network,
+            onChange: (e) => {
+              setStableCoinForm({ ...stableCoinForm, network: e });
+              if (stableCoinErrors.network) {
+                setStableCoinErrors((er) => ({ ...er, network: "" }));
+              }
+            },
+            validationError: stableCoinErrors.network ?? ""
           }
         )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         BaseButton,
         {
-          label: "Pay",
+          label: `Pay ${formatAmountHandler}`,
           type: "primary",
           customClass: "w-full",
+          loading: generatingAddress,
           onClick: payHandler
         }
       )
     ] }),
     formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mx-auto", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          BaseImage,
-          {
-            src: "../../../assets/images/stable-coin-qr-code.png",
-            alt: "QR Code",
-            width: 122,
-            height: 122,
-            customClass: "mb-1"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-4xs text-light-copy font-normal text-center", children: "USDC" })
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mx-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-4xs text-light-copy font-normal text-center", children: generateAddressPayload?.currency }) }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50", children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "border-b border-grey-border pb-4 flex flex-col gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Network" }),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex justify-between", children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy", children: "BNB Smart Chain (BEP20)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy", children: addressDetails?.chain }),
               /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "*Est. arrival = 3 mins" }),
                 /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "|" }),
                 /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   BaseCurrencyAmount,
                   {
-                    currency: "USDC",
-                    amount: 10,
+                    currency: generateAddressPayload?.currency ?? "",
+                    amount: addressDetails?.networkFee ?? 0,
                     textClass: "mb-0 text-body-3xs text-light-copy font-normal",
                     iconColorClass: "#557591",
                     iconWidth: 12,
@@ -1704,8 +3087,8 @@ var PayByStableCoin = ({ onProceedToPay }) => {
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "pb-4 flex flex-col gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Deposit Address >" }),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words", children: "0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BaseCopy, { copyText: "0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6" })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words", children: addressDetails?.walletAddress }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BaseCopy, { copyText: addressDetails?.walletAddress ?? "" })
           ] })
         ] })
       ] }),
@@ -1715,8 +3098,8 @@ var PayByStableCoin = ({ onProceedToPay }) => {
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             BaseCurrencyAmount,
             {
-              currency: "USDC",
-              amount: 12,
+              currency: generateAddressPayload?.currency ?? "",
+              amount: addressDetails?.networkFee ?? 0,
               textClass: "mb-0 text-body-2xs font-extrabold text-primary-black",
               iconColorClass: "#231F20"
             }
@@ -1727,8 +3110,8 @@ var PayByStableCoin = ({ onProceedToPay }) => {
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             BaseCurrencyAmount,
             {
-              currency: "USDC",
-              amount: 15,
+              currency: generateAddressPayload?.currency ?? "",
+              amount: amountPlusNetworkFee,
               textClass: "mb-0 text-body-lg font-extrabold text-primary-black",
               iconColorClass: "#231F20",
               iconWidth: 20,
@@ -1742,7 +3125,9 @@ var PayByStableCoin = ({ onProceedToPay }) => {
         {
           label: "Confirm Payment",
           type: "primary",
-          customClass: "w-full"
+          customClass: "w-full",
+          loading: isConfirmingPayment,
+          onClick: confirmPaymentHandler
         }
       ) })
     ] })
@@ -1752,95 +3137,157 @@ var PayByStableCoin = ({ onProceedToPay }) => {
 // src/buzapay-checkout/checkout-card.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function BzpCheckoutCard({
+  secretKey,
   options,
   environment = "sandbox",
   paymentObject = {
+    merchantName: "",
     amount: 0,
     currency: "",
     email: "",
     phoneNumber: "",
     narration: "",
-    redirectUrl: ""
-  }
+    redirectUrl: "https://sandbox-merchant.buzapay.com/account/three-ds-status"
+  },
+  onPaymentAuthorized,
+  onError
 }) {
-  const [checkoutState, setCheckoutState] = (0, import_react11.useState)("PAYMENT");
+  const [checkoutState, setCheckoutState] = (0, import_react11.useState)("PENDING");
   const paymentTypeOptions = [
     { label: "Card", value: "CARD" },
     { label: "Bank Transfer", value: "BANK_TRANSFER" },
     { label: "Stable Coin", value: "STABLE_COIN" }
   ];
   const [filteredPaymentTypeOptions, setFilteredPaymentTypeOptions] = (0, import_react11.useState)([]);
-  const [paymentType, setPaymentType] = (0, import_react11.useState)(
-    filteredPaymentTypeOptions[0].value
-  );
+  const [paymentType, setPaymentType] = (0, import_react11.useState)("");
+  const [successObject, setSuccessObject] = (0, import_react11.useState)({
+    paymentDate: "",
+    paymentId: "",
+    paymentStatus: ""
+  });
   const paymentTypeHandler = (event) => {
     setPaymentType(event);
   };
+  const setSuccess = (event) => {
+    setSuccessObject({ ...event });
+    if (event.paymentStatus === "Authorized") {
+      setCheckoutState("SUCCESS");
+    } else if (event.paymentStatus === "Payment failed") {
+      setCheckoutState("PENDING");
+    } else if (event.paymentStatus === "used") {
+      setCheckoutState("USED");
+    } else {
+      setCheckoutState("PENDING");
+    }
+    onPaymentAuthorized?.(event);
+  };
   (0, import_react11.useEffect)(() => {
     let options2 = [];
     if (paymentObject.currency === "USD") {
-      options2 = paymentTypeOptions.filter(
-        (option) => option.value !== "BANK_TRANSFER"
-      );
+      if (paymentObject.amount < 50) {
+        options2 = paymentTypeOptions.filter(
+          (option) => option.value !== "BANK_TRANSFER" && option.value !== "STABLE_COIN"
+        );
+      } else {
+        options2 = paymentTypeOptions.filter(
+          (option) => option.value !== "BANK_TRANSFER"
+        );
+      }
     } else {
       options2 = paymentTypeOptions.filter(
         (option) => option.value !== "STABLE_COIN"
       );
     }
     setFilteredPaymentTypeOptions(options2);
-  }, [paymentObject.currency]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BaseCard, { showBackButton: checkoutState === "STABLE_COIN_PAYMENT", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "grid grid-cols-3", children: [
-    checkoutState === "PAYMENT" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl", children: [
+  }, [paymentObject.currency, paymentObject.amount]);
+  (0, import_react11.useEffect)(() => {
+    if (filteredPaymentTypeOptions.length) {
+      setPaymentType(filteredPaymentTypeOptions[0].value);
+    }
+  }, [filteredPaymentTypeOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BaseCard, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "grid grid-cols-3", children: [
+    checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl", children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-heading-text text-body-xs font-semibold", children: "Pay with" }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         BaseRadioGroup,
         {
-          options: paymentTypeOptions,
+          options: filteredPaymentTypeOptions,
           selectedChange: (e) => paymentTypeHandler(e)
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "col-span-2", children: [
-      (checkoutState === "PAYMENT" || checkoutState === "STABLE_COIN_PAYMENT") && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
-        checkoutState === "PAYMENT" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between px-12 py-8", children: [
-          options?.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            BaseImage,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      "div",
+      {
+        className: checkoutState === "SUCCESS" ? "col-span-3" : "col-span-2",
+        children: [
+          checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between px-12 py-8", children: [
+            options?.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              BaseImage,
+              {
+                src: options?.imageUrl ?? "",
+                alt: "Merchant Logo",
+                width: 52,
+                height: 52,
+                customClass: "rounded-lg"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              "div",
+              {
+                className: "bg-heading-text rounded flex flex-col justify-center",
+                style: { width: "52px", height: "52px" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-white text-center text-body-2xs font-medium", children: "Logo" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: paymentObject.merchantName }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: [
+                "Pay:",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-orange-500 font-extrabold", children: formatAmount(paymentObject.amount, paymentObject.currency) })
+              ] })
+            ] })
+          ] }),
+          checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "overflow-y-scroll px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            PayByCard,
+            {
+              secretKey,
+              environment,
+              paymentObject,
+              onPaymentAuthorized: setSuccess,
+              onError
+            }
+          ) : paymentType === "BANK_TRANSFER" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            PayByTransfer,
             {
-              src: options?.imageUrl ?? "",
-              alt: "Merchant Logo",
-              width: 52,
-              height: 52,
-              customClass: "rounded-lg"
+              secretKey,
+              environment,
+              paymentObject,
+              onPaymentAuthorized: setSuccess,
+              onError
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            "div",
+            PayByStableCoin,
             {
-              className: "bg-heading-text rounded flex flex-col justify-center",
-              style: { width: "52px", height: "52px" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-white text-center text-body-2xs font-medium", children: "Logo" })
+              secretKey,
+              environment,
+              paymentObject,
+              onPaymentAuthorized: setSuccess,
+              onError
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: "Raymahni Merchant LLC" }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: [
-              "Pay:",
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-orange-500 font-extrabold", children: [
-                currencySign(paymentObject.currency),
-                " 100,051.00"
-              ] })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "overflow-y-scroll px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PayByCard, {}) : paymentType === "BANK_TRANSFER" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PayByTransfer, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          PayByStableCoin,
-          {
-            onProceedToPay: () => setCheckoutState("STABLE_COIN_PAYMENT")
-          }
-        ) })
-      ] }),
-      checkoutState === "SUCCESS" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BaseSuccess, {})
-    ] })
+          ) }),
+          checkoutState === "SUCCESS" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            BaseSuccess,
+            {
+              amount: paymentObject.amount,
+              currency: paymentObject.currency,
+              redirectUrl: paymentObject.redirectUrl ?? "",
+              successObject
+            }
+          )
+        ]
+      }
+    )
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node: