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>
Parameter | Description |
| The buyer's forename, enter if the baskets are paired. |
| Product ID, required when you want to add a product with the stated ID to the basket at pairing. |
| Masked telephone number, required if the baskets are paired. |
| Button appearance variant. " |
| It determines whether or not the button is located on the basket's page. Acceptable value " |
| Specifies the display mode. Acceptable value " |
| Specifies the initial number of products to be displayed in the basket. |
| Specifies where the bind occurs. This information goes to Available options are:
|
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.
Parameters |
|
Returns | Promise |
Value | Data from backend query |
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.
Parameters |
|
Returns | Promise |
Value | data from the backend query |
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.
Parameters | none |
Returns | Promise |
Value | Data obtained from InPost Pay to the inquiry |
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.
Parameters | none |
Returns | Promise |
Value | { action: ‘redirect’ | ‘refresh’ redirect?: ‘url’} |
function iziGetOrderComplete() {
return Promise.resolve({
action: 'string'
redirect: 'string'
})
}
iziBindingDelete
The method called at pairing removal.
Parameters | none |
Returns | Promise |
Value | void |
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.
Parameters |
|
Returns | Bool |
Value | true || false |
function iziCanBeBound(productId) {
return true || false;
}
iziAddToCart
The method used to add a product after clicking on the widget.
Parameters |
|
|---|---|
Returns | void |
Value |
|
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.
Parameters | none |
|---|---|
Returns | Promise |
Value | { |
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}</>;
};