PHP + jQuery / Скрипты

Пишем модуль оплаты товара с помощью LiqPay в модальном окне на PHP + jQuery + HTML

Скрипт оплаты товара с помощью библиотеки liqpay подходящий для любого сайта - очень громко не правда ли?! Так и есть, мы просто копируем одну папку с модулем в корень сайта написанного на HTML, буль то лендинг или каталог-продукции или даже сайт визитка написанная на WordPress, Joomla. А все что нужно - require_once("./payment/form.php") в шаблоне сайта и публичный и приватный ключи, которые нам выдает liqpay в разделе настроек подключенного магазина. Приступим...

Для начала можем ознакомится с первой подобной статьей о подключение платежной системы LiqPAY API на наш сайт Codeigniter

она для codeigniter но все же очень полезна)
Что мы получим будем делать:

  • Всплывающее окно (корзина) с возможностью указать количество товара и оформить заказ
  • Скрипт обрабатывающий данные покупателя перед отправкой данных на почту
  • Возможность выбрать оплату наличными или с помощью liqpay
  • Ну и собственно сам скрипт генерирующий форму для отправки на сервер liqpay

Всплывающее окно (корзина) для оформления заказа

Научится создавать модальные окна вы можете ознакомившись с уроком по созданию формы обратной связи, эту статью начнем с верстки формы а точнее основного файла модуля - form.php

]]>
image description

Стандартный вид всплывающей формы для покупки в один клик. Допустим у нас лендинг по продаже автомобильных шин - под картинкой красивых шин continental расположена кнопка заказать. Нажимаем кнопку заказать - появляется окно с картинкой, кратким описанием, возможностью увеличить количество покупаемого товара и поля для заполнения имени, почтового ящика, телефона и комментария.

В моей демо-версии данного скрипта я продаю лицензию на свою CMS - MSCMS (сайт mscms.com.ua в процессе наполнения, демо версия движка будет позже) Все в popup окне обрабатывается яваскриптом - увеличения кол-ва товаров (в скрипте при покупке более 1 единицы - получаете скидку а значит уменьшается)! Простая проверка заполнения данных - уведомляет пользователя alert'ами если забыл указать контактные данные. Да вот код и все станет ясно ;)


Оплата товара с помощью библиотеки LiqPay

И так что же происходит при нажатии "Оформить заказ"? Кто из вас создавал форму обратной связи по моим урокам помнит скрипт order.php в котором мы обрабатываем данные асинхронно посланные на сервер методом POST. Не будем изобретать велосипед и слегка видоизменив наш код получим новый обработчик данных. В любом случае нам стоит оформить заказ клиента и отправить на почту администратора уведомление о новом заказе. Дальше сообщить пользователю о том, что его заказ принят в обработку и с ним свяжутся в ближайшее время и если выбрана оплата картой вывести кнопочку оплатить сгенерированную библиотекой liqpay.

image description

Код в студию...


Итак мы указываем: версию библиотеки liqpay в нашем скрипте пользуемся 3й, общую сумму заказа, валюту гривна - UAH. Описание платежа и номер заказа - полезно при обработке данных, которые приходят с сервера liqpay после совершения платежа. Первый указываем адрес по которому приходит ответ с сервера для обработки данных: к примеру товар оплачен и нам нужно изменить статус заказа для администратора и пользователя в базе данных, перехват и обработка данных идет как раз скриптом в пхп файле путь к которому вы указываете в result_url. result_url - ссылка на которую приват-банк отправит пользователя если тот нажал "вернуться на сайт продавца". Язык мы указали русский и тип платежа - пожертвование(разницу можете почитать на сайте liqpay). Ну и последняя опция - песочница - дает возможность оплачивать заказ и играть(настраивать) систему не снимая при этом деньги с карты. Необходимо поставить 0 если хотите что бы деньги снимались с карты плательщика ;-)

Вот и все что нужно для возможности принимать онлайн платежи с вашего сайта. LiqPay к сожалению работает только с картами Украины, но подключить другую платежную систему к данному скрипту не составит труда у хорошего программиста. По секрету скажу, чтобы использовать PayPal - нужно лишь слегка изменить финальный кусок кода, предварительно ознакомившись с библиотекой paypal конечно же, но разница в логике работы api не существенная ;-)

image description

Надеюсь вам понравился данный урок а скрипт проверен на CMS WordPress и Joomla и обычных HTML страничках и самописных движках. Пишите комментарии и делитесь статьей в соц.сетях! Всем гладкого программирования ;-)

Если вам пригодился данный модуль и вы цените проделанный труд - всегда можете поблагодарить автора поддержав или инвестировав его проекты!

6591 Просмотров Комментариев: 11

Виктор

Ответить

а с робокассой есть отличия ?

Поляков Е.

Ответить

Виктор, робокассу еще не приходилось устанавливать - но посмотрев официальную документацию робокассы можно убедится что логика работы идентичная liqpay (почти 1 в 1) - следовательно все что нужно для установки любой другой платежной системы - изучить и разобраться с ее API!

Николай

Ответить

А как обрабатывать ответ сервера об успешной оплате?

Олег

Ответить

Здравствуйте, подскажите, если у меня будет несколько товаров на странице?

Олег

Ответить

Доброго Вам время суток, подскажите как реализовать такую схему на вашем скрипте: заполнение формы (20 полей примерно), -оплата(агрегатор, там я думаю справлюсь с API) -рассылка сообщений( админу о оплате и клиенту о успешном действие).. Мне показалось что на вашей модели такое возможно, не ошибаюсь ? или выбрал не самый простой путь))))

Павел

Ответить

Здравствуйте, не совсем понятны различия между result_url и server_url? к тому же у вас они одинаковы

Andrey

Ответить

не совсем дачный подход в плане отмены оплаты на странице оплаты ликюпей и оно пишет красивыми буквами что все оплачено спасибо

Сергей

Ответить

Заходишь на демо, нажимаешь заказать, а там окнище на весь экран, шапка не видна, кнопка оплатить не в поле видимости...

Гофман

Ответить

Жень, ну что там дальше? Не забрасывай проект. Давай уже будем начинать админку ковырять. Мы на тебя надеемся.

Алексей

Ответить

Смотрю демо - работает, загружаю исходники кидаю на сервер останавливается на ( Оформление заявки. Подождите...) - в консоли ошибка "Failed to load resource: the server responded with a status of 500 (Internal Server Error)" перепробовал 4 хостинга( Помогите, хочу на сайте сделать...

Валера

Ответить

Редактировать этот комментарий можно, после того как отправил?

« Предыдущая статьяСоздание движка на Codeigniter 3 + HMVC. Часть 8. Пишем модуль карусели (слайдера) - slider Перейти к оглавлению »Все статьи