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
● iziGetPayData
● iziMobileLink

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 (deprecated))

The method will be deleted soon. Please implement iziGetPayData.

Retrieves data required to pair carts. The prefix and phoneNumber parameters are optional. Calls with 1 parameter are used to obtain the qr code. Calls with
 all 3 parameters are used for pairing with a phone number.

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

iziGetPayData

Retrieves data required to pair carts. The prefix and phoneNumber parameters are optional. Calls with 1 parameter are used to obtain the qr code. Calls with all 3 parameters are used for pairing with a phone number.

function iziGetPayData(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": {
"browser_trusted": boolean,
"browser_id": "string",
},

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

iziGetOrderComplete

The method called after pairing the cart and on each page with the already paired cart. Waits fot the end of the order in the app or refreshing of the page. In response, we receive a thank you page url with thanks for shopping or information about refreshing the page.

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;
}

iziMobileLink

The method used to download the deeplink (for an already paired cart) used to transfer to the mobile application.

function iziMobileLink() {
return Promise.resolve({
link: 'string'
})
}

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}</>;
};