Installation Guide - Embedded Mode
To seamlessly embed Paybis widget into your web application, follow these instructions:
- 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>
- 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>
- 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 thewindow.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.
Updated 14 days ago