Репозиторий содержит пример реализации виджета доставки CDEK с использованием Next.js.
Столкнувшись с отсутствием официальной документации для интеграции виджета CDEK в React, я разработал собственное решение. Этот гид поможет настроить виджет CDEK в приложении шаг за шагом.
Для корректного отображения виджета необходимо получить API-ключ Яндекс.Карт. Без этого ключа карта с пунктами выдачи CDEK не будет отображаться.
- Перейдите на страницу Кабинета Разработчика Яндекс.
- Нажмите кнопку «Подключить API».
- Во всплывающем окне выберите сервис «JavaScript API и HTTP Геокодер».
- Сохраните полученный ключ для дальнейшего использования.
⚠️ Важно!
Обязательно задайте параметр HTTP Referrer, равный адресу вашего сайта для ключа.
Подробнее: документации Яндекс.
Для интеграции с CDEK вам потребуется получить учетные данные (логин и пароль) для доступа к API.
В тестовом режиме можно использовать следующие данные:
| Параметр | Значение |
|---|---|
| Account | wqGwiQx0gg8mLtiEKsUinjVSICCjtTEP |
| Secure password | RmAmgvSgSl1yirlz9QupbzOJVqhCxcP5 |
В реальном проекте необходимо получить свои учетные данные в личном кабинете CDEK, чтобы использовать сервис в продакшене.
Для работы виджета необходимо подключить скрипт CDEK. Добавьте следующий код в секцию основного файла вашего приложения
<head>
<Script src="https://cdn.jsdelivr.net/npm/@cdek-it/widget@3" strategy="beforeInteractive" />
</head> Теперь создадим компонент CdekWidget, который будет отвечать за отображение виджета.
Создайте новый файл CdekWidget.tsx
Полный код компонента CdekWidget.tsx.
Для работы виджета необходимо разместить серверный файл service.php, который будет взаимодействовать с API CDEK.
Скопируйте файл service.php на ваш сервер так, чтобы он был доступен по прямой ссылке. Пример:
https://example.com/service.php
Полный код компонента service.php
Изначально в файле service.php установлены тестовые ключи (строки 9 и 13). Для использования в продакшене замените их на ваши личные ключи, которые вы получите после заключения договора со CDEK.
⚠️ Примечание:
При работе с тестовыми данными запросы необходимо отправлять наhttps://api.edu.cdek.ru/v2.
Для боевого режима используйтеhttps://api.cdek.ru/v2. Убедитесь, что вы изменили URL в файлеservice.php: line42перед переходом на продакшн, чтобы избежать ошибок в интеграции.
git clone https://github.com/disa4148/cdek-widget-3.0.git
cd cdek-widget-3.0pnpm installNEXT_PUBLIC_YANDEX_MAPS_API_KEY=ваш_ключ_яндекс_картЗапуск клиентской части приложения
pnpm devЗапуск серверной части (PHP):
php -S localhost:8000- Откройте приложение в браузере по адресу
http://localhost:3000и убедитесь, что виджет отображается корректно. - Проверьте соединение с сервером, отправив тестовый запрос на
http://localhost:8000/service.php. - Если возникают ошибки, проверьте консоль браузера и лог сервера на наличие сообщений об ошибках.
Если у вас возникли вопросы или вы обнаружили ошибку, пожалуйста, создайте Issue в репозитории или свяжитесь со мной.
- Перенос серверной части с PHP на Node.js
Этот репозиторий лицензирован под MIT License. Подробности см. в файле LICENSE.