Проблема с шифровкой и дешифровкой id который хранится в хранилище данных

Есть хранилище данных в котором я храню id который я беру через query.id, хранилище в отдельном файле. Шифровать надо чтобы не меняли id в адресной строке так как делаю сайт на котором будет проходить платёж (Пишу на Next.js):

class Store {
  #data = "";
  constructor(begin) {
    this.#data = begin || "";
  }

  setData(data) {
    this.#data = data;
  }

  get data() {
    return this.#data;
  }
}

const payKey = new Store();

export { payKey };

Вот это главная страница где я беру id и сохраняю его:

import { useState, useEffect } from 'react';
import styles  from '../Card/Card.module.css'
import Link from 'next/link';
import { useRouter } from 'next/router'
import { payKey } from '../Store'



function Card() {
    
  const {query} = useRouter();

  useEffect(() => {
      payKey.setData(query.id);
  }, [query.id])
  console.log(payKey.data)

    


    const [info, setInfo] = useState([])
    useEffect(()=>{
      fetch(`https://example.com/pay/type/`)
      .then(response => response.json())
      .then(result => setInfo(result))
      },[])
    

  
    return (
     <>
      <div className={styles.container}>
         {   info.map((value)=>{
              
          return(
            <Link href={`payment/?id=${payKey.data}`} key={value.id}>
            <div  className={styles.paytype}>
                <div className={styles.photo}>
                  <img src={value.image} alt="image"/>
                  <span>{value.name}</span>
                </div>
                <div><p>{value.text}</p></div>
            </div>
            </Link>
             )

            })
         }


      </div>
     </>
    );
  }
  
  export default Card;

Потом я нажимаю на Link и перехожу на страницу Payment где я должен дешифровать id и передать в value={'сюда'} в инпуте :

import styles from './Payment.module.css'
import Link from 'next/link'
import { payKey } from "../Store";
import { Base64 } from 'js-base64';
import { useRouter } from 'next/router';


const Pay = ()=>{
  const {query} = useRouter
    
    const code = Base64.decode(query)
    ///Если я пишу query.id (а мне нужно именно id) то 
    ///выдаёт ошибку TypeError: 
    ///Cannot read properties of undefined (reading 'id')
       
     console.log(code)
     console.log(payKey.data)

    ///Когда я вывожу в консоль payKey.data то получаю 
    ///undefined или же вовсе ничего

    return(
        <>
             <div className={styles.wrapper}>
          <div className={styles.container}>
         
          <form action="https://app.0xProcessing.com/Payment" method="post">
                          <input type="hidden" name="test" value="true" />
                          <input type="email" name="email" placeholder='Email'/>
                          <input type="number" name="amountusd"  placeholder='Количество' />
                          <input type="text" name="currency" placeholder='Валюта' />
                          <input type="hidden" name="ShopId" value="6QsQHcQ6bX" />
                          <input type="hidden" name="ClientId" value={payKey.data} />
                          <input type="hidden" name='SuccessUrl' value={`https://next-js-web-sandy.vercel.app/success/?id=${payKey.data}`}/>
                          <input type="hidden" name='AutoReturn' value="true" />
                          <button type="submit">Send</button>
          </form>     
          </div>
         </div>
        </>
    )

}

export default Pay