How to replace text with Paypal logo on cart/checkout page?

[xex]

Hello,

 

I want to replace the text for my payment gateway in my cart/checkout page but unfortunately WHMCS say that they cant give me a clue as to where and

 

how to do this no matter how much I beg or even after offering to pay them. I have asked a few guys on ODESK to help and they quote me 8+ hours of

 

work to do it for me! I am not a programmer but know it doesnt take that long. In fact, Im pretty sure if I knew where to put what code, I could do it

 

myself in a few minutes.

 

I have searched high and low in this forum for help and have seen people get it sorted out in 2007 and 2009 and 2010 but nothing recent. I tried to use

 

those solutions to clue myself into how to do it after WHMCS has changed so much but of course those solutions are based on old old version of

 

WHMCS so I havent had much luck.

 

Here is one that I thought might work-->

 

 

 

"Thanks to the tips above I was able to accomplish that and place the payment logos on my cart. Here's how I did it:

 

File: templates/orderforms/default/viewcart.php

 

Around line 165:

<p align="center">{foreach key=num item=gateway from=$gateways}<input type="radio" name="paymentmethod" value="{$gateway.sysname}"

 

id="pgbtn{$num}"{if $selectedgateway eq $gateway.sysname} checked{/if} /><label for="pgbtn{$num}">{$gateway.name}</label> {/foreach}</p>

Add the following code right after <label for="pgbtn{$num}">{$gateway.name}

<br />{if $gateway.sysname}<img align="center" src="images/{$gateway.sysname}.gif" />

{/if}

<br />

So it will look like:

<p align="center">{foreach key=num item=gateway from=$gateways}<input type="radio" name="paymentmethod" value="{$gateway.sysname}"

 

id="pgbtn{$num}"{if $selectedgateway eq $gateway.sysname} checked{/if} /><label for="pgbtn{$num}">{$gateway.name}<br />

{if $gateway.sysname}<img align="center" src="images/{$gateway.sysname}.gif" />

{/if}

<br /></label> {/foreach}</p>

Now upload your payment images to the whmcs/images folder. Name them according to the payment gateway name: paypal.gif, banktransfer.gif and so

 

on.

 

That's it!"

 

(here is that origianl post: http://forum.whmcs.com/showthread.php?8523-How-to-add-images-for-gateway-payments)

 

 

 

 

I found that there is no more viewcart.php, so looked inside of viewcart.tpl and found part of the code mentioned above and so tried to place code for my

 

image that roughly corresponded to the above solution but it didnt work. See the original code below which is on line 234 of viewcart.tpl, and then see

 

code after I tried putting my image code into it.

 

 

 

line 234

<p class="paymentmethods">{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} />{$gateway.name}</label><br />{/foreach}</p>

 

 

 

 

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

<p class="paymentmethods">{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} />{$gateway.name}<br />{if $gateway.sysname}<img align="center" src="images/{$gateway.sysname}paypal-logo-

 

new-nov2012_sm3.png" />{/if}<br /> </label><br />{/foreach}</p>

 

 

BTW, I had a logo replacing the text by adding the image code to the Payment Gateways are under Display name, but It stopped working after recent upgrades to WHMCS that force me to use the Force Subscriptions function. So that is no longer an option; Using Forced Subscriptions makes the logo disappear from the form completely.

 

 

 

Can anyone help me get this to work, or show me how you replaced the text with a logo if you were able to do this yourself?

 

I would really appreciate it.

 

Best regards,

Xex

[brian!]

eight hours? it took me 15 minutes... and i'm distracted watching a football stream at the same time!

 

the basic idea still works, but what is likely messing it up is the path to the images... it seems the orderforms were inside the templates in the old days... so what I suggest you do is move the logo images you want to use into the "images" folder inside the specific orderform directory you want to use... I assume you're using an order form based on "comparison".

 

try the following code...

 

<p class="paymentmethods">{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} />{if $gateway.sysname}<img src="templates/orderforms/{$carttpl}/images/{$gateway.sysname}.gif" />{/if}<br /> </label><br />{/foreach}</p>

then what you need to do is move/create images for each payment gateway and name them accordingly... so for Paypal, the logo file is paypal.gif etc - you can use png or jpg if you wish, just remember to adjust the above code.

[xex]

Hi Brian,

 

Thanks very much for your help. I am the farthest thing there is from a programmer. I just cut and paste really good.

 

Okay, so my order form is called:

 

customcomparison

 

 

and the image file is:

 

paypal-logo-new-nov2012_sm3.png

 

 

my file tree is attached below.

 

 

 

I only have one payment gateway (Paypal). Does this look right?

 

<p class="paymentmethods">{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} />{if $gateway.sysname}<img src="templates/orderforms/customcomparison/{$carttpl}/images/{$gateway.sysname}paypal-logo-new-nov2012_sm3.png" />{/if}<br /> </label><br />{/foreach}</p>

 

 

Thanks again.

 

Best regards,

Tres

[brian!]

Hi Tres,

 

I just checked out your website and see that you only have Paypal as a payment option - hence why you only asked about changing Paypal I guess.

 

so my previous answer still applies to anyone else who is using more than one payment module - if you were to add another payment option to your website, you'll have to go with the previous answer and rename the images files accordingly.

 

however, as you're only using Paypal, you can get away with using your long filename!... but you've edited the path wrong to the image file... it should be one of the two below - either should work...

 

<img src="templates/orderforms/{$carttpl}/images/paypal-logo-new-nov2012_sm3.png" />

 

or

 

<img src="templates/orderforms/customcomparison/images/paypal-logo-new-nov2012_sm3.png" />

personally, i'd go with the first, but either should be ok.

[xex]

Hi Brian,

 

Sorry, I'm in Japan so our hours are lopsided, thus my late reply. I had already crashed by the time you responded again.

 

 

Wow! You are a frikkin genius! at least to me that little path change you made was like Sumerian to me. Thank you SO much for sorting me out. It worked like a charm as you can see: https://www.xex.asia/billing/cart.php?a=view

 

After the begging and trial and error and worrying about it, you sure made it seem so easy.

 

If I can help you out somehow (I am pretty good at graphics and ebook-related stuff if you have the need) or if you need a VPN account, its on me. Just let me know. tres at our domain name.

 

Best regards,

Tres

[brian!]

Hi Tres,

 

i'm happy to have helped... looking at the site, it looks good with the paypal logo there.

 

thank you for your kind offer too, I don't think I need a VPN at the moment - but i'll make a note to contact you if I ever do!

 

Brian

[xex]

Hi Brian,

 

You are a saint.

 

It looks good thanks to you.

 

Do let me know if you change your mind. You have a free pass waiting.

 

best regards,

Tres

[nordichost]

Well, what do you do if you have more then 1 payment gateway? What if you have the paypal, wiretransfer, and creditcard gateways enabled??

[brian!]

Well, what do you do if you have more then 1 payment gateway? What if you have the paypal, wiretransfer, and creditcard gateways enabled??

my code from the second post in this thread should work with any number of gateways - are you saying it doesn't ?

[nordichost]

no, but youre replacing a div class with a paragraph..

 

- - - Updated - - -

 

You can't just replace:

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

<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} /><label for="pgbtn{$num}">{$gateway.name}</label> {/foreach}</div>

 

with your code. It will not work.

[brian!]

no, but youre replacing a div class with a paragraph.. with your code. It will not work.

read the thread again - i'm replacing a paragraph with a modified paragraph... the original post was using the comparison order form and so the above code is for the comparison order form... which uses a paragraph!

 

not all order forms work the same way - and my telepathy is not powerful enough to automatically know that you're using another order form!

 

in any event, the idea behind the code (replacing text of gateway name with an image named after the gateway) is still correct, but would obviously have to be modified for the different order forms.

 

you seem to be using web20cart, so the basic code would be...

 

<h2>{$LANG.orderpaymentmethod}</h2>
<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} />
<img src="templates/orderforms/{$carttpl}/images/{$gateway.sysname}.gif" />
</label>
{/foreach}</div>

now assuming the images exist, are named after the gateway and all in the same format (in my example gif, but you could change that in the code to jpg or png - whichever suits your need), this will work.

 

web20cart doesn't appear to have an images folder, so you'll need to make that - or remove /images from the path and just put the logos in the web20cart order form folder...

 

it's late now, almost 2 in the morning!, so I may come back tomorrow and tidy the code to check that the image exists - if they do, display the logo; if not, display the gateway name as text... but the above code should work fine as is.

 

i'm sure you'll let me know if it doesn't!

[nordichost]

I will reply as soon as I have made the png files for it! The code looks solid, im pretty sure it will work!

[brian!]

here's the tweak to check whether the image exists and act accordingly...

 

<h2>{$LANG.orderpaymentmethod}</h2>
<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="templates/orderforms/`$carttpl`/images/`$gateway.sysname`.png"}
{if file_exists($paylogo)}
<img src={$paylogo} />
{else}
{$gateway.name}{/if}</label>
{/foreach}</div>

so, if the gateway logo image exists, it will be displayed - if it doesn't exist, the name of the gateway will be displayed instead... either way, a logo or text title should always be shown for each applicable gateway.

 

this could be expanded to check for .png, .jpg and .gif logos - but it's probably easier to make/convert all the images into the same format!

 

if I get the chance tomorrow, i'll write a quick user contribution on how to replace the gateway text with logos for all of the default order forms.

[brian!]

here is a link to the (delayed!) tutorial on how to do this for all of the order form templates.

 

http://forum.whmcs.com/showthread.php?85483-Tutorial-How-to-replacing-Payment-Gateways-(e-g-Paypal)-text-with-image-or-logo