Jump to content
brian!

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

Recommended Posts

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

  • Thanks 1

Share this post


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

pvgDYbt.png

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

ZoFvYhH.png

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi Brian,

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

Thanks Christian

Share this post


Link to post
Share on other sites

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.  

Share this post


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

Share this post


Link to post
Share on other sites

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

 

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