Tutorial: How to replace Payment Gateways (e.g Paypal) text with image or logo (Updated July 2018)

[wp4all]

Hi MjHost,

either bring the pictures to the same size or work with css.

<-- serves only the estimation should not be taken over 1:1 -->

.png { width: 200px; height: 150px; }
.jpg {width: 100px; height: 400px; }

I would recommend the first version because rescaling has a negative effect on SEO and page performance.

Greetings Christian

[brian!]

22 hours ago, MJHost said:

Hi @brian!, just added your hook to my installation, all is well, I was just wondering if you know if its possible to define the image sizes? 

it is, but i'd go along with what Christian says about resizing the images - because almost certainly, all of the original logos are going to be sized differently anyway, so if you just blindly set a width in the hook (via css or html), then some of the logos may look weird.

the easiest thing to do is to obtain better logos, where resizing isn't really necessary in the code... the logos that you're using currently are not an ideal choice...

you may want to try going to a free icon resource site like flaticon.com and obtain logos for direct debit, bank transfer and PayPal from there... for example, I just got a direct debit logo from there and added it to the output in my dev...

you can choose multiple icon sizes from the site and download them... the above DD image is 64px, maybe it needs to be 128px - but whatever size you choose, they need to be roughly consistent for all icons.

[MJHost]

Thank you to you both. Much appreciated.

[steven99]

Just put the width and height tags in the <img section in that hook.  For example, best spot would be before the ">" but after the " so like:

$gateways[$key]['name'] = '<img src="'.$logo.'" alt="'.$gateway['sysname'].'" width="100" height="5000">';

[brian!]

15 hours ago, steven99 said:

Just put the width and height tags in the <img section in that hook.

I don't think that's a good solution - you might get away with it if the images are roughly the same size, but likely they won't be and this will look awful.

[kang28ivan]

Hi @brian!

How to apply to invoice page? I try apply to invoice page not working

<div class="form-group">
            {if $allowchangegateway}
            <form method="post" action="{$smarty.server.PHP_SELF}?id={$invoiceid}" class="form-inline">
              {$gatewaydropdown}
            </form>
            {else}
            {$paymentmethod}
            {/if}
          </div>

 

[wp4all]

Hi, 

is this Hook still working ? WHMCS Version --> Version: 7.7.1 | php 7.3

Hook:

<?php

# Cart Gateway Logos Hook
# Written by brian!

function hook_cart_gateway_logos($vars) {
    
    if ($vars['templatefile'] == 'viewcart') {
        $gateways = $vars['gateways'];
        foreach($gateways as $key => $gateway) {
            $logo = "assets/img/logos/".$key.".png";
            if(file_exists($logo)) {
                $gateways[$key]['name'] = '<img src="'.$logo.'" alt="'.$gateway['sysname'].'">';
            }
        }            
        return array("gateways" => $gateways);
    }
}
add_hook('ClientAreaPageCart', 1, 'hook_cart_gateway_logos');
?>

Error: 

Whoops\Exception\ErrorException: Cannot redeclare hook_cart_gateway_logos() (previously declared in /includes/hooks/gateway_logo.php:6) in /httpdocs/includes/hooks/test.php:6
Stack trace:
#0 /httpdocs/vendor/whmcs/whmcs-foundation/lib/Utility/Error/Run.php(0): WHMCS\Utility\Error\Run->handleError(1, 'Cannot redeclar...', '/var/www/vhosts...', 6)
#1 [internal function]: WHMCS\Utility\Error\Run->handleShutdown()
#2 {main}

Greetings Christian

[brian!]

Hi Christian,

52 minutes ago, wp4all said:

is this Hook still working ? WHMCS Version --> Version: 7.7.1 | php 7.3

that error implies that you have two different hook files trying to call the same function name (hook_cart_gateway_logos) - gateway_logo.php and test.php... so it's not an error with the code itself, it's your WHMCS installation trying to run two copies of it! 🙂

[wp4all]

Hi Brian,

you are right 😩 to many hooks on the Testsystem didn't read the error properly.

Thanks Christian

[steven99]

Just a quick note, make sure to put a alt tag or use a sr-only span to give screen readers (used by the blind) the same information as they wont be able to see the logos.  

[brian!]

9 hours ago, kang28ivan said:

How to apply to invoice page?

with difficulty! 🙂

this hook, even with minor modifications, wouldn't work on the View Invoice page because WHMCS handles the gateways differently on that page.

at checkout, there is an array for the hook to loop through; whereas on the invoice page, there isn't as WHMCS creates the entire dropdown code in the background and there is no equivalent array for the hook to work with.

there are at least three issues to overcome..

1. if the clients can choose their own gateway at the invoice stage, then there will be a dropdown of available gateways...
   
   natively, you can't use images in a dropdown - if you wanted to use images, you would likely need to replace it with a jQuery dropdown or by using a plugin like ddSlick... also, if you replaced the output with radio buttons instead of a dropdown (as per the checkout page), it could mess with the layout of the page and that might require template changes to fix it.
2. the dropdown currently triggers a gateway change and specific text/images to be shown - if you change the dropdown to radio buttons, then this functionality may be lost and required to be replaced.
3. if the clients CANNOT choose their own gateway, then there choice will be shown...
   
   it would be possible to replace this text with an image using a hook (or in the template), but whether it's really worth the effort, I don't know.

if you want my opinion, I would leave the dropdown in viewinvoice alone and keep it as is... if you want to change it, it's going to take some coding effort to do so. .. e.g you'd either have to take the existing variable apart, modify it and then rebuild... or recreate from scratch.

8 minutes ago, steven99 said:

Just a quick note, make sure to put a alt tag or use a sr-only span to give screen readers (used by the blind) the same information as they wont be able to see the logos.

the hook already includes an alt tag.

[wp4all]

Hi Steven,

yes, the alt="" name is not very original, eventually it should be completed with a logo text but at least there is already one 😉.

$gateways[$key]['name'] = '<img src="'.$logo.'" alt="'.$gateway['sysname'].'Logo">';

But thx 

Greetings Christian

 

[wp4all]

@ Brian! was faster 😋

[Talalkh]

Hello Brian! I have noticed your post related to payment gateways text/image replacement. I am a newbie in these customizations.

I have 2 payment gateways: PayPal and Voguepay.

I got 2 PNG images as requested. But I don't know where to add them and which css file I should edit etc..

Voguepay is an additional module that I have installed. It was not available for WHMCS by default.

I use the Modern theme.

I really hope you can assist me with that!

I also noticed another website who has the credit card module embedded. Will attach an image for you to check. I wonder if this can also be done and if you know how to do it.

[brian!]

21 hours ago, Talalkh said:

I got 2 PNG images as requested. But I don't know where to add them and which css file I should edit etc..

there's no need to edit any css files - as currently written in the hook, you need to upload the two images to /assets/img/logos/

/assets/img/ should already exist in your WHMCS install, so you just need to create a 'logos' folder and upload your images there.

21 hours ago, Talalkh said:

Voguepay is an additional module that I have installed. It was not available for WHMCS by default.

that shouldn't matter - you should just need to rename the logo file to the internal name of the gateway, i'm guessing that it's going to be 'voguepay' and if so, then the logo file should be 'voguepay.png' - but if it's not, then you can find out it's internal name from the source code in the browser.

21 hours ago, Talalkh said:

I use the Modern theme.

it's worth noting that the Modern theme hasn't been updated for years - so it's probably not a good choice of orderform template for the future... new features will be designed to work with standard cart, and there would be no guarantees that they would work with Modern.

the hook will work with Modern - though hopefully you shouldn't see that raised radio button with your two gateways! 🙂

21 hours ago, Talalkh said:

I also noticed another website who has the credit card module embedded. Will attach an image for you to check. I wonder if this can also be done and if you know how to do it.

that screenshot is from standard cart - Modern can do something similar...

but the output is dependent upon the  gateway's settings - stripe is a cc card and shows those fields; bank transfer isn't and so won't display those fields... I would imagine that Voguepay won't show those fields by default.

[ouldfella]

i must replace this code :

<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} /> {$gateway.name}</label>{/foreach}</div>

but where is it ?

how can i find it ?

[brian!]

cartbox? isn't that vertical steps?? it's like seeing an old friend again from a bygone era! 🙂

the checkout page in vertical steps would have been viewcart.tpl and so the above code should be in there.

that said, for any checkout page that uses the $gateways array, the hook should work... if this is a very old version of WHMCS, then ClientAreaPageCart might not exist, but you could use ClientAreaPage and limit it to the checkout page... though if the site I have bookmarked for you is still correct, then you don't use the $gateways array.

[Talalkh]

Hello @brian!

I am going crazy as images are not showing at all!

Please check the attached:

 

 

 

And the result is:

 

What is wrong 😞 I've been trying to do it for hours 😞 

 

Thanks in advance

[brian!]

that screenshot of the $gateways array implies that either the hook is not running, or it doesn't find the images - I assume that assets/img/logos is inside your WHMCS install ?

[Talalkh]

13 minutes ago, brian! said:

that screenshot of the $gateways array implies that either the hook is not running, or it doesn't find the images - I assume that assets/img/logos is inside your WHMCS install ?

Yes correct. It is in var/www/html/assets/img/logos

Isn't that how it should be?

[brian!]

2 minutes ago, Talalkh said:

Isn't that how it should be?

yes - assuming your WHMCS install is in var/www/html

can you view those logo images in the browser by referencing them by their URL, e.g https://yourdomain.com/assets/img/logos/paypal.png

[Talalkh]

48 minutes ago, brian! said:

yes - assuming your WHMCS install is in var/www/html

can you view those logo images in the browser by referencing them by their URL, e.g https://yourdomain.com/assets/img/logos/paypal.png

Yes I am able to open the link and i get the PayPal logo correctly.

 

 

Edited November 7, 2020 by Talalkh
Edit

[brian!]

16 minutes ago, Talalkh said:

Yes I am able to open the link and i get the PayPal logo correctly.

maybe it's the custom theme you're using, or possibly even that I don't think your WHMCS install is legit (as it fails the license verification test)... I was suspicious as soon as I saw it was an IPTV site... I could hazard a good guess from where you got your WHMCS install from. 🙄

[Talalkh]

8 minutes ago, brian! said:

maybe it's the custom theme you're using, or possibly even that I don't think your WHMCS install is legit (as it fails the license verification test)... I was suspicious as soon as I saw it was an IPTV site... I could hazard a good guess from where you got your WHMCS install from. 🙄

I paid high cost for my whmcs 🤔 you can also see that I paid for the theme as well. It is officially from Zomex.. But i don't know if those who sold me the whmcs (they installed it as well) have unofficial license.

Is there any way to add these images instead of the text? 😔

[brian!]

1 minute ago, Talalkh said:

I paid high cost for my whmcs

that doesn't necessarily mean it's legit.... if you buy a stolen car, that doesn't make it your car!

at the very best, it's been customised and so any hook might not necessarily work in the same way.... more likely if it's the company that i'm thinking of, they will have just installed it fir you and told you to come here with any issues.

3 minutes ago, Talalkh said:

you can also see that I paid for the theme as well. It is officially from Zomex..

I can see you're using it, but that won't tell me if you bought it (nor do I care) - I might double check with them tomorrow, but even if you did buy the theme, that doesn't make the WHMCS install legit.

4 minutes ago, Talalkh said:

But i don't know if those who sold me the whmcs (they installed it as well) have unofficial license.

it's your install - YOU are the one with the potentially dodgy license - and liable for any consequences.

6 minutes ago, Talalkh said:

Is there any way to add these images instead of the text? 😔

yes - you could edit the template and do it... i'll let you find the old post where I mentioned how to do that.

I won't be replying to any of your posts.