Пошаговая инструкция по интеграции Яндекс Сплит на CMS Drupal

Эта инструкция поможет вам подключить сервис “Сплит” от Яндекса (оплата частями) на весь каталог вашего интернет-магазина шин и дисков. Это повысит конверсию посетителей в покупателей, предоставив им удобный способ оплаты покупок в рассрочку.

Часть 1: Подготовительный этап

Шаг 1: Регистрация в Яндекс Пэй для бизнеса

Перейдите на официальный сайт Яндекс Пэй для бизнеса.
Нажмите кнопку “Подключить” или “Начать подключение”.
Заполните регистрационную форму, указав следующие данные:
- Название компании
- ИНН
- Контактные данные ответственного лица
- Юридический адрес
- URL вашего сайта
Дождитесь одобрения заявки от Яндекса. Обычно это занимает от 1 до 3 рабочих дней.

Шаг 2: Получение API-ключей

После одобрения заявки войдите в личный кабинет Яндекс Пэй.
Перейдите в раздел “Настройки” → “Ключи Яндекс Пэй со Сплитом Merchant API”.
Нажмите кнопку “Выпустить ключ”.
Сохраните полученный ключ в надежном месте — он понадобится для интеграции.
Настройте Callback URL, указав адрес вашего сервера, который будет обрабатывать уведомления от Яндекс Пэй (например, https://site.ru/yandex-pay/callback).

Часть 2: Настройка бэкенд-интеграции с Drupal

Шаг 3: Установка необходимых модулей Drupal

Войдите в административную панель Drupal сайта kolesa812.ru.
Перейдите в раздел “Расширения” (Extend).
Установите следующие модули (если они еще не установлены):
- Commerce (если используется для магазина)
- Libraries API
- Entity API
- JSON:API (для Drupal 8+)
Создайте новый модуль для интеграции с Яндекс Пэй и Сплит:
```
mkdir -p sites/all/modules/custom/yandex_pay_split
```
Создайте основные файлы модуля:
- yandex_pay_split.info.yml — информация о модуле
- yandex_pay_split.module — основная функциональность
- yandex_pay_split.install — скрипты установки/удаления
- src/Controller/YandexPaySplitController.php — контроллер для обработки API-запросов

Шаг 4: Настройка обработки Callback URL

Создайте маршрут для обработки Callback URL в файле yandex_pay_split.routing.yml:

yandex_pay_split.callback:
  path: '/yandex-pay/callback'
  defaults:
    _controller: '\Drupal\yandex_pay_split\Controller\YandexPaySplitController::handleCallback'
  requirements:
    _access: 'TRUE'

Реализуйте контроллер для обработки вебхуков от Яндекс Пэй:

namespace Drupal\yandex_pay_split\Controller;

use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;

class YandexPaySplitController extends ControllerBase {
  
  public function handleCallback(Request $request) {
    // Получаем JWT токен из запроса
    $jwtToken = $request->getContent();
    
    // Проверка подлинности JWT токена
    $isValid = $this->validateJwtToken($jwtToken);
    
    if (!$isValid) {
      return new JsonResponse(['status' => 'fail', 'reasonCode' => 'FORBIDDEN'], 403);
    }
    
    // Обработка данных запроса...
    // Логика обработки заказа...
    
    return new JsonResponse(['status' => 'success']);
  }
  
  private function validateJwtToken($token) {
    // Код валидации JWT токена с использованием публичных ключей Яндекса
    // ...
  }
}

Шаг 5: Настройка API для интеграции с frontend

Создайте сервис для работы с API Яндекс Пэй в файле src/YandexPayService.php:

namespace Drupal\yandex_pay_split;

class YandexPayService {
  private $apiKey;
  private $merchantId;
  private $apiUrl;
  
  public function __construct() {
    $this->apiKey = \Drupal::config('yandex_pay_split.settings')->get('api_key');
    $this->merchantId = \Drupal::config('yandex_pay_split.settings')->get('merchant_id');
    $this->apiUrl = 'https://pay.yandex.ru/api/v1/';
  }
  
  public function createOrder($orderData) {
    // Код для создания заказа через API...
  }
  
  public function getOrderStatus($orderId) {
    // Код для проверки статуса заказа...
  }
}

Создайте форму настроек в административной панели:

namespace Drupal\yandex_pay_split\Form;

use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;

class YandexPaySplitSettingsForm extends ConfigFormBase {
  // Реализация формы настроек...
}

Часть 3: Интеграция Яндекс Сплит на весь каталог товаров

Шаг 6: Добавление JS SDK на все страницы каталога

Создайте файл JavaScript js/yandex-pay-split.js в вашем модуле:

(function ($, Drupal) {
  Drupal.behaviors.yandexPaySplit = {
    attach: function (context, settings) {
      // Код инициализации SDK Яндекс Пэй
      const script = document.createElement('script');
      script.src = 'https://pay.yandex.ru/sdk/v1/pay.js';
      script.onload = function() {
        initYandexPay();
      };
      document.head.appendChild(script);
      
      function initYandexPay() {
        if (typeof YaPay !== 'undefined') {
          // Инициализация Яндекс Пэй SDK
          const merchantId = drupalSettings.yandexPaySplit.merchantId;
          // ...
        }
      }
    }
  };
})(jQuery, Drupal);

Добавьте библиотеку в файл yandex_pay_split.libraries.yml:

yandex_pay_split:
  version: 1.x
  js:
    js/yandex-pay-split.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

Подключите библиотеку на все страницы каталога в yandex_pay_split.module:

/**
 * Implements hook_page_attachments().
 */
function yandex_pay_split_page_attachments(array &$attachments) {
  $current_path = \Drupal::service('path.current')->getPath();
  
  // Проверяем, находимся ли мы на странице каталога
  if (strpos($current_path, '/shiny') === 0 || strpos($current_path, '/litye-diski') === 0 || strpos($current_path, '/shtampovannye-diski') === 0) {
    $attachments['#attached']['library'][] = 'yandex_pay_split/yandex_pay_split';
    $attachments['#attached']['drupalSettings']['yandexPaySplit'] = [
      'merchantId' => \Drupal::config('yandex_pay_split.settings')->get('merchant_id'),
    ];
  }
}

Шаг 7: Добавление бейджей Сплит в шаблон каталога товаров

Создайте файл templates/commerce-product--badge.html.twig (путь может отличаться в зависимости от вашей темы):

{# Добавляем к существующему шаблону товара бейдж Сплит #}
<div class="yandex-pay-badge-container" data-product-id="{{ product_id }}" data-product-price="{{ product_price }}">
  <!-- Сюда будет вставлен бейдж через JavaScript -->
</div>

Добавьте код для вставки бейджей в файл js/yandex-pay-split.js:

// В функции initYandexPay()

// Добавляем бейджи на все товары в каталоге
$('.yandex-pay-badge-container').each(function() {
  const productPrice = $(this).data('product-price');
  const container = this;
  
  // Добавляем бейдж Сплит для каждого товара
  YaPay.mountBadge(
    container,
    {
      type: 'bnpl',
      amount: productPrice,
      size: 'm',
      variant: 'detailed',
      color: 'primary',
      merchantId: merchantId,
    }
  );
});

Шаг 8: Массовое добавление виджетов Сплит в карточки товаров

Добавьте JavaScript код для создания виджетов на страницах товаров:

// Проверяем, находимся ли мы на странице товара
if ($('.product-detail').length > 0) {
  const productPrice = $('.product-price').data('price');
  const widgetContainer = $('.product-payment-options');
  
  // Инициализируем сессию оплаты
  const paymentSession = YaPay.createSession({
    merchantId: merchantId,
    paymentMethods: ['SPLIT'],
    currencyCode: 'RUB',
    cart: {
      items: [
        {
          productId: $('.product-detail').data('product-id'),
          quantity: {
            count: "1"
          }
        }
      ]
    }
  });
  
  // Добавляем виджет Сплит
  paymentSession.mountWidget(
    widgetContainer[0],
    { widgetType: YaPay.WidgetType.BnplPreview }
  );
}

Модифицируйте шаблон карточки товара, чтобы добавить контейнер для виджета:

{# В шаблоне карточки товара #}
<div class="product-payment-options">
  <!-- Сюда будет добавлен виджет Сплит -->
</div>

Шаг 9: Модификация процесса оформления заказа для поддержки Сплит

Добавьте опцию оплаты через Сплит в форму оформления заказа:

/**
 * Implements hook_form_FORM_ID_alter().
 */
function yandex_pay_split_form_commerce_checkout_flow_multistep_default_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if (isset($form['payment_information']['payment_method'])) {
    $form['payment_information']['payment_method']['#options']['yandex_pay_split'] = t('Оплата частями через Яндекс Сплит');
    
    // Добавляем виджет с графиком платежей
    $form['payment_information']['yandex_split_widget'] = [
      '#type' => 'markup',
      '#markup' => '<div id="yandex-split-payment-widget"></div>',
      '#states' => [
        'visible' => [
          ':input[name="payment_information[payment_method]"]' => ['value' => 'yandex_pay_split'],
        ],
      ],
    ];
    
    // Добавляем JavaScript для отображения виджета
    $form['#attached']['library'][] = 'yandex_pay_split/yandex_pay_split';
  }
}

Реализуйте плагин платежного шлюза для Drupal Commerce:

namespace Drupal\yandex_pay_split\Plugin\Commerce\PaymentGateway;

use Drupal\commerce_payment\Plugin\Commerce\PaymentGateway\OffsitePaymentGatewayBase;

/**
 * @CommercePaymentGateway(
 *   id = "yandex_pay_split",
 *   label = @Translation("Яндекс Сплит"),
 *   display_label = @Translation("Оплата частями через Яндекс Сплит"),
 * )
 */
class YandexPaySplit extends OffsitePaymentGatewayBase {
  // Реализация платежного шлюза...
}

Шаг 10: Добавление информации о Сплит в каталог

Создайте блок с информацией о Сплит в файле src/Plugin/Block/YandexSplitInfoBlock.php:

namespace Drupal\yandex_pay_split\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * @Block(
 *   id = "yandex_split_info_block",
 *   admin_label = @Translation("Информация о Яндекс Сплит"),
 * )
 */
class YandexSplitInfoBlock extends BlockBase {
  public function build() {
    return [
      '#theme' => 'yandex_split_info_block',
      '#attached' => [
        'library' => [
          'yandex_pay_split/yandex_pay_split',
        ],
      ],
    ];
  }
}

Создайте шаблон для блока в templates/yandex-split-info-block.html.twig:

<div class="yandex-split-info">
  <h3>Оплата частями с Яндекс Сплит</h3>
  <p>Платите за покупки частями без переплат! Первый платеж сегодня, остальные — каждые две недели.</p>
  <div id="yandex-split-info-widget"></div>
</div>

Разместите этот блок на странице каталога через административный интерфейс Drupal.

Часть 4: Тестирование и запуск

Шаг 11: Тестирование интеграции

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

Шаг 12: Переход в боевой режим

После успешного тестирования переведите интеграцию в боевой режим через личный кабинет Яндекс Пэй.
Обновите API-ключи в настройках модуля.
Проверьте, что все компоненты (бейджи, виджеты, форма оплаты) корректно работают в боевом режиме.

Дополнительные рекомендации

Оптимизация производительности: Используйте кэширование запросов к API Яндекс Пэй, чтобы не превышать лимиты запросов.
Мониторинг: Настройте логирование всех запросов и ответов API для оперативного выявления и устранения ошибок.
Адаптация дизайна: Настройте стили бейджей и виджетов Яндекс Сплит, чтобы они гармонично вписывались в дизайн вашего сайта.
Информирование клиентов: Добавьте информационный блок или страницу с подробным описанием условий оплаты через Яндекс Сплит.
Безопасность: Регулярно обновляйте публичные ключи для проверки JWT-токенов от Яндекс Пэй и используйте HTTPS для всех запросов.

Все статьи

SEO

Web

Маркетинг

SMM

Видео

Подпишись на наш паблик в ВК

Там мы делимся своим экспертным мнением: публикуем краткие обзоры статей, анализируем UX-решения, делаем разборы продуктов, делимся образовательными курсами и чек-листами.

Еще статьи

26.05.2025

Пошаговая инструкция по интеграции Яндекс Сплит на CMS Drupal

Часть 1: Подготовительный этап

Шаг 2: Получение API-ключей

Часть 2: Настройка бэкенд-интеграции с Drupal

Часть 3: Интеграция Яндекс Сплит на весь каталог товаров

Часть 4: Тестирование и запуск

Дополнительные рекомендации

Еще статьи

Как создать Телеграмм Бота через Нейросеть

BNPL-сервисы: анализ популярности кредитных продуктов в 2025 года

Новые тренды в SEO и цифровом маркетинге 2025

Лучшие аддоны для Elementor в 2025 году

Пошаговая инструкция по интеграции Яндекс Сплит на CMS Drupal

Как продвинуть сайт в поисковиках самому бесплатно: полное руководство

Как создать Телеграмм Бота через Нейросеть

BNPL-сервисы: анализ популярности кредитных продуктов в 2025 года

Новые тренды в SEO и цифровом маркетинге 2025

Лучшие аддоны для Elementor в 2025 году

Пошаговая инструкция по интеграции Яндекс Сплит на CMS Drupal

Как продвинуть сайт в поисковиках самому бесплатно: полное руководство