Интеграция корзины покупок с оплатой через PayPal для статичного сайта
Задача:
Разработать модуль корзины покупок с интеграцией PayPal API (без использования CMS или базы данных). Сайт — статичный, товары добавлены вручную на отдельных HTML-страницах.
Краткое описание:
Пользователь добавляет товары в корзину прямо на страницах сайта. У каждого товара указана 'цена', 'вес', и можно выбрать 'количество'.
Система считает общую стоимость и общий вес, определяет стоимость доставки (по 5 весовым категориям), и формирует итоговую сумму.
После этого пользователь нажимает кнопку "Оплатить", попадает на PayPal, вводит свои данные и оплачивает.
Затем — редирект обратно на заданную страницу сайта.
Структура корзины:
- Поддержка 'одной валюты' (USD)
- У каждого товара:
- название
- цена за единицу
- вес (в килограммах)
- поле для выбора количества
- На странице товара:
- отображение текущего количества в корзине (динамически)
- кнопка "Корзина" (фиксировано в углу)
- кнопка "Добавить в корзину"
Страница корзины (cart.html):
- Таблица с товарами:
- Название
- Количество
- Цена за единицу
- Общая цена за строку
- Снизу:
- Общий вес
- Стоимость доставки
- Итоговая сумма
- Кнопка "Оплатить через PayPal"
Расчёт доставки:
Доставка зависит от общего веса.
Условия следующие:
Вес (до, кг) | Стоимость доставки
| 0–0.25 кг | $11 |
| 0.25–0.5 кг | $19 |
| 0.5–1 кг | $28 |
| 1–2 кг | $39 |
| 2–15 кг | вручную |
Технические особенности:
- Хранение данных корзины — в "localStorage"
- Не использовать PHP, серверные технологии или базы данных
- Можно использовать JS-фреймворки (например, Vue, React, но "без сборки") или чистый JS
- Поддержка нескольких товаров на разных страницах
- Корректный редирект после оплаты:
- Указать ссылку на "успешную оплату" (return_url)
- Указать ссылку на "отмену оплаты" (cancel_url)
- Использовать 'PayPal API' для передачи информации и инициации платежа
- Client ID и Merchant ID будут предоставлены
- Корзина должна быть масштабируемой: я сам вставлю код на все страницы
Что не входит в задачу:
- Не требуется дизайн
- Не требуется вёрстка под мобильные устройства
- Не нужно вставлять код вручную на каждую страницу
Что должно быть на выходе:
1. Готовый JS-код корзины + пример HTML-страницы с кнопкой добавления
2. Страница "cart.html" где происходит расчёт, выбор доставки и переход к оплате
3. Инструкции: как вставить код на новые страницы
4. Рабочий образец на третьей стороне
Полная оплата после моего внедрения кода на сайт и тестирование работоспособности.
