Подключение метода оплаты ЮKassa - Виджет

В данной статье рассмотрим подключение метода оплаты "ЮKassa" для интернет-магазина на ADVANTSHOP через "Виджет". Если требуется подключение через "API" перейдите в инструкцию.

Данный способ подключения представляет собой платёжную форму непосредственно в вашем магазине, которая не уводит покупателей из магазина при оплате.

Внимание!

В настоящий момент сервис ЮKassa предлагает решение касательно 54-ФЗ для интернет-магазинов, осуществляя отправку фискальных данных из интернет-магазина в облачные кассы. Подробнее: здесь.

Заметка

Доступные способы приёма платежей
Банковские карты — Visa, Mastercard, Maestro, «Мир»
ЮMoney
Сбербанк Онлайн
QIWI Wallet
Webmoney
Наличные через терминалы
Альфа-Клик
Заплатить по частям

• Подготовка к подключению метода оплаты
• Регистрация в платежной системе
• Настройка в платежной системе
• Настройка метода оплаты на стороне магазина
• Проверка. Тестирование платежей

 

Подготовка к подключению метода оплаты

Внимание

Для правильной работы интеграции нужен SSL-сертификат.
Получить SSL-сертификат можно бесплатно (если не кириллический домен) через REG.RU — прямо в личном кабинете ЮKassa после настроек описанных ниже в инструкции.

Как получить сертификат из личного кабинета ЮKassa:
1) Подпишите договор с ЮKassa.
2) Выберите платёжный модуль в разделе Интеграция — Готовые решения.
3) На странице Готовые решения появится блок SSL-сертификат. Нажмите Получить сертификат.
4) Вам должны предоставить код сертификата и приватный ключ.

Если вы используйте облако, то для установки SSL, данное письмо, с кодом вашего сертификата и файл с приватным ключом, необходимо переслать нам в поддержку по адресу: support@advantshop.net. Далее установкой сертификата для домена займутся наши специалисты, вы получите уведомление об окончании установки.

Если вы используете лицензированную версию на хостинге с выделенным сервером, посмотрите инструкцию Установка SSL сертификата на Microsoft IIS 7.x, 8 либо воспользуйтесь услугой установки SSL.

Если вы используете лицензированную версию на shared хостинг, по данному вопросу обратитесь в поддержку вашего хостинга, также обратите внимание, что в данном случае услуга установки силами специалистов advantshop не доступна.

Сертификат можно получить только для одного сайта, который подключается к ЮKassa. Если в личном кабинете получить сертификат не удалось, запросите его у менеджера в ЮKassa.

После того, как вопрос с SSL-сертификатом решён, перейдём к дальнейшим настройкам.

Регистрация в платежной системе

Для начала работы нужно перейти на страницу регистрации.

Рекомендуем

Регистрация по вышеуказанной ссылке позволит вам воспользоваться бонусом – подключение тарифа "Премиум" на 3 мес, со ставкой 2,8% по картам.

На открывшейся странице впишите номер телефона и получите код смс (рис.1).

Рисунок 1.

Далее Вы создаете профиль, либо выбираете существующий (если такой имеется). (рис.2).

Рисунок 2.

Если выбираете существующий, то откроется страница, согласия на переход в новый интерфейс (рис.3А). То есть это в случае, если у вас уже была регистрация в ЮKassa и сейчас переносится на ЮKassa.

Рисунок 3А.

В нашем случае выбираем первую регистрацию, а именно, создаем новый профиль, откроется страница, где требуется придумать пароль (рис.3Б).

Рисунок 3Б.

Далее вводите имя и почту (рис.3В).

Рисунок 3В.

Выбираете организацию (Юр.лицо, ИП или Самозанятый), вписываете ИНН, если вы самозанятый, то необходимо сначала отправить заявку на подключение и после одобрения пройти регистрацию, подробнее в инструкции. (рис.3Г).

Рисунок 3Г.

После того как будет создан личный кабинет, необходимо на вкладку "Прием платежей", в нашем случае выбираете "на сайте" и добавляете доменное имя магазина уже с учетом SSL (рис.4)

Рисунок 4.

Далее нужно указать данные для договора, для этого перейдите в пункт меню "Реквизиты" и заполните все реквизиты компании (рис.5), после чего переходите в "Данные руководителя"- укажите ФИО руководителя, название его должности, гражданство и адрес регистрации (по паспорту), также загрузите сканы паспорта.(рис.6).

Рисунок 5.

Рисунок 6.

Далее перейдите в пункт меню "Юридические вопросы" и добавьте данные бенефициарных владельцев. Если бенефициаров нет — уберите галочку в этом пункте и выберите из списка причину их отсутствия. Затем несколько юридических вопросов. Если выбранный вариант вам не подходит, снимите галочку и выберете подходящий (рис.7).

Рисунок 7.

Когда все пункты заполнены, можно отправлять данные на проверку — в рабочие дни она занимает 1-2 дня. Результат проверки придёт на электронную почту, которую вы указали при регистрации (рис.8).

Рисунок 8.

Заметка

Когда проверка пройдена, в личном кабинете появится страница подписания договора.
Скачайте договор (заявление о подключении) и распечатайте его.
На последней странице поставьте дату, подпись и печать (если она у вас есть). На всех остальных — подпись с расшифровкой.
Отсканируйте все страницы договора и отправьте сканы на подпись в ЮKassa.
Только после подписания договора можно будет завершить настройки.

Настройка в платежной системе

После заключения договора можно начинать настраивать интеграцию ЮKassa с магазином. Сначала опишем настройки на стороне ЮKassa.

Для этого перейдите в пункт меню "Интеграция" - "Готовые решения", в открывшейся странице в поле "ваша система" выбираете "Advantshop" (рис.9).

Рисунок 9.

Появится поле "идентификатор магазина" (рис.10) - впишите числовой id из "URL обработки оповещений об оплате (Notification URL)" из настроек интернет-магазина (рис.17, цифра 6).

Рисунок 10.

Далее необходимо выпустить "секретный ключ", для этого перейдите в пункт меню "Ключи API" и нажмите "Выпустить ключ" (рис.11)

Рисунок 11.

Необходимо будет подтвердить выпуск ключа, для этого нажмите "Получить пароль" (рис.12), впишите код из смс (рис.13) и на последнем шаге сформируется ключ, который необходимо скопировать и позже разместить в магазине (рис.14).

Рисунок 12.

Рисунок 13.

Рисунок 14.

 

Настройка метода оплаты на стороне магазина

Перейдите в настройки магазина, пункт меню "Настройки" - "Оплата" (рис.15).

Рисунок 15.

На открывшейся странице нажмите "Добавить способ оплаты" и выберите модуль "ЮKassa" (рис.16)

Рисунок 16.

В строке "Способ подключения" выбираем "Виджет" (рис.17).

Рисунок 17.

1. Выберите способ подключения "Виджет".

2. Укажите shopId - появится в личном кабинете Кассы автоматически, когда вы подключитесь к сервису, будет находится вверху вместо поле "заявка" (рис.18).

Рисунок 18.

3. Укажите секретный ключ - параметр создали на стороне ЮКаssы (рис.11-14).

4. Выберите из списка предпочтительный способ оплаты, либо можете выбрать "умный платеж", тогда на момент оплаты будут доступы все возможные методы оплаты от ЮКаssы.

5. В случае, если Вы хотите передавать фискальные данные в облачную кассу через ЮКаssу - поставьте галочку "Передавать данные для чека". Подробнее здесь.

Затем, активируйте метод оплаты, выставив галочку "Активен", и сохраните изменения нажав кнопку "Сохранить" внизу страницы.

Также, в случае необходимости, укажите вашу ставку НДС из выпадающего списка.

На этом настройка метода закончена.

 

Проверка. Тестирование платежей

Внимание

Боевые настройки прописываете сразу, поэтому тестовый платеж совершаете на товаре номенальной стоимостью, например, 10 рублей. То есть создаете товар стоимостью 10 руб. и проводите сразу оплату.

Также можно протестировать с помощью тестового магазина на стороне ЮKassa, что это такое и как протестировать ознакомьтесь на сайте ЮKassa в подробной инструкции.

На стороне магазина виджет оплаты отображается так (рис.19):

Рисунок 19.

Заметка

Может возникнуть ситуация, когда оплата проходит на стороне кассы, но в магазине не отображается. Для этого, необходимо проверить настройки на стороне ЮKassa.
Перейдите в раздел "Интеграция - HTTP-уведомления", проверьте прописан ли URL для уведомлений (берете из настроек магазина URL обработки оповещений об оплате (Notification URL) (рис.17)) и проверьте включен ли "payment_succeeded ", если не включен или url для уведолмения не прописан, нажмите на кнопку "задать вручную" (рис.20), заполните описанное выше и сохарните (рис.21).

Рисунок 20.

Рисунок 21.

Всё готово.