Jump to content
brian!

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

Recommended Posts

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.

payment_gateway_-_01_-_default_viewcart.

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.

payment_gateway_-_02_-_ajaxcart_active.p

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>
payment_gateway_-_02_-_ajaxcart_active.p

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>
payment_gateway_-_03_-_boxes_active.png

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>
payment_gateway_-_05_-_cart_active.png

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>
payment_gateway_-_06_-_comparison_active

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}
payment_gateway_-_07_-_modern_active.png

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}

payment_gateway_-_08_-_slider_active.png

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>
payment_gateway_-_09_-_vertical_active.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>
payment_gateway_-_10_-_web20cart_active.

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

  • Like 3

Share this post


Link to post
Share on other sites

Hello!

Can you replace images for more clear understanding?

Share this post


Link to post
Share on other sites
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');
?>

VVSBvjW.png

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

  • Party/Celebrate 1

Share this post


Link to post
Share on other sites

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
pp0001.thumb.PNG.988992df960b75aad2460d02f4062aea.PNG

after
aff.PNG.dccc2329fbf181fa20536ba46e7d8c17.PNG

should be Paypal Only with its logo

only.PNG.0ebc9ca2d8eb846d59fbaf2fe7859968.PNG

 

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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites
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.

433033621_ScreenShot2018-08-26at14_06_39.thumb.png.1e4eeb797b021df3d576013e7542819b.png

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

203294542_ScreenShot2018-08-26at14_09_07.thumb.png.3d12a35cee11ae25f6c919105bbffb49.png

 

I thing i have named them right, or not?

303062960_ScreenShot2018-08-26at14_11_31.thumb.png.3b66559c197a6f9636357f8b008b95aa.png

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

400542997_ScreenShot2018-08-26at14_13_42.thumb.png.b8825b5ded2d99a8797cdc12a8d1a49c.png

Is anybody suspect something that is due to this?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
 

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

Share this post


Link to post
Share on other sites

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'].'">';

 

  • Thanks 1

Share this post


Link to post
Share on other sites
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"

xd1111.PNG.b16475fb00d32a8f0995d3bf8058e0c4.PNG
 

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

Share this post


Link to post
Share on other sites
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..

IYpZJGD.png

8jBVrVB.png

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

Share this post


Link to post
Share on other sites
Posted (edited)

Yeah im using 7.5.2..8jBVrVB.png

Edited by TGK
adding quote

Share this post


Link to post
Share on other sites
39 minutes ago, brian! said:

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

IYpZJGD.png

8jBVrVB.png

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.

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By hanstavo
      When I tried to do a test checkout I realized that I cant continue. I get an error about invalid tax percentage, but I don't even have tax setup. I am using WHMCS 7.4.2
      I get the error no matter what payment gateway, and I have tried a fresh install of the checkout.tpl file and a bunch of other files that is included on multiple pages such as common and the sidebars.
      When I enable error reporting, I get the following stack trace:

      WHMCS\Exception\Billing\BillingException: Invalid tax percentage: in /home/myuser/public_html/vendor/whmcs/whmcs-foundation/lib/Billing/Tax.php:0
      Stack trace:
      #0 /home/myuser/public_html/vendor/whmcs/whmcs-foundation/lib/Billing/Tax.php(0): WHMCS\Billing\Tax->validateTaxPercentage(NULL)
      #1 /home/myuser/public_html/includes/invoicefunctions.php(0): WHMCS\Billing\Tax->setLevel1Percentage(NULL)
      #2 /home/myuser/public_html/includes/processinvoices.php(0): updateInvoiceTotal(0)
      #3 /home/myuser/public_html/includes/processinvoices.php(0): createInvoicesProcess(false, true, '')
      #4 /home/myuser/public_html/includes/orderfunctions.php(0): createInvoices(1, true, '', Array)
      #5 /home/myuser/public_html/cart.php(0): calcCartTotals(true)
      #6 {main}
    • By WGS
      We have successful launched Alipay Cross Border Payment Gateway Module for WHMCS users. Now you can easily accept payments from your customers reciting in China.
      To know more about the plugin, visit: https://marketplace.whmcs.com/product/4537
       
       
    • By TheTechLounge
      Hi,
      I'm looking at getting the Stripe Payment gateway setup and have hit an issue with the Card Type field being empty. Any ideas?
    • By wellconnit
      Hi guys,
       
      I've almost finished developing a custom payment gateway, however when I submit and it posts I've set the return url(not the callback) to /viewinvoice?id=#### and there is a problem somewhere
      The callback is separate and is set to modules/gateways/callback/nabtransact.php
      But it returns me a page with no CSS and a login box which suggests it's logged out or lost the login cookie in the process.
      The address bar shows the payment gateway target but the page does not correspond.
      Any ideas are appreciated.
       
      Thanks
    • By inmn
      I am sending pdf attachments; I would ideally like the link to log them in (if necessary? can an invoice be paid by a guest?) and bring them straight to the checkout page for said invoice.
       
      How can I go about doing this?
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

By using this site, you agree to our Terms of Use & Guidelines