Как должна работать функция добавления товара в корзину?
 

Pдравствуйте. Пытаюсь сделать интернет магазин и столкнулась с проблемой: "Как сделать добавление товара в корзину?". На данный момент я сделала так:

1. При нажатии на кнопку "в корзину", js обращается к родителю, а затем ищет ребёнка, у которого span.class = name и span.class = size
2. Эти данные заносятся в массив, переводятся в json и загружаются в cookie (не сессия). То есть дешифрованные куки выглядят примерно так: [["apple", "big"],["orange", "medium"]];
3. На странице корзины я через php ловлю куки и делаю запрос в базу, чтобы вытащить фотографии и цены. И вывожу всё это богатство через foreach в виде таблицы на страницу.
4. Далее пользователь заполняет форму (имя, телефон), ждёт "оформить заказ" и в базу "заказы" отправляется содержимое куков.
5. В базе "заказы" появляется новый заказ.

Я использую headless cms Cockpit, которая использует файловую MongoDB. Понимаю, что это ничего вам не даст, но просто говорю. Считайте, что cms у меня вообще нет.

Теперь вопросы.
1. Я уже сама понимаю, что 1 этап - не комильфо. Как минимум потому что можно в инспекторе изменить название блока name и в корзину уйдёт товар, которого вообще нет в базе.
Я предполагаю, что эту проблему можно решить с помощью ajax, который в начале отправит запрос в базу на проверку существования такого товара, а потом уже добавит его в куки в случае успеха. Скажите, на сколько я права? Так ли это делается и верно ли я мыслю?
2. Как должна происходить процедура "покупки"? Меня смущает, что пользователь имеет доступ кукам (как и первом случае заказ собирается из текста). Верно ли я мыслю, когда "оформляю заказ", отправляя куки? Как я должна действовать?
3. Так как заказ собирается из текста и из кук, то на сколько уязвимо это? Может ли злоумышленник изменить название товара так, чтобы получить доступ к БД и к моим API ключам. И если да, то как мне себя обезопасить?

Корзина должна находиться не у пользователя на устройстве, а на сервере.
Можете хранить её в БД или в сессии пользователя, оба варианта значительно лучше, чем куки.

Лучше всего хранить корзину в БД и привязывать её уникальному идентификатору пользователя, который будет сохранен ему в куки, либо к идентификатору аккаунта этого пользователя, если он авторизован на сайте.

Перед добавлением товара в корзину нужно производить проверку на существование товара и на его доступность для пользователя.
Все хорошо - добавили товар в корзину, плохо - уведомили об этом.

Передавать на backend название товара и его размер - бред, передавать нужно идентификаторы и с ними работать.

Кнопку «В корзину» лучше всего запихнуть в форму, которая будет содержать всю необходимую информацию о товаре. В этом случае не придется бегать по дереву DOM, чтобы достать нужные значение. Нужна асинхронность - слушаем событие формы submit и отправляем данные на сервер самостоятельно.

Зависит от backend'а. Читайте про SQL injection.

2. Эти данные отправляются на сервер и записываются в базу данных. Зайдя с любого устройства пользователь может увидеть свою корзину.
3. При авторизации пользователя смотрим есть ли, что у него в корзине и отображаем
4. При прдтверждении заказа чистим(переносим) даннные из таблицы корзины. Пишем заказ в историю заказов пользователя с текущими на текущий момент ценами.
5. Выставляем счет, через платежную систему. Ждем колбек от оплаты
делаем куки HttpOnly