PrestaShop

Онлайн магазини, работещи с PrestaShop, могат лесно да интегрират Mokka като платежен метод чрез модул, който е разработен специално за тази платформа за онлайн магазини. В тази статия е описан процесът по инсталация, конфигурация и тестване на модула на Mokka за интеграция с PrestaShop.

Инсталация на модул Mokka за PrestaShop

За да инсталирате модула на Mokka за PrestaShop, първо трябва да разполагате с архивиран файл в ZIP формат. Той ще ви бъде предоставен от Mokka, след като станете наш партньор. 

След като разполагате с файла, трябва да го добавите към останалите модули в онлайн магазина си. 

1. Влезте в административния панел на онлайн магазина. 

2. Админ панел > Подобряване > Модули > Module Manager

В секция “Подобряване”, влезте в меню “Модули” и след това в подменю “Module manager”. 

3. В “Мениджър на модули”, кликнете на бутона “Качване на модул”, намиращ се в горната дясна част на страницата

4. Изберете файла в ZIP формат, изпратен от Mokka и потвърдете качването.

5. Затворете прозореца, без да кликвате на бутона “Конфигуриране”.

Активиране на модул Mokka за PrestaShop

След успешната инсталация на модула на Mokka за PrestaShop, за да бъде наличен платежният метод Mokka в онлайн магазина ви, трябва да го активирате. 

1. Върнете се в секция “Подобрения”, меню Модули, подменю Module Manager. 

2. Скролнете страницата докато видите секция “Плащане”, където ще е наличен ред “Mokka”. 

3. Кликнете на бутона “Активирай” към модула на Mokka. 

 

Конфигуриране на Mokka за PrestaShop

Mokka - настройка на търговец

1. Админ панел > Подобряване > Плащане > Mokka Merchnats

Отидете в секция “Подобряване”, меню “Плащане” и отворете подменю “Mokka Merchants”

2. В дясната част на страницата, кликнете на иконата с “+”, за да добавите данните на своя онлайн магазин. 

3. Отваря се прозорец, в който трябва да попълните информацията, както е описано по-долу. 

• API store ID = въведете Store ID, който ви е изпратен от Mokka, заедно с инструкциите
• API store secret key = въведете Store Secret Key, който ви е изпратен от Mokka, заедно с инструкциите
• API Base URL address = въведете Base URL адреса, който ви е изпратен от Mokka, заедно с инструкциите
• Name = Въведете името на магазина, който ви е изпратен от Mokka
• Test mode merchant - определя дали плащанията през Mokka са в тестови режим. 
  • Disabled - изберете тази опция за първия търговец (когато въведените 'Store ID', 'API store secret key' и 'API Base URL address' са за продукционна среда).  
• Active - определя дали платежен метод Mokka е активен в онлайн магазина
  • Enabled - метод за плащане Mokka е активен в магазина
  • Disabled - Mokka не е активен начин за плащане в онлайн магазина. 

Допълнителна информация:

За да можете да правите тестове, добавете два записа - единият с данните за интеграция в тестови режим, а другият - за реални транзакции от клиенти.  В този случай, за единия запис (с данните за интеграция в тестови режим), настройката 'Test mode merchant' трябва да е 'Enabled', а за другия запис (с данните за реална интеграция на продуктова среда), 'Test mode merchant' трябва да е 'Disabled'. В зависимост от това на коя среда тествате, изберете Active = Enabled за съответния търговец, а за другия задайте Active = Disabled. Вижте повече в 'Тестване на модул Mokka' по-долу

Mokka - настройка на магазин

След като сте добавили партньорския акаунт, за да се възползвате от предимствата на Mokka, трябва да направите няколко допълнителни настройки,

1. Админ панел > Подобряване > Плащане > Mokka shop configuration 

Влезете в подменю 'Mokka shop configurations', намиращо се в меню 'Плащане', секция 'Подобряване'

2. В горната дясна част на страницата 'Mokka shop configurations', клинете на иконката с плюс, за да добавите нова конфигурация. 

3. Ще се отвори нов прозорец, в който трябва да направите настройките, описани по-долу.

3.1. Секция API settings

• Active - определя дали платежен метод Mokka ще е видим при приключване на поръчка в онлайн магазина
  • Изберете Enabled 
• Test mode merchant - настройка, с която избирате дали платежният метод да е в тестови режим. Имайте предвид, че в тестови режим, поръчките от клиенти, няма да бъдат обработвани от Mokka
  • Изберете Disabled, когато сте говотови да предлагате плащане с Mokka
• Select merchant - изберете записа, добавен в 'Mokka shop configuration'. За да е правилна настройката, тестовият режим трябва да е изключен (Disabled). 
• Select merchant (test mode) - ако сте добавили запис с тестови данни, изберете него. За да се отрази настройката, тестовият режим, трябва да е включен (Enabled)

3.2. Секция Store settings

• Minimum Order Value = минимална сума на поръчка при плащане с Mokka, според Приложение 2 на Договора за партньорство с Mokka. Ако няма ограничение, въведете 1.
• Generate invoice after Mokka accepted payment = изберете дали иска да бъде генерирана фактура към клиента, след като плащането е одобрено от страна на Mokka 
• Allowed Shipping Methods = изберете всички методи за доставка, за които искате да има възможност за плащане с Mokka
• Shop association = в случай, че има повече от един онлайн магазин, асоцииран към PrestaShop, изберете този, за който е изпратена конфигурацията. 
  Важно! Конфигурацията е валидна само за онлайн магазина, за който е създадена. За други няма да работи коректно.

3.3. Секция Store settings

В тази секция се прави връзка между статусите на поръчка в системата на Mokka и в онлайн магазина. Изключително важно е да са правилно настроени, за да може да може поръчката да бъде обработена коректно. 

• Order status related to Mokka payment = Обработка на плащане (MOKKA)
  Статусът показва, че има нова поръчка, за която е избрано плащане със сума Mokka и в момента тя се обработва от страна на Mokka. Статусът ще се обнови автоматично. 
• Status when decisions in Mokka have been changed to accepted = Одобрено плащане (MOKKA)
  Статусът индикира, че плащането с Mokka е прието и поръчката може да бъде обработена от онлайн магазина. Статусът се подава автоматично от системата на Mokka
• Status when decisions in Mokka have been changed to rejected = Отказано плащане (MOKKA)
  Статусът означава, че поръчката не може да бъде платена с Mokka. Трябва да бъде посочен друг метод на плащане, преди поръчката да бъде продължена. Статусът се подава автоматично от системата на Mokka
• Status for order cancellation = Отказана поръчка (MOKKA)
  Статусът е за поръчки, платени с Mokka, които са отказани от страна на клиента. Статусът се подава ръчно от онлайн магазина, в случай, че клиентът откаже поръчката. 
• Status for order complete = Завършена поръчка (MOKKA)
  Статус за финализиране поръчка - изпратена за доставка или доставена до клиента. Статусът се подава ръчно от страна на онлайн магазина. 
• Status for order refunded = Върнати продукти (MOKKA)
  Статус за върнати продукти от страна на клиента. Статусът се подава ръчно от страна на онлайн магазина при връщане на всички стоки от поръчката. 

3.4. Секция Checkout settings

• Logo in checkout - логото на Mokka, което ще бъде визуализирано до името на Mokka като метод за плащане при завършване на поръчката. Не е необходимо да се качва ново изображение. 
• Title in checkout - начинът, по който Mokka ще се визуализира в списъка с методи за плащане. Въведете текста по-долу:

Mokka - купи сега, плати после

• Color of title in the checkout - определя цвета на текста на Mokka, когато се визуализира в списъка с методи на плащане при завършване на поръчка. Кодът на цвета по-долу е бранд цветът на Mokka:

#FF5A1E

• Baner visibility on shopping cart and on checkout - настройка, която определя дали банер Mokka ще се показва в кошницата на потребителя и при завършване на поръчка. 
• Baner content - съдържание на банера на Mokka. Ако сте избрали банерът да е видим, копирайте HTML кода, поместен по-долу и заместете с него съществуващото съдържание в полето Baner content:

<span class="mokka-banner-price">
<span>from</span> <strong>%installment_amount%</strong>/mo.
<img class="mokka-banner-logo" src="%banner_logo_img%" alt="Mokka">
<span class="mokka-banner-divider"></span>
<span class="mokka-banner-description">плати, както поискаш</span>
</span>
<span class="mokka-banner-group">
<span class="mokka-banner-button">Регистрация</span>
</span>

 

Забележка: %installment_amount% е динамична величина за приблизителната месечна вноска, пресметната за всеки продук, въз основа на формулата:

round(final_product_price/%number_of_parts%).

3.5. Секция Widget settings

• Widget visibility in product catalog - настройка за това дали и къде да се визуализира уиджетът на Mokka в онлайн магазина
  • Show widget on product catalog and product page - показва уиджета в продуктовия списък за всеки продук, както и на страницата на всеки продукт 
  • Show widget only on product page - уиджетът се визуализира само на страницата на продукта
  • Disable the display of the widget - уиджетът на Mokka не се визуализира в онлайн магазина.
• Color in the widget - показва цветът на уиджета. По-долу е кодът на бранд цвета на Mokka

#FF5A1E

• Minimum loan months = минимален брой месеци за плащане от потребителя, според Приложение 2 към Договор за партньорство с Mokka, минимална стойност на полето е 0.1. 
• Maximum loan months = максимален брой месеци за плащане от потребителя, според Приложение 2 към Договор за партньорство с Mokka
• Maximum order value = максимална стойност на поръчка с Mokka - според Приложение 2 към Договор за партньорство с Mokka. В случай, че няма горна граница, се въвежда 10000.
• Widget content - съдържание на уиджета на Mokka. Ако сте избрали уиджетът да е видим, копирайте HTML кода, поместен по-долу и заместете с него съществуващото съдържание в полето Widget content. 

<span class="mokka-widget-price">
<span>от</span> <strong>%installment_amount%</strong>/мес.
</span>
<div class="mokka-group">
<div class="mokka-widget-logo">
<i class="icon icon-logo"></i>
</div>
<div class="mokka-widget-divider"></div>
<div class="mokka-widget-description">плати, както поискаш</div>
<span class="mokka-widget-popup-trigger">
<i class="icon icon-question"></i>
</span>
</div>

 

Съвет: Ако на продуктовата страница уиджетът не се визуализира добре, в реда <div class=mokka-group>, добавете "style="transform: scale(0.8);". Или заменете целия код с поместения по-долу: 

<span class="mokka-widget-price">
<span>от</span> <strong>%installment_amount%</strong>/мес.
</span>
<div class="mokka-group" style="transform: scale(0.8);>
<div class="mokka-widget-logo">
<i class="icon icon-logo"></i>
</div>
<div class="mokka-widget-divider"></div>
<div class="mokka-widget-description">плати, както поискаш</div>
<span class="mokka-widget-popup-trigger">
<i class="icon icon-question"></i>
</span>
</div>

• Popup content - съдържание на попъпа, който се визуализира при клик на иконката с въпросителен знак в уиджета на Mokka. Ако сте избрали уиджетът да е видим, копирайте HTML кода, поместен по-долу и заместете с него съществуващото съдържание в полето Popup content. 

<h3>НАСЛАДИ СЕ, ПЛАТИ НА ЧАСТИ</h3>
<strong>Вземи днес всичко, от което се нуждаеш, плати на части по-късно за период от %minimum_loan_months% до %maximum_loan_months% месеца, от 0 лв./мес. след 30 дни. Минимална стойност на поръчка: %minimum_order_value% лв.
</strong>
<ul class="mokka-popup-advantages">
<li>
<div class="mokka-popup-advantage-img-block">
<img src="%icon_info_1%" alt="Регистрирай се директно от магазина и виж своята сума Mokka. Без чакане, без документи!">
</div>
<div class="mokka-popup-advantage-description">
<p>
Регистрирай се директно от магазина и виж своята сума Mokka. Без чакане, без документи!
</p>
</div>
</li>
<li>
<div class="mokka-popup-advantage-img-block">
<img src="%icon_info_2%" alt="Fill your cart and choose “Напълни количката с продукти и избери “Mokka - купи сега, плати после” като начин на плащане.” at check-out">
</div>
<div class="mokka-popup-advantage-description">
<p>
Напълни количката с продукти и избери “Mokka - купи сега, плати после” като начин на плащане.
</p>
</div>
</li>
<li>
<div class="mokka-popup-advantage-img-block">
<img src="%icon_info_3%" alt="Избери удобен период за плащане и плащай на равни месечни части. Без скрити такси и комисионни.">
</div>
<div class="mokka-popup-advantage-description">
<p>
Избери удобен период за плащане и плащай на равни месечни части. Без скрити такси и комисионни.
</p>
</div>
</li>
</ul>

• Remove double widget = в случай, че уиджетът на Mokka се показва два пъти на едно и също място в онлайн магазина, изберете опцията 'Enabled' 
• Widget visibility on cart summary - настройка за показване на уиджета нa Mokka при завършване на поръчката, когато се визуализира общата сума на поръчката.  

Mokka - настройка на модул за плащане на части

Последната стъпка от конфигурацията е да финалната активация на стиловете на модула за онлайн магазина си. 

1. Админ панел > Подобряване > Плащане > Mokka settings

От административния панел, отидете в секция 'Подобряване', меню 'Плащане', подменю Mokka Settings. 

2. На страницата, преместете слайдера до полжение 'Enabled'

3. Запазете  промените с клик на бутона 'Save' в долната дясна част на страницата. 

Тестване на модул Mokka в онлайн магазини, базирани на PrestaShop

Тестване в тестови режим

Важно! Тестването на модула на Mokka в тестова среда в реалния онлайн магазин трябва да се извършва извън активните часове за клиентите на електронния магазин, тъй като заявките, изпратени в тестови режим, не се обработват от Mokka. Съветваме, веднага след приключване на тестовете, да активирате продукционен режим на модула.  

Тестването на модула на Mokka за PrestaShop в тестови режим става по следния начин: 

1. Админ панел > Подобряване > Плащане > Mokka Merchnats

Трябва да добавите два търговеца - един с данните за продукционна среда и един - с данните за тестова среда, които ще ви бъдат изпратени от страна на Mokka. 

За да правите тестовете на тестова среда, попълнете данните за двата записа, както е описано по-долу: 

1.1. Търговец с данни за продукционна среда (в активен тестови режим)

• API store ID = Store ID, изпратен от Mokka
• API store secret key = Secret Key, изпратен от Mokka 
• API Base URL address = Base URL, изпратен от Mokka
• Name = име на партньора, 
• Test mode merchant = Disabled 
• Active = Disabled

След като направите всички промени, натиснете бутона "Save"

 

1.2. Търговец за тестова среда (в активен тестови режим)

• API store ID = Store ID (test mode), изпратен от Mokka
• API store secret key = Secret Key (test mode), изпратен от Mokka 
• API Base URL address = Base URL (test mode), изпратен от Mokka
• Name = име на партньора, с добавена дума Тест, или друго, така че да е лесно разпознаваемо, че е за тестовата настройка (използва се само вътрешни цели)
• Test mode merchant = Enabled
• Active = Enabled

След като направите всички промени, натиснете бутона "Save"

 

2. Админ панел > Подобряване > Плащане > Mokka Shop Configurations > API Settings

Промените за включване на тестови режим са само в полетатат в секция API Settings, както е описано по-долу:

• Active = Enabled
• Test mode merchant = Enabled
• Select Merchant = избирате името на търговеца за продукционна среда
• Select Merchant (test mode) = избирате името на търговеца за тестова среда

След като направите всички промени, натиснете бутона "Save"

 

3. Тестване в онлайн магазин

След като сте запазили всички промени, преминете към онлайн магазина. 

3.1. Добавете един или няколко продукта към количката

3.2. Преминете към плащане

3..3 Въведете лични данни за клиента

• в полето за телефонен номер, изберете номерът, изпратен за тестови цели от Mokka

3.4. Изберете начин за доставка

3.5.  На страница "Плащане", изберете платежен метод Mokka и потвърдете изпращане на поръчката

3.6. Завършете поръчката с Mokka

• уверете се, че в попъпа е предварително попълнен тестовия телефонен номер, изпратен от Mokka и преминете към следващата стъпка
• въведете SMS код = 1111
• ако сте избрали телефонен номер за нов клиент на Mokka, попълнете регистрационната форма
• изберете план за плащане и завършете поръчката.  

Изключване на тестови режим и преминаване към продукционна среда

След като сте приключили тестовете в тестови режим, трябва да изключите тестовия режим и да преминете към активиране на платежен метод Mokka в реален режим на работа.

Стъпките за това са описани по-долу: 

1. Админ панел > Подобряване > Плащане > Mokka Merchnats

След като отворите меню Mokka Merchants, ще видите двата търговеца, които сте добавили - за тестови и за продукционен режим. 

1.1. Редакция на търговец за продукционен режим. 

• На реда с търговеца, чиито данни са за продукционна среда, кликнете бутона 'Edit'

• променете само настройката Active = Enabled
• Натиснете бутона "Save"

1.2. Редакция на търговец за тестови режим

• На реда с търговеца, чиито данни са за тестова среда, кликнете бутона 'Edit'

• променете само настройката Active = Disabled
• Натиснете бутона "Save"

2. Админ панел > Подобряване > Плащане > Mokka Shop Configurations > API Settings

• Отворете страницата Mokka Shop Configurations
• Променете настройка Test mode merchant = Disabled
• Натиснете бутона "Save"