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

[brian!]

When displaying your payment options during the final stages of the checkout process, the available payment gateway options are shown as text – in a number of different ways based upon the order form template being used.

If we wanted to make this more attractive, we could replace the text of any or all of the gateways, with an image or logo, by editing the viewcart.tpl template within the active order form template.

In order to do this, we can use one of the WHMCS variables that we have access to during the checkout process - $gateway.sysname - the variable stores in lowercase, the unique name used by WHMCS for the payment gateway.

This is not the value you entered for the gateway in the “Display Name” field in the “Payment Gateways” section of the Admin Area.

The next step is to create or find images for each of the gateways that you wish to replace with a graphic, all in the same graphic format (PNG, JPG or GIF) and save them with a lowercase filename. For example, if you were using PNG format, then your “PayPal” image would be called ‘paypal.png’; your “Bank Transfer” image is called ‘banktransfer.png’; and the “Mail-In Payment” gateway (in the above example, named ‘Cheque’) would be ‘mailin.png’.

I believe the filename to be used is based upon the filename of the gateway file in ‘modules/gateways’, but you should be able to find its value by viewing the source of your cart page in your browser...

[<label><input type="radio" name="paymentmethod" value="paypal" onclick="hideCCForm()" /> <img src=images/paypal.png />

So the part of interest above is: value=”paypal”.

You would then upload these images to your “images” directory within WHMCS. If you wanted to put them in their own folder within the “images” directory, you can – but you will need to adjust the URL in the code below to take account of the slightly different path (see end of tutorial).

The images directory i'm using in these examples is whmcs/images - and not the template(s) images folder.

The replacement code works by first creating a new variable to store the URL of the gateway logo, then it will check to see if the image exists in the “images” folder (remember that it must have a lowercase filename on the server otherwise it will not be found) – if the image exists, it will display the image; if no image is found, it will display the text (as it does now).

In the examples above, I have only uploaded a ‘paypal’ logo and hence only that gateway is using a replacement image – if I were to upload logos for the other two gateways, they would also be used instead of their text names.

So, I will now go through each of the eight existing order form templates and show the code to be replaced, the replacement code and an image of how the cart checkout page looks when the new code is added.

Ajaxcart

Replace....

<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>

With...

<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>

Boxes

Replace....

<p align="center">{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}</p>

With...

<p align="center">{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}</label> {/foreach}</p>

Cart

Replace...

<p align="center">{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}</p>

With...

<p align="center">{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}</p>

Comparison

Replace...

<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>

With...

<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} />{assign var="paylogo" value="images/`$gateway.sysname`.png"}
{if file_exists($paylogo)}
<img src={$paylogo} />
{else}
{$gateway.name}{/if}</label><br />{/foreach}</p>

Modern

Replace...

{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}

With...

{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} /> {assign var="paylogo" value="images/`$gateway.sysname`.png"}
{if file_exists($paylogo)}
<img src={$paylogo} />
{else}
{$gateway.name}{/if}</label> {/foreach}

Slider

Replace...

{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}

With...

{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}

Verticalsteps

Replace...

<p align="center">{foreach key=num item=gateway from=$gateways}<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} /><label for="pgbtn{$num}">{$gateway.name}</label> {/foreach}</p>

With...

<p align="center">{foreach key=num item=gateway from=$gateways}<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} /><label for="pgbtn{$num}">{assign var="paylogo" value="images/`$gateway.sysname`.png"}
{if file_exists($paylogo)}
<img src={$paylogo} />
{else}
{$gateway.name}{/if}</label> {/foreach}</p>

Web20Cart

Replace...

  <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>

With...

<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>

Customised Order Form Templates

If you are using a customised order form, perhaps supplied with a purchased WHMCS theme, this solution may still work with your template - in viewcart.tpl, you simply replace...

{$gateway.name}

With...

{assign var="paylogo" value="images/`$gateway.sysname`.png"}
{if file_exists($paylogo)}
<img src={$paylogo} />
{else}
{$gateway.name}{/if}

In these examples, I have used .PNG images - if you wanted to use .JPG or .GIF instead, then you would replace .png in the code with .jpg or .gif - remember, they must all use the same format!

if you wanted to put the gateway images in their own folder, e.g 'paylogos', then you would replace the code...

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

with...

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

I hope this helps anyone who wants to replace their payment gateways text with images.

I should also add that this is tested and working on the latest WHMCS release as of this tutorial - v5.3.3

[Tengri]

Hello!

Can you replace images for more clear understanding?

[brian!]

On 09/07/2018 at 08:45, Tengri said:

Can you replace images for more clear understanding?

I can, and they should all be back now - but remember these orderforms are no longer used with the recent releases of WHMCS.

you can do the same thing using a hook without the need to edit a template...

<?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');
?>

the hook assumes three things about the logo images...

1. that they are in .png format.
2. the filesnames are the same as the sysname value of the gateway (in lowercase).
3. that they are uploaded to /assets/img/logos/

you could easily alter the hook to use .jpg (or check for both) images, or to change their location.

if the logo image exists, it will use that logo - for gateways where no logo exists, the text name will be displayed.

[Tengri]

I do it. But of course no effect... https://prnt.sc/kgmzgr

I want change this: Plastik kart (MilliKart - in system), Bank köçürməsi - Bank transfer. I create a file (logos.php) and put into hook folder. After this I load some icons (images) to assets/img/logos

I try different file name: Plastik kart.png, Plastik_kart.png, MilliKart.png - but how can you see no effect.

[brian!]

Hi @Tengri,

4 minutes ago, Tengri said:

I want change this: Plastik kart (MilliKart - in system), Bank köçürməsi - Bank transfer. I create a file (logos.php) and put into hook folder. After this I load some icons (images) to assets/img/logos

so far, so good...

4 minutes ago, Tengri said:

I try different file name: Plastik kart.png, Plastik_kart.png, MilliKart.png - but how can you see no effect.

going from your checkout page source code...

<label class="radio-inline">
	<input type="radio" name="paymentmethod" value="millikart" class="payment-methods" checked />Plastik kart
</label>
<label class="radio-inline">
	<input type="radio" name="paymentmethod" value="banktransfer" class="payment-methods" />Bank köçürməsi
</label>
	<label class="radio-inline"><input type="radio" name="paymentmethod" value="mailin" class="payment-methods" />Bank Transfer (USD)
</label>

the filenames should be as follows...

• Plastik Kart -> millikart.png
• Bank köçürməsi -> banktransfer.png
• Bank Transfer (USD) -> mailin.png

it's also important what I said about the filenames being lowercase, because these gateway names generated by WHMCS will (should) always be lowercase.

hopefully changing the files will fix the issue..

[Tengri]

That is, it does not use hooks? What was I doing there wrong?

[brian!]

Just now, Tengri said:

That is, it does not use hooks? What was I doing there wrong?

if you're using the above hook, it checks to see if the image filenames it's expecting to use for the gateways exist; if those images don't exist e.g have the wrong filenames, then it does nothing... once you have the correct filenames, then the hook should change the gateways name to logos.

[brian!]

@Tengri - can you try the hook again, i've made a slight modification to it and it should work for you now.

[Tengri]

Yes! Done! Thank you very much! 🙂

[TGK]

Nice Brian! i like so much this but im having a issue,  i use you hook and woks well but the problem is that  im using only one payment gateway  per cart template so  when i use your  hook it add me all payment gateways 😕 

Before

after


should be Paypal Only with its logo

 

<?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');
?>

i leave images 

[brian!]

Hi TGK,

9 hours ago, TGK said:

i like so much this but im having a issue,  i use you hook and woks well but the problem is that  im using only one payment gateway  per cart template so  when i use your  hook it add me all payment gateways

how are you defining that one gateway per template ? have not modified the checkout.tpl template directly ??

if you have, then the hook wouldn't work as intended because it's just using what is automatically defined in the $gateways array... if you've made changes to the template to just use PayPal, I will need to see how you've done it.

 

[Aris.N.]

Is there a difference if using the standard_cart?

[brian!]

2 minutes ago, Aris.N. said:

Is there a difference if using the standard_cart?

my above screenshots are from standard_cart - though it should work on any orderform template (as long as it's using the $gateways array and the logo images exists and are named correctly).

are you seeing an issue in your template ?

[Aris.N.]

On 7/9/2018 at 1:42 PM, brian! said:

...

the hook assumes three things about the logo images...

1. that they are in .png format.
2. the filesnames are the same as the sysname value of the gateway (in lowercase).
3. that they are uploaded to /assets/img/logos/ 

 

I have 3 payment methods.

I have uploaded the logos @ assets/img/logos/ folder

 

I thing i have named them right, or not?

But, although i am using the hook,  the logos are not displayed.

Is anybody suspect something that is due to this?

[brian!]

13 minutes ago, Aris.N. said:

Is anybody suspect something that is due to this?

can you edit checkout.tpl; add {debug} to the end of the code in that file and save; refresh the checkout page in the browser - that should open a popup window... if you could take a screenshot or copy&paste the content of the $gateways array in that window, that should help me figure out the issue... and then don't forget to remove {debug} from the template and save it.

[Aris.N.]

$gateways Origin: "Smarty object"	Value Array (3) vivapayments => Array (3)   sysname => "vivapayments"   name => "Viva Payments (Wallet, Μετρητά, Κατάθεση)"   type => "Invoices" mailin => Array (3)   sysname => "mailin"   name => "Kατάθεση"   type => "Invoices" eurobankgr => Array (3)   sysname => "eurobankgr"   name => "Πιστωτική / Χρεωστική"   type => "Invoices"

[brian!]

thanks, can you check the hook code and ensure that it's using sysname as above..

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

 

[Aris.N.]

@brian! i apologize. It was a typo case. I am sorry.

It works as you described! Once more, thank you!

[TGK]

7 hours ago, brian! said:

Hi TGK,

how are you defining that one gateway per template ? have not modified the checkout.tpl template directly ??

if you have, then the hook wouldn't work as intended because it's just using what is automatically defined in the $gateways array... if you've made changes to the template to just use PayPal, I will need to see how you've done it.

 

i did defined that one gateway per template by creating a product-Group and leave only avalaible PayPal gateway i have diferents product grups and inside them i have 1 product and these product group have avalaible only 1 gateway

example
==
Product-Group " Paypal VPS" using payment gateway "Paypal" Only 
Product name VPS Basic
its use a custon cart template too but in ordering tab im using "Boxes"

 

i  edited viewcart.tpl  but noting involved with $gateway i also leave my viewcart for brian.rar if need check how i using it 

thanks

[brian!]

5 hours ago, TGK said:

i did defined that one gateway per template by creating a product-Group and leave only available PayPal gateway i have different product groups and inside them i have 1 product and these product group have available only 1 gateway

when I do that using your template, or the v7.6 version of Boxes, it works fine..

the hook isn't adding/removing any elements from the array, so those gateways are already there in the template without the hook.

which version of WHMCS are you using? (btw Boxes hasn't been updated in years - so if using a recent version of WHMCS, it's probably not the best choice).

[TGK]

Yeah im using 7.5.2..

Edited August 27, 2018 by TGK
adding quote

[TGK]

39 minutes ago, brian! said:

when I do that using your template, or the v7.6 version of Boxes, it works fine..

the hook isn't adding/removing any elements from the array, so those gateways are already there in the template without the hook.

which version of WHMCS are you using? (btw Boxes hasn't been updated in years - so if using a recent version of WHMCS, it's probably not the best choice).

im using 7.5.2

maybe the issue is because that custom product group that im using have a template based on standard_cart and my general config in ordering tab im using boxes templates maybe thats why i  dont sure but well i will check.

 

[TGK]

thanks Brian! now is solved your hook works fine still in 7.5.2 was my bad uploading wrong img to the logos directory

sorry

 

[shadowtek]

Thanks @brian!

Just installed this into the Flowcart7 template from the Hexa theme.

 

It looks amazing

[MJHost]

On 7/9/2018 at 11:42 AM, brian! said:

I can, and they should all be back now - but remember these orderforms are no longer used with the recent releases of WHMCS.

you can do the same thing using a hook without the need to edit a template...

<?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');
?>

the hook assumes three things about the logo images...

1. that they are in .png format.
2. the filesnames are the same as the sysname value of the gateway (in lowercase).
3. that they are uploaded to /assets/img/logos/

you could easily alter the hook to use .jpg (or check for both) images, or to change their location.

if the logo image exists, it will use that logo - for gateways where no logo exists, the text name will be displayed.

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?