Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Модуль upc-payment.js дозволяє використовувати сервіс прийому платежів UPC e-Commerce Connect за допомогою інтеграції Java Script на вашій сторінці.

Для підключення актуальної версії модуля використовуйте наступний код:



Code Block
languagejs
themeDJango
<script src="https://secureecconnect.upccom.ua/checkout/pub/utils/upc-payment-sdk/upc-paymentspayment.js"></script>
<link rel="stylesheet" href="https://ecconnect.com.ua/pub/utils/upc-payment-sdk/upc-payment.css">


Прийом платежів за допомогою JavaScript API можна організувати наступним чином:

  • Окремою платіжною торінкою UPC
  • Окремим модальним вікном
  • В окремому html-елементі

Виклик платіжної сторінки UPC

Для виклику платіжної сторінки через JavaScript API, необхідно спочатку викликати:

Code Block
languagejs
themeDJango
UpcPayment({
    url: 'https://ecg.test.upc.ua/go/pay',
    payment: {
        Version: 1,
        MerchantID: "MerchantID",
        TerminalID: "TerminalID",
        locale: "ru",
        Signature: "Signature",
        Currency: 840,
        TotalAmount: 1,
        PurchaseTime: new Date().getTime(),
        OrderID: "OrderID",
        PurchaseDesc: "PurchaseDesc"
    }
})



Приклад платіжної сторінки:

Include Page
Приклад сторінки
Приклад сторінки


Зовнішній вигляд платіжної сторінки може бути брендований в різні стилі. Детальніше про брендування платіжної сторінки

Відкриття в модальному вікні


Це спосіб дозволяє використовувати так званий платіжний iFrame. Для відкриття в модального вікна потрібно зробити виклик з настройками через параметр options зі значенням modal: true. Також можливо для вказати висоту і ширину modalHeight і modalWidth відповідно.

Code Block
languagejs
themeDJango
UpcPayment({
    url: 'https://ecg.test.upc.ua/go/pay',
    payment: {
        Version: 1,
        MerchantID: "MerchantID",
        TerminalID: "TerminalID",
        locale: "ru",
        Signature: "Signature",
        Currency: 840,
        TotalAmount: 1,
        PurchaseTime: new Date().getTime(),
        OrderID: "OrderID",
        PurchaseDesc: "PurchaseDesc"
        },
        options: {
            modal: true,
            modalHeight: '500px',
            modalWidth: '700px'
        }
})

Приклад модального вікна на сторінці інтернет-магазину:






Warning
titleВажливо

Для включення сервісу прийому палатежей через iframe, зв'яжіться будь ласка з нашою підтримкою по ec@upc.ua із зазначенням інформації про домен (url-адресі сайту) на якому буде використовуватися ця можливість.



Відкриття в окремому html елементі

Цей спосіб дозволяє викликати платіжний iframe всередині існуючої сторінці, наприклад поруч з описом продукту. Для відкриття в окремому html елементі потрібно вказати в опціях wrapper обраний html element:

Code Block
languagejs
themeDJango
UpcPayment({
     url: 'https://ecg.test.upc.ua/go/pay',
     payment: {
         Version: 1,
         MerchantID: "MerchantID",
         TerminalID: "TerminalID",
         locale: "ru",
         Signature: "Signature",
         Currency: 840,
         TotalAmount: 1,
         PurchaseTime: new Date().getTime(),
         OrderID: "OrderID",
         PurchaseDesc: "PurchaseDesc"
     },
     options: {
         wrapper: document.getElementById('wrapper-pay'),
     }
})


Приклад платіжної сторінки в HTML елементі:


Параметри виклику UpcPayment

  • url - посилання на платіжну сторінку
  • payment - об'єкт платіжної форми
  • options - об'єкт конфігурації виклику


Параметри payment об'єкта

  • Version - версія
  • MerchantID - індентіфікатор торговця
  • TerminalID - індентіфікатор терміналу
  • locale - двозначний код мови платіжної сторінки
  • Signature - підпис платежу, формується на стороні торговця см. За посиланням
  • Currency - тризначний код валюти
  • TotalAmount - загальна сума платежу в копійках
  • PurchaseTime - час покупки в timestamp
  • OrderID - індентіфікатор замовлення
  • PurchaseDesc - опис покупки


Параметри options об'єкта

  • modal - boolean тип в сенсі true відображає платіжний iframe в модальному вікні
  • wrapper - HTMLElement де повинен відмалювати платіжний iframe
  • modalWidth - string, ширина модального вікна
  • modalHeight - string, висота модального вікна


Інтерфейси

Виклик функції UpcPayment


Tip
iconfalse

UpcPayment(params: UpcPaymentParamsI)


export interface PaymentFormI {

   Version: number;

   MerchantID: string;

   TerminalID: string;

   locale: string;

   Signature: string;

   Currency: number;

   TotalAmount: number;

   PurchaseTime: number;

   OrderID: string;

   PurchaseDesc: string;

}


export interface UpcPaymentOptionsI {

   modal?: boolean;

   wrapper?: HTMLElement;

   modalWidth?: string;

   modalHeight?: string;

}


export interface UpcPaymentParamsI {

   url: string;

   payment: PaymentFormI;

   options?: UpcPaymentOptionsI;

}



Tip
titleФормування підпису Signature

Детальна інструкція по формуванню підпису Signature в запитах - Формування підпису.