Installation guide

JS script injection

The widget functionality can be included in the partner app through the injection of JS script. Example:

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

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

You can call the window.PartnerExchangeWidget.open method with requestId any time after the script is injected on the page. The widget’s UI will be rendered as soon as the Open method is called. Example:

<script>
  !function(){if(window.PartnerExchangeWidget=window.PartnerExchangeWidget||{open(e){window.partnerWidgetSettings={immediateOpen:e}}},"PartnerExchangeWidget"!==window.PartnerExchangeWidget.constructor.name){(()=>{const e=document.createElement("script");e.type="text/javascript",e.defer=!0,e.src="/partner-exchange-widget.js";const t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()}}();
  window.PartnerExchangeWidget.open({
    requestId: '<genereated unique requestId>', 
  });
</script>

🚧

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

Widget JS SDK usage example

This approach can be used in cases where a partner website uses AJAX requests for communication between the client and server. It means that the website doesn’t reload the HTML to get the data, but uses Javascript for updating it. In that case, the PartnerExchangeWidget provides plenty of APIs for handling all possible cases.

🚧

Please take special care during implementation. To run this code, you need to be sure that the PartnerExchangeWidget was loaded completely.

Note the examples below illustrating the JavaScript SDK integration.

In your HTML code:

<script>
  !function(){if(window.PartnerExchangeWidget=window.PartnerExchangeWidget||{open(e){window.partnerWidgetSettings={immediateOpen:e}}},"PartnerExchangeWidget"!==window.PartnerExchangeWidget.constructor.name){(()=>{const e=document.createElement("script");e.type="text/javascript",e.defer=!0,e.src="/partner-exchange-widget.js";const t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()}}();
</script>

Or like so in your HTML code:

<button onclick="openWidget()">Transfer crypto</button>

Or inside of your own custom javascript code:

function openWidget() {
  // Pay attention that for this step partner already needs to have requestId
  window.PartnerExchangeWidget.open({
    requestId: '<genereated unique requestId>', 
  })
}

Helpful tips

1. Responsiveness

Include the "viewport" meta tag in the HTML file where the widget is initialized to ensure optimal responsiveness across various screen resolutions:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Permissions inside the iframe

Purchase flow in the Paybis widget involves the online payment and KYC verification process that requires access to the browser camera, microphone, and keyboard on the user's device. To ensure that the access permissions will properly work within the iframe, add the allow attribute with the following values when creating an iframe element:

<iframe src="[enter-your-url]" allow="clipboard-read; clipboard-write *; payment *; camera; microphone;" />

3. Enabling Apple Pay in Cross-Origin iFrames

To utilize Apple Pay within an iframe that's loaded from a different origin (website domain) than Partner's main application, allow="payment" attribute should be added to the <iframe> tag. This attribute signals to the browser that the iframe requires access to payment-related functionalities, including Apple Pay.
Example:

<iframe src="[enter-your-url]" allow="payment"></iframe>

By adding this attribute, the iframe is granted the necessary permissions to initiate and complete Apple Pay transactions, even when embedded in a cross-origin context.

📘

The allow="payment"attribute is a relatively new feature and may not be fully supported by all browsers (Safari 17 and later).

3. Google Pay and Apple Pay in WebView integration

In WebWiew integration, set the pb-mob-app cookie to true so that the Google Pay / Apple Pay popup triggers redirect to a regular mobile browser. This is required for Google Pay and Apple Pay to work properly in this integration type.

Javascript SDK options