Versions Compared

Version Old Version 8 New Version 9
Changes made by

Michał Machowski

Michał Machowski

Saved on

Key

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

Widget InPost Pay dostarcza możliwość parowania koszyków zakupowych w sklepach z aplikacją InPost Mobile. Warstwa frontend dostarczona jest w formie wtyczki JavaScript do osadzenia na stronie oraz niniejszej dokumentacji.

Do poprawnej integracji wymagane jest dostarczenie warstwy backend, osaczenie html wtyczki, oraz sterowanie stanem warstwy frontend poprzez dostarczenie opisanych poniżej metod.

Lista metod które należy zaimplementować w celu używania wtyczki: 1.

  • iziGetBindingData

2.

  • iziGetIsBound

3.

  • iziGetOrderComplete

4.

  • iziBindingDelete

  • iziCanBeBound

Na tej stronie

Table of Contents

Pobranie skryptu

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

Osadź go na swojej stronie przez:

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

Osadzenie html

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

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

Parametr

Opis

name

imię Imię kupującego, wypełnij jeśli koszyki są sparowane.

data-product-id

id ID produktu, wymagane jeśli przy parowaniu chcesz dodać produkt o podanym id do koszyka.

masked_phone_number

zamaskowany Zamaskowany numer telefonu, wymagane jeśli koszyki są sparowane.

variant

Wariant wyglądu przycisku. Do wyboru “secondary” bądź “primary”.

basket

Określa czy przycisk znajduje się na stronie koszyka. Dopuszczalna wartość “true”.

dark_mode

tryb wyświetlania widgetu: details, cart, order, mini-cart, order-summaryOkreśla tryb wyświetlania. Dopuszczalna wartość “true”.

count

Określa inicjalną liczbę produktów do wyświetlenia w koszyku.

iziGetBindingData

Pobiera dane potrzebne do parowania koszyków.

Parametry

id - identyfikator produktu

Zwraca

Promise

Wartość

dane Dane z zapytania backend Basket App basket-app/api/v1/izi/basket/{basketId}/binding

Code Block
languagehtml
function iziGetBindingData(id) {
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.

Parametry

brak

Zwraca

Promise

Wartość

dane Dane otrzymane od Basket App na zapytanie /inpost/v1/izi/basket/{basketId}/confirmation

Code Block
languagehtml
function iziGetIsBound() {
return Promise.resolve({
"phone_number": {
"country_prefix": "string",
"phone": "string"
},
"browser_trusted": boolean,
"name": "string",
"surname": "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. W odpowiedzi dostajemy url strony typu thank you page z podziękowaniem za zakupy.

Parametry

brak

Zwraca

Promise

Wartość

{redirect: ‘url’}

Code Block
languagehtml
function iziGetOrderComplete() {
return Promise.resolve({
redirect: 'string'
})
}

iziGetOrderComplete

iziBindingDelete

Metoda wywoływana przy usuwaniu parowania.

Parametry

brak

Zwraca

Promise

Wartość

void

Code Block
languagehtml
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.

Parametry

productId - identyfikator produktu

Zwraca

Boo

Wartość

true || false

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

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:

Code Block
languagehtml
window.handleInpostIziButtons();

Poniżej przykład dla komponentu ReactJs:

Code Block
languagehtml
import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";
export...= ({ children }) => {
const location = useLocation();
useEffect(() => {
window.handleInpostIziButtons();
}, [location]);
return <>{children}</>;
};