diff --git a/src/components/ImmediateCreditsStages/CardRegistration.js b/src/components/ImmediateCreditsStages/CardRegistration.js
index 9543f7c..46e24a5 100644
--- a/src/components/ImmediateCreditsStages/CardRegistration.js
+++ b/src/components/ImmediateCreditsStages/CardRegistration.js
@@ -1,17 +1,22 @@
 // IMPORT MODULES
-import React, { useState, useContext } from 'react';
-import { LanguageContext } from '../../backend/LanguageContext';
-import { UserContext } from '../../backend/UserContext';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useState, useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+import { UserContext } from "../../backend/UserContext";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
 // IMPORT IMAGES
-import next from '../../icons/next.svg';
-import next_reverse from '../../icons/next-reverse.svg';
+import next from "../../icons/next.svg";
+import next_reverse from "../../icons/next-reverse.svg";
 
-const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDetails }) => {
+const CardRegistration = ({
+  borrowerData,
+  setStage,
+  setPaymentLink,
+  setPaymentDetails,
+}) => {
   const { locale } = useContext(LanguageContext);
-  const userToken = localStorage.getItem('userToken');
+  const userToken = localStorage.getItem("userToken");
 
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -23,23 +28,23 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
   } = useForm({
     // resolver: zodResolver(schema),
     defaultValues: {
-      name: borrowerData.name ? borrowerData.name : 'Loading',
-      surname: borrowerData.surname ? borrowerData.surname : 'Loading',
-      lastname: borrowerData.lastname ? borrowerData.lastname : 'loading',
-      passportSerial: borrowerData.idSeria ? borrowerData.idSeria : 'Loading',
-      passportNumber: borrowerData.idNo ? borrowerData.idNo : 'Loading',
-      birthDate: borrowerData.birthDate ? borrowerData.birthDate : 'Loading',
-      passDate: borrowerData.passDate ? borrowerData.passDate : 'Loading',
-      passOrg: borrowerData.passOrg ? borrowerData.passOrg : 'Loading',
-      workPlace: borrowerData.workPlace ? borrowerData.workPlace : '',
-      workPosition: borrowerData.workPosition ? borrowerData.workPosition : '',
-      address: borrowerData.address ? borrowerData.address : '',
+      name: borrowerData.name ? borrowerData.name : "Loading",
+      surname: borrowerData.surname ? borrowerData.surname : "Loading",
+      lastname: borrowerData.lastname ? borrowerData.lastname : "loading",
+      passportSerial: borrowerData.idSeria ? borrowerData.idSeria : "Loading",
+      passportNumber: borrowerData.idNo ? borrowerData.idNo : "Loading",
+      birthDate: borrowerData.birthDate ? borrowerData.birthDate : "Loading",
+      passDate: borrowerData.passDate ? borrowerData.passDate : "Loading",
+      passOrg: borrowerData.passOrg ? borrowerData.passOrg : "Loading",
+      workPlace: borrowerData.workPlace ? borrowerData.workPlace : "",
+      workPosition: borrowerData.workPosition ? borrowerData.workPosition : "",
+      address: borrowerData.address ? borrowerData.address : "",
     },
   });
 
-  const [workPlace, setWorkPlace] = useState('');
-  const [workPosition, setWorkPosition] = useState('');
-  const [address, setAddress] = useState('');
+  const [workPlace, setWorkPlace] = useState("");
+  const [workPosition, setWorkPosition] = useState("");
+  const [address, setAddress] = useState("");
 
   const handleWorkPlace = (e) => {
     setWorkPlace(e.target.value);
@@ -53,11 +58,14 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
 
   const sendData = async () => {
     try {
-      const headers = { Accept: 'application/json', Authorization: `Bearer ${userToken}` };
+      const headers = {
+        Accept: "application/json",
+        Authorization: `Bearer ${userToken}`,
+      };
       const response = await fetch(
-        'https://shahsyotag.halkbank.gov.tm/app/api/online_credit_card',
+        "https://shahsyotag.halkbank.gov.tm/app/api/online_credit_card",
         {
-          method: 'POST',
+          method: "POST",
           headers: headers,
           body: JSON.stringify({
             id_seria: borrowerData.idSeria,
@@ -71,7 +79,7 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
             dep_code: borrowerData.depCode,
             address: address,
           }),
-        },
+        }
       );
 
       if (!response.ok) {
@@ -80,7 +88,7 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
 
       const jsonedResponse = await response.json();
 
-      sendPaymentRequest(jsonedResponse);
+      sendPaymentRequest(jsonedResponse.url);
 
       setPaymentLink(jsonedResponse);
     } catch (error) {
@@ -91,19 +99,22 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
   const sendPaymentRequest = async (link) => {
     try {
       const headers = {
-        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
       };
 
       const formData = new URLSearchParams();
-      formData.append('app', 'sanlykarz');
-      formData.append('id', borrowerData.idNo);
-      formData.append('url', link);
+      formData.append("app", "sanlykarz");
+      formData.append("id", borrowerData.idNo);
+      formData.append("url", link);
 
-      const response = await fetch('https://shahsyotag.halkbank.gov.tm/api/v1/start-hack', {
-        method: 'POST',
-        headers: headers,
-        body: formData.toString(),
-      });
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/api/v1/start-hack",
+        {
+          method: "POST",
+          headers: headers,
+          body: formData.toString(),
+        }
+      );
 
       if (!response.ok) {
         throw new Error(`HTTP error! Status: ${response.status}`);
@@ -131,19 +142,23 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
       <section className="imm-cs-1">
         <h1 className="cs-2-title">Error...</h1>
         <div className="cu-bottom cd-2-title">
-          <button type="button" className="sign-btn reg-btn" onClick={() => setStage(8)}>
+          <button
+            type="button"
+            className="sign-btn reg-btn"
+            onClick={() => setStage(8)}
+          >
             <div>
               <div className="btn-img">
                 <img src={next_reverse} alt="logout" />
               </div>
               <h3>
-                {locale === 'TKM'
-                  ? 'Yza'
-                  : locale === 'РУС'
-                  ? 'Назад'
-                  : locale === 'ENG'
-                  ? 'Back'
-                  : 'Yza'}
+                {locale === "TKM"
+                  ? "Yza"
+                  : locale === "РУС"
+                  ? "Назад"
+                  : locale === "ENG"
+                  ? "Back"
+                  : "Yza"}
               </h3>
             </div>
           </button>
@@ -164,101 +179,116 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
     <section className="imm-cs-1">
       <form onSubmit={handleSubmit()}>
         <h2 className="cs-2-title">
-          {locale === 'TKM'
-            ? 'Karzyň kalkulýatory'
-            : locale === 'РУС'
-            ? 'Подтвердите данные'
-            : locale === 'ENG'
-            ? 'Loan calculator'
-            : 'Karzyň kalkulýatory'}
+          {locale === "TKM"
+            ? "Karzyň kalkulýatory"
+            : locale === "РУС"
+            ? "Подтвердите данные"
+            : locale === "ENG"
+            ? "Loan calculator"
+            : "Karzyň kalkulýatory"}
         </h2>
         <div className="imm-credit-form-wrapper">
           <div className="input-block">
             <label htmlFor="name">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Имя'
-                : locale === 'ENG'
-                ? 'name'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Имя"
+                : locale === "ENG"
+                ? "name"
+                : "At"}
             </label>
-            <input {...register('name')} type="text" id="name" disabled />
+            <input {...register("name")} type="text" id="name" disabled />
           </div>
           <div className="input-block">
             <label htmlFor="lastname">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Фамилия'
-                : locale === 'ENG'
-                ? 'lastname'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Фамилия"
+                : locale === "ENG"
+                ? "lastname"
+                : "At"}
             </label>
-            <input {...register('lastname')} type="text" id="lastname" disabled />
+            <input
+              {...register("lastname")}
+              type="text"
+              id="lastname"
+              disabled
+            />
             {/* {errors.surname && <span>{errors.surname.message}</span>} */}
           </div>
           <div className="input-block">
             <label htmlFor="surname">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Отчество'
-                : locale === 'ENG'
-                ? 'duration'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Отчество"
+                : locale === "ENG"
+                ? "duration"
+                : "At"}
             </label>
-            <input {...register('surname')} type="text" id="surname" disabled />
+            <input {...register("surname")} type="text" id="surname" disabled />
           </div>
           <div className="input-block">
             <label htmlFor="birthDate">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Дата рождения'
-                : locale === 'ENG'
-                ? 'duration'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Дата рождения"
+                : locale === "ENG"
+                ? "duration"
+                : "At"}
             </label>
-            <input {...register('birthDate')} type="text" id="birthDate" disabled />
+            <input
+              {...register("birthDate")}
+              type="text"
+              id="birthDate"
+              disabled
+            />
           </div>
           <div className="input-block">
             <label htmlFor="passDate">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Дата выдачи паспорта'
-                : locale === 'ENG'
-                ? 'duration'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Дата выдачи паспорта"
+                : locale === "ENG"
+                ? "duration"
+                : "At"}
             </label>
-            <input {...register('passDate')} type="text" id="passDate" disabled />
+            <input
+              {...register("passDate")}
+              type="text"
+              id="passDate"
+              disabled
+            />
           </div>
           <div className="input-block">
             <label htmlFor="passOrg">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Кем выдан паспорт'
-                : locale === 'ENG'
-                ? 'duration'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Кем выдан паспорт"
+                : locale === "ENG"
+                ? "duration"
+                : "At"}
             </label>
-            <input {...register('passOrg')} type="text" id="passOrg" disabled />
+            <input {...register("passOrg")} type="text" id="passOrg" disabled />
           </div>
 
           <div className="input-block">
             <label htmlFor="workPlace">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Место работы'
-                : locale === 'ENG'
-                ? 'amount'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Место работы"
+                : locale === "ENG"
+                ? "amount"
+                : "At"}
             </label>
             <input
-              {...register('workPlace')}
+              {...register("workPlace")}
               value={workPlace}
               onChange={handleWorkPlace}
               type="text"
@@ -268,16 +298,16 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
           </div>
           <div className="input-block">
             <label htmlFor="workPosition">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Должность'
-                : locale === 'ENG'
-                ? 'amount'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Должность"
+                : locale === "ENG"
+                ? "amount"
+                : "At"}
             </label>
             <input
-              {...register('workPosition')}
+              {...register("workPosition")}
               value={workPosition}
               onChange={handleWorkPosition}
               type="text"
@@ -287,16 +317,16 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
           </div>
           <div className="input-block">
             <label htmlFor="address">
-              {locale === 'TKM'
-                ? 'At'
-                : locale === 'РУС'
-                ? 'Адрес'
-                : locale === 'ENG'
-                ? 'amount'
-                : 'At'}
+              {locale === "TKM"
+                ? "At"
+                : locale === "РУС"
+                ? "Адрес"
+                : locale === "ENG"
+                ? "amount"
+                : "At"}
             </label>
             <input
-              {...register('address')}
+              {...register("address")}
               value={address}
               onChange={handleAdress}
               type="text"
@@ -307,19 +337,23 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
         </div>
 
         <div className="cu-bottom cd-2-title">
-          <button type="button" className="sign-btn reg-btn" onClick={() => setStage(8)}>
+          <button
+            type="button"
+            className="sign-btn reg-btn"
+            onClick={() => setStage(8)}
+          >
             <div>
               <div className="btn-img">
                 <img src={next_reverse} alt="logout" />
               </div>
               <h3>
-                {locale === 'TKM'
-                  ? 'Yza'
-                  : locale === 'РУС'
-                  ? 'Назад'
-                  : locale === 'ENG'
-                  ? 'Back'
-                  : 'Yza'}
+                {locale === "TKM"
+                  ? "Yza"
+                  : locale === "РУС"
+                  ? "Назад"
+                  : locale === "ENG"
+                  ? "Back"
+                  : "Yza"}
               </h3>
             </div>
           </button>
@@ -327,20 +361,24 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
             type="submit"
             className="sign-btn cu-btn"
             disabled={
-              workPlace.length < 3 || workPosition.length < 3 || address.length < 3 || isLoading
+              workPlace.length < 3 ||
+              workPosition.length < 3 ||
+              address.length < 3 ||
+              isLoading
                 ? true
                 : false
             }
-            onClick={onSubmit}>
+            onClick={onSubmit}
+          >
             <div>
               <h3>
-                {locale === 'TKM'
-                  ? 'Dowam et'
-                  : locale === 'РУС'
-                  ? 'Подтвердить  '
-                  : locale === 'ENG'
-                  ? 'Proceed'
-                  : 'Dowam et'}
+                {locale === "TKM"
+                  ? "Dowam et"
+                  : locale === "РУС"
+                  ? "Подтвердить  "
+                  : locale === "ENG"
+                  ? "Proceed"
+                  : "Dowam et"}
               </h3>
               <div className="btn-img">
                 <img src={next} alt="logout" />
diff --git a/src/components/immediateCredits/ImmediateCreditModal.js b/src/components/immediateCredits/ImmediateCreditModal.js
index d248e3d..022337c 100644
--- a/src/components/immediateCredits/ImmediateCreditModal.js
+++ b/src/components/immediateCredits/ImmediateCreditModal.js
@@ -1,33 +1,33 @@
 // IMPORT MODULES
-import React, { useEffect, useRef, useState, useContext } from 'react';
-import { LanguageContext } from '../../backend/LanguageContext';
+import React, { useEffect, useRef, useState, useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
 
-import axios from 'axios';
+import axios from "axios";
 
 // IMPORT IMAGES
-import exit from '../../icons/exit.svg';
-import { ReactComponent as Lines } from '../../icons/lines.svg';
-import { ReactComponent as Img1 } from '../../icons/credit1.svg';
-import { ReactComponent as Img2 } from '../../icons/credit2.svg';
-import { ReactComponent as Img3 } from '../../icons/credit3.svg';
-import { ReactComponent as Img4 } from '../../icons/credit4.svg';
-import { ReactComponent as Img5 } from '../../icons/credit5.svg';
-import { ReactComponent as Img6 } from '../../icons/credit6.svg';
+import exit from "../../icons/exit.svg";
+import { ReactComponent as Lines } from "../../icons/lines.svg";
+import { ReactComponent as Img1 } from "../../icons/credit1.svg";
+import { ReactComponent as Img2 } from "../../icons/credit2.svg";
+import { ReactComponent as Img3 } from "../../icons/credit3.svg";
+import { ReactComponent as Img4 } from "../../icons/credit4.svg";
+import { ReactComponent as Img5 } from "../../icons/credit5.svg";
+import { ReactComponent as Img6 } from "../../icons/credit6.svg";
 
 // IMPORT COMPONENTS
-import BorrowerStage from '../ImmediateCreditsStages/BorrowerStage';
-import BorrowerInfo from '../ImmediateCreditsStages/BorrowerInfo';
-import GuaranterStage from '../ImmediateCreditsStages/GuaranterStage';
-import GuaranterInfo from '../ImmediateCreditsStages/GuaranterInfo';
-import NotAUser from '../ImmediateCreditsStages/NotAUser';
-import CalculateStage from '../ImmediateCreditsStages/CalculateStage';
-import AcceptStage from '../ImmediateCreditsStages/AcceptStage';
-import PhoneAccept from '../ImmediateCreditsStages/PhoneAccept';
-import CardDetails from '../ImmediateCreditsStages/CardDetails';
-import LoanAccepted from '../ImmediateCreditsStages/LoanAccepted';
-import CardRegistration from '../ImmediateCreditsStages/CardRegistration';
-import PaymentDetails from '../ImmediateCreditsStages/PaymentDetails';
-import PaymentSuccess from '../ImmediateCreditsStages/PaymentSuccess';
+import BorrowerStage from "../ImmediateCreditsStages/BorrowerStage";
+import BorrowerInfo from "../ImmediateCreditsStages/BorrowerInfo";
+import GuaranterStage from "../ImmediateCreditsStages/GuaranterStage";
+import GuaranterInfo from "../ImmediateCreditsStages/GuaranterInfo";
+import NotAUser from "../ImmediateCreditsStages/NotAUser";
+import CalculateStage from "../ImmediateCreditsStages/CalculateStage";
+import AcceptStage from "../ImmediateCreditsStages/AcceptStage";
+import PhoneAccept from "../ImmediateCreditsStages/PhoneAccept";
+import CardDetails from "../ImmediateCreditsStages/CardDetails";
+import LoanAccepted from "../ImmediateCreditsStages/LoanAccepted";
+import CardRegistration from "../ImmediateCreditsStages/CardRegistration";
+import PaymentDetails from "../ImmediateCreditsStages/PaymentDetails";
+import PaymentSuccess from "../ImmediateCreditsStages/PaymentSuccess";
 
 const ImmediateCreditModal = ({
   modalOpen,
@@ -46,8 +46,8 @@ const ImmediateCreditModal = ({
   const [loading, setLoading] = useState();
   const [error, setError] = useState();
 
-  const [errMessage, setErrMessage] = useState('');
-  const [acceptedMessage, setAcceptedMessage] = useState('');
+  const [errMessage, setErrMessage] = useState("");
+  const [acceptedMessage, setAcceptedMessage] = useState("");
 
   const [borrowerData, setBorrowerData] = useState();
   const [guaranterData, setGuaranterData] = useState();
@@ -57,32 +57,37 @@ const ImmediateCreditModal = ({
   const [maxAmount, setMaxAmount] = useState();
   const [recepientAmount, setRecepientAmount] = useState(0);
   const [creditDuration, setCreditDuration] = useState(1);
-  const [phoneNumber, setPhoneNumber] = useState('');
-  const [cardDetails, setCardDetails] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [cardDetails, setCardDetails] = useState("");
 
   const [userDataRes, setUserDataRes] = useState();
-  const [paymentLink, setPaymentLink] = useState('');
+  const [paymentLink, setPaymentLink] = useState("");
 
   const [paymentDetails, setPaymentDetails] = useState();
   const [submitCardDetails, setSumbitCardDetails] = useState();
 
+  console.log(paymentDetails);
+
   return (
-    <section className={modalOpen ? 'modal credit-modal active' : 'modal credit-modal'}>
+    <section
+      className={modalOpen ? "modal credit-modal active" : "modal credit-modal"}
+    >
       <div className="modal-container">
         <div className="modal-inner" ref={window}>
           <div className="modal-window">
             <div className="modal-top">
               <h2>
-                {locale === 'TKM'
-                  ? 'Çalt karz almak üçin onlaýn-ýüzlenme'
-                  : 'Онлайн-заявка для получения быстрого кредита'}
+                {locale === "TKM"
+                  ? "Çalt karz almak üçin onlaýn-ýüzlenme"
+                  : "Онлайн-заявка для получения быстрого кредита"}
               </h2>
               <button
                 type="button"
                 className="exit-btn"
                 onClick={() => {
                   setModalOpen(false);
-                }}>
+                }}
+              >
                 <div>
                   <img src={exit} alt="exit" />
                 </div>
@@ -93,73 +98,81 @@ const ImmediateCreditModal = ({
               <div className="icon-block active">
                 <Img4 className="modal-icon" />
                 <h3 className="icon-title">
-                  {locale === 'TKM'
-                    ? 'Karz üçin maglumat'
-                    : locale === 'РУС'
-                    ? 'Заполните данные'
-                    : locale === 'ENG'
-                    ? 'Loan details'
-                    : 'Karz üçin maglumat'}
+                  {locale === "TKM"
+                    ? "Karz üçin maglumat"
+                    : locale === "РУС"
+                    ? "Заполните данные"
+                    : locale === "ENG"
+                    ? "Loan details"
+                    : "Karz üçin maglumat"}
                 </h3>
               </div>
 
-              <div className={stage > 1 ? 'line-block active' : 'line-block'}>
+              <div className={stage > 1 ? "line-block active" : "line-block"}>
                 <Lines className="lines" />
                 <Lines className="lines" />
               </div>
 
-              <div className={stage > 1 ? 'icon-block active' : 'icon-block'}>
+              <div className={stage > 1 ? "icon-block active" : "icon-block"}>
                 <Img3 className="modal-icon" />
                 <h3 className="icon-title">
-                  {locale === 'TKM'
-                    ? 'Şahsy maglumatlar'
-                    : locale === 'РУС'
-                    ? 'Подтвердите личные данные'
-                    : locale === 'ENG'
-                    ? 'Personal data'
-                    : 'Şahsy maglumatlar'}
+                  {locale === "TKM"
+                    ? "Şahsy maglumatlar"
+                    : locale === "РУС"
+                    ? "Подтвердите личные данные"
+                    : locale === "ENG"
+                    ? "Personal data"
+                    : "Şahsy maglumatlar"}
                 </h3>
               </div>
 
-              <div className={stage > 2 ? 'line-block active' : 'line-block'}>
+              <div className={stage > 2 ? "line-block active" : "line-block"}>
                 <Lines className="lines" />
                 <Lines className="lines" />
               </div>
 
               {isGuranter && (
                 <>
-                  <div className={stage > 3 ? 'icon-block active' : 'icon-block'}>
+                  <div
+                    className={stage > 3 ? "icon-block active" : "icon-block"}
+                  >
                     <Img4 className="modal-icon" />
                     <h3 className="icon-title">
-                      {locale === 'TKM'
-                        ? 'Karz üçin maglumat'
-                        : locale === 'РУС'
-                        ? 'Заполните данные поручитель'
-                        : locale === 'ENG'
-                        ? 'Loan details'
-                        : 'Karz üçin maglumat'}
+                      {locale === "TKM"
+                        ? "Karz üçin maglumat"
+                        : locale === "РУС"
+                        ? "Заполните данные поручитель"
+                        : locale === "ENG"
+                        ? "Loan details"
+                        : "Karz üçin maglumat"}
                     </h3>
                   </div>
 
-                  <div className={stage > 3 ? 'line-block active' : 'line-block'}>
+                  <div
+                    className={stage > 3 ? "line-block active" : "line-block"}
+                  >
                     <Lines className="lines" />
                     <Lines className="lines" />
                   </div>
 
-                  <div className={stage > 4 ? 'icon-block active' : 'icon-block'}>
+                  <div
+                    className={stage > 4 ? "icon-block active" : "icon-block"}
+                  >
                     <Img3 className="modal-icon" />
                     <h3 className="icon-title">
-                      {locale === 'TKM'
-                        ? 'Şahsy maglumatlar'
-                        : locale === 'РУС'
-                        ? 'Подтвердите данные поручителя'
-                        : locale === 'ENG'
-                        ? 'Personal data'
-                        : 'Şahsy maglumatlar'}
+                      {locale === "TKM"
+                        ? "Şahsy maglumatlar"
+                        : locale === "РУС"
+                        ? "Подтвердите данные поручителя"
+                        : locale === "ENG"
+                        ? "Personal data"
+                        : "Şahsy maglumatlar"}
                     </h3>
                   </div>
 
-                  <div className={stage > 4 ? 'line-block active' : 'line-block'}>
+                  <div
+                    className={stage > 4 ? "line-block active" : "line-block"}
+                  >
                     <Lines className="lines" />
                     <Lines className="lines" />
                   </div>
@@ -220,56 +233,56 @@ const ImmediateCreditModal = ({
                 <div className="icon-block active">
                   <Img4 className="modal-icon" />
                   <h3 className="icon-title">
-                    {locale === 'TKM'
-                      ? 'Karz üçin maglumat'
-                      : locale === 'РУС'
-                      ? 'Заполните данные'
-                      : locale === 'ENG'
-                      ? 'Loan details'
-                      : 'Karz üçin maglumat'}
+                    {locale === "TKM"
+                      ? "Karz üçin maglumat"
+                      : locale === "РУС"
+                      ? "Заполните данные"
+                      : locale === "ENG"
+                      ? "Loan details"
+                      : "Karz üçin maglumat"}
                   </h3>
                 </div>
               ) : stage >= 2 ? (
                 <div className="icon-block active">
                   <Img3 className="modal-icon" />
                   <h3 className="icon-title">
-                    {locale === 'TKM'
-                      ? 'Karzyň kalkulýatory'
-                      : locale === 'РУС'
-                      ? 'Подтвердите личные данные'
-                      : locale === 'ENG'
-                      ? 'Loan calculator'
-                      : 'Karzyň kalkulýatory'}
+                    {locale === "TKM"
+                      ? "Karzyň kalkulýatory"
+                      : locale === "РУС"
+                      ? "Подтвердите личные данные"
+                      : locale === "ENG"
+                      ? "Loan calculator"
+                      : "Karzyň kalkulýatory"}
                   </h3>
                 </div>
               ) : stage === 4 && isGuranter ? (
                 <div className="icon-block active">
                   <Img3 className="modal-icon" />
                   <h3 className="icon-title">
-                    {locale === 'TKM'
-                      ? 'Şahsy maglumatlar'
-                      : locale === 'РУС'
-                      ? 'Заполните данные поручителя'
-                      : locale === 'ENG'
-                      ? 'Personal data'
-                      : 'Şahsy maglumatlar'}
+                    {locale === "TKM"
+                      ? "Şahsy maglumatlar"
+                      : locale === "РУС"
+                      ? "Заполните данные поручителя"
+                      : locale === "ENG"
+                      ? "Personal data"
+                      : "Şahsy maglumatlar"}
                   </h3>
                 </div>
               ) : stage >= 5 && isGuranter ? (
                 <div className="icon-block active">
                   <Img4 className="modal-icon" />
                   <h3 className="icon-title">
-                    {locale === 'TKM'
-                      ? 'Karz üçin maglumat'
-                      : locale === 'РУС'
-                      ? 'Подтвердите данные поручителя'
-                      : locale === 'ENG'
-                      ? 'Loan details'
-                      : 'Karz üçin maglumat'}
+                    {locale === "TKM"
+                      ? "Karz üçin maglumat"
+                      : locale === "РУС"
+                      ? "Подтвердите данные поручителя"
+                      : locale === "ENG"
+                      ? "Loan details"
+                      : "Karz üçin maglumat"}
                   </h3>
                 </div>
               ) : (
-                ''
+                ""
               )}
             </div>
 
@@ -294,7 +307,11 @@ const ImmediateCreditModal = ({
                   borrowerData={borrowerData}
                 />
               ) : stage === 3 ? (
-                <NotAUser setStage={setStage} stage={stage} errMessage={errMessage} />
+                <NotAUser
+                  setStage={setStage}
+                  stage={stage}
+                  errMessage={errMessage}
+                />
               ) : stage === 4 ? (
                 <GuaranterStage
                   setStage={setStage}
@@ -314,7 +331,11 @@ const ImmediateCreditModal = ({
                   guaranterData={guaranterData}
                 />
               ) : stage === 6 ? (
-                <NotAUser setStage={setStage} stage={stage} errMessage={errMessage} />
+                <NotAUser
+                  setStage={setStage}
+                  stage={stage}
+                  errMessage={errMessage}
+                />
               ) : stage === 7 ? (
                 <CalculateStage
                   isGuranter={isGuranter}
@@ -352,7 +373,11 @@ const ImmediateCreditModal = ({
                   creditDuration={creditDuration}
                 />
               ) : stage === 10 ? (
-                <NotAUser setStage={setStage} stage={stage} errMessage={errMessage} />
+                <NotAUser
+                  setStage={setStage}
+                  stage={stage}
+                  errMessage={errMessage}
+                />
               ) : stage === 11 ? (
                 <LoanAccepted
                   setModalOpen={setModalOpen}
@@ -385,9 +410,12 @@ const ImmediateCreditModal = ({
                   submitCardDetails={submitCardDetails}
                 />
               ) : stage === 15 ? (
-                <PaymentSuccess setStage={setStage} setModalOpen={setModalOpen} />
+                <PaymentSuccess
+                  setStage={setStage}
+                  setModalOpen={setModalOpen}
+                />
               ) : (
-                ''
+                ""
               )}
             </div>
           </div>
diff --git a/src/pages/ImmediateCredit.js b/src/pages/ImmediateCredit.js
index 3e6784e..c11eb79 100644
--- a/src/pages/ImmediateCredit.js
+++ b/src/pages/ImmediateCredit.js
@@ -1,23 +1,23 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useContext } from 'react';
-import { UserContext } from '../backend/UserContext';
-import { LanguageContext } from '../backend/LanguageContext';
-import axios from 'axios';
+import React, { useState, useEffect, useContext } from "react";
+import { UserContext } from "../backend/UserContext";
+import { LanguageContext } from "../backend/LanguageContext";
+import axios from "axios";
 
 // IMPORT COMPONENTS
-import Breadcrumb from '../components/global/Breadcrumb';
-import ImmediateCreditModal from '../components/immediateCredits/ImmediateCreditModal';
-import ProgressLoader from '../components/global/ProgressLoader';
-import Success from '../components/global/Success';
-import Error from '../components/global/Error';
+import Breadcrumb from "../components/global/Breadcrumb";
+import ImmediateCreditModal from "../components/immediateCredits/ImmediateCreditModal";
+import ProgressLoader from "../components/global/ProgressLoader";
+import Success from "../components/global/Success";
+import Error from "../components/global/Error";
 
 // IMPORT HELPERS
-import { dataDestination } from '../destinationUrl';
+import { dataDestination } from "../destinationUrl";
 
 // IMPORT IMAGES
-import credit from '../icons/credit-black.svg';
-import add from '../icons/add.svg';
-import allert from '../icons/info-circle.svg';
+import credit from "../icons/credit-black.svg";
+import add from "../icons/add.svg";
+import allert from "../icons/info-circle.svg";
 
 const ImmediateCredit = () => {
   const { locale } = useContext(LanguageContext);
@@ -29,25 +29,34 @@ const ImmediateCredit = () => {
   const [loader, setLoader] = useState(false);
   // const [immediateCreditData, setImmediateCreditData] = useState();
   const [progress, setProgress] = useState(0);
-  const userToken = localStorage.getItem('userToken');
+  const userToken = localStorage.getItem("userToken");
   const [loansData, setLoansData] = useState();
   const [loanStatus, setLoanStatus] = useState();
 
+  const [cardData, setCardData] = useState();
+  const [cardOrderDetails, setCardOrderDetails] = useState();
+
   useEffect(() => {
     if (modalOpen) {
-      document.body.style.overflowY = 'hidden';
+      document.body.style.overflowY = "hidden";
     } else {
-      document.body.style.overflowY = 'visible';
+      document.body.style.overflowY = "visible";
     }
   }, [modalOpen]);
 
   const fetchData = async () => {
     try {
-      const headers = { Accept: 'application/json', Authorization: `Bearer ${userToken}` };
+      const headers = {
+        Accept: "application/json",
+        Authorization: `Bearer ${userToken}`,
+      };
 
-      const response = await fetch(`https://shahsyotag.halkbank.gov.tm/app/api/quick_loans`, {
-        headers,
-      });
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/app/api/quick_loans`,
+        {
+          headers,
+        }
+      );
 
       const jsonedResponse = await response.json();
 
@@ -66,14 +75,14 @@ const ImmediateCredit = () => {
       const response = await fetch(
         `https://shahsyotag.halkbank.gov.tm/onlineloan-services/api/loancheck`,
         {
-          method: 'POST',
+          method: "POST",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({
             sign: sign,
           }),
-        },
+        }
       );
 
       const jsonedResponse = await response.json();
@@ -82,6 +91,29 @@ const ImmediateCredit = () => {
     } catch (error) {}
   };
 
+  const fetchCard = async () => {
+    try {
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/app/api/check-payment-credit-card`,
+        {
+          method: "get",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            paymentId: 1,
+            orderId: 1231,
+            status: "1",
+          }),
+        }
+      );
+
+      const jsonedResponse = await response.json();
+
+      setCardData(jsonedResponse);
+    } catch (error) {}
+  };
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -91,13 +123,13 @@ const ImmediateCredit = () => {
       {success ? (
         <Success
           message={
-            locale === 'TKM'
-              ? 'Ýüzlenme ugradyldy!'
-              : locale === 'РУС'
-              ? 'Ваш запрос успешно отправлен!'
-              : locale === 'ENG'
-              ? 'Request was successfully sent!'
-              : 'Ýüzlenme ugradyldy!'
+            locale === "TKM"
+              ? "Ýüzlenme ugradyldy!"
+              : locale === "РУС"
+              ? "Ваш запрос успешно отправлен!"
+              : locale === "ENG"
+              ? "Request was successfully sent!"
+              : "Ýüzlenme ugradyldy!"
           }
           setSuccess={setSuccess}
         />
@@ -105,28 +137,28 @@ const ImmediateCredit = () => {
       {error ? (
         <Error
           message={
-            locale === 'TKM'
-              ? 'Ýüzlenme ugradylmady'
-              : locale === 'РУС'
-              ? 'Не удалось отправить запрос'
-              : locale === 'ENG'
-              ? 'Failed to send request'
-              : 'Ýüzlenme ugradylmady'
+            locale === "TKM"
+              ? "Ýüzlenme ugradylmady"
+              : locale === "РУС"
+              ? "Не удалось отправить запрос"
+              : locale === "ENG"
+              ? "Failed to send request"
+              : "Ýüzlenme ugradylmady"
           }
           setError={setError}
         />
       ) : null}
       <Breadcrumb
         image={credit}
-        link={'/home/immediate-credits'}
+        link={"/home/immediate-credits"}
         linkTitle={
-          locale === 'TKM'
-            ? 'Çalt Karzlar'
-            : locale === 'РУС'
-            ? 'Быстрые Кредиты'
-            : locale === 'ENG'
-            ? 'Immediate Loans'
-            : 'Çalt Karzlar'
+          locale === "TKM"
+            ? "Çalt Karzlar"
+            : locale === "РУС"
+            ? "Быстрые Кредиты"
+            : locale === "ENG"
+            ? "Immediate Loans"
+            : "Çalt Karzlar"
         }
       />
       <ImmediateCreditModal
@@ -146,13 +178,13 @@ const ImmediateCredit = () => {
         <div className="cards-inner">
           <div className="card-title">
             <h2 className="cards-title">
-              {locale === 'TKM'
-                ? 'Çalt karz almak üçin onlaýn-ýüzlenme'
-                : locale === 'РУС'
-                ? 'Онлайн-заявка для получения быстрого кредита'
-                : locale === 'ENG'
-                ? 'Online application for immediate loan issuance'
-                : 'Çalt karz almak üçin onlaýn-ýüzlenme'}
+              {locale === "TKM"
+                ? "Çalt karz almak üçin onlaýn-ýüzlenme"
+                : locale === "РУС"
+                ? "Онлайн-заявка для получения быстрого кредита"
+                : locale === "ENG"
+                ? "Online application for immediate loan issuance"
+                : "Çalt karz almak üçin onlaýn-ýüzlenme"}
             </h2>
             <button
               type="button"
@@ -161,18 +193,19 @@ const ImmediateCredit = () => {
                 window.scrollTo(0, 0);
                 setStage(1);
                 setModalOpen(true);
-              }}>
+              }}
+            >
               <div className="card-img">
                 <img src={add} alt="add" />
               </div>
               <h3>
-                {locale === 'TKM'
-                  ? 'Ýüzlenme doldurmak'
-                  : locale === 'РУС'
-                  ? 'Заполнить заявку'
-                  : locale === 'ENG'
-                  ? 'Fill in application'
-                  : 'Ýüzlenme doldurmak'}
+                {locale === "TKM"
+                  ? "Ýüzlenme doldurmak"
+                  : locale === "РУС"
+                  ? "Заполнить заявку"
+                  : locale === "ENG"
+                  ? "Fill in application"
+                  : "Ýüzlenme doldurmak"}
               </h3>
             </button>
           </div>
@@ -182,23 +215,23 @@ const ImmediateCredit = () => {
                 <tr className="table-head">
                   <th>ID</th>
                   <th>
-                    {locale === 'TKM'
-                      ? 'Görnüşi'
-                      : locale === 'РУС'
-                      ? 'Дата заявки'
-                      : locale === 'ENG'
-                      ? 'Type'
-                      : 'Görnüşi'}
+                    {locale === "TKM"
+                      ? "Görnüşi"
+                      : locale === "РУС"
+                      ? "Дата заявки"
+                      : locale === "ENG"
+                      ? "Type"
+                      : "Görnüşi"}
                   </th>
 
                   <th>
-                    {locale === 'TKM'
-                      ? 'Ýagdaýy'
-                      : locale === 'РУС'
-                      ? 'Статус'
-                      : locale === 'ENG'
-                      ? 'Status'
-                      : 'Ýagdaýy'}
+                    {locale === "TKM"
+                      ? "Ýagdaýy"
+                      : locale === "РУС"
+                      ? "Статус"
+                      : locale === "ENG"
+                      ? "Status"
+                      : "Ýagdaýy"}
                   </th>
                 </tr>
                 {loansData && loanStatus ? (
@@ -210,13 +243,62 @@ const ImmediateCredit = () => {
                 ) : (
                   <tr>
                     <td>
-                      {locale === 'TKM'
-                        ? 'Tabşyrlan ýüzlenme ýok'
-                        : locale === 'РУС'
-                        ? 'Заявок на кредиты нет'
-                        : locale === 'ENG'
-                        ? 'There are no applications for loan issuance'
-                        : 'Tabşyrlan ýüzlenme ýok'}
+                      {locale === "TKM"
+                        ? "Tabşyrlan ýüzlenme ýok"
+                        : locale === "РУС"
+                        ? "Заявок на карту"
+                        : locale === "ENG"
+                        ? "There are no applications for loan issuance"
+                        : "Tabşyrlan ýüzlenme ýok"}
+                    </td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            <table className="home-table">
+              <tbody>
+                <tr className="table-head">
+                  <th>ID</th>
+                  <th>
+                    {locale === "TKM"
+                      ? "Görnüşi"
+                      : locale === "РУС"
+                      ? "Дата заявки"
+                      : locale === "ENG"
+                      ? "Type"
+                      : "Görnüşi"}
+                  </th>
+
+                  <th>
+                    {locale === "TKM"
+                      ? "Ýagdaýy"
+                      : locale === "РУС"
+                      ? "Статус"
+                      : locale === "ENG"
+                      ? "Status"
+                      : "Ýagdaýy"}
+                  </th>
+                </tr>
+                {loansData && loanStatus ? (
+                  <tr>
+                    <td>#{loansData.id}</td>
+                    <td>{loansData.created_at}</td>
+                    <td>{loanStatus.messageRu}</td>
+                  </tr>
+                ) : (
+                  <tr>
+                    <td>
+                      {locale === "TKM"
+                        ? "Tabşyrlan ýüzlenme ýok"
+                        : locale === "РУС"
+                        ? "Заявок на кредиты нет"
+                        : locale === "ENG"
+                        ? "There are no applications for loan issuance"
+                        : "Tabşyrlan ýüzlenme ýok"}
                     </td>
                     <td></td>
                     <td></td>