Paypal image instead of text during checkout process

[kumcore]

Hello,

 

I am currently running WHMCS v5.2.16 and soon plan to upgrade to the latest v5.3.3. At the moment, during checkout process the text "Paypal" is displayed but how do I change it so that I can show the paypal image instead of the text?

 

Thanks.

[brian!]

you can use the code I posted at the thread below... you may have to tweak it a little if you're using a different order form template from those used in the thread, but the code should be fairly similar...

 

http://forum.whmcs.com/showthread.php?79511-How-to-replace-text-with-Paypal-logo-on-cart-checkout-page&p=356491#post356491

 

oh just spotted that I said I was going to do a user contribution and post the code for all the order forms - I never got around to doing that - it should be very easy (famous last words!), so i'll try and post that in the next 24 hrs.

Edited February 10, 2014 by brian!

[kumcore]

you can use the code I posted at the thread below... you may have to tweak it a little if you're using a different order form template from those used in the thread, but the code should be fairly similar...

 

http://forum.whmcs.com/showthread.php?79511-How-to-replace-text-with-Paypal-logo-on-cart-checkout-page&p=356491#post356491

 

oh just spotted that I said I was going to do a user contribution and post the code for all the order forms - I never got around to doing that - it should be very easy (famous last words!), so i'll try and post that in the next 24 hrs.

 

Thank you, Brian. I am little confused as to what code to be added or replaced as I am using the AjaxCart template. I will wait for your user contribution post that includes all orders forms (including AjaxCart). I looked at the 'viewcart.tpl' file in AjaxCart and I see the following but not quite sure how to replace it for the equivalent of you have already shown. Thanks a lot again for your help.

 

<h2>{$LANG.orderpaymentmethod}</h2>

<table width="100%" cellspacing="0" cellpadding="0">

<tr class="rowcolor1"><td>{foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" id="pgbtn{$num}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{$gateway.name}</label> {/foreach}</td></tr>

</table>

[brian!]

that's the right block - basically, you're just replacing {$gateway.name} with the {assign}{/if} block of code.

 

but don't worry about it, i'll go through all 8 forms tomorrow - i'm going to make a couple of changes to the code too... first by checking for available png, jpg and gif images (in that order - you can change the order) for each gateway; secondly, by moving the logo images to the main "images" folder rather than the template image folder - it occurred to me that using the previous code, you would effectively have to have duplicates of the logos in every template folder... this new way, there only needs to be one.

[brian!]

this is going to be delayed for another day as I'm getting Smarty errors with the new code... the code is fine, but support tell me the Smarty error should be fixed with a php upgrade on oour server (which I've scheduled for overnight) - so hopefully tomorrow, we'll be good to go.

[kumcore]

this is going to be delayed for another day as I'm getting Smarty errors with the new code... the code is fine, but support tell me the Smarty error should be fixed with a php upgrade on oour server (which I've scheduled for overnight) - so hopefully tomorrow, we'll be good to go.

 

Thanks, brian! Meanwhile, would it be possible for you to post the relevant code for the ajaxcart template?

[brian!]

Thanks, brian! Meanwhile, would it be possible for you to post the relevant code for the ajaxcart template?

well I didn't want to release it until I knew that it worked, so I needed to wait for the server issue to be corrected before I could test thoroughly.

 

i've finished the basic tutorial on this - http://forum.whmcs.com/showthread.php?85483-Tutorial-How-to-replacing-Payment-Gateways-(e-g-Paypal)-text-with-image-or-logo

 

but your specific code for ajaxcart is...

 

  <div class="cartbox">{foreach key=num item=gateway from=$gateways}
   <label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />
               {assign var="paylogo" value="images/`$gateway.sysname`.png"}
{if file_exists($paylogo)}
<img src={$paylogo} />
{else}
{$gateway.name}{/if}</label>
   {/foreach}</div>

it was too much hassle to code it for multiple graphics formats, so it just uses one - in this case, PNG, but that can be changed - instructions are in the tutorial.

[kumcore]

well I didn't want to release it until I knew that it worked, so I needed to wait for the server issue to be corrected before I could test thoroughly.

 

i've finished the basic tutorial on this - http://forum.whmcs.com/showthread.php?85483-Tutorial-How-to-replacing-Payment-Gateways-(e-g-Paypal)-text-with-image-or-logo

 

but your specific code for ajaxcart is...

 

  <div class="cartbox">{foreach key=num item=gateway from=$gateways}
   <label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />
               {assign var="paylogo" value="images/`$gateway.sysname`.png"}
{if file_exists($paylogo)}
<img src={$paylogo} />
{else}
{$gateway.name}{/if}</label>
   {/foreach}</div>

it was too much hassle to code it for multiple graphics formats, so it just uses one - in this case, PNG, but that can be changed - instructions are in the tutorial.

 

 

Brian: Thank you so much again for working on this to help with this issue for myself and hundreds of other people just like me.. It is an excellent tutorial and very easy to follow.

 

I tested the Ajaxcart code you provided but it seem to be NOT working for me... I am curious to know whether did you actually get it working on your server?

 

Here is the issue I am facing:

Although the paypal.png (lowercase file name and .png format) image is present in the "images" folder, the script refuses to display or find the image, instead the gateway text is always displayed (as before). When I try to include the full path to the image (like below) then neither the text or image is displayed (With the following script I have the browser shows it as an icon where the palypal image supposed to be as if the image is not found on the path i specified).

 

Any ideas? Any constraint on how big the image should be? Mine is 34(h)x88(w) pixels.

 

{foreach key=num item=gateway from=$gateways}

<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />

{assign var="paylogo" value="/home/myusername/public_html/whmcs/templates/orderforms/ajaxcart/images/`$gateway.sysname`.png"}

{if file_exists($paylogo)}

<img src={$paylogo} />

{else}

{$gateway.name}{/if}

</label>

{/foreach}

[brian!]

Brian: Thank you so much again for working on this to help with this issue for myself and hundreds of other people just like me.. It is an excellent tutorial and very easy to follow.

that's kind of you to say... by the end, I didn't know if it was easy to follow or not!

 

I tested the Ajaxcart code you provided but it seem to be NOT working for me... I am curious to know whether did you actually get it working on your server?

yes - all the screenshots for each order form template were taken today on the live site.

 

Here is the issue I am facing:

Although the paypal.png (lowercase file name and .png format) image is present in the "images" folder, the script refuses to display or find the image, instead the gateway text is always displayed (as before). When I try to include the full path to the image (like below) then neither the text or image is displayed (With the following script I have the browser shows it as an icon where the palypal image supposed to be as if the image is not found on the path i specified).

one point that I should have made clearer in the tutorial is the location of the images directory - I know I specifically mentioned it in a previous post in this thread, but not in the tutorial (now corrected!).

 

let's say you've installed your WHMCS @ http://www.yourdomain.com/whmcs'>http://www.yourdomain.com/whmcs - the "images" folder my code refers to would be at http://www.yourdomain.com/whmcs'>http://www.yourdomain.com/whmcs/images/

 

the URL link in the 'assign' code is always relative to where WHMCS is installed - so whether you installed WHMCS in your root folder (http://www.yourdomain.com) as I have, or as a subdirectory (/whmcs/), the assign link should work.

 

now, what you may have done is installed the image in the "images" folder within the order form template directory - there's nothing wrong with doing that (my original code did it that way) - though it could lead to some complications if you were using multiple order form templates on your site, but let's ignore that for now!

 

let's try two things - first, i'm going to assume you've actually put the image in the ajaxcart images folder - if that's the case, then the assign code should be as follows:

 

{assign var="paylogo" value="templates/orderforms/ajaxcart/images/`$gateway.sysname`.png"}

 

secondly, i'd like you to test if you can view the logo in the browser directly - so open http://www.yourdomain.com/whmcs'>http://www.yourdomain.com/whmcs/template/orderforms/ajaxcart/images/paypal.png

and see if the image is viewable.

 

i'm wondering if the image file got corrupted on upload - so it's there, but damaged.

 

Any constraint on how big the image should be? Mine is 34(h)x88(w) pixels.

that paypal image I used was 26x100 - it was the first one on Google Images that I thought looked appropriate!

 

let me know if it still doesn't work.

[kumcore]

now, what you may have done is installed the image in the "images" folder within the order form template directory - there's nothing wrong with doing that (my original code did it that way) - though it could lead to some complications if you were using multiple order form templates on your site, but let's ignore that for now!

 

That was it! I feel kinda stupid now for not paying attention to the path... I moved the paypal.png to the main "images" folder and it picked it up no problem. Problem solved!

 

I now have a new problem where the radio button is not properly aligned with the image (I love the way it is shown on your screenshots in the tutorial) but look at mine how bad it looks (see attached). Anyways, I may have to play with the css files to get it working properly. I thought I would mention it here in case you did anything special to get yours working perfectly... But, please don't spend anymore of your time to troubleshoot this issue.. you have already done enough.... I can't thank you enough already! Thank you once again!!!

 

[brian!]

actually I did use my custom theme, but i've just checked ajaxcart again in 'default' and it looks fine - however, if you look at it in 'portal' and 'classic', then it does seem raised... as you say, it's going to be a css issue - i guess either input radio, label or image.

[kumcore]

actually I did use my custom theme, but i've just checked ajaxcart again in 'default' and it looks fine - however, if you look at it in 'portal' and 'classic', then it does seem raised... as you say, it's going to be a css issue - i guess either input radio, label or image.

 

Thanks for the clarification. I am using the 'classic' theme. Anyways, I will fight with it to see if I can get it sorted out. Again, Thanks for all your help. Have a great weekend!!! Cheers.