Интеграция мобильного приложения с WooCommerce через REST API: пошаговое руководство

Интеграция мобильного приложения с WooCommerce позволяет связать каталог, корзину и заказы в единую систему. REST API передаёт данные между приложением и интернет-магазином. Разберём архитектуру, авторизацию и код. Если планируете такое решение, оцените подход до начала разработки.

Зачем нужна интеграция мобильного приложения с WooCommerce

WooCommerce хорошо подходит для управления интернет-магазином. Но покупателю не всегда удобно пользоваться мобильной версией сайта.

Приложение даёт другой пользовательский сценарий:

• быстрый доступ к каталогу;
• push-уведомления;
• сохранение данных пользователя;
• удобную корзину;
• повторные покупки;
• персональные предложения;
• работу с функциями смартфона.

Проблема появляется на этапе разработки.

Приложению нужны данные магазина. Оно должно получать товары, категории и цены. Также приложение должно создавать и отслеживать заказы.

REST API решает эту задачу.

Интеграция мобильного приложения с WooCommerce через REST API создаёт программный интерфейс между двумя системами. Мобильный клиент отправляет запрос. WooCommerce возвращает структурированный ответ в формате JSON.

Например, пользователь открывает каталог. Приложение отправляет запрос:

GET /wp-json/wc/v3/products

WooCommerce возвращает список товаров.

Затем пользователь добавляет товар в корзину. Приложение сохраняет состояние корзины и продолжает работу через API.

Такой подход позволяет не дублировать интернет-магазин. WooCommerce остаётся источником данных. Мобильное приложение становится отдельным интерфейсом для покупателя.

Как устроена интеграция мобильного приложения с WooCommerce

Типовая архитектура состоит из трёх уровней:

┌──────────────────────┐
│   Мобильное приложение│
│   iOS / Android       │
└──────────┬───────────┘
           │ HTTPS / JSON
           ▼
┌──────────────────────┐
│     REST API          │
│     WooCommerce       │
└──────────┬───────────┘
           │
           ▼
┌──────────────────────┐
│ WordPress + WooCommerce│
│ Товары / Заказы / Клиенты│
└──────────────────────┘

Мобильный клиент не должен напрямую работать с базой данных WordPress.

Это важный принцип безопасности.

Приложение обращается только к API. Сервер проверяет запрос. Затем WooCommerce выполняет операцию.

Какие данные можно передавать

REST API WooCommerce поддерживает основные сущности магазина:

Данные	Примеры операций
Товары	получение, создание, изменение
Категории	получение списка
Заказы	создание, просмотр, изменение
Клиенты	получение и обновление
Купоны	получение и применение
Вариации	получение характеристик
Атрибуты	получение значений

Набор операций зависит от версии WooCommerce и архитектуры проекта.

Поэтому интеграция мобильного приложения с WooCommerce начинается не с кода. Сначала проектируют API-контракт.

Авторизация через WooCommerce REST API

Для серверных запросов WooCommerce использует API-ключи.

Их можно создать в административной панели:

WooCommerce → Настройки → Дополнительно → REST API.

При создании ключа задаётся уровень доступа:

• Read;
• Write;
• Read/Write.

Для чтения каталога достаточно Read.

Для управления заказами потребуется более высокий уровень доступа.

Но здесь есть важный нюанс.

Не стоит помещать секретный API-ключ прямо в мобильное приложение.

Приложение можно декомпилировать. Значит, злоумышленник потенциально получит секрет.

Безопаснее использовать промежуточный сервер:

Mobile App
    ↓
Backend API
    ↓
WooCommerce REST API
    ↓
WordPress

Так backend хранит секреты. Мобильное приложение работает с собственным API.

Это особенно важно, если приложение обрабатывает личные данные клиентов.

Получение товаров через REST API

Рассмотрим простой запрос для каталога.

GET https://example.ru/wp-json/wc/v3/products

Сервер вернёт JSON.

Упрощённый пример ответа:

[
  {
    "id": 101,
    "name": "Кроссовки",
    "price": "7990.00",
    "regular_price": "8990.00",
    "stock_status": "instock",
    "images": [
      {
        "src": "https://example.ru/wp-content/uploads/shoes.jpg"
      }
    ]
  }
]

Мобильное приложение получает эти данные. Затем оно преобразует JSON в собственные модели.

Например, в Flutter модель может выглядеть так:

class Product {
  final int id;
  final String name;
  final String price;
  final String image;

  Product({
    required this.id,
    required this.name,
    required this.price,
    required this.image,
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'],
      name: json['name'],
      price: json['price'],
      image: json['images'][0]['src'],
    );
  }
}

Такой подход разделяет API и интерфейс.

Если структура магазина изменится, приложение не должно ломаться от каждого изменения.

Пагинация и фильтрация товаров

Каталог может содержать тысячи товаров.

Поэтому нельзя загружать весь каталог одним запросом.

Используйте пагинацию:

GET /wp-json/wc/v3/products?page=1&per_page=20

Следующий запрос:

GET /wp-json/wc/v3/products?page=2&per_page=20

Можно также применять фильтры.

Например:

GET /wp-json/wc/v3/products?category=15&orderby=price&order=asc

Приложение получит товары категории 15. Они будут отсортированы по цене.

Так снижается объём передаваемых данных.

Для пользователя это означает более быструю загрузку каталога.

Интеграция мобильного приложения с WooCommerce и работа с заказами

Каталог — только часть задачи.

Главная бизнес-функция магазина — заказ.

После оформления покупки приложение должно передать WooCommerce:

• товары;
• количество;
• данные клиента;
• адрес доставки;
• способ оплаты;
• способ доставки;
• дополнительные поля.

Пример запроса:

POST /wp-json/wc/v3/orders
Content-Type: application/json

Тело запроса:

{
  "payment_method": "cod",
  "payment_method_title": "Оплата при получении",
  "set_paid": false,
  "billing": {
    "first_name": "Иван",
    "last_name": "Иванов",
    "email": "ivan@example.com",
    "phone": "+79990000000"
  },
  "line_items": [
    {
      "product_id": 101,
      "quantity": 2
    }
  ]
}

WooCommerce создаёт заказ и возвращает его идентификатор.

Например:

{
  "id": 2458,
  "status": "processing"
}

Приложение сохраняет ID заказа.

Теперь пользователь может открыть раздел «Мои заказы».

Как синхронизировать статусы заказов

После создания заказа его статус может измениться.

Например:

pending
   ↓
processing
   ↓
completed

Но возможны и другие сценарии:

pending → cancelled
processing → refunded
processing → completed

Приложение должно корректно обрабатывать эти изменения.

Есть два основных подхода.

Периодическая проверка

Приложение или backend периодически запрашивает заказ.

GET /wp-json/wc/v3/orders/2458

Метод простой.

Но он создаёт лишние запросы.

Webhook

Более эффективный вариант — использовать webhook WooCommerce.

WooCommerce отправляет событие на ваш сервер после изменения заказа.

WooCommerce
     │
     │ Order updated
     ▼
Webhook
     │
     ▼
Backend
     │
     ▼
Mobile App

Это позволяет быстрее обновлять данные.

Например, backend получил статус completed. Он отправляет push-уведомление пользователю.

Так интеграция мобильного приложения с WooCommerce превращается в полноценную систему синхронизации.

Корзина: важный нюанс REST API

С корзиной ситуация сложнее.

WooCommerce REST API управляет товарами и заказами. Но мобильная корзина часто требует собственной логики.

Например:

Пользователь
    ↓
Mobile Cart
    ↓
Backend
    ↓
WooCommerce

Приложение может хранить временную корзину локально. При оформлении заказа backend проверяет актуальные цены и остатки.

Это важно.

Пользователь мог добавить товар утром. К вечеру цена могла измениться.

Поэтому нельзя без проверки доверять данным мобильного клиента.

Перед созданием заказа сервер должен проверить:

• существование товара;
• актуальную цену;
• доступный остаток;
• вариацию;
• скидку;
• условия доставки.

Интеграция мобильного приложения с WooCommerce: типовой кейс

Представим интернет-магазин одежды.

Компания уже продаёт товары через WooCommerce. Теперь ей нужно мобильное приложение.

Проблема: разработчики предлагают перенести каталог в отдельную базу.

Это увеличивает стоимость проекта.

Появляется двойное администрирование. Менеджер меняет цену на сайте. Затем ему приходится менять цену ещё и в приложении.

Решение: интеграция мобильного приложения с WooCommerce через REST API.

WooCommerce остаётся основной системой.

Приложение получает:

• каталог;
• категории;
• цены;
• остатки;
• вариации;
• заказы.

Менеджеры продолжают работать в WordPress.

Результат: компания получает мобильный канал продаж без второго каталога.

При этом архитектуру можно расширить.

Например, добавить:

• программу лояльности;
• персональные рекомендации;
• push-уведомления;
• промокоды;
• избранные товары;
• повторный заказ.

Что важно предусмотреть в архитектуре

Хорошая интеграция требует не только API-запросов.

Нужно заранее определить границы систем.

1. Источник истины

Определите, где хранятся основные данные.

Для интернет-магазина это обычно WooCommerce.

2. Формат данных

Зафиксируйте API-контракт.

Например:

{
  "id": 101,
  "title": "Кроссовки",
  "price": 7990,
  "available": true
}

Не стоит менять структуру ответа без контроля версий.

3. Обработка ошибок

API может вернуть:

400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
429 Too Many Requests
500 Internal Server Error

Приложение должно понимать эти ответы.

Например, 401 означает проблему авторизации. Код 429 говорит о слишком большом числе запросов.

4. Кэширование

Каталог не всегда нужно загружать заново.

Backend может кэшировать часто запрашиваемые данные.

Это уменьшает нагрузку на WordPress.

5. Логи

Каждый важный API-запрос стоит логировать.

Особенно:

• создание заказа;
• оплату;
• изменение статуса;
• ошибки авторизации;
• ошибки синхронизации.

Без логов поиск проблем занимает значительно больше времени.

Типичные ошибки при интеграции

Ошибка №1. API-ключ находится в приложении

Это серьёзный риск.

Секретные данные должны находиться на защищённой стороне сервера.

Ошибка №2. Приложение напрямую доверяет цене

Цена из мобильного клиента не должна считаться актуальной.

Сервер обязан перепроверить её.

Ошибка №3. Весь каталог загружается сразу

Большой JSON увеличивает время загрузки.

Используйте пагинацию и фильтры.

Ошибка №4. Нет обработки изменений WooCommerce

Плагины могут добавлять поля. Тема или кастомный код может менять бизнес-логику.

API нужно тестировать после обновлений.

Ошибка №5. Нет единого API-контракта

Если backend, WordPress и мобильная команда работают без общей спецификации, появляются несовместимые изменения.

Перед разработкой лучше описать:

• endpoints;
• параметры;
• ответы;
• ошибки;
• авторизацию;
• версии API.

Чек-лист перед запуском

Перед публикацией приложения проверьте:

• API работает через HTTPS.
• Секретные ключи не находятся в приложении.
• Настроена авторизация.
• Работает пагинация.
• Обрабатываются ошибки API.
• Проверяются цены.
• Проверяются остатки.
• Корректно создаются заказы.
• Работает синхронизация статусов.
• Настроены webhook.
• Ведутся логи.
• Есть тестовый контур.
• Проверена нагрузка.
• Учтены изменения WooCommerce и плагинов.

По данным HTTP Archive, WordPress используется примерно на 40% всех сайтов, которые участвуют в их измерениях. Поэтому интеграции с WordPress и WooCommerce остаются востребованной задачей для бизнеса.

Когда стоит привлекать разработчиков

Простой каталог можно подключить к API относительно быстро.

Но полноценное приложение требует другой глубины проработки.

Особенно если нужны:

• авторизация пользователей;
• онлайн-оплата;
• программа лояльности;
• несколько способов доставки;
• синхронизация остатков;
• промокоды;
• push-уведомления;
• интеграция с CRM;
• интеграция с ERP;
• сложная корзина;
• аналитика продаж.

В таких проектах проблема обычно не в самом REST API.

Сложность возникает на стыке систем.

Нужно правильно спроектировать архитектуру. Затем — протестировать сценарии и нагрузку.

Интеграция мобильного приложения с WooCommerce — что выбрать

Если у вас уже есть WooCommerce, не обязательно создавать отдельную систему интернет-магазина.

REST API позволяет использовать существующую инфраструктуру.

Оптимальная схема выглядит так:

                 ┌──────────────┐
                 │ iOS / Android│
                 └──────┬───────┘
                        │
                      HTTPS
                        │
                 ┌──────▼───────┐
                 │    Backend   │
                 └──────┬───────┘
                        │
                    REST API
                        │
                 ┌──────▼───────┐
                 │ WooCommerce  │
                 └──────────────┘

Такой вариант безопаснее прямого подключения приложения к WordPress.

Он также удобнее для масштабирования.

При росте проекта backend можно связать с CRM, службами доставки, платёжными системами и аналитикой.

Заключение

Интеграция мобильного приложения с WooCommerce помогает использовать существующий интернет-магазин как основу мобильного канала продаж. REST API связывает приложение с каталогом, клиентами и заказами.

Главное — не ограничиваться отдельными API-запросами. Сначала нужно спроектировать архитектуру. Затем определить безопасность, синхронизацию, обработку ошибок и бизнес-логику.

Если вам нужна интеграция мобильного приложения с WooCommerce, специалисты веб-студии «Компьюти» могут спроектировать API, backend и схему обмена данными. Это позволит избежать дублирования каталога и заложить основу для дальнейшего развития приложения.