Custom Frontend Integration: Technical Requirements

This page provides technical requirements and recommendations for integrating the Paybis widget across various environments — including web apps, mobile browsers, SPAs, and embedded webviews.

These recommendations are important if you're embedding the widget using a custom iframe (without the Web SDK).

Handling Payment Gateway Events

In the Paybis widget, Bridgerpay is used for certain payment providers, redirecting users to an external Payment Gateway iframe.

📘

While Paybis SDK handles these events seamlessly, for custom iframe integrations, event handling from the Partner's end is required to ensure smooth integration.

In custom iframe integrations, handle Payment Gateway by implementing a listener to capture the event, extracting the provided URL, and updating the iframe's src attribute for seamless redirection and payment completion.

const { data: eventData } = event;
const oData = typeof eventData === 'string' ? JSON.parse(eventData) : eventData;

if (oData.url && oData.event === '[bp]:redirect') {
  this.getIframe.setAttribute('src', oData.url);
  return;
}

Required iframe allow attribute values

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;" ></iframe>