Widget - frontend [ENG]

The InPost Pay widget offers coupling shopping baskets at stores with the InPost Mobile application. The frontend layer is delivered in the form of a JavaScript plug for embedding on the website, and of this documentation.

A correct integration requires providing a backend layer, html embedding of the plug, and control over the status of the front-end layer by providing the methods described below.

A list of methods to be implemented by the merchant's backend, in order to use the plug:

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

Script download

The script of the plug is available at: https://izi.inpost.pl/inpostizi.js https://izi.inpost.pl/inpostizi.js

Embed it in your website by:

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

Html embedding

In order to display the widget, embed the following code in html:

<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

Downloads the data necessary to pair baskets. The prefix and phoneNumber parameters are not compulsory. The calls with 1 parameter are used to procure a qr code. The calls with all 3 parameters are used to pair using a phone number.

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

iziGetIsBound

Calls after displaying a qr code or a deep link in order to check whether the coupling was successful. On the developer's side, the communication must be handled so that the server is not loaded too much by applying websocket orr long pooling.

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

},
"browser_trusted": boolean,
"name": "string",
"surname": "string"
});

}

iziGetOrderComplete

The method called upon pairing a basket and on each page with a basket already paired. Looks for the finish of ordering in the app. As a reply, we get the URL of a page such as thank you page with a thank you for the purchase message.

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

iziBindingDelete

The method called at pairing removal.

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

iziCanBeBound

The method determines whether or not the product may be added to the basket and paired. Used for variable products in order to determine whether or not the product parameters have already been specified.

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

iziAddToCart

The method used to add a product after clicking on the widget.

async function iziAddToCart(id) {
return void;
}

SPA

The plug has been developed for use with SPA applications. For the purpose of integrating the store with InPost Pay, the initiation of the Pay button must be handled within the app's life cycle.
Upon its first loading, the script automatically initiates all the instances of <inpost-izi-button/> W found in the code to initiate the widget after DOM update
use the method:

window.handleInpostIziButtons();

Below is an example for the ReactJs component:

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

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