Create a PayPal payment module for a static site on SSI

Task:

Develop a shopping cart module with PayPal API integration (without using a CMS or database). The site is static, and products are added manually on separate HTML pages.

Brief description:

The user adds products to the cart directly on the site pages. Each product has a 'price', 'weight', and a 'quantity' can be selected.  

The system calculates the total cost and total weight, determines the shipping cost (based on 5 weight categories), and generates the final amount.  

After that, the user clicks the "Pay" button, is redirected to PayPal, enters their details, and makes the payment.  

Then — a redirect back to the specified page of the site.

Cart structure:

- Support for 'one currency' (USD)

- For each product:

  - name

  - price per unit

  - weight (in kilograms)

  - field for selecting quantity

On the product page:

  - display of the current quantity in the cart (dynamically)

  - "Cart" button (fixed in the corner)

  - "Add to cart" button

Cart page /ordering/cart/index.html

- Table with products:

  - Name

  - Quantity

  - Price per unit

  - Total price per line

- At the bottom:

  - Total weight

  - Shipping cost

  - Final amount

  - "Pay via PayPal" button

Shipping calculation:

Shipping depends on the total weight. 

Weight (up to, kg) | Shipping cost

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    | manually   

Technical features:

- Storage of cart data — in "localStorage"

- Do not use PHP, server technologies, or databases

- JS frameworks can be used (e.g., Vue, React, but "without build") or plain JS

- Support for multiple products on different pages

- Correct redirect after payment:

  - Specify the link for "successful payment" (return_url)

  - Specify the link for "payment cancellation" (cancel_url)

- Use 'PayPal API' to transmit information and initiate payment

  - Client ID and Merchant ID will be provided

- The cart must be scalable: I will insert the code on all pages myself

What is not included in the task:

- Design is not required

- Mobile device layout is not required

- No need to insert code manually on each page

What should be delivered:

1. An example HTML page with a product addition button

2. A "cart.html" page where the calculation, shipping selection, and payment transition occur

3. Instructions: how to insert the code on new pages

4. A working sample on a third party

Full payment after I implement the code on the site and test its functionality.

Задача:

Разработать модуль корзины покупок с интеграцией 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. Рабочий образец на третьей стороне

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