How to use payment method icon in checkout process

[mrcraz]

As shown in picture.

1. Instead of using text to show payment method. Can I use image upload to payment method instead?
   
   
   
2. or Do you know variable of adding images in payment method? I think just change skin file should be okay but don’t know variable name.
   
   
   
   Thank you,
   
   Kom

   payquestion.gif

[triplex]

That would i like to know too!

[whiplash13]

The code below assumes you will either be using icon images for all payment methods or not using icon images for all payment methods, I have not been able to get this working for a both case scenario, as I am not a master with Smarty in any way, shape or form.



In /skins//customer/views/checkout/components/payment_methods.tpl



REPLACE

{hook name="checkout:payment_methods"}
{foreach from=$payment_methods item="pm" name="pay"}




{$pm.payment}

{$pm.description}

{/foreach}
{/hook}



WITH (part in [COLOR=“Red”]RED[/COLOR] is what I added)

{hook name="checkout:payment_methods"}
[COLOR="Red"]{assign var="payment_images" value=""|fn_get_payment_methods_images}[/COLOR]
{foreach from=$payment_methods item=pm name=pay}





[COLOR="Red"] {if $payment_images}
{foreach from=$payment_images item=image name=imgs}
{if $smarty.foreach.pay.index % 5 == $smarty.foreach.imgs.index % 5}



{/if}
{/foreach}
{else}[/COLOR]
{$pm.payment}
[COLOR="red"] {/if}[/COLOR]


{$pm.description}

{/foreach}
{/hook}

[triplex]

But this code works or not? because you write “as I am not a master with Smarty in any way, shape or form.”???



THX

[whiplash13]

[quote name=‘Triplex’]But this code works or not? because you write “as I am not a master with Smarty in any way, shape or form.”???



THX[/QUOTE]



This code works fine if used as stated above. You either need to use images for all payment methods or not use images for all payment method. You can’t have images for some payment methods and no image for others, as the name of the payment method will not display for ones without images.

[racingsolution]

Hey guys I decided to mess with the templates and come up with a solution… I’ll type up a How To if anyone wants it

[racingsolution]

Here’s a “HowTo” on how to use the payment option icons



Open template: “/skins/YOUR_TEMPLATE/customer/views/checkout/components/payment_methods.tpl”



Find

```php

{$pm.description}
```

Add below:

```php

```

[b]Here's how it works[/b]
In Admin->Payment Methods, the "Name" you define for each payment method is key. Keep it simple. The little smarty code we added to the template basically takes your payment method name, converts it to lowercase, replaces any spaces in it with "_" underscores. For example. My two payment method names are "Credit Card" and "PayPal". Credit Card becomes "credit_card" and paypal becomes "paypal".

The code added to the template adds one more table column and inserts an image tag. By default, it will look in CSCartRoot/images folder. The filename it looks for will be based on your Payment Method name.. i.e. "credit_card.jpg" and "paypal.jpg"

Thats it! If you decide to add a new payment method, all you have to do is create the icon for it and put it in your images folder.

*Note* I mentioned keeping your payment method names simple. If you put one as "Credit Card (Visa/Mastercard/Discover), this template code will look for a weird filename that looks like this: "credit_card_(visa/mastercard/discover).jpg" .. Much easier to just call it "Credit Card".

Also, I do not use payment method descriptions for any of mine. it will effect the look of this code if you do

[whiplash13]

Since I like using the description field and want this to work whether I have an image specified or not, I used Racingsolution’s method to update my methodology so now it will use an image if it has one or the name if it doesn’t: (still need to follow the same rules to naming the image as Racingsolution mentioned above. Use the payment method name all lowercase replacing any spaces with underscore)



REPLACE:

{$pm.payment}



WITH:


{assign var="imgname" value=$pm.payment|lower|replace:' ':'_'}
{assign var="imagename" value="`$imgname`.jpg"}
{if file_exists("images/payment/$imagename")}

{else}
{$pm.payment}
{/if}



paymenticon.jpg

[lawnmowertech]

whip how do you get that one paypal logo with the paypal verified stamp on it to work ? what do i need to do to do this ?



thanks

and where can i obtain that image at

[racingsolution]

Photoshop… google “paypal” and I’m sure it’ll pop up… and I think PayPal has it available in your account section

[whiplash13]

[quote name=‘racingsolution’]Photoshop… google “paypal” and I’m sure it’ll pop up… and I think PayPal has it available in your account section[/QUOTE]



I did a google search as racingsolution suggested to find the image. Below is updated code that would replace my code above if you plan on using the Paypal Verfied logo and want it to link to Paypal for verification:


{assign var="imgname" value=$pm.payment|lower|replace:' ':'_'}
{assign var="imagename" value="`$imgname`.jpg"}
{if $imgname=="paypal"}


{elseif file_exists("images/payment/$imagename")}

{else}
{$pm.payment}
{/if}


[roban]

Isn’t this a part of the credit card payment dialogue? You upload an image for the credit card or payment type in the Administration/Credit cards. There is an option to upload an icon.

[racingsolution]

[quote name=‘roban’]Isn’t this a part of the credit card payment dialogue? You upload an image for the credit card or payment type in the Administration/Credit cards. There is an option to upload an icon.[/QUOTE]



When you upload an image to the credit card, it shows up next to the drop down box where you select “Mastercard”, “Visa”, etc… it doesn’t show up next to your payment methods… two separate areas

[whiplash13]

[quote name=‘racingsolution’]When you upload an image to the credit card, it shows up next to the drop down box where you select “Mastercard”, “Visa”, etc… it doesn’t show up next to your payment methods… two separate areas[/QUOTE]



Correct. You can upload icon’s for payments but they don’t display next to the payment method. Out of the box they are only used to create a block of payment images. This solution will display them in Step 4 of checkout.

[letzrock]

Racingsolution … I also would like to have images as well as text for the checkout option…

I tried your method below but had no luck…



I went into customization mode and found the line of code as shown below.



I added the new code below the original line of code…Is this how it should be??? Or should it replace it all together??



Where and how do I upload the images associated with the options??



Find

```php

{$pm.description}
```

Add below:

```php

```

Thanks Ben.

[triplex]

My Question is, is it possible to made a ready to use solution for all, a addon or mod?





thanks!

[racingsolution]

[quote name=‘letzrock’]Racingsolution … I also would like to have images as well as text for the checkout option…

I tried your method below but had no luck…



I went into customization mode and found the line of code as shown below.



I added the new code below the original line of code…Is this how it should be??? Or should it replace it all together??



Where and how do I upload the images associated with the options??



Find

```php

{$pm.description}
```

Add below:

```php

```

Thanks Ben.[/QUOTE]

Hey Ben,

By default, it will look in CSCartRoot/images folder for the payment icons.

[letzrock]

How do I place the images in the correct files???

[racingsolution]

[quote name=‘letzrock’]How do I place the images in the correct files???[/QUOTE]



The filename it looks for will be based on your Payment Method name… i.e. “credit_card.jpg” and “paypal.jpg”



“Credit Card” = “credit_card.jpg”

“PayPal” = “paypal.jpg”

“Something Else” = “something_else.jpg”

[ntsekov]

Erm, and how will that work with Cyrillic names? I’m a bi afraid to try it.