@miden-npm/react 2.1.5 → 2.1.6

package/dist/index.cjs

@@ -750,6 +750,48 @@ async function authorizeCardPayment(environment, { merchantId, ...rest }, caller
   } catch (error) {
   }
 }
+async function validateCardPaymentOtp(environment, { merchantId, ...rest }, caller) {
+  try {
+    const baseUrl = getBaseUrl(environment, caller);
+    const apiKey = {
+      buzapay: "api/v1/checkout/card-payment/validate-otp",
+      miden: ""
+    };
+    const res = await fetch(`${baseUrl}/${apiKey[caller]}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        merchantId,
+        uniqueKey: merchantId
+      },
+      body: JSON.stringify(rest)
+    });
+    return await res.json();
+  } catch (error) {
+  }
+}
+async function resendCardPaymentOtp(environment, { merchantId, ...rest }, caller) {
+  try {
+    const baseUrl = getBaseUrl(environment, caller);
+    const apiKey = {
+      buzapay: "api/v1/checkout/card-payment/resend-otp",
+      miden: ""
+    };
+    const res = await fetch(`${baseUrl}/${apiKey[caller]}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        merchantId,
+        uniqueKey: merchantId
+      },
+      body: JSON.stringify(rest)
+    });
+    return await res.json();
+  } catch (error) {
+  }
+}
 async function getPaymentReferenceDetails(environment, paymentReference, caller) {
   try {
     const baseUrl = getBaseUrl(environment, caller);
@@ -2844,6 +2886,8 @@ function PayByCard({
   const [formIndex, setFormIndex] = (0, import_react10.useState)(0);
   const [message, setMessage] = (0, import_react10.useState)("");
   const [isMakingPayment, setIsMakingPayment] = (0, import_react10.useState)(false);
+  const [isSendingOtp, setIsSendingOtp] = (0, import_react10.useState)(false);
+  const [isValidatingOtp, setIsValidatingOtp] = (0, import_react10.useState)(false);
   const [loading, setLoading] = (0, import_react10.useState)(false);
   const [defaultCountryCode, setDefaultCountryCode] = (0, import_react10.useState)("");
   const [cardType, setCardType] = (0, import_react10.useState)("");
@@ -2876,10 +2920,14 @@ function PayByCard({
     cardPin: ""
     // Only required for Verve cards
   });
+  const [otpForm, setOtpForm] = (0, import_react10.useState)({
+    otp: ""
+  });
   const [billingErrors, setBillingErrors] = (0, import_react10.useState)(
     {}
   );
   const [payErrors, setPayErrors] = (0, import_react10.useState)({});
+  const [otpErrors, setOtpErrors] = (0, import_react10.useState)({});
   const billingRules = {
     address1: "required",
     address2: "",
@@ -2899,6 +2947,9 @@ function PayByCard({
     cardPin: cardType === "Verve" ? "required" : ""
     // optional unless Verve
   };
+  const otpRules = {
+    otp: "required"
+  };
   const formatAmountHandler = formatAmount(
     paymentObject.amount,
     paymentObject.currency
@@ -2920,6 +2971,9 @@ function PayByCard({
     cvv: "CVV",
     cardPin: "Card PIN"
   };
+  const otpLabels = {
+    otp: "OTP"
+  };
   const [threeDSOpen, setThreeDSOpen] = (0, import_react10.useState)(false);
   const [threeDSIframeSrc, setThreeDSIframeSrc] = (0, import_react10.useState)("");
   const messageListenerRef = (0, import_react10.useRef)();
@@ -2966,6 +3020,28 @@ function PayByCard({
       }
     };
   }, []);
+  const resendOtp = async () => {
+    setIsSendingOtp(true);
+    try {
+      const response = await resendCardPaymentOtp(
+        environment,
+        {
+          merchantId: secretKey,
+          transactionReference
+        },
+        caller ?? "buzapay"
+      );
+      if (response?.isSuccessful) {
+        setIsSendingOtp(false);
+        import_react_hot_toast.default.success("OTP Sent Successfully.", toastConfig);
+      }
+    } catch (e) {
+      setMessage(e?.message || "OTP Sending Failed");
+      onError?.({ errorMessage: message });
+    } finally {
+      setIsSendingOtp(false);
+    }
+  };
   const handleMidenProceed = async () => {
     try {
       setIsMakingPayment(true);
@@ -3087,6 +3163,11 @@ function PayByCard({
           response = decryptPayload(environment, response.responseParam);
         }
         if (response?.isSuccessful) {
+          if (response?.otpValidationRequired) {
+            setIsMakingPayment(false);
+            setFormIndex(2);
+            return;
+          }
           if (caller === "miden") {
             handleMidenCard(response);
             return;
@@ -3178,6 +3259,37 @@ function PayByCard({
         });
       }
     }
+    if (formIndex === 2) {
+      const errs = validateGroup(otpForm, otpRules, otpLabels);
+      Object.assign(otpErrors, errs);
+      if (Object.keys(errs).length > 0) return;
+      setIsValidatingOtp(true);
+      try {
+        const response = await validateCardPaymentOtp(
+          environment,
+          {
+            merchantId: secretKey,
+            transactionReference,
+            otp: otpForm.otp
+          },
+          caller ?? "buzapay"
+        );
+        if (response?.isSuccessful) {
+          setIsValidatingOtp(false);
+          onPaymentAuthorized?.({
+            paymentId: transactionReference,
+            paymentDate: (/* @__PURE__ */ new Date()).toISOString(),
+            paymentStatus: "authorized",
+            message: response?.responseMessage
+          });
+        }
+      } catch (e) {
+        setMessage(e?.message || "Validate OTP Failed");
+        onError?.({ errorMessage: message });
+      } finally {
+        setIsValidatingOtp(false);
+      }
+    }
   };
   const generatePaymentLinkHandler = async () => {
     if (!secretKey) {
@@ -3297,260 +3409,311 @@ function PayByCard({
       className: "w-full h-full",
       sandbox: "allow-forms allow-scripts allow-same-origin allow-top-navigation"
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-2 gap-6 overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        BaseInput,
-        {
-          label: "Address Line 2",
-          value: billingForm.address2,
-          onChange: (e) => setBillingForm({ ...billingForm, address2: e }),
-          validationError: billingErrors.address2 ?? ""
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        BaseSelect,
-        {
-          label: "Select Country",
-          required: true,
-          options: countries,
-          loading: loadingCountries,
-          value: billingForm.country,
-          onChange: (e) => {
-            setBillingForm({ ...billingForm, country: e, state: "" });
-            getStates(e);
-            const selectedCountry = COUNTRIES.filter(
-              (c) => c.code.toLowerCase() === e.toLowerCase()
-            )[0];
-            if (selectedCountry) {
-              setDefaultCountryCode(
-                `${selectedCountry.phoneCode}-${selectedCountry.code}`
-              );
-            }
-            if (billingErrors.country) {
-              setBillingErrors((er) => ({ ...er, country: "" }));
-            }
-          },
-          validationError: billingErrors.country ?? ""
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        BaseSelect,
-        {
-          label: "Select State",
-          required: true,
-          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_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        BaseInput,
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_hot_toast.Toaster, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-6", children: [
+      formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-2 gap-6 overflow-y-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          BaseInput,
+          {
+            label: "Address Line 2",
+            value: billingForm.address2,
+            onChange: (e) => setBillingForm({ ...billingForm, address2: e }),
+            validationError: billingErrors.address2 ?? ""
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          BaseSelect,
+          {
+            label: "Select Country",
+            required: true,
+            options: countries,
+            loading: loadingCountries,
+            value: billingForm.country,
+            onChange: (e) => {
+              setBillingForm({ ...billingForm, country: e, state: "" });
+              getStates(e);
+              const selectedCountry = COUNTRIES.filter(
+                (c) => c.code.toLowerCase() === e.toLowerCase()
+              )[0];
+              if (selectedCountry) {
+                setDefaultCountryCode(
+                  `${selectedCountry.phoneCode}-${selectedCountry.code}`
+                );
+              }
+              if (billingErrors.country) {
+                setBillingErrors((er) => ({ ...er, country: "" }));
+              }
+            },
+            validationError: billingErrors.country ?? ""
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          BaseSelect,
+          {
+            label: "Select State",
+            required: true,
+            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_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          BasePhoneNumberInput,
+          {
+            label: "Phone Number",
+            required: true,
+            preventPaste: true,
+            value: billingForm.phoneNumber,
+            phoneCodeOptions,
+            defaultCountryCode,
+            onChange: (e) => {
+              setBillingForm({ ...billingForm, phoneNumber: e });
+              if (billingErrors.phoneNumber) {
+                setBillingErrors((er) => ({ ...er, phoneNumber: "" }));
+              }
+            },
+            onCodeChange: (e) => {
+              setBillingForm({ ...billingForm, phoneNumberExt: e });
+              if (billingErrors.phoneNumberExt) {
+                setBillingErrors((er) => ({ ...er, phoneNumberExt: "" }));
+              }
+            },
+            validationError: billingErrors.phoneNumber ?? ""
+          }
+        ) })
+      ] }),
+      formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        "div",
         {
-          label: "Email",
-          required: true,
-          value: billingForm.emailAddress,
-          onChange: (e) => {
-            setBillingForm({ ...billingForm, emailAddress: e });
-            if (billingErrors.emailAddress) {
-              setBillingErrors((er) => ({ ...er, emailAddress: "" }));
-            }
-          },
-          validationError: billingErrors.emailAddress ?? ""
+          className: "grid grid-cols-2 gap-6 overflow-y-auto",
+          style: { maxHeight: 320 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              BaseInput,
+              {
+                label: "Card Number",
+                required: true,
+                rules: ["numeric"],
+                mask: "0000 0000 0000 0000 000",
+                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_runtime36.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_runtime36.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_runtime36.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_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        BasePhoneNumberInput,
+      ),
+      formIndex === 2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "div",
         {
-          label: "Phone Number",
-          required: true,
-          preventPaste: true,
-          value: billingForm.phoneNumber,
-          phoneCodeOptions,
-          defaultCountryCode,
-          onChange: (e) => {
-            setBillingForm({ ...billingForm, phoneNumber: e });
-            if (billingErrors.phoneNumber) {
-              setBillingErrors((er) => ({ ...er, phoneNumber: "" }));
-            }
-          },
-          onCodeChange: (e) => {
-            setBillingForm({ ...billingForm, phoneNumberExt: e });
-            if (billingErrors.phoneNumberExt) {
-              setBillingErrors((er) => ({ ...er, phoneNumberExt: "" }));
-            }
-          },
-          validationError: billingErrors.phoneNumber ?? ""
-        }
-      ) })
-    ] }),
-    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-      "div",
-      {
-        className: "grid grid-cols-2 gap-6 overflow-y-auto",
-        style: { maxHeight: 320 },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            BaseInput,
-            {
-              label: "Card Name",
-              required: true,
-              value: payForm.customerName,
-              onChange: (e) => {
-                setPayForm({ ...payForm, customerName: e });
-                if (payErrors.customerName) {
-                  setPayErrors((er) => ({ ...er, customerName: "" }));
+          className: "grid grid-cols-2 gap-6 overflow-y-auto",
+          style: { maxHeight: 320 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "col-span-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              BaseInput,
+              {
+                label: "OTP",
+                required: true,
+                value: otpForm.otp,
+                onChange: (e) => {
+                  setOtpForm({ ...otpForm, otp: e });
+                  if (otpErrors.otp) {
+                    setOtpErrors((er) => ({ ...er, otp: "" }));
+                  }
+                },
+                validationError: otpErrors.otp ?? ""
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-primary text-sm mt-2", children: [
+              "Didn't get OTP?",
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "span",
+                {
+                  className: isSendingOtp ? "ml-1" : "ml-1 underline cursor-pointer",
+                  onClick: () => {
+                    if (isSendingOtp) return;
+                    resendOtp();
+                  },
+                  children: isSendingOtp ? "Sending..." : "Resend OTP"
                 }
-              },
-              validationError: payErrors.customerName ?? ""
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            BaseInput,
-            {
-              label: "Card Number",
-              required: true,
-              rules: ["numeric"],
-              mask: "0000 0000 0000 0000 000",
-              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_runtime36.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_runtime36.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_runtime36.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_runtime36.jsxs)("div", { className: "flex items-center justify-between gap-4 mt-6", children: [
-      formIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        BaseButton,
-        {
-          label: "Previous",
-          type: "secondary",
-          customClass: "w-1/2",
-          caller,
-          onClick: goBack
+              )
+            ] })
+          ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        BaseButton,
-        {
-          label: formIndex === 0 ? "Proceed" : `Pay ${formatAmountHandler}`,
-          type: "primary",
-          customClass: `${formIndex > 0 ? "w-1/2" : "w-full"}`,
-          caller,
-          loading: isMakingPayment,
-          onClick: proceedHandler,
-          disabled: isMakingPayment
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between gap-4 mt-6", children: [
+        formIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          BaseButton,
+          {
+            label: "Previous",
+            type: "secondary",
+            customClass: "w-1/2",
+            caller,
+            onClick: goBack
+          }
+        ),
+        formIndex < 2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          BaseButton,
+          {
+            label: formIndex === 0 ? "Proceed" : `Pay ${formatAmountHandler}`,
+            type: "primary",
+            customClass: `${formIndex > 0 ? "w-1/2" : "w-full"}`,
+            caller,
+            loading: isMakingPayment,
+            onClick: proceedHandler,
+            disabled: isMakingPayment
+          }
+        ),
+        formIndex === 2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          BaseButton,
+          {
+            label: "Validate OTP",
+            type: "primary",
+            caller,
+            loading: isValidatingOtp,
+            onClick: proceedHandler
+          }
+        ) })
+      ] })
     ] })
   ] });
 }
@@ -3622,7 +3785,7 @@ var PayByTransfer = ({
             );
             startTimer();
             setMessage("Virtual account generated successfully for payment.");
-            setIsMakingPayment(true);
+            setIsMakingPayment(false);
             setFormIndex(1);
           } else {
             setIsMakingPayment(false);
@@ -3904,7 +4067,7 @@ var PayByTransfer = ({
           "button",
           {
             type: "button",
-            onClick: onCancel,
+            onClick: () => setFormIndex(0),
             className: "text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer",
             children: "Cancel Payment"
           }