Widget - frontend

Wtyczka InPost Pay umożliwia parowania koszyków zakupowych w sklepach internetowych Merchantów z aplikacją InPost. Warstwa frontend dostarczona jest w formie wtyczki JavaScript do osadzenia na stronie oraz niniejszej dokumentacji.

Do poprawnej integracji wymagane jest dostarczenie warstwy Merchant Backend API, osadzenie html wtyczki, oraz sterowanie stanem warstwy frontend poprzez dostarczenie opisanych poniżej metod.

Lista metod do zaimplementowania przez backend merchanta w celu używania wtyczki:  

● iziGetBindingData
● iziGetIsBound
● iziGetOrderComplete
● iziBindingDelete
● iziCanBeBound
● iziAddToCart

Pobranie skryptu

Skrypt wtyczki znajduje się pod adresem: https://izi.inpost.pl/inpostizi.js

Osadź go na swojej stronie przez:

<script src="https://izi.inpost.pl/inpostizi.js"></script>

Osadzenie html

W celu wyświetlenia widgetu należy osadzić w html poniższy kod:

<inpost-izi-button name="" masked_phone_number=""
data-product-id="" language="pl" variant="primary" basket="true"
dark_mode="true" count="5"></inpost-izi-button>

iziGetBindingData

Pobiera dane potrzebne do parowania koszyków. Parametry prefix orax phoneNumber są nieobowiązkowe. Wywołania z 1 parametrem służą do pozyskania kodu qr. Wywołania z wszystkimi 3 parametrami służą do parowania przy pomocy numeru telefonu.

function iziGetBindingData(id, prefix, phoneNumber, bindingPlace)
{
return Promise.resolve({
qr_code: 'string',
deep_link: 'string',
deep_link_hms: 'string',
});
}

iziGetIsBound

Wywoływana po wyświetleniu qr code bądź deep link w celu sprawdzenia, czy parowanie przebiegło pomyślnie. Po stronie developera należy obsłużyć komunikację tak, żeby nie obciążać zbytnio serwera przez wykorzystanie websocket bądź long pooling.

function iziGetIsBound() {
return Promise.resolve({
"phone_number": {
"country_prefix": "string",
"phone": "string"

},
"browser": {
"browser_trusted": boolean,
"browser_id": "string",
},

"name": "string",
"surname": "string"
"masked_phone_number": "string"
});
}

iziGetOrderComplete

Metoda wywołana po sparowaniu koszyka i na każdej stronie z koszykiem już sparowanym. Nasłuchuje na zakończenie zamówienia w aplikacji bądź odświeżenia strony. W odpowiedzi dostajemy url strony typu thank you page z podziękowaniem za zakupy bądź informację o odświeżeniu strony.

function iziGetOrderComplete() {
return Promise.resolve({
action: 'string'
redirect: 'string'
})
}

iziBindingDelete

Metoda wywoływana przy usuwaniu parowania.

function iziBindingDelete() {
return Promise.resolve();
}

iziCanBeBound

Metoda określa czy produkt może zostać dodany do koszyka i sparowany. Wykorzystywane przy produktach wariacyjnych w celu określenia czy parametry produktu zostały już określone.

function iziCanBeBound(productId) {
return true || false;
}

iziAddToCart

Metoda wykorzystywana do dodania produktu po kliknięciu w widget. Produkt zostanie
dodany tylko wtedy, kiedy parametr data-product-id" jest wypełniony.
Ważne: parowanie pustego koszyka nie jest możliwe.

async function iziAddToCart(id) {
return void;
}

SPA

Wtyczka przygotowana została z myślą o użyciu z aplikacjami SPA. W celu integracji sklepu z InPost Pay należy obsłużyć inicjowanie przycisku Pay w cyklu życia aplikacji.
Skrypt po pierwszym załadowaniu automatycznie inicjuje wszystkie znalezione w kodzie instancje <inpost-izi-button />. W celu inicjowania widgetu po aktualizacji DOM należy użyć metody:

window.handleInpostIziButtons();

Poniżej przykład dla komponentu ReactJs:

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

export...= ({ children }) => {
const location = useLocation();
useEffect(() => {
window.handleInpostIziButtons();
}, [location]);
return <>{children}</>;
};