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.

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

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.

Share this post

Link to post

Share on other sites

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

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.

Share this post

Link to post

Share on other sites

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 on other sites

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 😕

Share this post

Link to post

Share on other sites

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

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

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

Share this post

Link to post

Share on other sites

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

Share this post

Link to post

Share on other sites

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.

Sign in

Similar Content

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:

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

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.