@miden-npm/react 2.0.3 → 2.0.5

package/dist/index.cjs

@@ -144,6 +144,10 @@ function buildDeviceInformation(partial) {
     ...partial
   };
 }
+var toastConfig = {
+  position: "top-right",
+  style: { fontSize: "12px" }
+};
 
 // src/utils/api.util.ts
 var getBaseUrl = (mode, caller) => {
@@ -168,7 +172,7 @@ var currencySign = (currency) => {
 var formatAmount = (value, currency) => {
   const num = typeof value === "string" ? parseFloat(value) : value;
   if (isNaN(num)) return "0";
-  return `${currency ? currencySign(currency) : ""} ${num?.toLocaleString(
+  return `${currency ? currencySign(currency) : ""}${num?.toLocaleString(
     "en-US"
   )}`;
 };
@@ -201,6 +205,254 @@ var restrictToNumericKeys = (event) => {
     event.preventDefault();
   }
 };
+var COUNTRIES = [
+  { name: "Afghanistan", code: "AF", phoneCode: "+93", flag: "\u{1F1E6}\u{1F1EB}" },
+  { name: "Albania", code: "AL", phoneCode: "+355", flag: "\u{1F1E6}\u{1F1F1}" },
+  { name: "Algeria", code: "DZ", phoneCode: "+213", flag: "\u{1F1E9}\u{1F1FF}" },
+  { name: "American Samoa", code: "AS", phoneCode: "+1", flag: "\u{1F1E6}\u{1F1F8}" },
+  { name: "Andorra", code: "AD", phoneCode: "+376", flag: "\u{1F1E6}\u{1F1E9}" },
+  { name: "Angola", code: "AO", phoneCode: "+244", flag: "\u{1F1E6}\u{1F1F4}" },
+  { name: "Anguilla", code: "AI", phoneCode: "+1", flag: "\u{1F1E6}\u{1F1EE}" },
+  { name: "Antarctica", code: "AQ", phoneCode: "+672", flag: "\u{1F1E6}\u{1F1F6}" },
+  { name: "Antigua and Barbuda", code: "AG", phoneCode: "+1", flag: "\u{1F1E6}\u{1F1EC}" },
+  { name: "Argentina", code: "AR", phoneCode: "+54", flag: "\u{1F1E6}\u{1F1F7}" },
+  { name: "Armenia", code: "AM", phoneCode: "+374", flag: "\u{1F1E6}\u{1F1F2}" },
+  { name: "Aruba", code: "AW", phoneCode: "+297", flag: "\u{1F1E6}\u{1F1FC}" },
+  { name: "Australia", code: "AU", phoneCode: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
+  { name: "Austria", code: "AT", phoneCode: "+43", flag: "\u{1F1E6}\u{1F1F9}" },
+  { name: "Azerbaijan", code: "AZ", phoneCode: "+994", flag: "\u{1F1E6}\u{1F1FF}" },
+  { name: "Bahamas", code: "BS", phoneCode: "+1", flag: "\u{1F1E7}\u{1F1F8}" },
+  { name: "Bahrain", code: "BH", phoneCode: "+973", flag: "\u{1F1E7}\u{1F1ED}" },
+  { name: "Bangladesh", code: "BD", phoneCode: "+880", flag: "\u{1F1E7}\u{1F1E9}" },
+  { name: "Barbados", code: "BB", phoneCode: "+1", flag: "\u{1F1E7}\u{1F1E7}" },
+  { name: "Belarus", code: "BY", phoneCode: "+375", flag: "\u{1F1E7}\u{1F1FE}" },
+  { name: "Belgium", code: "BE", phoneCode: "+32", flag: "\u{1F1E7}\u{1F1EA}" },
+  { name: "Belize", code: "BZ", phoneCode: "+501", flag: "\u{1F1E7}\u{1F1FF}" },
+  { name: "Benin", code: "BJ", phoneCode: "+229", flag: "\u{1F1E7}\u{1F1EF}" },
+  { name: "Bermuda", code: "BM", phoneCode: "+1", flag: "\u{1F1E7}\u{1F1F2}" },
+  { name: "Bhutan", code: "BT", phoneCode: "+975", flag: "\u{1F1E7}\u{1F1F9}" },
+  { name: "Bolivia", code: "BO", phoneCode: "+591", flag: "\u{1F1E7}\u{1F1F4}" },
+  { name: "Bosnia and Herzegovina", code: "BA", phoneCode: "+387", flag: "\u{1F1E7}\u{1F1E6}" },
+  { name: "Botswana", code: "BW", phoneCode: "+267", flag: "\u{1F1E7}\u{1F1FC}" },
+  { name: "Bouvet Island", code: "BV", phoneCode: "+47", flag: "\u{1F1E7}\u{1F1FB}" },
+  { name: "Brazil", code: "BR", phoneCode: "+55", flag: "\u{1F1E7}\u{1F1F7}" },
+  { name: "British Indian Ocean Territory", code: "IO", phoneCode: "+246", flag: "\u{1F1EE}\u{1F1F4}" },
+  { name: "Brunei Darussalam", code: "BN", phoneCode: "+673", flag: "\u{1F1E7}\u{1F1F3}" },
+  { name: "Bulgaria", code: "BG", phoneCode: "+359", flag: "\u{1F1E7}\u{1F1EC}" },
+  { name: "Burkina Faso", code: "BF", phoneCode: "+226", flag: "\u{1F1E7}\u{1F1EB}" },
+  { name: "Burundi", code: "BI", phoneCode: "+257", flag: "\u{1F1E7}\u{1F1EE}" },
+  { name: "Cambodia", code: "KH", phoneCode: "+855", flag: "\u{1F1F0}\u{1F1ED}" },
+  { name: "Cameroon", code: "CM", phoneCode: "+237", flag: "\u{1F1E8}\u{1F1F2}" },
+  { name: "Canada", code: "CA", phoneCode: "+1", flag: "\u{1F1E8}\u{1F1E6}" },
+  { name: "Cape Verde", code: "CV", phoneCode: "+238", flag: "\u{1F1E8}\u{1F1FB}" },
+  { name: "Cayman Islands", code: "KY", phoneCode: "+1", flag: "\u{1F1F0}\u{1F1FE}" },
+  { name: "Central African Republic", code: "CF", phoneCode: "+236", flag: "\u{1F1E8}\u{1F1EB}" },
+  { name: "Chad", code: "TD", phoneCode: "+235", flag: "\u{1F1F9}\u{1F1E9}" },
+  { name: "Chile", code: "CL", phoneCode: "+56", flag: "\u{1F1E8}\u{1F1F1}" },
+  { name: "China", code: "CN", phoneCode: "+86", flag: "\u{1F1E8}\u{1F1F3}" },
+  { name: "Christmas Island", code: "CX", phoneCode: "+61", flag: "\u{1F1E8}\u{1F1FD}" },
+  { name: "Cocos (Keeling) Islands", code: "CC", phoneCode: "+61", flag: "\u{1F1E8}\u{1F1E8}" },
+  { name: "Colombia", code: "CO", phoneCode: "+57", flag: "\u{1F1E8}\u{1F1F4}" },
+  { name: "Comoros", code: "KM", phoneCode: "+269", flag: "\u{1F1F0}\u{1F1F2}" },
+  { name: "Congo", code: "CG", phoneCode: "+242", flag: "\u{1F1E8}\u{1F1EC}" },
+  { name: "Congo, Democratic Republic of the", code: "CD", phoneCode: "+243", flag: "\u{1F1E8}\u{1F1E9}" },
+  { name: "Cook Islands", code: "CK", phoneCode: "+682", flag: "\u{1F1E8}\u{1F1F0}" },
+  { name: "Costa Rica", code: "CR", phoneCode: "+506", flag: "\u{1F1E8}\u{1F1F7}" },
+  { name: "C\xF4te d'Ivoire", code: "CI", phoneCode: "+225", flag: "\u{1F1E8}\u{1F1EE}" },
+  { name: "Croatia", code: "HR", phoneCode: "+385", flag: "\u{1F1ED}\u{1F1F7}" },
+  { name: "Cuba", code: "CU", phoneCode: "+53", flag: "\u{1F1E8}\u{1F1FA}" },
+  { name: "Cyprus", code: "CY", phoneCode: "+357", flag: "\u{1F1E8}\u{1F1FE}" },
+  { name: "Czech Republic", code: "CZ", phoneCode: "+420", flag: "\u{1F1E8}\u{1F1FF}" },
+  { name: "Denmark", code: "DK", phoneCode: "+45", flag: "\u{1F1E9}\u{1F1F0}" },
+  { name: "Djibouti", code: "DJ", phoneCode: "+253", flag: "\u{1F1E9}\u{1F1EF}" },
+  { name: "Dominica", code: "DM", phoneCode: "+1", flag: "\u{1F1E9}\u{1F1F2}" },
+  { name: "Dominican Republic", code: "DO", phoneCode: "+1", flag: "\u{1F1E9}\u{1F1F4}" },
+  { name: "Ecuador", code: "EC", phoneCode: "+593", flag: "\u{1F1EA}\u{1F1E8}" },
+  { name: "Egypt", code: "EG", phoneCode: "+20", flag: "\u{1F1EA}\u{1F1EC}" },
+  { name: "El Salvador", code: "SV", phoneCode: "+503", flag: "\u{1F1F8}\u{1F1FB}" },
+  { name: "Equatorial Guinea", code: "GQ", phoneCode: "+240", flag: "\u{1F1EC}\u{1F1F6}" },
+  { name: "Eritrea", code: "ER", phoneCode: "+291", flag: "\u{1F1EA}\u{1F1F7}" },
+  { name: "Estonia", code: "EE", phoneCode: "+372", flag: "\u{1F1EA}\u{1F1EA}" },
+  { name: "Ethiopia", code: "ET", phoneCode: "+251", flag: "\u{1F1EA}\u{1F1F9}" },
+  { name: "Falkland Islands (Malvinas)", code: "FK", phoneCode: "+500", flag: "\u{1F1EB}\u{1F1F0}" },
+  { name: "Faroe Islands", code: "FO", phoneCode: "+298", flag: "\u{1F1EB}\u{1F1F4}" },
+  { name: "Fiji", code: "FJ", phoneCode: "+679", flag: "\u{1F1EB}\u{1F1EF}" },
+  { name: "Finland", code: "FI", phoneCode: "+358", flag: "\u{1F1EB}\u{1F1EE}" },
+  { name: "France", code: "FR", phoneCode: "+33", flag: "\u{1F1EB}\u{1F1F7}" },
+  { name: "French Guiana", code: "GF", phoneCode: "+594", flag: "\u{1F1EC}\u{1F1EB}" },
+  { name: "French Polynesia", code: "PF", phoneCode: "+689", flag: "\u{1F1F5}\u{1F1EB}" },
+  { name: "French Southern Territories", code: "TF", phoneCode: "+262", flag: "\u{1F1F9}\u{1F1EB}" },
+  { name: "Gabon", code: "GA", phoneCode: "+240", flag: "\u{1F1EC}\u{1F1E6}" },
+  { name: "Gambia", code: "GM", phoneCode: "+220", flag: "\u{1F1EC}\u{1F1F2}" },
+  { name: "Georgia", code: "GE", phoneCode: "+995", flag: "\u{1F1EC}\u{1F1EA}" },
+  { name: "Germany", code: "DE", phoneCode: "+49", flag: "\u{1F1E9}\u{1F1EA}" },
+  { name: "Ghana", code: "GH", phoneCode: "+233", flag: "\u{1F1EC}\u{1F1ED}" },
+  { name: "Gibraltar", code: "GI", phoneCode: "+350", flag: "\u{1F1EC}\u{1F1EE}" },
+  { name: "Greece", code: "GR", phoneCode: "+30", flag: "\u{1F1EC}\u{1F1F7}" },
+  { name: "Greenland", code: "GL", phoneCode: "+299", flag: "\u{1F1EC}\u{1F1F1}" },
+  { name: "Grenada", code: "GD", phoneCode: "+1", flag: "\u{1F1EC}\u{1F1E9}" },
+  { name: "Guadeloupe", code: "GP", phoneCode: "+590", flag: "\u{1F1EC}\u{1F1F5}" },
+  { name: "Guam", code: "GU", phoneCode: "+1", flag: "\u{1F1EC}\u{1F1FA}" },
+  { name: "Guatemala", code: "GT", phoneCode: "+502", flag: "\u{1F1EC}\u{1F1F9}" },
+  { name: "Guernsey", code: "GG", phoneCode: "+44", flag: "\u{1F1EC}\u{1F1EC}" },
+  { name: "Guinea", code: "GN", phoneCode: "+224", flag: "\u{1F1EC}\u{1F1F3}" },
+  { name: "Guinea-Bissau", code: "GW", phoneCode: "+245", flag: "\u{1F1EC}\u{1F1FC}" },
+  { name: "Guyana", code: "GY", phoneCode: "+592", flag: "\u{1F1EC}\u{1F1FE}" },
+  { name: "Haiti", code: "HT", phoneCode: "+509", flag: "\u{1F1ED}\u{1F1F9}" },
+  { name: "Heard Island and McDonald Islands", code: "HM", phoneCode: "+672", flag: "\u{1F1ED}\u{1F1F2}" },
+  { name: "Holy See (Vatican City State)", code: "VA", phoneCode: "+39", flag: "\u{1F1FB}\u{1F1E6}" },
+  { name: "Honduras", code: "HN", phoneCode: "+504", flag: "\u{1F1ED}\u{1F1F3}" },
+  { name: "Hong Kong", code: "HK", phoneCode: "+852", flag: "\u{1F1ED}\u{1F1F0}" },
+  { name: "Hungary", code: "HU", phoneCode: "+36", flag: "\u{1F1ED}\u{1F1FA}" },
+  { name: "Iceland", code: "IS", phoneCode: "+354", flag: "\u{1F1EE}\u{1F1F8}" },
+  { name: "India", code: "IN", phoneCode: "+91", flag: "\u{1F1EE}\u{1F1F3}" },
+  { name: "Indonesia", code: "ID", phoneCode: "+62", flag: "\u{1F1EE}\u{1F1E9}" },
+  { name: "Iran, Islamic Republic of", code: "IR", phoneCode: "+98", flag: "\u{1F1EE}\u{1F1F7}" },
+  { name: "Iraq", code: "IQ", phoneCode: "+964", flag: "\u{1F1EE}\u{1F1F6}" },
+  { name: "Ireland", code: "IE", phoneCode: "+353", flag: "\u{1F1EE}\u{1F1EA}" },
+  { name: "Isle of Man", code: "IM", phoneCode: "+44", flag: "\u{1F1EE}\u{1F1F2}" },
+  { name: "Israel", code: "IL", phoneCode: "+972", flag: "\u{1F1EE}\u{1F1F1}" },
+  { name: "Italy", code: "IT", phoneCode: "+39", flag: "\u{1F1EE}\u{1F1F9}" },
+  { name: "Jamaica", code: "JM", phoneCode: "+1", flag: "\u{1F1EF}\u{1F1F2}" },
+  { name: "Japan", code: "JP", phoneCode: "+81", flag: "\u{1F1EF}\u{1F1F5}" },
+  { name: "Jersey", code: "JE", phoneCode: "+44", flag: "\u{1F1EF}\u{1F1EA}" },
+  { name: "Jordan", code: "JO", phoneCode: "+962", flag: "\u{1F1EF}\u{1F1F4}" },
+  { name: "Kazakhstan", code: "KZ", phoneCode: "+7", flag: "\u{1F1F0}\u{1F1FF}" },
+  { name: "Kenya", code: "KE", phoneCode: "+254", flag: "\u{1F1F0}\u{1F1EA}" },
+  { name: "Kiribati", code: "KI", phoneCode: "+686", flag: "\u{1F1F0}\u{1F1EE}" },
+  { name: "Korea, Democratic People's Republic of", code: "KP", phoneCode: "+850", flag: "\u{1F1F0}\u{1F1F5}" },
+  { name: "Korea, Republic of", code: "KR", phoneCode: "+82", flag: "\u{1F1F0}\u{1F1F7}" },
+  { name: "Kuwait", code: "KW", phoneCode: "+965", flag: "\u{1F1F0}\u{1F1FC}" },
+  { name: "Kyrgyzstan", code: "KG", phoneCode: "+996", flag: "\u{1F1F0}\u{1F1EC}" },
+  { name: "Lao People's Democratic Republic", code: "LA", phoneCode: "+856", flag: "\u{1F1F1}\u{1F1E6}" },
+  { name: "Latvia", code: "LV", phoneCode: "+371", flag: "\u{1F1F1}\u{1F1FB}" },
+  { name: "Lebanon", code: "LB", phoneCode: "+961", flag: "\u{1F1F1}\u{1F1E7}" },
+  { name: "Lesotho", code: "LS", phoneCode: "+266", flag: "\u{1F1F1}\u{1F1F8}" },
+  { name: "Liberia", code: "LR", phoneCode: "+231", flag: "\u{1F1F1}\u{1F1F7}" },
+  { name: "Libya", code: "LY", phoneCode: "+218", flag: "\u{1F1F1}\u{1F1FE}" },
+  { name: "Liechtenstein", code: "LI", phoneCode: "+423", flag: "\u{1F1F1}\u{1F1EE}" },
+  { name: "Lithuania", code: "LT", phoneCode: "+370", flag: "\u{1F1F1}\u{1F1F9}" },
+  { name: "Luxembourg", code: "LU", phoneCode: "+352", flag: "\u{1F1F1}\u{1F1FA}" },
+  { name: "Macao", code: "MO", phoneCode: "+853", flag: "\u{1F1F2}\u{1F1F4}" },
+  { name: "Macedonia, the former Yugoslav Republic of", code: "MK", phoneCode: "+389", flag: "\u{1F1F2}\u{1F1F0}" },
+  { name: "Madagascar", code: "MG", phoneCode: "+261", flag: "\u{1F1F2}\u{1F1EC}" },
+  { name: "Malawi", code: "MW", phoneCode: "+265", flag: "\u{1F1F2}\u{1F1FC}" },
+  { name: "Malaysia", code: "MY", phoneCode: "+60", flag: "\u{1F1F2}\u{1F1FE}" },
+  { name: "Maldives", code: "MV", phoneCode: "+960", flag: "\u{1F1F2}\u{1F1FB}" },
+  { name: "Mali", code: "ML", phoneCode: "+223", flag: "\u{1F1F2}\u{1F1F1}" },
+  { name: "Malta", code: "MT", phoneCode: "+356", flag: "\u{1F1F2}\u{1F1F9}" },
+  { name: "Marshall Islands", code: "MH", phoneCode: "+692", flag: "\u{1F1F2}\u{1F1ED}" },
+  { name: "Martinique", code: "MQ", phoneCode: "+596", flag: "\u{1F1F2}\u{1F1F6}" },
+  { name: "Mauritania", code: "MR", phoneCode: "+222", flag: "\u{1F1F2}\u{1F1F7}" },
+  { name: "Mauritius", code: "MU", phoneCode: "+230", flag: "\u{1F1F2}\u{1F1FA}" },
+  { name: "Mayotte", code: "YT", phoneCode: "+262", flag: "\u{1F1FE}\u{1F1F9}" },
+  { name: "Mexico", code: "MX", phoneCode: "+52", flag: "\u{1F1F2}\u{1F1FD}" },
+  { name: "Micronesia, Federated States of", code: "FM", phoneCode: "+691", flag: "\u{1F1EB}\u{1F1F2}" },
+  { name: "Moldova, Republic of", code: "MD", phoneCode: "+373", flag: "\u{1F1F2}\u{1F1E9}" },
+  { name: "Monaco", code: "MC", phoneCode: "+377", flag: "\u{1F1F2}\u{1F1E8}" },
+  { name: "Mongolia", code: "MN", phoneCode: "+976", flag: "\u{1F1F2}\u{1F1F3}" },
+  { name: "Montenegro", code: "ME", phoneCode: "+382", flag: "\u{1F1F2}\u{1F1EA}" },
+  { name: "Montserrat", code: "MS", phoneCode: "+1", flag: "\u{1F1F2}\u{1F1F8}" },
+  { name: "Morocco", code: "MA", phoneCode: "+212", flag: "\u{1F1F2}\u{1F1E6}" },
+  { name: "Mozambique", code: "MZ", phoneCode: "+258", flag: "\u{1F1F2}\u{1F1FF}" },
+  { name: "Myanmar", code: "MM", phoneCode: "+95", flag: "\u{1F1F2}\u{1F1F2}" },
+  { name: "Namibia", code: "NA", phoneCode: "+264", flag: "\u{1F1F3}\u{1F1E6}" },
+  { name: "Nauru", code: "NR", phoneCode: "+674", flag: "\u{1F1F3}\u{1F1F7}" },
+  { name: "Nepal", code: "NP", phoneCode: "+977", flag: "\u{1F1F3}\u{1F1F5}" },
+  { name: "Netherlands", code: "NL", phoneCode: "+31", flag: "\u{1F1F3}\u{1F1F1}" },
+  { name: "New Caledonia", code: "NC", phoneCode: "+687", flag: "\u{1F1F3}\u{1F1E8}" },
+  { name: "New Zealand", code: "NZ", phoneCode: "+64", flag: "\u{1F1F3}\u{1F1FF}" },
+  { name: "Nicaragua", code: "NI", phoneCode: "+505", flag: "\u{1F1F3}\u{1F1EE}" },
+  { name: "Niger", code: "NE", phoneCode: "+227", flag: "\u{1F1F3}\u{1F1EA}" },
+  { name: "Nigeria", code: "NG", phoneCode: "+234", flag: "\u{1F1F3}\u{1F1EC}" },
+  { name: "Niue", code: "NU", phoneCode: "+683", flag: "\u{1F1F3}\u{1F1FA}" },
+  { name: "Norfolk Island", code: "NF", phoneCode: "+672", flag: "\u{1F1F3}\u{1F1EB}" },
+  { name: "Northern Mariana Islands", code: "MP", phoneCode: "+1", flag: "\u{1F1F2}\u{1F1F5}" },
+  { name: "Norway", code: "NO", phoneCode: "+47", flag: "\u{1F1F3}\u{1F1F4}" },
+  { name: "Oman", code: "OM", phoneCode: "+968", flag: "\u{1F1F4}\u{1F1F2}" },
+  { name: "Pakistan", code: "PK", phoneCode: "+92", flag: "\u{1F1F5}\u{1F1F0}" },
+  { name: "Palau", code: "PW", phoneCode: "+680", flag: "\u{1F1F5}\u{1F1FC}" },
+  { name: "Palestinian Territory, Occupied", code: "PS", phoneCode: "+970", flag: "\u{1F1F5}\u{1F1F8}" },
+  { name: "Panama", code: "PA", phoneCode: "+507", flag: "\u{1F1F5}\u{1F1E6}" },
+  { name: "Papua New Guinea", code: "PG", phoneCode: "+675", flag: "\u{1F1F5}\u{1F1EC}" },
+  { name: "Paraguay", code: "PY", phoneCode: "+595", flag: "\u{1F1F5}\u{1F1FE}" },
+  { name: "Peru", code: "PE", phoneCode: "+51", flag: "\u{1F1F5}\u{1F1EA}" },
+  { name: "Philippines", code: "PH", phoneCode: "+63", flag: "\u{1F1F5}\u{1F1ED}" },
+  { name: "Pitcairn", code: "PN", phoneCode: "+64", flag: "\u{1F1F5}\u{1F1F3}" },
+  { name: "Poland", code: "PL", phoneCode: "+48", flag: "\u{1F1F5}\u{1F1F1}" },
+  { name: "Portugal", code: "PT", phoneCode: "+351", flag: "\u{1F1F5}\u{1F1F9}" },
+  { name: "Puerto Rico", code: "PR", phoneCode: "+1", flag: "\u{1F1F5}\u{1F1F7}" },
+  { name: "Qatar", code: "QA", phoneCode: "+974", flag: "\u{1F1F6}\u{1F1E6}" },
+  { name: "R\xE9union", code: "RE", phoneCode: "+262", flag: "\u{1F1F7}\u{1F1EA}" },
+  { name: "Romania", code: "RO", phoneCode: "+40", flag: "\u{1F1F7}\u{1F1F4}" },
+  { name: "Russian Federation", code: "RU", phoneCode: "+7", flag: "\u{1F1F7}\u{1F1FA}" },
+  { name: "Rwanda", code: "RW", phoneCode: "+250", flag: "\u{1F1F7}\u{1F1FC}" },
+  { name: "Saint Barth\xE9lemy", code: "BL", phoneCode: "+590", flag: "\u{1F1E7}\u{1F1F1}" },
+  { name: "Saint Helena, Ascension and Tristan da Cunha", code: "SH", phoneCode: "+290", flag: "\u{1F1F8}\u{1F1ED}" },
+  { name: "Saint Kitts and Nevis", code: "KN", phoneCode: "+1", flag: "\u{1F1F0}\u{1F1F3}" },
+  { name: "Saint Lucia", code: "LC", phoneCode: "+1", flag: "\u{1F1F1}\u{1F1E8}" },
+  { name: "Saint Martin (French part)", code: "MF", phoneCode: "+590", flag: "\u{1F1F2}\u{1F1EB}" },
+  { name: "Saint Pierre and Miquelon", code: "PM", phoneCode: "+508", flag: "\u{1F1F5}\u{1F1F2}" },
+  { name: "Saint Vincent and the Grenadines", code: "VC", phoneCode: "+1", flag: "\u{1F1FB}\u{1F1E8}" },
+  { name: "Samoa", code: "WS", phoneCode: "+685", flag: "\u{1F1FC}\u{1F1F8}" },
+  { name: "San Marino", code: "SM", phoneCode: "+378", flag: "\u{1F1F8}\u{1F1F2}" },
+  { name: "Sao Tome and Principe", code: "ST", phoneCode: "+239", flag: "\u{1F1F8}\u{1F1F9}" },
+  { name: "Saudi Arabia", code: "SA", phoneCode: "+966", flag: "\u{1F1F8}\u{1F1E6}" },
+  { name: "Senegal", code: "SN", phoneCode: "+221", flag: "\u{1F1F8}\u{1F1F3}" },
+  { name: "Serbia", code: "RS", phoneCode: "+381", flag: "\u{1F1F7}\u{1F1F8}" },
+  { name: "Seychelles", code: "SC", phoneCode: "+248", flag: "\u{1F1F8}\u{1F1E8}" },
+  { name: "Sierra Leone", code: "SL", phoneCode: "+232", flag: "\u{1F1F8}\u{1F1F1}" },
+  { name: "Singapore", code: "SG", phoneCode: "+65", flag: "\u{1F1F8}\u{1F1EC}" },
+  { name: "Sint Maarten (Dutch part)", code: "SX", phoneCode: "+1", flag: "\u{1F1F8}\u{1F1FD}" },
+  { name: "Slovakia", code: "SK", phoneCode: "+421", flag: "\u{1F1F8}\u{1F1F0}" },
+  { name: "Slovenia", code: "SI", phoneCode: "+386", flag: "\u{1F1F8}\u{1F1EE}" },
+  { name: "Solomon Islands", code: "SB", phoneCode: "+677", flag: "\u{1F1F8}\u{1F1E7}" },
+  { name: "Somalia", code: "SO", phoneCode: "+252", flag: "\u{1F1F8}\u{1F1F4}" },
+  { name: "South Africa", code: "ZA", phoneCode: "+27", flag: "\u{1F1FF}\u{1F1E6}" },
+  { name: "South Georgia and the South Sandwich Islands", code: "GS", phoneCode: "+500", flag: "\u{1F1EC}\u{1F1F8}" },
+  { name: "South Sudan", code: "SS", phoneCode: "+211", flag: "\u{1F1F8}\u{1F1F8}" },
+  { name: "Spain", code: "ES", phoneCode: "+34", flag: "\u{1F1EA}\u{1F1F8}" },
+  { name: "Sri Lanka", code: "LK", phoneCode: "+94", flag: "\u{1F1F1}\u{1F1F0}" },
+  { name: "Sudan", code: "SD", phoneCode: "+249", flag: "\u{1F1F8}\u{1F1E9}" },
+  { name: "Suriname", code: "SR", phoneCode: "+597", flag: "\u{1F1F8}\u{1F1F7}" },
+  { name: "Svalbard and Jan Mayen", code: "SJ", phoneCode: "+47", flag: "\u{1F1F8}\u{1F1EF}" },
+  { name: "Swaziland", code: "SZ", phoneCode: "+268", flag: "\u{1F1F8}\u{1F1FF}" },
+  { name: "Sweden", code: "SE", phoneCode: "+46", flag: "\u{1F1F8}\u{1F1EA}" },
+  { name: "Switzerland", code: "CH", phoneCode: "+41", flag: "\u{1F1E8}\u{1F1ED}" },
+  { name: "Syrian Arab Republic", code: "SY", phoneCode: "+963", flag: "\u{1F1F8}\u{1F1FE}" },
+  { name: "Taiwan, Province of China", code: "TW", phoneCode: "+886", flag: "\u{1F1F9}\u{1F1FC}" },
+  { name: "Tajikistan", code: "TJ", phoneCode: "+992", flag: "\u{1F1F9}\u{1F1EF}" },
+  { name: "Tanzania, United Republic of", code: "TZ", phoneCode: "+255", flag: "\u{1F1F9}\u{1F1FF}" },
+  { name: "Thailand", code: "TH", phoneCode: "+66", flag: "\u{1F1F9}\u{1F1ED}" },
+  { name: "Timor-Leste", code: "TL", phoneCode: "+670", flag: "\u{1F1F9}\u{1F1F1}" },
+  { name: "Togo", code: "TG", phoneCode: "+228", flag: "\u{1F1F9}\u{1F1EC}" },
+  { name: "Tokelau", code: "TK", phoneCode: "+690", flag: "\u{1F1F9}\u{1F1F0}" },
+  { name: "Tonga", code: "TO", phoneCode: "+676", flag: "\u{1F1F9}\u{1F1F4}" },
+  { name: "Trinidad and Tobago", code: "TT", phoneCode: "+1", flag: "\u{1F1F9}\u{1F1F9}" },
+  { name: "Tunisia", code: "TN", phoneCode: "+216", flag: "\u{1F1F9}\u{1F1F3}" },
+  { name: "Turkey", code: "TR", phoneCode: "+90", flag: "\u{1F1F9}\u{1F1F7}" },
+  { name: "Turkmenistan", code: "TM", phoneCode: "+993", flag: "\u{1F1F9}\u{1F1F2}" },
+  { name: "Turks and Caicos Islands", code: "TC", phoneCode: "+1", flag: "\u{1F1F9}\u{1F1E8}" },
+  { name: "Tuvalu", code: "TV", phoneCode: "+688", flag: "\u{1F1F9}\u{1F1FB}" },
+  { name: "Uganda", code: "UG", phoneCode: "+256", flag: "\u{1F1FA}\u{1F1EC}" },
+  { name: "Ukraine", code: "UA", phoneCode: "+380", flag: "\u{1F1FA}\u{1F1E6}" },
+  { name: "United Arab Emirates", code: "AE", phoneCode: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
+  { name: "United Kingdom", code: "GB", phoneCode: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
+  { name: "United States", code: "US", phoneCode: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
+  { name: "United States Minor Outlying Islands", code: "UM", phoneCode: "+1", flag: "\u{1F1FA}\u{1F1F2}" },
+  { name: "Uruguay", code: "UY", phoneCode: "+598", flag: "\u{1F1FA}\u{1F1FE}" },
+  { name: "Uzbekistan", code: "UZ", phoneCode: "+998", flag: "\u{1F1FA}\u{1F1FF}" },
+  { name: "Vanuatu", code: "VU", phoneCode: "+678", flag: "\u{1F1FB}\u{1F1FA}" },
+  { name: "Venezuela, Bolivarian Republic of", code: "VE", phoneCode: "+58", flag: "\u{1F1FB}\u{1F1EA}" },
+  { name: "Viet Nam", code: "VN", phoneCode: "+84", flag: "\u{1F1FB}\u{1F1F3}" },
+  { name: "Virgin Islands, British", code: "VG", phoneCode: "+1", flag: "\u{1F1FB}\u{1F1EC}" },
+  { name: "Virgin Islands, U.S.", code: "VI", phoneCode: "+1", flag: "\u{1F1FB}\u{1F1EE}" },
+  { name: "Wallis and Futuna", code: "WF", phoneCode: "+681", flag: "\u{1F1FC}\u{1F1EB}" },
+  { name: "Western Sahara", code: "EH", phoneCode: "+212", flag: "\u{1F1EA}\u{1F1ED}" },
+  { name: "Yemen", code: "YE", phoneCode: "+967", flag: "\u{1F1FE}\u{1F1EA}" },
+  { name: "Zambia", code: "ZM", phoneCode: "+260", flag: "\u{1F1FF}\u{1F1F2}" },
+  { name: "Zimbabwe", code: "ZW", phoneCode: "+263", flag: "\u{1F1FF}\u{1F1FC}" }
+];
 
 // src/utils/error.util.ts
 var validateRegex = (value, regex) => regex.test(value);
@@ -1777,6 +2029,7 @@ var BaseSelect = ({
   disabled = false,
   loading = false,
   validationError = "",
+  showBottomText = true,
   label = "",
   hint = "",
   required = false,
@@ -2030,8 +2283,8 @@ var BaseSelect = ({
         ]
       }
     ),
-    hint && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BaseHint, { hint }),
-    validationError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BaseInputError, { errorMessage: validationError })
+    hint && showBottomText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BaseHint, { hint }),
+    validationError && showBottomText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BaseInputError, { errorMessage: validationError })
   ] });
 };
 
@@ -2080,6 +2333,7 @@ var BaseInput = ({
   mask,
   placeholder,
   validationError = "",
+  showBottomText = true,
   hint = "",
   rules = [],
   isAmountInput = false,
@@ -2183,8 +2437,8 @@ var BaseInput = ({
         ]
       }
     ),
-    (hint || localHint) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-body-3xs text-light-copy", children: localHint || hint }),
-    (validationError || localError) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-body-3xs text-red-500", children: localError || validationError })
+    (hint || localHint) && showBottomText && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-body-3xs text-light-copy", children: localHint || hint }),
+    (validationError || localError) && showBottomText && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-body-3xs text-red-500", children: localError || validationError })
   ] });
 };
 
@@ -2458,11 +2712,97 @@ function BzpCheckoutButton({
 }
 
 // src/buzapay-checkout/checkout-card.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/pay-by-card.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
+
+// src/components/base/phone-number-input.tsx
+var import_react9 = __toESM(require("react"), 1);
 var import_jsx_runtime35 = require("react/jsx-runtime");
+var BasePhoneNumberInput = ({
+  phoneCodeOptions,
+  value,
+  onChange,
+  onCodeChange,
+  label = "",
+  required = false,
+  disabled = false,
+  loading = false,
+  validationError = "",
+  hint = "",
+  defaultCountryCode,
+  preventPaste = false,
+  showCopyIcon = false,
+  containerClassName = "",
+  inputClassName = "",
+  placeholder
+}) => {
+  const safeDefaultCode = phoneCodeOptions?.[0]?.value ?? "+1";
+  const [selectedCode, setSelectedCode] = import_react9.default.useState(safeDefaultCode);
+  const selectedMeta = import_react9.default.useMemo(() => {
+    return phoneCodeOptions.find((o) => o.value === selectedCode);
+  }, [phoneCodeOptions, selectedCode]);
+  const getFormattedCode = (codeValue) => codeValue.split("-")[0];
+  const handleCountryChange = (nextValue) => {
+    setSelectedCode(nextValue);
+    onCodeChange?.(getFormattedCode(nextValue));
+  };
+  const handleChange = (e) => {
+    const incoming = e;
+    onChange?.(incoming);
+  };
+  const computedPlaceholder = placeholder ?? selectedMeta?.placeholder ?? (label ? `Enter ${label.toLowerCase()}` : "Enter phone number");
+  (0, import_react9.useEffect)(() => {
+    const nextValue = defaultCountryCode ?? safeDefaultCode;
+    setSelectedCode(nextValue);
+    onCodeChange?.(getFormattedCode(nextValue));
+  }, [defaultCountryCode]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `flex flex-col gap-2`, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "mb-0 text-body-2xs font-normal text-heading-text", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-orange-required", children: " *" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `flex items-center gap-2 ${containerClassName}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        BaseSelect,
+        {
+          required: true,
+          options: phoneCodeOptions,
+          value: selectedCode,
+          showBottomText: false,
+          itemImageType: "country",
+          onChange: handleCountryChange,
+          validationError,
+          placeholder: "+234"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-2/3", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        BaseInput,
+        {
+          className: inputClassName,
+          required,
+          disabled,
+          loading,
+          validationError,
+          showBottomText: false,
+          hint,
+          value,
+          onChange: handleChange,
+          rules: ["numeric"],
+          preventPaste,
+          showCopyIcon,
+          placeholder: computedPlaceholder
+        }
+      ) })
+    ] }),
+    hint && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-body-3xs text-light-copy", children: hint }),
+    validationError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-body-3xs text-red-500", children: validationError })
+  ] });
+};
+
+// src/components/pay-by-card.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PayByCard({
   secretKey,
   paymentObject,
@@ -2471,18 +2811,22 @@ function PayByCard({
   onError,
   caller = "buzapay"
 }) {
-  const [formIndex, setFormIndex] = (0, import_react9.useState)(0);
-  const [message, setMessage] = (0, import_react9.useState)("");
-  const [isMakingPayment, setIsMakingPayment] = (0, import_react9.useState)(false);
-  const [loading, setLoading] = (0, import_react9.useState)(false);
-  const [cardType, setCardType] = (0, import_react9.useState)("");
-  const [transactionReference, setTransactionReference] = (0, import_react9.useState)("");
-  const [loadingCountries, setLoadingCountries] = (0, import_react9.useState)(false);
-  const [loadingStates, setLoadingStates] = (0, import_react9.useState)(false);
-  const [rawCountries, setRawCountries] = (0, import_react9.useState)([]);
-  const [countries, setCountries] = (0, import_react9.useState)([]);
-  const [countryStates, setCountryStates] = (0, import_react9.useState)([]);
-  const [billingForm, setBillingForm] = (0, import_react9.useState)({
+  const [formIndex, setFormIndex] = (0, import_react10.useState)(0);
+  const [message, setMessage] = (0, import_react10.useState)("");
+  const [isMakingPayment, setIsMakingPayment] = (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)("");
+  const [transactionReference, setTransactionReference] = (0, import_react10.useState)("");
+  const [loadingCountries, setLoadingCountries] = (0, import_react10.useState)(false);
+  const [loadingStates, setLoadingStates] = (0, import_react10.useState)(false);
+  const [rawCountries, setRawCountries] = (0, import_react10.useState)([]);
+  const [countries, setCountries] = (0, import_react10.useState)([]);
+  const [countryStates, setCountryStates] = (0, import_react10.useState)([]);
+  const [phoneCodeOptions, setPhoneCodeOptions] = (0, import_react10.useState)(
+    []
+  );
+  const [billingForm, setBillingForm] = (0, import_react10.useState)({
     address1: "",
     address2: "",
     postalCode: "",
@@ -2490,9 +2834,10 @@ function PayByCard({
     city: "",
     country: "",
     emailAddress: "",
-    phoneNumber: ""
+    phoneNumber: "",
+    phoneNumberExt: ""
   });
-  const [payForm, setPayForm] = (0, import_react9.useState)({
+  const [payForm, setPayForm] = (0, import_react10.useState)({
     customerName: "",
     cardNo: "",
     expireDate: "",
@@ -2500,10 +2845,10 @@ function PayByCard({
     cardPin: ""
     // Only required for Verve cards
   });
-  const [billingErrors, setBillingErrors] = (0, import_react9.useState)(
+  const [billingErrors, setBillingErrors] = (0, import_react10.useState)(
     {}
   );
-  const [payErrors, setPayErrors] = (0, import_react9.useState)({});
+  const [payErrors, setPayErrors] = (0, import_react10.useState)({});
   const billingRules = {
     address1: "required",
     address2: "",
@@ -2578,7 +2923,7 @@ function PayByCard({
           city: billingForm.city ?? "",
           country: billingForm.country ?? "",
           emailAddress: billingForm.emailAddress ?? "",
-          phoneNumber: billingForm.phoneNumber ?? ""
+          phoneNumber: billingForm.phoneNumber ? `${billingForm.phoneNumberExt}${billingForm.phoneNumber}` : ""
         };
         const encryptedCardDetails = encryptPayload(secretKey, cardDetails);
         let payload = null;
@@ -2677,13 +3022,12 @@ function PayByCard({
           setIsMakingPayment(false);
           return;
         }
-        setMessage(response?.responseMessage || "Payment failed");
-        onPaymentAuthorized?.({
-          paymentId: response?.transactionReference,
-          paymentDate: response?.data?.updatedAt,
-          paymentStatus: "payment failed",
-          message
-        });
+        if (response && response.message) {
+          setMessage(response.message);
+          onError?.({
+            errorMessage: response.message
+          });
+        }
         setIsMakingPayment(false);
       } catch (err) {
         let friendly = "Payment failed";
@@ -2767,6 +3111,9 @@ function PayByCard({
       setLoadingCountries(false);
     }
   };
+  const goBack = () => {
+    setFormIndex(formIndex > 0 ? formIndex - 1 : 0);
+  };
   const getStates = async (countryIso2) => {
     const country = rawCountries.find((c) => c.iso2 === countryIso2);
     if (!country) return;
@@ -2799,15 +3146,25 @@ function PayByCard({
     setCardType(cardTypeHandler(event));
     payRules.cardPin = cardType === "Verve" ? "required|numeric" : "";
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     (async () => {
       await generatePaymentLinkHandler();
       await getAllCountries();
+      const codeOptions = COUNTRIES.map((country) => {
+        return {
+          value: `${country.phoneCode}-${country.code}`,
+          label: `${country.phoneCode}`,
+          flag: country.flag,
+          phoneCode: country.phoneCode,
+          countryCode: country.code
+        };
+      }).sort((a, b) => a.label.localeCompare(b.label));
+      setPhoneCodeOptions(codeOptions);
     })();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "grid grid-cols-2 gap-6 overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__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",
@@ -2822,7 +3179,7 @@ function PayByCard({
           validationError: billingErrors.address1 ?? ""
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "Address Line 2",
@@ -2831,7 +3188,7 @@ function PayByCard({
           validationError: billingErrors.address2 ?? ""
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseSelect,
         {
           label: "Select Country",
@@ -2842,6 +3199,14 @@ function PayByCard({
           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: "" }));
             }
@@ -2849,7 +3214,7 @@ function PayByCard({
           validationError: billingErrors.country ?? ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseSelect,
         {
           label: "Select State",
@@ -2866,7 +3231,7 @@ function PayByCard({
           validationError: billingErrors.state ?? ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "City",
@@ -2881,7 +3246,7 @@ function PayByCard({
           validationError: billingErrors.city ?? ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "Postal Code",
@@ -2896,7 +3261,7 @@ function PayByCard({
           validationError: billingErrors.postalCode ?? ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "Email",
@@ -2910,30 +3275,39 @@ function PayByCard({
           },
           validationError: billingErrors.emailAddress ?? ""
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        BaseInput,
+      ) }),
+      /* @__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_runtime35.jsxs)(
+    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_runtime35.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             BaseInput,
             {
               label: "Card Name",
@@ -2948,7 +3322,7 @@ function PayByCard({
               validationError: payErrors.customerName ?? ""
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             BaseInput,
             {
               label: "Card Number",
@@ -2967,7 +3341,7 @@ function PayByCard({
               validationError: payErrors.cardNo ?? ""
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             BaseInput,
             {
               label: "Expiry Date",
@@ -2983,7 +3357,7 @@ function PayByCard({
               validationError: payErrors.expireDate ?? ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             BaseInput,
             {
               label: "CVV",
@@ -2999,7 +3373,7 @@ function PayByCard({
               validationError: payErrors.cvv ?? ""
             }
           ),
-          cardType === "Verve" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          cardType === "Verve" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             BaseInput,
             {
               label: "Card Pin",
@@ -3019,24 +3393,36 @@ function PayByCard({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      BaseButton,
-      {
-        label: formIndex === 0 ? "Proceed" : `Pay ${formatAmountHandler}`,
-        type: "primary",
-        customClass: "w-full mt-6",
-        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
+        }
+      ),
+      /* @__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
+        }
+      )
+    ] })
   ] });
 }
 
 // src/components/pay-by-transfer.tsx
-var import_react10 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var PayByTransfer = ({
   secretKey,
   paymentObject,
@@ -3046,25 +3432,25 @@ var PayByTransfer = ({
   onError,
   caller = "buzapay"
 }) => {
-  const [formIndex, setFormIndex] = (0, import_react10.useState)(0);
-  const [isMakingPayment, setIsMakingPayment] = (0, import_react10.useState)(false);
-  const [isConfirmCall, setIsConfirmCall] = (0, import_react10.useState)(false);
-  const [isPaymentConfirmed, setIsPaymentConfirmed] = (0, import_react10.useState)(false);
-  const [transactionReference, setTransactionReference] = (0, import_react10.useState)("");
-  const [paymentReferenceStatus, setPaymentReferenceStatus] = (0, import_react10.useState)("");
-  const [isFetchingPaymentDetails, setIsFetchingPaymentDetails] = (0, import_react10.useState)(false);
-  const [paymentReferenceDetails, setPaymentReferenceDetails] = (0, import_react10.useState)(null);
-  const [paymentAccountDetails, setPaymentAccountDetails] = (0, import_react10.useState)(null);
-  const [paymentMade, setPaymentMade] = (0, import_react10.useState)(false);
-  const [loading, setLoading] = (0, import_react10.useState)(false);
-  const [message, setMessage] = (0, import_react10.useState)("");
-  const [remainingSeconds, setRemainingSeconds] = (0, import_react10.useState)(30 * 60);
-  const [countDownTime, setCountDownTime] = (0, import_react10.useState)("00:00");
-  const intervalRef = (0, import_react10.useRef)(null);
-  const [transferForm, setTransferForm] = (0, import_react10.useState)({
+  const [formIndex, setFormIndex] = (0, import_react11.useState)(0);
+  const [isMakingPayment, setIsMakingPayment] = (0, import_react11.useState)(false);
+  const [isConfirmCall, setIsConfirmCall] = (0, import_react11.useState)(false);
+  const [isPaymentConfirmed, setIsPaymentConfirmed] = (0, import_react11.useState)(false);
+  const [transactionReference, setTransactionReference] = (0, import_react11.useState)("");
+  const [paymentReferenceStatus, setPaymentReferenceStatus] = (0, import_react11.useState)("");
+  const [isFetchingPaymentDetails, setIsFetchingPaymentDetails] = (0, import_react11.useState)(false);
+  const [paymentReferenceDetails, setPaymentReferenceDetails] = (0, import_react11.useState)(null);
+  const [paymentAccountDetails, setPaymentAccountDetails] = (0, import_react11.useState)(null);
+  const [paymentMade, setPaymentMade] = (0, import_react11.useState)(false);
+  const [loading, setLoading] = (0, import_react11.useState)(false);
+  const [message, setMessage] = (0, import_react11.useState)("");
+  const [remainingSeconds, setRemainingSeconds] = (0, import_react11.useState)(30 * 60);
+  const [countDownTime, setCountDownTime] = (0, import_react11.useState)("00:00");
+  const intervalRef = (0, import_react11.useRef)(null);
+  const [transferForm, setTransferForm] = (0, import_react11.useState)({
     customerName: ""
   });
-  const [transferErrors, setTransferErrors] = (0, import_react10.useState)(
+  const [transferErrors, setTransferErrors] = (0, import_react11.useState)(
     {}
   );
   const transferRules = {
@@ -3214,12 +3600,12 @@ var PayByTransfer = ({
       setLoading(false);
     }
   };
-  const updateDisplay = (0, import_react10.useCallback)((secs) => {
+  const updateDisplay = (0, import_react11.useCallback)((secs) => {
     const minutes = String(Math.floor(secs / 60)).padStart(2, "0");
     const seconds = String(secs % 60).padStart(2, "0");
     setCountDownTime(`${minutes}:${seconds}`);
   }, []);
-  const startTimer = (0, import_react10.useCallback)(() => {
+  const startTimer = (0, import_react11.useCallback)(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -3247,19 +3633,19 @@ var PayByTransfer = ({
       intervalRef.current = null;
     }
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     (async () => {
       await generatePaymentLinkHandler();
     })();
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (remainingSeconds < 0 && intervalRef.current) {
       stopTimer();
     }
   }, [remainingSeconds]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-10", children: [
-    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-10", children: [
+    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         BaseInput,
         {
           label: "Customer Name",
@@ -3274,7 +3660,7 @@ var PayByTransfer = ({
           validationError: transferErrors.customerName ?? ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         BaseButton,
         {
           label: `Pay ${formatAmountHandler}`,
@@ -3286,8 +3672,8 @@ var PayByTransfer = ({
         }
       )
     ] }),
-    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "div",
         {
           className: [
@@ -3295,22 +3681,22 @@ var PayByTransfer = ({
             caller === "miden" ? "bg-[#FAFDFF] border border-[#F0FAFF]" : "bg-[#EFF7FF]"
           ].join(" "),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               BaseLabelInfo,
               {
                 label: "Bank Name",
                 value: `${paymentAccountDetails?.bank} ${paymentAccountDetails?.accountName}`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 BaseLabelInfo,
                 {
                   label: "Account Number",
                   value: paymentAccountDetails?.accountNumber
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 BaseCopy,
                 {
                   color: "#9DBFDE",
@@ -3318,20 +3704,20 @@ var PayByTransfer = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(BaseLabelInfo, { label: "Amount", value: formatAmountHandler }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(BaseCopy, { color: "#9DBFDE", copyText: formatAmountHandler })
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BaseLabelInfo, { label: "Amount", value: formatAmountHandler }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BaseCopy, { color: "#9DBFDE", copyText: formatAmountHandler })
             ] })
           ]
         }
       ),
-      caller === "buzapay" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy", children: [
+      caller === "buzapay" && /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime36.jsx)("span", { className: "text-orange-500", children: remainingSeconds >= 0 ? countDownTime : "00:00" })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-orange-500", children: remainingSeconds >= 0 ? countDownTime : "00:00" })
       ] }),
-      caller === "miden" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      caller === "miden" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           BaseCircularCountdown,
           {
             value: remainingSeconds,
@@ -3342,16 +3728,16 @@ var PayByTransfer = ({
             color: "#3b82f6"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-body-3xs font-medium text-light-copy", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "text-body-3xs font-medium text-light-copy", children: [
           "This account is for this transaction only and expires in",
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-[#1383E8] ml-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-[#1383E8] ml-2", children: [
             countDownTime,
             "..."
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           BaseButton,
           {
             label: "I have paid the money",
@@ -3362,7 +3748,7 @@ var PayByTransfer = ({
             onClick: getReferenceDetails
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
             type: "button",
@@ -3377,8 +3763,8 @@ var PayByTransfer = ({
 };
 
 // src/components/pay-by-stable-coin.tsx
-var import_react11 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var PayByStableCoin = ({
   secretKey,
   paymentObject,
@@ -3387,25 +3773,25 @@ var PayByStableCoin = ({
   onError,
   caller = "buzapay"
 }) => {
-  const [formIndex, setFormIndex] = (0, import_react11.useState)(0);
-  const [message, setMessage] = (0, import_react11.useState)("");
-  const [loading, setLoading] = (0, import_react11.useState)(false);
-  const [generatingAddress, setGeneratingAddress] = (0, import_react11.useState)(false);
-  const [loadingStableCoins, setLoadingStableCoins] = (0, import_react11.useState)(false);
-  const [loadingStableCoinNetworks, setLoadingStableCoinNetworks] = (0, import_react11.useState)(false);
-  const [transactionReference, setTransactionReference] = (0, import_react11.useState)("");
-  const [stableCoins, setStableCoins] = (0, import_react11.useState)([]);
-  const [networkList, setNetworkList] = (0, import_react11.useState)([]);
-  const [addressDetails, setAddressDetails] = (0, import_react11.useState)(null);
-  const [generateAddressPayload, setGenerateAddressPayload] = (0, import_react11.useState)(null);
-  const [isConfirmingPayment, setIsConfirmingPayment] = (0, import_react11.useState)(false);
-  const [paymentReferenceDetails, setPaymentReferenceDetails] = (0, import_react11.useState)(null);
-  const [paymentReferenceStatus, setPaymentReferenceStatus] = (0, import_react11.useState)("");
-  const [stableCoinForm, setStableCoinForm] = (0, import_react11.useState)({
+  const [formIndex, setFormIndex] = (0, import_react12.useState)(0);
+  const [message, setMessage] = (0, import_react12.useState)("");
+  const [loading, setLoading] = (0, import_react12.useState)(false);
+  const [generatingAddress, setGeneratingAddress] = (0, import_react12.useState)(false);
+  const [loadingStableCoins, setLoadingStableCoins] = (0, import_react12.useState)(false);
+  const [loadingStableCoinNetworks, setLoadingStableCoinNetworks] = (0, import_react12.useState)(false);
+  const [transactionReference, setTransactionReference] = (0, import_react12.useState)("");
+  const [stableCoins, setStableCoins] = (0, import_react12.useState)([]);
+  const [networkList, setNetworkList] = (0, import_react12.useState)([]);
+  const [addressDetails, setAddressDetails] = (0, import_react12.useState)(null);
+  const [generateAddressPayload, setGenerateAddressPayload] = (0, import_react12.useState)(null);
+  const [isConfirmingPayment, setIsConfirmingPayment] = (0, import_react12.useState)(false);
+  const [paymentReferenceDetails, setPaymentReferenceDetails] = (0, import_react12.useState)(null);
+  const [paymentReferenceStatus, setPaymentReferenceStatus] = (0, import_react12.useState)("");
+  const [stableCoinForm, setStableCoinForm] = (0, import_react12.useState)({
     stableCoin: "",
     network: ""
   });
-  const [stableCoinErrors, setStableCoinErrors] = (0, import_react11.useState)({});
+  const [stableCoinErrors, setStableCoinErrors] = (0, import_react12.useState)({});
   const stableCoinRules = {
     stableCoin: "required",
     network: "required"
@@ -3597,16 +3983,16 @@ var PayByStableCoin = ({
     }
   };
   const amountPlusNetworkFee = addressDetails ? Number(addressDetails.transactionAmount) + addressDetails.networkFee : 0;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     (async () => {
       await generatePaymentLinkHandler();
       await getAllStableCoins();
     })();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-1 gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    formIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-1 gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           BaseSelect,
           {
             label: "Select Crypto",
@@ -3624,7 +4010,7 @@ var PayByStableCoin = ({
             validationError: stableCoinErrors.stableCoin ?? ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           BaseSelect,
           {
             label: "Select Network",
@@ -3642,7 +4028,7 @@ var PayByStableCoin = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         BaseButton,
         {
           label: `Pay ${formatAmountHandler}`,
@@ -3654,22 +4040,22 @@ var PayByStableCoin = ({
         }
       )
     ] }),
-    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-      caller === "buzapay" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mx-auto", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconQrCode, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-4xs text-light-copy font-normal text-center", children: generateAddressPayload?.currency })
+    formIndex === 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+      caller === "buzapay" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mx-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconQrCode, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-4xs text-light-copy font-normal text-center", children: generateAddressPayload?.currency })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsxs)("div", { className: "border-b border-grey-border pb-4 flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Network" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy", children: addressDetails?.chain }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "*Est. arrival = 3 mins" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "|" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsxs)("div", { className: "border-b border-grey-border pb-4 flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Network" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-sub-copy", children: addressDetails?.chain }),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "*Est. arrival = 3 mins" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "|" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     BaseCurrencyAmount,
                     {
                       currency: generateAddressPayload?.currency ?? "",
@@ -3682,21 +4068,21 @@ var PayByStableCoin = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconArrowSwap, {})
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconArrowSwap, {})
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "pb-4 flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Deposit Address >" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)(BaseCopy, { copyText: addressDetails?.walletAddress ?? "" })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "pb-4 flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-3xs text-light-copy font-normal", children: "Deposit Address >" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)(BaseCopy, { copyText: addressDetails?.walletAddress ?? "" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between border-b border-grey-border py-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-primary-black", children: "Network fee" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between border-b border-grey-border py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-2xs font-medium text-primary-black", children: "Network fee" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               BaseCurrencyAmount,
               {
                 currency: generateAddressPayload?.currency ?? "",
@@ -3706,9 +4092,9 @@ var PayByStableCoin = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between py-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-0 text-body-lg font-semibold text-primary-black", children: "Pay" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between py-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-0 text-body-lg font-semibold text-primary-black", children: "Pay" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               BaseCurrencyAmount,
               {
                 currency: generateAddressPayload?.currency ?? "",
@@ -3721,7 +4107,7 @@ var PayByStableCoin = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           BaseButton,
           {
             label: "Confirm Payment",
@@ -3733,17 +4119,17 @@ var PayByStableCoin = ({
           }
         ) })
       ] }),
-      caller === "miden" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "p-4 rounded-lg flex flex-col gap-6 bg-[#FAFDFF] border border-[#F0FAFF]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      caller === "miden" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "p-4 rounded-lg flex flex-col gap-6 bg-[#FAFDFF] border border-[#F0FAFF]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               BaseLabelInfo,
               {
                 label: "Chain",
                 value: addressDetails?.chain ?? ""
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               BaseCopy,
               {
                 color: "#9DBFDE",
@@ -3751,15 +4137,15 @@ var PayByStableCoin = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               BaseLabelInfo,
               {
                 label: "Wallet Address",
                 value: addressDetails?.walletAddress ?? ""
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               BaseCopy,
               {
                 color: "#9DBFDE",
@@ -3767,9 +4153,9 @@ var PayByStableCoin = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-1 text-body-4xs font-medium text-light-copy uppercase", children: "Amount" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-1 text-body-4xs font-medium text-light-copy uppercase", children: "Amount" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               BaseCurrencyAmount,
               {
                 currency: generateAddressPayload?.currency ?? "",
@@ -3781,17 +4167,17 @@ var PayByStableCoin = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-4 items-center justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-24 border border-[#E1EBF5]" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-2 text-body-2xs text-[#5F738C] font-normal", children: "Or" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-24 border border-[#E1EBF5]" })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex gap-4 items-center justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-24 border border-[#E1EBF5]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-2 text-body-2xs text-[#5F738C] font-normal", children: "Or" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-24 border border-[#E1EBF5]" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mx-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-2 text-body-xs text-primary font-semibold text-center", children: "Scan to Pay" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconQrCode, {})
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mx-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-2 text-body-xs text-primary font-semibold text-center", children: "Scan to Pay" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconQrCode, {})
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           BaseButton,
           {
             label: "I have made this payment",
@@ -3808,7 +4194,8 @@ var PayByStableCoin = ({
 };
 
 // src/buzapay-checkout/checkout-card.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react_hot_toast = __toESM(require("react-hot-toast"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function BzpCheckoutCard({
   secretKey,
   environment = "sandbox",
@@ -3823,15 +4210,15 @@ function BzpCheckoutCard({
   onPaymentAuthorized,
   onError
 }) {
-  const [checkoutState, setCheckoutState] = (0, import_react12.useState)("PENDING");
+  const [checkoutState, setCheckoutState] = (0, import_react13.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_react12.useState)([]);
-  const [paymentType, setPaymentType] = (0, import_react12.useState)("");
-  const [successObject, setSuccessObject] = (0, import_react12.useState)({
+  const [filteredPaymentTypeOptions, setFilteredPaymentTypeOptions] = (0, import_react13.useState)([]);
+  const [paymentType, setPaymentType] = (0, import_react13.useState)("");
+  const [successObject, setSuccessObject] = (0, import_react13.useState)({
     paymentDate: "",
     paymentId: "",
     paymentStatus: ""
@@ -3843,16 +4230,26 @@ function BzpCheckoutCard({
     setSuccessObject({ ...event });
     if (event.paymentStatus === "authorized") {
       setCheckoutState("SUCCESS");
+      import_react_hot_toast.default.success("Payment authorization successful.", toastConfig);
+    } else if (event.paymentStatus === "confirmed") {
+      setCheckoutState("SUCCESS");
+      import_react_hot_toast.default.success("Payment confirmed.", toastConfig);
     } else if (event.paymentStatus === "payment failed") {
       setCheckoutState("PENDING");
+      import_react_hot_toast.default.error("Payment pending.", toastConfig);
     } else if (event.paymentStatus === "used") {
       setCheckoutState("USED");
     } else {
       setCheckoutState("PENDING");
+      import_react_hot_toast.default.error("Payment pending.", toastConfig);
     }
     onPaymentAuthorized?.(event);
   };
-  (0, import_react12.useEffect)(() => {
+  const onErrorHandler = (error) => {
+    import_react_hot_toast.default.error(error.errorMessage ?? "Payment failed.", toastConfig);
+    onError?.(error);
+  };
+  (0, import_react13.useEffect)(() => {
     let options = [];
     if (paymentObject.currency === "USD") {
       if (paymentObject.amount < 50) {
@@ -3871,103 +4268,106 @@ function BzpCheckoutCard({
     }
     setFilteredPaymentTypeOptions(options);
   }, [paymentObject.currency, paymentObject.amount]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (filteredPaymentTypeOptions.length) {
       setPaymentType(filteredPaymentTypeOptions[0].value);
     }
   }, [filteredPaymentTypeOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BaseCard, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-3", children: [
-    checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("p", { className: "text-heading-text text-body-xs font-semibold", children: "Pay with" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-        BaseRadioGroup,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(BaseCard, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_hot_toast.Toaster, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "grid grid-cols-3", children: [
+      checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)("p", { className: "text-heading-text text-body-xs font-semibold", children: "Pay with" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          BaseRadioGroup,
+          {
+            options: filteredPaymentTypeOptions,
+            selectedChange: (e) => paymentTypeHandler(e)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "div",
         {
-          options: filteredPaymentTypeOptions,
-          selectedChange: (e) => paymentTypeHandler(e)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-      "div",
-      {
-        className: checkoutState === "SUCCESS" ? "col-span-3" : "col-span-2",
-        children: [
-          checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between px-12 py-8", children: [
-            paymentObject.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-              BaseImage,
+          className: checkoutState === "SUCCESS" || checkoutState === "USED" && paymentType === "BANK_TRANSFER" ? "col-span-3" : "col-span-2",
+          children: [
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between px-12 py-8", children: [
+              paymentObject.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                BaseImage,
+                {
+                  src: paymentObject.logoUrl ?? "",
+                  alt: "Merchant Logo",
+                  width: 52,
+                  height: 52,
+                  customClass: "rounded-lg object-fit"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                "div",
+                {
+                  className: "bg-heading-text rounded flex flex-col justify-center",
+                  style: { width: "52px", height: "52px" },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-white text-center text-body-2xs font-medium", children: "Logo" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: paymentObject.merchantName }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: [
+                  "Pay:",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-orange-500 font-extrabold", children: formatAmount(paymentObject.amount, paymentObject.currency) })
+                ] })
+              ] })
+            ] }),
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "max-h-[32rem] overflow-y-scroll px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              PayByCard,
               {
-                src: paymentObject.logoUrl ?? "",
-                alt: "Merchant Logo",
-                width: 52,
-                height: 52,
-                customClass: "rounded-lg object-fit"
+                secretKey,
+                environment,
+                paymentObject,
+                onPaymentAuthorized: setSuccess,
+                onError: onErrorHandler
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-              "div",
+            ) : paymentType === "BANK_TRANSFER" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              PayByTransfer,
               {
-                className: "bg-heading-text rounded flex flex-col justify-center",
-                style: { width: "52px", height: "52px" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-white text-center text-body-2xs font-medium", children: "Logo" })
+                secretKey,
+                environment,
+                paymentObject,
+                onPaymentAuthorized: setSuccess,
+                onError: onErrorHandler
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: paymentObject.merchantName }),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: [
-                "Pay:",
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-orange-500 font-extrabold", children: formatAmount(paymentObject.amount, paymentObject.currency) })
-              ] })
-            ] })
-          ] }),
-          checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "max-h-[32rem] overflow-y-scroll px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            PayByCard,
-            {
-              secretKey,
-              environment,
-              paymentObject,
-              onPaymentAuthorized: setSuccess,
-              onError
-            }
-          ) : paymentType === "BANK_TRANSFER" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            PayByTransfer,
-            {
-              secretKey,
-              environment,
-              paymentObject,
-              onPaymentAuthorized: setSuccess,
-              onError
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            PayByStableCoin,
-            {
-              secretKey,
-              environment,
-              paymentObject,
-              onPaymentAuthorized: setSuccess,
-              onError
-            }
-          ) }),
-          checkoutState === "SUCCESS" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            BaseSuccess,
-            {
-              amount: paymentObject.amount,
-              currency: paymentObject.currency,
-              redirectUrl: paymentObject.redirectUrl ?? "",
-              successObject
-            }
-          )
-        ]
-      }
-    )
-  ] }) });
+            ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              PayByStableCoin,
+              {
+                secretKey,
+                environment,
+                paymentObject,
+                onPaymentAuthorized: setSuccess,
+                onError: onErrorHandler
+              }
+            ) }),
+            checkoutState === "SUCCESS" || checkoutState === "USED" && paymentType === "BANK_TRANSFER" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              BaseSuccess,
+              {
+                amount: paymentObject.amount,
+                currency: paymentObject.currency,
+                redirectUrl: paymentObject.redirectUrl ?? "",
+                successObject
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
 }
 
 // src/miden-checkout/checkout-button.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/miden-checkout/checkout-iframe.tsx
-var import_react13 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function MidenCheckoutIframe({
   style = {
     width: "100%",
@@ -3990,12 +4390,12 @@ function MidenCheckoutIframe({
   },
   onError
 }) {
-  const containerRef = (0, import_react13.useRef)(null);
-  const iframeRef = (0, import_react13.useRef)(null);
-  const [message, setMessage] = (0, import_react13.useState)("");
-  const [launchUrl, setLaunchUrl] = (0, import_react13.useState)("");
-  const [loading, setLoading] = (0, import_react13.useState)(false);
-  const launchIframe = (0, import_react13.useCallback)(
+  const containerRef = (0, import_react14.useRef)(null);
+  const iframeRef = (0, import_react14.useRef)(null);
+  const [message, setMessage] = (0, import_react14.useState)("");
+  const [launchUrl, setLaunchUrl] = (0, import_react14.useState)("");
+  const [loading, setLoading] = (0, import_react14.useState)(false);
+  const launchIframe = (0, import_react14.useCallback)(
     (url2) => {
       if (iframeRef.current && iframeRef.current.parentNode) {
         iframeRef.current.parentNode.removeChild(iframeRef.current);
@@ -4051,18 +4451,18 @@ function MidenCheckoutIframe({
       setLoading(false);
     }
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!containerRef.current) return;
     generatePaymentLinkHandler();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative", style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref: containerRef, className: "w-full h-full" }),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 grid place-items-center bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(IconLoader, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: containerRef, className: "w-full h-full" }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute inset-0 grid place-items-center bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconLoader, {}) })
   ] });
 }
 
 // src/miden-checkout/checkout-button.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function MidenCheckoutButton({
   secretKey,
   environment = "sandbox",
@@ -4078,10 +4478,10 @@ function MidenCheckoutButton({
   mode = "redirect",
   onError
 }) {
-  const [message, setMessage] = (0, import_react14.useState)("");
-  const [launchUrl, setLaunchUrl] = (0, import_react14.useState)("");
-  const [urlLaunchUrl, setUrlLaunchUrl] = (0, import_react14.useState)("");
-  const [loading, setLoading] = (0, import_react14.useState)(false);
+  const [message, setMessage] = (0, import_react15.useState)("");
+  const [launchUrl, setLaunchUrl] = (0, import_react15.useState)("");
+  const [urlLaunchUrl, setUrlLaunchUrl] = (0, import_react15.useState)("");
+  const [loading, setLoading] = (0, import_react15.useState)(false);
   const generatePaymentLinkHandler = async () => {
     if (!secretKey) {
       setMessage("Secret key is required.");
@@ -4119,15 +4519,15 @@ function MidenCheckoutButton({
       setLoading(false);
     }
   };
-  return urlLaunchUrl && mode === "iframe" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return urlLaunchUrl && mode === "iframe" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     MidenCheckoutIframe,
     {
       url: urlLaunchUrl,
       secretKey,
       environment
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       BaseButton,
       {
         label: "Pay",
@@ -4138,13 +4538,14 @@ function MidenCheckoutButton({
         onClick: generatePaymentLinkHandler
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BaseInputError, { errorMessage: message })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BaseInputError, { errorMessage: message })
   ] });
 }
 
 // src/miden-checkout/checkout-card.tsx
-var import_react15 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_react_hot_toast2 = __toESM(require("react-hot-toast"), 1);
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function MidenCheckoutCard({
   secretKey,
   options,
@@ -4160,15 +4561,15 @@ function MidenCheckoutCard({
   onPaymentAuthorized,
   onError
 }) {
-  const [checkoutState, setCheckoutState] = (0, import_react15.useState)("PENDING");
+  const [checkoutState, setCheckoutState] = (0, import_react16.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_react15.useState)([]);
-  const [paymentType, setPaymentType] = (0, import_react15.useState)("");
-  const [successObject, setSuccessObject] = (0, import_react15.useState)({
+  const [filteredPaymentTypeOptions, setFilteredPaymentTypeOptions] = (0, import_react16.useState)([]);
+  const [paymentType, setPaymentType] = (0, import_react16.useState)("");
+  const [successObject, setSuccessObject] = (0, import_react16.useState)({
     paymentDate: "",
     paymentId: "",
     paymentStatus: ""
@@ -4180,22 +4581,32 @@ function MidenCheckoutCard({
     setSuccessObject({ ...event });
     if (event.paymentStatus === "authorized") {
       setCheckoutState("SUCCESS");
+      import_react_hot_toast2.default.success("Payment authorization successful.", toastConfig);
+    } else if (event.paymentStatus === "confirmed") {
+      setCheckoutState("SUCCESS");
+      import_react_hot_toast2.default.success("Payment confirmed.", toastConfig);
     } else if (event.paymentStatus === "payment failed") {
       setCheckoutState("PENDING");
+      import_react_hot_toast2.default.error("Payment pending.", toastConfig);
     } else if (event.paymentStatus === "used") {
       setCheckoutState("USED");
     } else {
       setCheckoutState("PENDING");
+      import_react_hot_toast2.default.error("Payment pending.", toastConfig);
     }
     onPaymentAuthorized?.(event);
   };
+  const onErrorHandler = (error) => {
+    import_react_hot_toast2.default.error(error.errorMessage ?? "Payment failed.", toastConfig);
+    onError?.(error);
+  };
   const formatAmountHandler = () => {
     return formatAmount(paymentObject.amount, paymentObject.currency);
   };
   const formatChargeHandler = () => {
     return formatAmount(0, paymentObject.currency);
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     let options2 = [];
     if (paymentObject.currency === "USD") {
       if (paymentObject.amount < 50) {
@@ -4214,89 +4625,92 @@ function MidenCheckoutCard({
     }
     setFilteredPaymentTypeOptions(options2);
   }, [paymentObject.currency, paymentObject.amount]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (filteredPaymentTypeOptions.length) {
       setPaymentType(filteredPaymentTypeOptions[0].value);
     }
   }, [filteredPaymentTypeOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BaseCard, { caller: "miden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "grid grid-cols-3", children: [
-    checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bg-[#0A0032] py-6 flex flex-col gap-5 col-span-1 rounded-l-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-white text-body-xs font-semibold px-6", children: "Pay with" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        BaseRadioGroup,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(BaseCard, { caller: "miden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_hot_toast2.Toaster, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid grid-cols-3", children: [
+      checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "bg-[#0A0032] py-6 flex flex-col gap-5 col-span-1 rounded-l-xl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-white text-body-xs font-semibold px-6", children: "Pay with" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          BaseRadioGroup,
+          {
+            caller: "miden",
+            options: filteredPaymentTypeOptions,
+            selectedChange: (e) => paymentTypeHandler(e)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        "div",
         {
-          caller: "miden",
-          options: filteredPaymentTypeOptions,
-          selectedChange: (e) => paymentTypeHandler(e)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-      "div",
-      {
-        className: checkoutState === "SUCCESS" ? "col-span-3" : "col-span-2",
-        children: [
-          checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between p-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IconMidenLogo, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IconClose, { color: "black", className: "cursor-pointer" })
-          ] }),
-          checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "px-14 pt-4 pb-8 flex flex-col gap-6 max-h-[32rem] overflow-y-scroll", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between py-3 px-4 bg-[#F8FDFF] border border-[#DAE4E8] rounded-lg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                BaseLabelInfo,
+          className: checkoutState === "SUCCESS" ? "col-span-3" : "col-span-2",
+          children: [
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between p-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconMidenLogo, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconClose, { color: "black", className: "cursor-pointer" })
+            ] }),
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "px-14 pt-4 pb-8 flex flex-col gap-6 max-h-[32rem] overflow-y-scroll", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between py-3 px-4 bg-[#F8FDFF] border border-[#DAE4E8] rounded-lg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  BaseLabelInfo,
+                  {
+                    label: "Amount Due",
+                    value: formatAmountHandler()
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BaseLabelInfo, { label: "Charges", value: formatChargeHandler() })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                PayByCard,
                 {
-                  label: "Amount Due",
-                  value: formatAmountHandler()
+                  secretKey,
+                  environment,
+                  caller: "miden",
+                  paymentObject,
+                  onPaymentAuthorized: setSuccess,
+                  onError: onErrorHandler
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BaseLabelInfo, { label: "Charges", value: formatChargeHandler() })
+              ) : paymentType === "BANK_TRANSFER" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                PayByTransfer,
+                {
+                  secretKey,
+                  environment,
+                  caller: "miden",
+                  paymentObject,
+                  onPaymentAuthorized: setSuccess,
+                  onError: onErrorHandler
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                PayByStableCoin,
+                {
+                  secretKey,
+                  environment,
+                  caller: "miden",
+                  paymentObject,
+                  onPaymentAuthorized: setSuccess,
+                  onError: onErrorHandler
+                }
+              ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              PayByCard,
-              {
-                secretKey,
-                environment,
-                caller: "miden",
-                paymentObject,
-                onPaymentAuthorized: setSuccess,
-                onError
-              }
-            ) : paymentType === "BANK_TRANSFER" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              PayByTransfer,
-              {
-                secretKey,
-                environment,
-                caller: "miden",
-                paymentObject,
-                onPaymentAuthorized: setSuccess,
-                onError
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              PayByStableCoin,
+            checkoutState === "SUCCESS" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              BaseSuccess,
               {
-                secretKey,
-                environment,
+                amount: paymentObject.amount,
+                currency: paymentObject.currency,
                 caller: "miden",
-                paymentObject,
-                onPaymentAuthorized: setSuccess,
-                onError
+                redirectUrl: paymentObject.redirectUrl ?? "",
+                successObject
               }
-            ) })
-          ] }),
-          checkoutState === "SUCCESS" && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            BaseSuccess,
-            {
-              amount: paymentObject.amount,
-              currency: paymentObject.currency,
-              caller: "miden",
-              redirectUrl: paymentObject.redirectUrl ?? "",
-              successObject
-            }
-          )
-        ]
-      }
-    )
-  ] }) });
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {