Stworzyć moduł płatności PayPal dla statycznej strony na SSI

Zadanie:

Opracować moduł koszyka zakupowego z integracją PayPal API (bez użycia CMS lub bazy danych). Strona — statyczna, produkty dodane ręcznie na oddzielnych stronach HTML.

Krótki opis:

Użytkownik dodaje produkty do koszyka bezpośrednio na stronach serwisu. Każdy produkt ma podaną 'cenę', 'wagę', i można wybrać 'ilość'.  

System oblicza całkowity koszt i całkową wagę, określa koszt dostawy (w 5 kategoriach wagowych), i formułuje końcową kwotę.  

Następnie użytkownik klika przycisk "Zapłać", przechodzi do PayPal, wprowadza swoje dane i dokonuje płatności.  

Później — przekierowanie z powrotem na określoną stronę serwisu.

Struktura koszyka:

- Wsparcie 'jednej waluty' (USD)

- Dla każdego produktu:

  - nazwa

  - cena za jednostkę

  - waga (w kilogramach)

  - pole do wyboru ilości

Na stronie produktu:

  - wyświetlanie aktualnej ilości w koszyku (dynamicznie)

  - przycisk "Koszyk" (przyklejony w rogu)

  - przycisk "Dodaj do koszyka"

Strona koszyka /ordering/cart/index.html

- Tabela z produktami:

  - Nazwa

  - Ilość

  - Cena za jednostkę

  - Całkowita cena za wiersz

- Na dole:

  - Całkowita waga

  - Koszt dostawy

  - Kwota końcowa

  - Przycisk "Zapłać przez PayPal"

Obliczanie dostawy:

Dostawa zależy od całkowitej wagi. 

Waga (do, kg) | Koszt dostawy

0–0.25 kg    | $11    

0.26–0.5 kg  | $19  

0.6–1 kg      | $28  

1.1–2 kg      | $39   

2.1–15 kg    | ręcznie   

Specyfikacje techniczne:

- Przechowywanie danych koszyka — w "localStorage"

- Nie używać PHP, technologii serwerowych ani baz danych

- Można używać frameworków JS (np. Vue, React, ale "bez bundlingu") lub czystego JS

- Wsparcie dla wielu produktów na różnych stronach

- Poprawne przekierowanie po płatności:

  - Wskazać link do "udanej płatności" (return_url)

  - Wskazać link do "anulowania płatności" (cancel_url)

- Używać 'PayPal API' do przesyłania informacji i inicjowania płatności

  - Client ID i Merchant ID będą dostarczone

- Koszyk musi być skalowalny: sam wstawię kod na wszystkie strony

Co nie wchodzi w zakres zadania:

- Nie wymaga się projektu

- Nie wymaga się responsywnego układu

- Nie trzeba ręcznie wstawiać kodu na każdą stronę

Co powinno być na wyjściu:

1. Przykład strony HTML z przyciskiem dodawania produktu

2. Strona "cart.html", gdzie odbywa się obliczenie, wybór dostawy i przejście do płatności

3. Instrukcje: jak wstawić kod na nowe strony

4. Działający przykład na stronie trzeciej

Pełna płatność po moim wdrożeniu kodu na stronie i przetestowaniu jego funkcjonalności.

Задача:

Разработать модуль корзины покупок с интеграцией PayPal API (без использования CMS или базы данных). Сайт — статичный, товары добавлены вручную на отдельных HTML-страницах.

Краткое описание:

Пользователь добавляет товары в корзину прямо на страницах сайта. У каждого товара указана 'цена', 'вес', и можно выбрать 'количество'.  

Система считает общую стоимость и общий вес, определяет стоимость доставки (по 5 весовым категориям), и формирует итоговую сумму.  

После этого пользователь нажимает кнопку "Оплатить", попадает на PayPal, вводит свои данные и оплачивает.  

Затем — редирект обратно на заданную страницу сайта.

Структура корзины:

- Поддержка 'одной валюты' (USD)

- У каждого товара:

  - название

  - цена за единицу

  - вес (в килограммах)

  - поле для выбора количества

На странице товара:

  - отображение текущего количества в корзине (динамически)

  - кнопка "Корзина" (фиксировано в углу)

  - кнопка "Добавить в корзину"

Страница корзины /ordering/cart/index.html

- Таблица с товарами:

  - Название

  - Количество

  - Цена за единицу

  - Общая цена за строку

- Снизу:

  - Общий вес

  - Стоимость доставки

  - Итоговая сумма

  - Кнопка "Оплатить через PayPal"

Расчёт доставки:

Доставка зависит от общего веса. 

Вес (до, кг) | Стоимость доставки

0–0.25 кг    | $11    

0.26–0.5 кг  | $19  

0.6–1 кг      | $28  

1.1–2 кг      | $39   

2.1–15 кг    | вручную   

Технические особенности:

- Хранение данных корзины — в "localStorage"

- Не использовать PHP, серверные технологии или базы данных

- Можно использовать JS-фреймворки (например, Vue, React, но "без сборки") или чистый JS

- Поддержка нескольких товаров на разных страницах

- Корректный редирект после оплаты:

  - Указать ссылку на "успешную оплату" (return_url)

  - Указать ссылку на "отмену оплаты" (cancel_url)

- Использовать 'PayPal API' для передачи информации и инициации платежа

  - Client ID и Merchant ID будут предоставлены

- Корзина должна быть масштабируемой: я сам вставлю код на все страницы

Что не входит в задачу:

- Не требуется дизайн

- Не требуется вёрстка под мобильные устройства

- Не нужно вставлять код вручную на каждую страницу

Что должно быть на выходе:

1. Пример HTML-страницы с кнопкой добавления товара

2. Страница "cart.html" где происходит расчёт, выбор доставки и переход к оплате

3. Инструкции: как вставить код на новые страницы

4. Рабочий образец на третьей стороне

Полная оплата после моего внедрения кода на сайт и тестирование работоспособности.