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?
- How can this feature help?
- What are the payment methods that support the iFrame mode?
- How to apply this feature within my integration method?
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
"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.