Installation guide

The PNP SDK can be installed in two main ways:

• JS script injection: This method involves adding a reference to the PNP SDK CDN URL in your project's HTML file. This is the simplest way to install the PNP SDK.
• NPM Package: This method involves installing the PNP SDK as an NPM package in your project. This provides all of the features of the SDK, but it requires more setup than the JS injection integration method.

JS script injection

The plug&play wallets functionality can be included in the partner app through the injection of JS script. There are two examples for two environments.

Sandbox environment inject <https://wallets.sandbox.paybis.com/sdk/partner-wallets.js> script. Use it for testing and development purposes.

<script>
!function(){if(window.PartnerWalletsSDK=window.PartnerWalletsSDK||{open(e){window.partnerWalletsSettings={immediateOpen:e}}},"PartnerWalletsSDK"!==window.PartnerWalletsSDK.constructor.name){(()=>{const e=document.createElement("script");e.type="text/javascript",e.defer=!0,e.src="https://wallets.sandbox.paybis.com/sdk/partner-wallets.js";const t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()}}();
</script>

Production environment inject <https://wallets.sandbox.paybis.com/sdk/partner-wallets.js> script. Use it when integration is done and well-tested.

<script>
!function(){if(window.PartnerWalletsSDK=window.PartnerWalletsSDK||{open(e){window.partnerWalletsSettings={immediateOpen:e}}},"PartnerWalletsSDK"!==window.PartnerWalletsSDK.constructor.name){(()=>{const e=document.createElement("script");e.type="text/javascript",e.defer=!0,e.src="https://wallets.sandbox.paybis.com/sdk/partner-wallets.js";const t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()}}();
</script>

🚧

Please take special care during implementation! To call SDK methods, need to be sure that the PartnerWalletsSDK was loaded completely. To check that SDK is loaded, following condition may be used:

JavaScript

if (window.PartnerWalletsSDK && window.PartnerWalletsSDK.state) {
  // SDK is loaded and can be used safely
}

After that, SDK methods and properties can be called. For example, the window.PartnerWalletsSDK.open method, called with required sessionId and partnerProductId arguments will open the Application. Usage example:

window.PartnerWalletsSDK.open({
  sessionId: '<generated unique sessionId>', 
  partnerProductId: '<product id>',
});

🚧

For the pages that are rendered on a server, the app’s UI will be displayed immediately after the HTML page is loaded.

NPM Integration

To use plug&play wallets SDK from NPM package, need to add it to project via npm, yarn or pnpm. The sandbox version of SDK can be installed by specifying version after package name.

npm install @paybis/pnp-wallets-sdk@sandbox --save

yarn add @paybis/pnp-wallets-sdk@sandbox

pnpm add @paybis/pnp-wallets-sdk@sandbox --save-prod

To install latest production version, just don't add package version.

npm install @paybis/pnp-wallets-sdk --save

yarn add @paybis/pnp-wallets-sdk

pnpm add @paybis/pnp-wallets-sdk --save-prod

🚧

Project must use node version >= 18.0.0, and npm version >= 6.0.0 to ensure the build completes properly.

After package will be installed, import SDK into project.

import { PartnerWalletsSDK } from '@paybis/pnp-wallets-sdk';

The PartnerWalletsSDK is a class which have all features that SDK provide. To access to SDK methods, need to create new instance of PartnerWalletsSDK.

const sdkInstance = new PartnerWalletsSDK();

Use optional first argument to pass parameters (event handlers and / or customize loader).

const sdkInstance = new PartnerWalletsSDK({
  events: {
    onOpened: () => ({}), 
  },
});

After that, you can call the sdkInstance.open method any time after the script is injected on the page. The product’s UI will be rendered as soon as the Open method is called. Example:

🚧

For the pages that are rendered on a server, the app’s UI will be displayed immediately after the HTML page is loaded.

📘

Helpful Tip

Include the viewport meta tag in the HTML file where the plug&play wallets app is initialized to ensure optimal responsiveness across various screen resolutions:

HTML

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,interactive-widget=overlays-content">

JavaScript SDK

Constructor Arguments

Methods

Getters

Supported locales

Following list of locales can be used as value for locale argument: en, de, ru, it, fr, es, pt, ko

Supported state values

Plug&Play Wallets application may be in one of following state:

• initial, when SDK just been loaded
• startLoading, when Plug&Play application started to load
• loaded, when Plug&Play application is loaded
• completed, when certain transaction inside Plug&Play was completed
• rejected, when certain transaction inside Plug&Play was rejected
• cancelled, when user cancel transaction
• closed, when App requests to close, but iframe not removed yet
• terminated, when App was closed and iframe was removed

🚧

Application's state isn't available, when the Application opened in a new tab!