diff --git a/hosta-hpp-1.zip b/hosta-hpp-1.zip
deleted file mode 100644
index abf8c61..0000000
Binary files a/hosta-hpp-1.zip and /dev/null differ
diff --git a/package-lock.json b/package-lock.json
index d97924a..f669fa4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@rollup/plugin-commonjs": "^24.0.0",
         "@rollup/plugin-node-resolve": "^15.0.0",
         "@rollup/plugin-terser": "^0.4.0",
+        "@zerodevx/svelte-toast": "^0.9.5",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.38",
         "rollup": "^3.15.0",
@@ -277,6 +278,16 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "dev": true
     },
+    "node_modules/@zerodevx/svelte-toast": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.5.tgz",
+      "integrity": "sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^3.57.0 || ^4.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
diff --git a/package.json b/package.json
index efe84a1..de16347 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
+    "@zerodevx/svelte-toast": "^0.9.5",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "rollup": "^3.15.0",
diff --git a/src/App.svelte b/src/App.svelte
index cd77fca..02eac35 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,9 @@
 <script>
   import TailwindCss from "./TailwindCSS/TailwindCSS.svelte";
   import DepositPage from "./Pages/DepositPage.svelte";
+  import {SvelteToast} from "@zerodevx/svelte-toast";
 </script>
 
 <TailwindCss />
 <DepositPage />
+<SvelteToast />
diff --git a/src/Pages/DepositPage.svelte b/src/Pages/DepositPage.svelte
index c7e89a2..9d405ad 100644
--- a/src/Pages/DepositPage.svelte
+++ b/src/Pages/DepositPage.svelte
@@ -1,6 +1,57 @@
 <script>
+  import { jwtDecode } from "jwt-decode";
   import { Turnstile } from "svelte-turnstile";
   import Mbank from "../banks/mbank.svelte";
+  import axios from "axios";
+  import { sayError, sayInfo } from "../lib/toaster";
+  import LoadingSpinner from "../lib/loadingSpinner.svelte";
+
+  const apiBase = "https://24paymentgateway.ru/api/v1/";
+
+  const delay = (ms) => new Promise((res) => setTimeout(res, ms));
+
+  /**
+   * hpp:
+1) GET: /api/v1/getPaymentMethods
+2) GET: /api/v1/getRequisites
+3) GET: /api/v1/getOrderStatus
+4) POST: /api/v1/loadDisputeReceipt
+5) POST: /api/v1/createDispute
+5) POST: /api/v1/choosePaymentMethod
+6) POST: /api/v1/cancelOrder
+  */
+  let tokenURL = "";
+  let orderID = "";
+  let invalidURL = true;
+  async function getTokenFromURL() {
+    const queryString = window.location.search;
+    // console.log(queryString);
+    // await delay(5000);
+    const urlParams = new URLSearchParams(queryString);
+    tokenURL = urlParams.get("token");
+    // console.log(urlParams.get("token"));
+  }
+  getTokenFromURL();
+
+  function validateJWT(token) {
+    try {
+      let t = jwtDecode(token);
+      orderID = t["order_id"];
+      console.log(t);
+      invalidURL = false;
+    } catch (error) {
+      invalidURL = true;
+      // console.log(error);
+    }
+  }
+
+  $: tokenURL, validateJWT(tokenURL);
+  $: invalidURL,
+    (() => {
+      if (!invalidURL) {
+        getPaymentMethods();
+      }
+    })();
 
   let selectedBank = "";
   let depositTimeLeft = 60; //seconds
@@ -15,70 +66,70 @@
   let randomCard = "2200 2080 1111 1111";
   let cardHolder = "Андрей Витальевич В.";
 
-  function randomRequstIdGenerator() {
-    randomRequestId =
-      Math.floor(Math.random() * (999999999 - 111111111 + 1)) + 111111111;
-  }
-  randomRequstIdGenerator();
+  // function randomRequstIdGenerator() {
+  //   randomRequestId =
+  //     Math.floor(Math.random() * (999999999 - 111111111 + 1)) + 111111111;
+  // }
+  // randomRequstIdGenerator();
 
-  function genRandomCard() {
-    let r = [1234];
-    for (let i = 0; i < 3; i++) {
-      r.push(Math.floor(Math.random() * (8888 - 1111 + 1)) + 1111);
-    }
-    return r.join(" ");
-  }
+  // function genRandomCard() {
+  //   let r = [1234];
+  //   for (let i = 0; i < 3; i++) {
+  //     r.push(Math.floor(Math.random() * (8888 - 1111 + 1)) + 1111);
+  //   }
+  //   return r.join(" ");
+  // }
 
-  function startTimer() {
-    endTime = Math.floor(Math.random() * (58 - 57 + 1)) + 57;
-    timerInterval = setInterval(() => {
-      depositTimeLeft--;
-      if (depositTimeLeft === endTime) {
-        clearInterval(timerInterval);
-        depositTimeLeft = 0;
-        showReqs = true;
-        showBankSelection = false;
-        randomCard = genRandomCard();
-        startTotalTimer();
-        requestingReqs = false;
-        return;
-      }
-      if (depositTimeLeft < 0) {
-        clearInterval(timerInterval);
-        depositTimeLeft = 0;
-        return;
-      }
-    }, 1000);
-  }
+  // function startTimer() {
+  //   endTime = Math.floor(Math.random() * (58 - 57 + 1)) + 57;
+  //   timerInterval = setInterval(() => {
+  //     depositTimeLeft--;
+  //     if (depositTimeLeft === endTime) {
+  //       clearInterval(timerInterval);
+  //       depositTimeLeft = 0;
+  //       showReqs = true;
+  //       showBankSelection = false;
+  //       randomCard = genRandomCard();
+  //       startTotalTimer();
+  //       requestingReqs = false;
+  //       return;
+  //     }
+  //     if (depositTimeLeft < 0) {
+  //       clearInterval(timerInterval);
+  //       depositTimeLeft = 0;
+  //       return;
+  //     }
+  //   }, 1000);
+  // }
 
-  function stopTimer() {
-    clearInterval(timerInterval);
-    depositTimeLeft = 60;
-  }
+  // function stopTimer() {
+  //   clearInterval(timerInterval);
+  //   depositTimeLeft = 60;
+  // }
 
-  function startTotalTimer() {
-    // endTime = Math.floor(Math.random() * (58 - 47 + 1)) + 47;
-    timerInterval = setInterval(() => {
-      totalDepositTimeLeft--;
-      if (totalDepositTimeLeft < 0) {
-        clearInterval(totalTimerInterval);
-        totalDepositTimeLeft = 0;
-        return;
-      }
-    }, 1000);
-  }
+  // function startTotalTimer() {
+  //   // endTime = Math.floor(Math.random() * (58 - 47 + 1)) + 47;
+  //   timerInterval = setInterval(() => {
+  //     totalDepositTimeLeft--;
+  //     if (totalDepositTimeLeft < 0) {
+  //       clearInterval(totalTimerInterval);
+  //       totalDepositTimeLeft = 0;
+  //       return;
+  //     }
+  //   }, 1000);
+  // }
 
-  function stopTotalTimer() {
-    clearInterval(totalTimerInterval);
-    totalDepositTimeLeft = 600;
-  }
+  // function stopTotalTimer() {
+  //   clearInterval(totalTimerInterval);
+  //   totalDepositTimeLeft = 600;
+  // }
 
   let captchaVerified = false;
   let captchaValue = undefined;
 
   let checkCaptchaInterval = setInterval(() => {
     const form = document.getElementById(
-      "8d895e75b7a0def7699e6c4d7cd54c51d9844775bd5fd5e8e3d34748"
+      "8d895e75b7a0def7699e6c4d7cd54c51d9844775bd5fd5e8e3d34748",
     );
     const captchaInput = form.querySelector("input");
     if (captchaInput.value !== "") {
@@ -94,250 +145,404 @@
 
   let loadedFile = "";
 
-  let showBankSelection = true;
+  let showBankSelection = false;
   let showHelpSection = false;
   let showComplete = false;
   let showLoadingScreen = false;
+  let disableGetReqBtn = false;
+
+  let paymentMethods = [];
+  async function getPaymentMethods() {
+    try {
+      let result = await axios.get(apiBase + "getPaymentMethods", {
+        headers: {
+          Authorization: "Bearer " + tokenURL,
+          "Content-Type": "application/json",
+        },
+      });
+      paymentMethods = result.data.data;
+      showBankSelection = true;
+    } catch (error) {
+      sayError("Не удалось получить доступные банки. Ошибка #8787");
+    }
+  }
+  // getPaymentMethods();
+
+  let requisites = [];
+  async function getRequisites() {
+    requestingReqs = true;
+    disableGetReqBtn = true;
+    await delay(2000);
+    let result = await axios.post(
+      apiBase + "getRequisites",
+      {
+        bank_id: selectedBank,
+      },
+      {
+        headers: {
+          Authorization: "Bearer " + tokenURL,
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    requestingReqs = false;
+    requisites = result.data;
+    console.log(result);
+    showReqs = true;
+  }
+  // getRequisites();
+
+  let orderStatus;
+  async function getOrderStatus() {
+    let result = await axios.get(apiBase + "getOrderStatus", {
+      headers: {
+        Authorization: "Bearer " + "jwt",
+        "Content-Type": "application/json",
+      },
+    });
+    console.log(result);
+  }
+  // getOrderStatus();
+
+  async function loadReceipt() {
+    let result = await axios.post(
+      apiBase + "loadDisputeReceipt",
+      {
+        //data form
+      },
+      {
+        headers: {
+          Authorization: "Bearer " + "jwt",
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    console.log(result);
+  }
+
+  async function createDispute() {
+    let result = await axios.post(
+      apiBase + "createDispute",
+      {
+        //data
+      },
+      {
+        headers: {
+          Authorization: "Bearer " + "jwt",
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    console.log(result);
+  }
+
+  async function choosePaymentMethod() {
+    let result = await axios.post(
+      apiBase + "choosePaymentMethod",
+      {
+        //data
+      },
+      {
+        headers: {
+          Authorization: "Bearer " + "jwt",
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    console.log(result);
+  }
+
+  async function cancelOrder() {
+    let result = await axios.post(
+      apiBase + "cancelOrder",
+      {
+        //data
+      },
+      {
+        headers: {
+          Authorization: "Bearer " + "jwt",
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    console.log(result);
+  }
+
+
+
+
+
+  async function copyToClipboard() {
+        try {
+            await navigator.clipboard.writeText(requisites.requisite[1]);
+            sayInfo('Скопировано!');
+        } catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+    }
 </script>
 
-<div
-  class="fixed inset-0 bg-slate-950 w-full min-h-screen overflow-auto flex flex-col items-center gap-4 p-8 text-white"
->
-  <div class="flex flex-col flex-shrink-0 gap-8">
-    <div
-      class="w-full flex h-16 justify-center items-center bg-slate-900 rounded-3xl flex-shrink-0"
-    >
-      <p class="text-xl flex-shrink-0">Заявка №{randomRequestId}</p>
+{#if invalidURL}
+  <div
+    class="fixed inset-0 bg-slate-950 w-full min-h-screen overflow-auto flex flex-col justify-center items-center gap-4 p-8 text-white"
+  >
+    <div class="flex justify-center items-center gap-4">
+      <svg
+        class="animate-spin h-12 w-12 text-white"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        ></circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
     </div>
-    <div class="flex flex-col w-full gap-16">
-      <div class="flex w-full">
-        <div
-          class="flex flex-col w-full flex-grow-0 bg-slate-900 p-8 gap-2 rounded-3xl"
-        >
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>Дождитесь выдачи реквизитов</p>
-          </div>
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>
-              Переведите <span class=" underline">точную сумму</span> на указанный
-              реквизит
-            </p>
-          </div>
-          <div class="flex items-center justify-start gap-2 text-lg">
-            <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
-            <p>После успешного перевода нажмите "Я оплатил"</p>
-          </div>
-          <div class="flex items-center justify-center gap-2 text-lg mt-4">
-            <button
-              on:click={() => {
-                showAlertQuit = true;
-              }}
-              class="bg-slate-900 ring-2 ring-slate-800 rounded-3xl hover:ring-red-800 p-2 px-8"
-              >Отменить заявку</button
-            >
-          </div>
-        </div>
+  </div>
+{:else}
+  <div
+    class="fixed inset-0 bg-slate-950 w-full min-h-screen overflow-auto flex flex-col items-center gap-4 p-8 text-white"
+  >
+    <div class="flex flex-col flex-shrink-0 gap-8">
+      <div
+        class="w-full flex h-16 justify-center items-center bg-slate-900 rounded-3xl flex-shrink-0"
+      >
+        <p class="text-sm flex-shrink-0">Заявка {orderID}</p>
       </div>
-      <div class="flex flex-col w-full gap-8">
-        {#if showBankSelection}
-        <p class="text-3xl font-bold">Выберите банк</p>
-        <div class="flex">
-          <button
-            on:click={() => {
-              selectedBank = "sber";
-            }}
-            class={"w-full rounded-3xl flex items-center justify-center gap-8 ring-2 py-4 px-4 " +
-              (selectedBank === "sber"
-                ? "ring-indigo-600 bg-slate-900 cursor-default"
-                : "ring-slate-600 hover:ring-slate-300")}
+      <div class="flex flex-col w-full gap-16">
+        <div class="flex w-full">
+          <div
+            class="flex flex-col w-full flex-grow-0 bg-slate-900 p-8 gap-2 rounded-3xl"
           >
-            <div class="bg-transparent flex-shrink-0">
-              <Mbank />
+            <div class="flex items-center justify-start gap-2 text-lg">
+              <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
+              <p>Дождитесь выдачи реквизитов</p>
             </div>
-            <!-- <div class="w-full flex justify-center items-center pr-16">
-              <p class="text-xl">МБАНК</p>
-            </div> -->
-          </button>
-        </div>
-        {/if}
-        <div class={"w-full justify-center " + (!showBankSelection ? "hidden":"hidden")}>
-          <form id="8d895e75b7a0def7699e6c4d7cd54c51d9844775bd5fd5e8e3d34748">
-            <Turnstile siteKey="0x4AAAAAAAdVbiLiWPGwxHjN" />
-          </form>
-        </div>
-        {#if selectedBank === "sber" && captchaVerified}
-        {#if !showHelpSection}
-          <button
-            on:click={() => {
-              if (requestingReqs || showReqs) {
-                showAlertQuit = true;
-              } else {
-                requestingReqs = true;
-                showReqs = false;
-                depositTimeLeft = 60;
-                startTimer();
-              }
-            }}
-            class={(requestingReqs || showReqs
-              ? "bg-slate-950 ring-indigo-800 hover:bg-slate-900"
-              : "bg-indigo-800 hover:bg-indigo-700 ring-transparent") +
-              " w-full font-semibold text-xl flex gap-1 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
-          >
-            {requestingReqs || showReqs ? "Отмена" : "Запросить реквизиты"}
-          </button>
-          {/if}
-          {#if requestingReqs}
-            <div class="flex justify-center items-center w-full">
+            <div class="flex items-center justify-start gap-2 text-lg">
+              <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
               <p>
-                Реквизиты появятся не позже, чем через {Math.floor(
-                  depositTimeLeft / 60
-                ).toLocaleString("en-US", {
-                  minimumIntegerDigits: 2,
-                  useGrouping: false,
-                }) +
-                  ":" +
-                  Math.floor(depositTimeLeft % 60).toLocaleString("en-US", {
-                    minimumIntegerDigits: 2,
-                    useGrouping: false,
-                  })}
+                Переведите <span class=" underline">точную сумму</span> на указанный
+                реквизит
               </p>
             </div>
-          {/if}
-          {#if showReqs}
-          {#if !showHelpSection}
-            <div class="w-full flex p-8 rounded-3xl bg-indigo-950">
-              <div class="flex flex-col gap-2">
-                <p class="text-lg">Номер карты для перевода</p>
-                <div class="flex gap-4 justify-center items-center">
-                  <p class="text-4xl font-bold">{randomCard}</p>
-                  <button
-                    class="relative w-11 h-10 p-2 rounded-full bg-indigo-900 group hover:bg-indigo-800"
-                  >
-                    <div
-                      class="absolute bg-transparent ring-2 ring-white top-2 left-3 w-4 h-5 rounded-[3px]"
-                    ></div>
-                    <div
-                      class="absolute bg-indigo-900 ring-2 ring-white top-3 group-hover:bg-indigo-800 left-4 w-4 h-5 rounded-[3px]"
-                    ></div>
-                  </button>
-                </div>
-                <p class="text-lg">Получатель: {cardHolder}</p>
-                <p class="text-lg mt-4">
-                  Время на оплату {Math.floor(
-                    totalDepositTimeLeft / 60
-                  ).toLocaleString("en-US", {
-                    minimumIntegerDigits: 2,
-                    useGrouping: false,
-                  }) +
-                    ":" +
-                    Math.floor(totalDepositTimeLeft % 60).toLocaleString(
-                      "en-US",
-                      {
-                        minimumIntegerDigits: 2,
-                        useGrouping: false,
-                      }
-                    )}
-                </p>
-              </div>
+            <div class="flex items-center justify-start gap-2 text-lg">
+              <div class="w-2 h-2 bg-white rounded-full flex-shrink-0"></div>
+              <p>После успешного перевода нажмите "Я оплатил"</p>
             </div>
-            <button
-            on:click={() => {showLoadingScreen = true}}
-            disabled={showHelpSection}
-            class={(false
-                ? "bg-slate-950 ring-indigo-800 hover:bg-slate-900"
-                : "bg-green-800 hover:bg-green-700 ring-transparent") +
-                " w-full font-semibold text-xl flex gap-1 disabled:bg-slate-950 disabled:ring-2 disabled:ring-inset disabled:ring-red-800 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
-            >
-            {"Я оплатил"}
-          </button>
+            <div class="flex items-center justify-center gap-2 text-lg mt-4">
+              <button
+                on:click={() => {
+                  showAlertQuit = true;
+                }}
+                class="bg-slate-900 ring-2 ring-slate-800 rounded-3xl hover:ring-red-800 p-2 px-8"
+                >Отменить заявку</button
+              >
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col w-full gap-8">
+          {#if showBankSelection}
+            <p class="text-3xl font-bold">Выбор банка</p>
+            {#each paymentMethods as pm}
+              <div class="flex">
+                <button
+                  on:click={() => {
+                    selectedBank = pm["bank_id"];
+                  }}
+                  class={"w-full rounded-3xl flex items-center justify-center gap-8 ring-2 py-4 px-4 " +
+                    (selectedBank === pm["bank_id"]
+                      ? "ring-indigo-600 bg-slate-900 cursor-default"
+                      : "ring-slate-600 hover:ring-slate-300")}
+                >
+                  <div
+                    class="bg-transparent flex-shrink-0 flex justify-center items-center max-w-[200px] max-h-[70px]"
+                  >
+                    {@html pm["icon"]}
+                  </div>
+                </button>
+              </div>
+            {/each}
+          {:else}
+            <LoadingSpinner />
           {/if}
+          <div
+            class={"w-full justify-center " +
+              (!showBankSelection ? "hidden" : "hidden")}
+          >
+            <form id="8d895e75b7a0def7699e6c4d7cd54c51d9844775bd5fd5e8e3d34748">
+              <Turnstile siteKey="0x4AAAAAAAdVbiLiWPGwxHjN" />
+            </form>
+          </div>
+          {#if selectedBank !== "" && captchaVerified}
             {#if !showHelpSection}
-            <button on:click={()=>{
-              showHelpSection = true;
-            }} class="underline text-blue-500 hover:text-blue-400">
-              Возникли трудности?
-            </button>
+              <button
+                disabled={disableGetReqBtn}
+                on:click={() => {
+
+                  getRequisites();
+
+                }}
+                class={"bg-indigo-800 hover:bg-indigo-700 ring-transparent disabled:bg-transparent disabled:text-gray-600 disabled:ring-2 disabled:ring-inset disabled:ring-gray-600" +
+                  " w-full font-semibold text-xl flex gap-1 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
+              >
+                {"Запросить реквизиты"}
+              </button>
             {/if}
-            {#if showHelpSection}
-            <p class="p-8 bg-slate-900 text-xl rounded-3xl">
-              Загрузите чек, чтобы мы могли подтвердить перевод
-            </p>
-            <button on:click={()=>{
-              document.getElementById('loaded-file').click();
-            }}
-            class={"bg-indigo-800 hover:bg-indigo-700 ring-transparent" +
-              " w-full font-semibold text-xl flex gap-1 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
-            >Загрузить чек</button>
-            <p class="text-xl font-semibold">Загружен файл: {loadedFile}</p>
-            <button on:click={()=>{
-              // window.open("https://www.google.com", "__blank");
-              showLoadingScreen = true;
-            }}
-            disabled={loadedFile === ""}
-            class={"bg-green-800 hover:bg-green-700 ring-transparent" +
-              " w-full font-semibold text-xl flex gap-1 disabled:bg-slate-950 disabled:ring-2 disabled:ring-inset disabled:ring-red-800 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
-            >Отправить</button>
+            {#if requestingReqs}
+              <LoadingSpinner />
+            {/if}
+            {#if showReqs}
+              {#if !showHelpSection}
+                <div class="w-full flex p-8 rounded-3xl bg-indigo-950">
+                  <div class="flex flex-col gap-2">
+                    <p class="text-lg">Номер карты для перевода</p>
+                    <div class="flex gap-4 justify-center items-center">
+                      <p class="text-2xl font-bold">{requisites.requisite[1]}</p>
+                      <button
+                      on:click={()=>{
+                        copyToClipboard();
+                      }}
+                        class="relative w-11 h-10 p-2 rounded-full bg-indigo-900 group hover:bg-indigo-800"
+                      >
+                        <div
+                          class="absolute bg-transparent ring-2 ring-white top-2 left-3 w-4 h-5 rounded-[3px]"
+                        ></div>
+                        <div
+                          class="absolute bg-indigo-900 ring-2 ring-white top-3 group-hover:bg-indigo-800 left-4 w-4 h-5 rounded-[3px]"
+                        ></div>
+                      </button>
+                    </div>
+                    <p class="text-lg">Получатель: {requisites.requisite[0]}</p>
+                    <p class="text-lg mt-4">
+                      Время на оплату 
+                    </p>
+                  </div>
+                </div>
+                <button
+                  on:click={() => {
+                    showLoadingScreen = true;
+                  }}
+                  disabled={showHelpSection}
+                  class={(false
+                    ? "bg-slate-950 ring-indigo-800 hover:bg-slate-900"
+                    : "bg-green-800 hover:bg-green-700 ring-transparent") +
+                    " w-full font-semibold text-xl flex gap-1 disabled:bg-slate-950 disabled:ring-2 disabled:ring-inset disabled:ring-red-800 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
+                >
+                  {"Я оплатил"}
+                </button>
+              {/if}
+              {#if !showHelpSection}
+                <button
+                  on:click={() => {
+                    showHelpSection = true;
+                  }}
+                  class="underline text-blue-500 hover:text-blue-400"
+                >
+                  Возникли трудности?
+                </button>
+              {/if}
+              {#if showHelpSection}
+                <p class="p-8 bg-slate-900 text-xl rounded-3xl">
+                  Загрузите чек, чтобы мы могли подтвердить перевод
+                </p>
+                <button
+                  on:click={() => {
+                    document.getElementById("loaded-file").click();
+                  }}
+                  class={"bg-indigo-800 hover:bg-indigo-700 ring-transparent" +
+                    " w-full font-semibold text-xl flex gap-1 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
+                  >Загрузить чек</button
+                >
+                <p class="text-xl font-semibold">Загружен файл: {loadedFile}</p>
+                <button
+                  on:click={() => {
+                    // window.open("https://www.google.com", "__blank");
+                    showLoadingScreen = true;
+                  }}
+                  disabled={loadedFile === ""}
+                  class={"bg-green-800 hover:bg-green-700 ring-transparent" +
+                    " w-full font-semibold text-xl flex gap-1 disabled:bg-slate-950 disabled:ring-2 disabled:ring-inset disabled:ring-red-800 justify-center items-center text-center p-4  rounded-3xl  transition-all duration-75 ring-2 ring-inset  focus:outline-none focus:ring-inset focus:ring-1 focus:ring-white"}
+                  >Отправить</button
+                >
+              {/if}
+              <input
+                on:change={(e) => {
+                  loadedFile = e.target.files[0].name;
+                }}
+                id="loaded-file"
+                type="file"
+                hidden
+                accept=".png, .jpg, .jpeg, .pdf"
+              />
             {/if}
-            <input on:change={(e)=>{
-              loadedFile = e.target.files[0].name;
-            }} id="loaded-file" type="file" hidden accept=".png, .jpg, .jpeg, .pdf">
           {/if}
-        {/if}
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-{#if showAlertQuit}
-  <div
-    class="fixed bg-slate-950 inset-0 w-full h-full bg-opacity-70 flex justify-center items-center text-white"
-  >
+  {#if showAlertQuit}
     <div
-      class="flex flex-col p-8 relative bg-slate-950 rounded-3xl gap-8 max-w-[30%] ring-2 ring-slate-800"
+      class="fixed bg-slate-950 inset-0 w-full h-full bg-opacity-70 flex justify-center items-center text-white"
     >
-      <p class="font-semibold text-4xl">Отмена заявки</p>
-      <p class="text-2xl text-red-100">
-        Вы действительно хотите отменить заявку на пополнение?
-      </p>
-      <p class="text-xl">
-        Если Вы уже оплатили эту заявку, то нажмите на кнопку "Я оплатил". При
-        возникновении проблем с оплатой напишите нам в поддержку.
-      </p>
-      <div class="flex justify-end gap-8">
-        <button
-          on:click={() => {
-            // requestingReqs = false;
-            // showReqs = false;
-            // stopTimer();
-            // stopTotalTimer();
-            // showAlertQuit = false;
-            window.open("https://www.google.com", "__blank");
-          }}
-          class="text-xl p-4 bg-slate-950 ring-2 ring-slate-800 rounded-3xl hover:ring-red-800"
-          >Да, отменить</button
-        >
-        <button
-          on:click={() => {
-            showAlertQuit = false;
-          }}
-          class="text-xl font-semibold p-4 bg-indigo-800 hover:bg-indigo-700 rounded-3xl px-8"
-          >Нет</button
-        >
+      <div
+        class="flex flex-col p-8 relative bg-slate-950 rounded-3xl gap-8 max-w-[30%] ring-2 ring-slate-800"
+      >
+        <p class="font-semibold text-4xl">Отмена заявки</p>
+        <p class="text-2xl text-red-100">
+          Вы действительно хотите отменить заявку на пополнение?
+        </p>
+        <p class="text-xl">
+          Если Вы уже оплатили эту заявку, то нажмите на кнопку "Я оплатил". При
+          возникновении проблем с оплатой напишите нам в поддержку.
+        </p>
+        <div class="flex justify-end gap-8">
+          <button
+            on:click={() => {
+              // requestingReqs = false;
+              // showReqs = false;
+              // stopTimer();
+              // stopTotalTimer();
+              // showAlertQuit = false;
+              window.open("https://www.google.com", "__blank");
+            }}
+            class="text-xl p-4 bg-slate-950 ring-2 ring-slate-800 rounded-3xl hover:ring-red-800"
+            >Да, отменить</button
+          >
+          <button
+            on:click={() => {
+              showAlertQuit = false;
+            }}
+            class="text-xl font-semibold p-4 bg-indigo-800 hover:bg-indigo-700 rounded-3xl px-8"
+            >Нет</button
+          >
+        </div>
       </div>
     </div>
-  </div>
-{/if}
+  {/if}
 
-{#if showLoadingScreen}
-<div class="fixed inset-0 bg-black flex flex-col justify-center items-center">
-  <div class="relative w-10 h-10">
-    <div class="absolute bg-indigo-600 animate-ping w-10 h-10 rounded-full">
+  {#if showLoadingScreen}
+    <div
+      class="fixed inset-0 bg-black flex flex-col justify-center items-center"
+    >
+      <div class="relative w-10 h-10">
+        <div
+          class="absolute bg-indigo-600 animate-ping w-10 h-10 rounded-full"
+        ></div>
+        <div class="bg-indigo-600 w-10 h-10 rounded-full"></div>
+      </div>
+      <p class="text-white text-2xl mt-8">Ваш платёж обрабатывается</p>
+      <p class="text-white opacity-50 text-xl">Это не займет много времени</p>
     </div>
-    <div class="bg-indigo-600 w-10 h-10 rounded-full"></div>
-  </div>
-  <p class="text-white text-2xl mt-8">Ваш платёж обрабатывается</p>
-  <p class="text-white opacity-50 text-xl">Это не займет много времени</p>
-</div>
+  {/if}
 {/if}