We’ve struggled for years with our implementation of the LG U+ payment gateway on the Évasion mobile site. It relied on a popup window to process credit cards. The Facebook iOS in-app browser does support them, unlike some other apps like Kakaotalk that have disabled popups altogether in their in-app Safari.
However, LG U+ does not support that particular setup, and an ugly JS error alert would throw a non-UTF8, illegible message.
Turns out, there are several options for the integration of the payment gateway (which relies on a JS library to generate a payment link). This doesn’t seem to be documented, and the support desk didn’t have a solution for us. Here is what we found:
- <script language="javascript" src="https://xpay.lgdacom.net/xpay/js/xpay_crossplatform.js" type="text/javascript"></script>
- <script type="text/javascript">
- var LGD_window_type = "submit";
- function launchCrossPlatform(){
- lgdwin = open_paymentwindow(document.getElementById('LGD_PAYINFO'), 'service', LGD_window_type);
- }
- </script>
In the function open_paymentwindow() provided by LG U+, the third parameter LGD_window_type can be one of:
- iframe: overlays a lightbox in which the LG U+ payment takes place, not great for mobile, and breaks badly when the containing page is served over HTTP, but when it works, the overlay closes as the process finishes, and the user is forwarded to your payment confirmation page
- popup: the setup we had before, which works only on user actions (onClick), as a browser-triggered event like onLoad will likely be blocked by the browser, where your site remains open behind the payment window until it closes as the process finishes, and the user is forwarded to your payment confirmation page
- works on Android, and in Safari on iOS, but not in the in-app browser of most iOS apps (Facebook, KakaoTalk, Instagram, etc.)
- submit: the LG U+ payment pages are actually inserted after the caller page, and the user is redirected from the final LG U+ screen to your payment confirmation page
This last option is less fiddly, and supports the Facebook in-app iOS browser without any complaint. This makes sure that our ads on Facebook do not need an additional layer of email marketing or Criteo retargeting to actually result in purchases.