Forum

I use this Pesapal wordpress plugin to help deliver digital products instantly when a payment goes through.
wordpress.org/plugins/pesapal-pay/

Unfortunately I have noticed a problem that the developer of the plugin tells me is an issue with how Pesapal has encoded a Div or table, when using a responsive site. This makes it impossible to make a purchase by mobile phone. I demonstrate it below.

My payment page for Pesapal is…
hem3.wpengine.com/order/

On a large screen it functions very well when you enter your names and email. You get ALL your instruction as visible. But when using a mobile phone size screen, one tends to lose the instructions after entering their names and email.

Below is the page as it would appear in a mobile phone…
mobiletest.me/samsung_galaxy_y_emulator/....wpengine.com/order/

If you enter dummy name and email, you will notice in the next page the instructions are truncated. It seems that the Div or Table has a fixed height, so it is not responsive.

Is it possible for someone fix this ASAP?

Looks like the iframe response is locked at 620 px or so ....

May be you could write your own CSS to override theirs and make it responsive.

Hey Ayesh, Mark,

The Iframe height is on your webpage, which you need to set based on the Screen resolution. You can either do this using Javascript or using CSS so that the Iframe adjusts to fit all items

Generally on
Large screens it should be about 650px
On Medium (Ipads/ Tablets) 850px
On Mobile should be atleast 1100px

Regards

Thats right, took a peek in my code and yes one can do so .. the part with the iframe is listed as .....

" width="100%" height="set height here" scrolling="no" frameBorder="0">
<p>Browser unable to load iFrame</p>

Mark,

hope you managed to....

MarkM, Ayesh...
Thanks for the help.
Talked to the plugin developer and he quickly upgraded the plugin.
Its now working like charm.
Guys i really appreciate

hi,
Am having a problem with the wordpress plugin on my wordpress site but the developers from wordpress are not helping me.
How did you sort it out. please contact This e-mail address is being protected from spambots. You need JavaScript enabled to view it.


$callback_url = $return_path; //redirect url, the page that will handle the response from pesapal.
$post_xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?><PesapalDirectOrderInfo >";
$post_xml = htmlentities($post_xml);

$consumer = new OAuthConsumer($consumer_key, $consumer_secret);
//post transaction to pesapal
$pp_post_url = $this->post_url;
$iframe_src = OAuthRequest::from_consumer_and_token($consumer, $token, "GET", $pp_post_url, $params);
$iframe_src->set_parameter("oauth_callback", $callback_url);
$iframe_src->set_parameter("pesapal_request_data", $post_xml);
$iframe_src->sign_request($signature_method, $consumer, $token);

$output = '';
$output .= '';
echo $output;
exit();

Hello,

Use the code below to display the iframe.

<iframe src="<?php echo $iframe_src;?>" width="100%" height="700px" scrolling="true" frameBorder="0">
<p>Browser unable to load iFrame</p>
</iframe>

Ensure that you:
1. Give the Iframe a height and not 100%.
2. Set the iframe sroll attribute as true. If the height given above is too small to display all elements of the iframe, the user gets the choice to scroll down.


Have a look at the following PHP example; developer.pesapal.com/forum/2-pesapal-in...-pesapal-php-example