Payment Widget

Въведение

Скриптът Payment Widget (Платежен уиджет) - това е low code скрипт, който позволява да се поместят бутони Apple Pay и Google Pay на страницата на магазина на продавача - на страниците за продукти и/или в количката на купувача. Това позволява на клиента да оформи поръчка с един клик на поддържаните устройства без излизане от вашия домейн.

Проблем, който предлагаме да решим

Дългите многоетапни оформяния на поръчки и формите за въвеждане на данни за карти с ниска конверсия влияят негативно на приходите. Намаляването на стъпките и задържането на купувачите на страницата повишава показателя за завършване и доверието.

За нашето решение

Вграждайте платежния уиджет там, където намерението на купувача е най-високо (например, на страницата за продукт), за да заобиколите количката и да завършите плащането с помощта на защитен вграден портфейл. Без външни пренасочвания. Типичното настройване отнема по-малко от един ден.

Основни предимства

• Плащане на страницата: купувачите извършват плащане, без да напускат вашия сайт
• Вградени портфейли: Apple Pay и Google Pay "из кутията"
• Готово за SCA/PSD2: 3DS2 се обработва автоматично за картови транзакции, когато това се изисква от вашия еквайър
• Low-code интеграция: drop-in скрипт (бързо свързващ скрипт), минимална конфигурация
• Намален обхват на PCI: данните за карти никога не попадат на вашите сървъри
• Гъвкави настройки и елементи на потребителския интерфейс: поставяне, сума, валута, известия за обратно повикване, стилове и др.
• Просто потвърждение на домейн Apple: стъпка по стъпка зареждане на един файл
• Бърз процес на интеграция: по-малко от 1 ден

Свързване на скрипта

Добавяне на файл

На страницата на продавача вътре в тага <head> е необходимо да се добави връзка към файла pay-buttons.js.

Скриптът pay-buttons.js трябва да се намира в папката pay-buttons, на същото ниво, като папката merchants (със платежните страници).

При обявяването на скрипта задължително трябва да бъде указан id="pay-buttons".

<head>
  ...
  <script
    src="https://uat.dskbank.bg/payment/pay-buttons/pay-buttons.js"
    id="pay-buttons">
  </script>
  ...
</head>

Инициализация

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var widget = payButtonsWidget("containerId"); // където `containerId` — id на DOM-елемента, където ще бъдат добавени бутоните

    widget.init({
      gatewayInfo: { // Информация за шлюза
        token: "i29v9o5hkmuv2590l7661p9vcu", // Токен на продавача в MP2
        amount: 852300, // Сума на поръчката в стотинки (или в минорни единици)
        returnUrl: "http\:\/\/yourwebsite.com\/success.html", // Целеви адрес след плащане
        merchantLogin: "buttonApple",
      },

      applePay: { // Информация за ApplePay сесия
        merchantId: "yourwebsite.com", // идентификатор на търговеца в Apple
      },

      googlePay: {
        environment: "TEST",
      },
    });
  });
</script>

Параметри за инициализация

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

Параметри на блок cartItems

Пример за блок cartItems:

[
  {
    name: 'Pen',
    quantity: {
        value: 1,
        measure: "pcs"
    },
    itemAmount: (totalAmount * 100) / 2,
    itemCurrency: "643",
    itemCode: 'no_1'
  },
  {
    name: 'Cheese',
    quantity: {
        value: 1.4,
        measure: "kg"
    },
    itemAmount: (totalAmount * 100) / 2,
    itemCurrency: "643",
    itemCode: 'no_2'
  }
]

Параметри на обект gatewayInfo

По-долу са посочени параметрите на блока billingPayerData (данни за адреса за регистрация на клиента).

Описание на параметрите на обект shippingPayerData:

Описание на параметрите на обекта preOrderPayerData:

Описание на параметрите на обект orderPayerData.

Описание на параметрите в обекта orderBundle:

Описание на параметрите в обект customerDetails:

Описание на параметрите в обекта deliveryInfo:

Описание на параметрите в обекта cartItems:

Описание на параметрите в обект items:

Описание на параметрите в обект quantity:

Описание на параметрите в обекта itemDetails:

Описание на параметрите в обекта itemDetailsParams:

Параметри на обекта applePay

Повече информация може да се намери в конструктора на бутона https://applepaydemo.apple.com/

Ример paymentRequest:

{
  countryCode: 'BG',
  currencyCode: 'BGN',
  supportedNetworks: [
    'masterCard',
    'visa',
    'electron',
    'maestro'
  ],
  merchantCapabilities: [
    'supports3DS',
    'supportsCredit',
    'supportsDebit'
  ],
  total: {
    label: '',
    amount: 1.00 // major units
  },
  requiredShippingContactFields: [
    'postalAddress',
    'name',
    'phone',
    'email'
  ]
}

Параметри на обекта googlePay

Генератор на код

Можете също бързо да генерирате код за инициализиране на скрипта Payment Widget в Личния кабинет. За това преминете към раздела Бързи бутони -> Генератор на код във вашия Личен кабинет.

Тази страница има конструктор, който изглежда по следния начин:

Разделът включва следните секции за задаване на параметри за инициализиране на скрипта:

• Общи настройки - посочете обща информация за регистрация на поръчката в Платежния шлюз:
  • Включи плащане чрез Apple Pay и/или Google Pay,
  • Номер на поръчка,
  • Сума (задължително),
  • Валута (изберете от списъка),
  • Език (изберете от списъка),
  • Среда (тестова или работна)
  • Страница за успешно плащане и Страница за неуспешно плащане (посочете URL или изберете стандартен URL).
• Заявка за потребителски данни - посочете данните, които ще бъдат задължителни по време на плащането чрез PaymentRequest API за Google Pay. Поставете съответните отметки: Име, E-mail, Номер на телефон, Пощенски адрес.
• Настройки на платежните бутони - посочете типа на външния вид и стила на бутоните Apple Pay и Google Pay. В раздела е достъпен предварителен преглед на бутона.
• Код за вмъкване на вашата страница - тази секция съдържа предварителен преглед на кода за инициализиране на скрипта в съответствие с посочените параметри. Този код трябва да се вмъкне на вашата страница.

Поддръжка от браузърите

Тестване и внедряване

Тестов стенд (UAT)

Свържете скрипта с адрес https://uat.dskbank.bg/payment/.

<script
  src="https://uat.dskbank.bg/payment/pay-buttons/pay-buttons.js"
  id="pay-buttons">
</script>

Продуктивен стенд (PROD)

Свържете скрипта с адрес https://uat.dskbank.bg/payment/.

<script
  src="https://epg.dskbank.bg/payment/pay-buttons/pay-buttons.js"
  id="pay-buttons">
</script>