Did you know that you don't have to redirect your customers out from your site to our payment page? You can display the hosted payment page in an embed frame within your site page itself. Just customize our hosted payment page to be compatible with your site and design and use our Framed feature to no redirect your customers ever.


To know more about customizing your payment page, please check our "How to customize the PayPage (Hosted Payment Page) UI?" solution article.


Be aware that ApplePay, SamsungPay, and Tappy payment methods DO NOT operate in the iFrame mode


In this article you will be going to know about:


What is the iFrame?


The iFrame (Inline Frame) is an HTML structure that allows another document to be inserted into the current page. Paytabs allows using iFrame with some payment methods and via some integration methods.


How can this feature help?


It will help the merchants who want to keep customers within their online store for the whole shopping process without redirecting them out and back from their site. and that's for two main reasons.

  • Look and Feel 

    The Paytabs payment page can be customized to have the look and the feel to be like your online store. The payment page will still have a different URL, and it will operate the same way as hosted payment pages operate.
  • Avoid redirecting technical issues

    For example, The SameSite Cookie issue which for some language/frameworks loses the session (the session is cleared) once the customer leaves your online store and is redirected back to it.

What are the payment methods that support the iFrame mode?


Unfortunately, not all payment methods support this feature due to their business/security flow. So here are the payment methods that support this feature. If you want a specific payment method that is not listed below, you will have to use our hosted payment page with redirecting mode.


  • All Type Credit Cards (such as MasterCard, Mada, Meeza ... etc)
  • UnionPay
  • STC Pay
  • ValU
  • Meeza QR
  • Aman

How to apply this feature within my integration method?

PT2 API endpoints


You can enable this feature by passing the "framed" parameter with true with some other optional parameters as shown below


Text

Description automatically generated

"framed": Indicates whether to preview the payment page within the current check our page instead of redirection or not. If true, previewing the redirect URL sent in the response in <iframe> html tag which will preview the whole payment page within this frame

"framed_return_top": Indicates whether to reload the whole page on redirections or just reload the current frame.

"framed_return_parent": Indicates whether to reload the main base (could be div or another iFrame tag) that contained the payment page framed element.


eCommerce Plugin


In case you want to activate this feature in your plugin, you may like to enable the iFrame option from our plugin configuration page. To know whether your desired plugin supports this option or not and how to enable it, please check your plugin name from our eCommerce Plugins solution article's category, and navigate to the iFrame under the "What are Paytabs plugin configuration options?".


If there's not such title under the "What are Paytabs plugin configuration options?", then this option is not supported yet in this plugin.



Mobile SDKs


By default, there are no redirections at all in all PayTabs provided SDKs. Only some APMs (Alternative Payment Methods) such as Aman, KNet, ... etc has to redirect the customer to their internal payment page.