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 2

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

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 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?
    • By JFOC
      Any idea how set payment term with following scheme:
      1st time order with X price term for two years
      After two years will be billed in annually with same price as 1st time per-year.
       
      Example:
      Date 6 November 2013
      1st time payment $5
       
      Next due 6 November 2015 $5
      next future due 6 November 2016 $5, 6 November 2017 $5 and so on
       
      Thank you
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

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