Installation Guide - Embedded Mode

To seamlessly embed Paybis widget into your web application, follow these instructions:

1. 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>

2. Create a Container Element: Add an empty HTML element (e.g., a <div>) in your HTML where you want the widget to be embedded. Give this element a unique ID so you can reference it later.

<div id="paybis-widget-container"></div> 

3. Open Widget in Embedded Mode: Once the script is loaded, you can call the window.PartnerExchangeWidget.openInEmbed method to render the widget within the specified container element.

window.PartnerExchangeWidget.openInEmbed(
  { requestId: '<generated unique requestId>' },
  document.getElementById('paybis-widget-container') 
);

Important Considerations:

• Ensure SDK is Loaded: Make sure the PartnerExchangeWidget is fully loaded before calling any SDK methods. You can check this using the window.PartnerExchangeWidget.isLoaded property.
• Styling: You can style the container element using CSS to control the dimensions and appearance of the embedded widget.

By following these steps, you can integrate Paybis widget into your web application in embedded mode, providing a user-friendly experience for your customers.

📘

Refer to the complete Widget JS SDK documentation for additional methods, events, and customization options.