activemerchant/payment_icons

An easy to use library that allows you to manage and access payment icons

payment_icons's Issues

Request to add new payment icons

Hello,

Our merchant requested us to list two payment icons (AXS and SAM). Please help to review these Pull Requests.

#454 #455

Regards,
Haziman

Remove Rails dependency, replace it with more focused

#160 (comment)

Missing border on some icons

What's the issue?

The border is missing from some icons when rendered inline an HTML page (i.e. placing the <svg> tag directly in the document), whereas they appear when referenced in an <img src='...'> tag — see Apple Pay and Shopify Pay:

Inline (<svg> directly in the page):

In an <img> tag:

Configuration

• macOS 10.13.4
• Google Chrome 66.0.3359.181 (Official Build) (64-bit)

Prevent <style> tags in SVG

Issue

I noticed that a number of SVG icons have nested <style> tags. Search results

Example of a nested <style>:

<svg ...>
  <title id="...">...</title>
  <style>.b{fill:#fff}</style>
  <path ...>

This is a problem because the cascading effect of CSS means that the styles of one icon can overwrite another.

In the example below I have the 7-Eleven svg followed by the Circle K svg. The green color of 7-Eleven is being overwritten by styles in set in the Circle K svg.

Proposed solution

We should have a test that rejects nested <style> tags. This is similar to the work @maximevaillancourt did for checking for nested <img> tags in #174

Contributors are welcome to inline their styles with style or fill attributes as this doesn't have the cascading effect. Examples of icons using fill in the markups.

Psych error

I'm getting this on the current master:

Psych::SyntaxError: (<unknown>): did not find expected '-' indicator while parsing a block collection at line 1 column 1
from /Users/bgentry/.rbenv/versions/2.3.3/lib/ruby/2.3.0/psych.rb:379:in `parse'

A search indicates that it has to do with weird YAML whitespace. This line in particular stands out as having an extra space at the start: https://github.com/activemerchant/payment_icons/blob/master/db/payment_icons.yml#L145

If I revert to commit 6f8a904, things work without error.

Add more recent tag

I'd like to include this gem in my application but need to specify the version. Looking at the tags it looks like the most recent is two years ago. Is it possible to bump it to v0.0.2 with something more recent?

Shopify Pay icon has incorect border radius

After comparing several icons to validate the border radius of Visa V Pay, the Shopify Pay icon has incorrect border radius. It should have 2px radius for rounded corners.

iDEAL payment icon does not output in footer when activated via Shopify Payments

Problem:

The iDEAL payment method icon does not appear in the footer alongside other icons when enabled via Shopify Payments.

A full-color SVG is available for this icon here.

Scope

Any theme using the payment_type_svg_tag liquid tag.

Example

The following Dutch store has iDEAL enabled via Shopify Payments in Payments section:

Payments section: https://eviakussens.myshopify.com/admin/settings/payments

Storefront: https://eviakussens.nl

icon is not present in both footer or code:

Expected vs Actual

Expected - Would expect to see iDEAL payment method icon in footer since it is present with other payment method icons in Shopify Payments section.
Actual - iDEAL payment method appears in admin but not storefront.

Add icon for PostFinance

We were contacted (through theme support) by a merchant who uses a payment gateway called PostFinance.

There is no icon for this, so it doesn't show in Shopify theme footers.
I could only see a png on https://www.postfinance.ch/en/about-us/media/downloads.html - no svg.

It would be great if somebody could source one, thanks!

Tests erroring due to recently added icon

Tests are erroring (CI) due to an icon added #393. Would like to fix forward or remove the troublesome icon.

@tauthomas01

elo icon has hardcoded white background

@yishus, maybe something we can fix.

Payment Icon Request - Payflex

We would like to get a payment icon for our payment gateway - Payflex.

We need this so we can be added as a recognized payment gateway with Shopify.

Logos for the icon can be found here [https://widgets.payflex.co.za/]

Add test to check for id attribute

Idea

Add a test to the icons to prevent an id attribute from being included in the markup, aside from the pi-* one.

This was originally brought to my attention in #121

that is causing Lighthouse to cause an accessibility issue (duplicate ID).

These icons shouldn't be introducing new id attributes to the DOM as it could potentially mess with the theme developer's use of ARIA labels, JS selectors, or CSS selectors.

More details

• Only id attribute allowed is on the <title> element. Must have pi- prefix.
• Presence of any other id attribute, regardless of prefix, throws an error.

Update Apple Pay logo

Old mark:

This is the new mark:

Download new mark here: https://developer.apple.com/apple-pay/marketing/Apple-Pay-Mark.zip

Dummy tests are not controller tests

IconControllerTest does not test any controller. These should not be controller tests.

https://github.com/activemerchant/payment_icons/blob/master/test/dummy/test/controllers/icons_controller_test.rb

mondido icon has hardcoded white background

I've been trying to remove hardcoded white backgrounds from various icons via #351 and #355. However, the mondido icon does not have a proper white fill and thus when we removes the hardcoded background it remove all but the filled logo text. Not sure how to proceed.

@NathanPJF, @tauthomas01

NetBanking icon has no fill/stroke on its path element

Changing to this looks right:
<path stroke="#fff" fill="#000" ...

When a white CSS fill is applied to all svgs by default by a Shopify theme, this can result in:

Missing Dependabot

Currently need to manually bump gems. We should configure Dependabot so we can avoid manual PRs like #375.

Ideally Dependabot would do this. Seems to not work automatically because this is a gem and thus the Gemfile, the default place it looks, is not actually where dependencies are listed. Could probably be resolved by configuring Dependabot properly via a dependabot.yml file according to the docs. Created an issue to track.
from #375

From GitHub's docs:

You enable GitHub Dependabot version updates by checking a dependabot.yml configuration file in to your repository's .github directory. Dependabot then raises pull requests to keep the dependencies you configure up-to-date.

According to Hacker News, Travis will stop supporting company backed OSS projects soon. 😨

Missing icon for solo CC

There is currently no icon for solo credit cards.

Test for <image> and <img> tags with a URL path

Issue

In our contributing guidelines we say that submissions cannot include <image> or <img> tags. The point is to prevent element where the xlink:href resolves to a filepath. Example : <image xlink:href="path/to/file.svg">

However, we don't have a unit test to automatically check this, which means repo maintainers need to visually check optimized SVG code to spot them.

Example commit on a PR: a2b7fa8

This was caught by @tauthomas01 in #165 (comment), but ideally this would be automatically done.

Why do we prevent these?

We don't want <img> or <image> tags that create external dependencies. In the referenced commit, it is looking for a file path. This will create two scenarios:

1. The file is never found, so there is an error. Screenshot example here
2. The file is found and it becomes part of the icon's design. Which means the icon could change unexpectedly if the image at that file path ever changes.

When are <image> and <img> okay?

We have a number of icons that use the <image> tag, however, the link:href is base64 encoded which is okay.

@maximevaillancourt Would you happen to have spare cycles to help us out with this?

Additional notes

Our contributing guidelines we say that submissions cannot include <image> or <img> tags - but this is too simplistic. We accept <image> tags provided that the link:href is base64 encoded.

Remove Rails dependency

In an ideal world this gem doesn't need/include Rails but still works with apps that use Rails as well as those that do not.

Apple Pay icon color

The icon for Apple Pay does not have any colours in it for the border, Apple logo, or the text, so it inherits the colour from the page. For example on Shopify's Debut theme if the footer text colour is blue, the icon appears blue.

This happens in other websites as well unless the icon has a specific colour applied to it, the icon will be whatever colour the surrounding text is.

Query regarding a "generic" bank icon

We at Razorpay support over 50 Banks for online payments. (This is aside from the cards). As such, adding logos for all these 50 banks is clearly useless.

On our checkout form, we tackle this by showing the 6 most common banks [demo]:

However, since customers coming from Shopify are more likely to recognize the card logos, we were wondering if it makes sense to add a generic "netbanking icon". We did a mockup for the same, and I'd file a PR if it sounds reasonable:

The entry in payments_icon.yml could read:

-
  name: netbanking
  label: NetBanking
  group: bank_transfers

Gem getting heavier

According to rubygems.org/gems/payment_icons/versions, the gem has gotten quite a bit heavier recently. May be due tot he addition of several base64 png encoded icons as many were added in #393 and released as party of v1.5.7.

payment icons updated

Hi, We urgently need to have these payment icons in shopify, these are having some new & few old ones updated with image, request you to please take a look at pull request raised : https://github.com/activemerchant/payment_icons/pull/413

rails-4-2.gemfile failing, cannot find `bundler (< 2.0, >= 1.3.0)`

Issue

Travis CI tests have begun consistently failing for tests related to rails-4-2.gemfile.

Here is an example output that shows bunder (2.0.1) is being used and that a version of bundler (< 2.0, >= 1.3.0) cannot be found.

Out from failing test

adding /home/travis/build/activemerchant/payment_icons/gemfiles/vendor/bundle to cache
creating directory /home/travis/build/activemerchant/payment_icons/gemfiles/vendor/bundle
ruby.versions
$ ruby --version
ruby 2.3.7p456 (2018-03-28 revision 63024) [x86_64-linux]
$ rvm --version
rvm 1.29.3 (latest) by Michal Papis, Piotr Kuczynski, Wayne E. Seguin [https://rvm.io]
$ bundle --version
Bundler version 2.0.1
$ gem --version
2.6.14
37.98s$ bundle install --jobs=3 --retry=3 --path=${BUNDLE_PATH:-vendor/bundle}
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "bundler":
  In rails-4-2.gemfile:
    rails (~> 4.2.0) was resolved to 4.2.11, which depends on
      bundler (< 2.0, >= 1.3.0)
  Current Bundler version:
    bundler (2.0.1)
This Gemfile requires a different version of Bundler.
Perhaps you need to update Bundler by running `gem install bundler`?
Could not find gem 'bundler (< 2.0, >= 1.3.0)', which is required by gem 'rails
(~> 4.2.0)', in any of the sources.
Bundler could not find compatible versions for gem "rails":
  In rails-4-2.gemfile:
    rails (~> 4.2.0)
    payment_icons was resolved to 1.0.4, which depends on
      rails (< 6.0, >= 4.1)
The command "eval bundle install --jobs=3 --retry=3 --path=${BUNDLE_PATH:-vendor/bundle} " failed. Retrying, 2 of 3.

 

Example tests:

• Pull Request #147 add dash and eos icons: https://travis-ci.org/activemerchant/payment_icons/jobs/475771567
• Pull Request #148 Adding enets icon : https://travis-ci.org/activemerchant/payment_icons/jobs/476712689

These tests were passing as recently as Dec 21st when this PR was merged #146. The failing tests might be related to the release of Bundler 2.0 on Jan 4th, 2019: https://bundler.io/blog/2019/01/04/an-update-on-the-bundler-2-release.html

@maximevaillancourt @pi3r I'm not sure how to resolve this issue, would you be able to take a look?

Other questions

The command to test for rails-4-2 is defined in the .travis.yml file. However, I'm not sure why we need to be testing in this version of Rails. Is it safe to remove?

Prevent multiple id attributes in SVG

Issue

Some of the newest icon requests contain multiple id attributes that are unused.

Example of a multiple unused id instances:

Reference example

This is mostly due to SVG icons generated by vector applications such as Illustrator that keep its original layers. Having unused id is not necessary to keep in our end.

Proposed solution

We should have a test that rejects all id attributes except the <title> one because it's used to reference the aria-labelledby attribute for accessibility reason.

Bitcoin Cash icon

The Bitcoin Cash icon is slightly different compared to the other icons.

ViaBill and MobilePay icons

Hi,

We have received a request from a merchant using our theme Prestige, telling us that the icons for MobilePay and ViaBill are outdated. Here is the context:

Thanks!

Daily Yamazaki icon improperly formatted

Should not have a white background, like shown below.

New icons being listed in "Payment Methods" but not displaying at "Checkout"

Hi, our new icon was merged (#504) and released in version 1.7.5.

We can now see our icon in the Payment Methods list and we've added it as a payment option to our payments app.

At checkout however, the icon is not visible at all. If we use the HTML inspector tool we can see that the li item is actually being generated with class .payment-icon.payment-icon--zip.

Is this something your team is able to assist with?

American Express text knockout and outdated

Currently the American Express (AMEX) icon's text stroke is knocked out allowing the background color the element the image is placed in to show through.

Downloading the latest AMEX digital files for website checkout logos, the AMEX type has been modified and they are now using a darker blue color color.
https://merchant-supplies.americanexpress.com/?locale=en_US#/catalog/producttype/digitalsigns

Current icon:

Outdated icon:

Change d-barai icon

Hi @larouxn
I actually found that the current d-barai icon, changing original aspect ratio, is prohibited alterations.
Would you please use ,with complying isolaton policy here?

Thanks!

new icon "multibanco" is not being listed in "Payment methods"

icon "multibanco" was merged to master and subsequently released in v1.6.3. I've checked and the created payment gateway has the multibanco icon selected.
However it is not being listed in "Payment methods" within the Alternative payment providers window. Could you please give guidance on what the problem could be ?

Swish payment Icon goes blank on Mobile

Merchant has pointed out that the Swish payment icon goes blank when viewed on a mobile device:

For internal use only:

• Shopify Internal Ticket Number is 27242801

Build a tool to define SVG

Issue

New icon requests require manual review and such process takes time. What if we could create a tool that could simplify the workflow and reduce manual work.

The following issues are some examples of what the tool can take care of:
#183
#182
#179

Proposed solution

There could be a tool that reads the generated SVG, reviews the structure and modifies the file according to some requirements we establish so the contributors won't have to manually modify inside the file.

JCB icon may be too minimalistic

Unlike their official icon:

the icon provided in this repo:

is somewhat nondescript, only containing the coloured bands but not the JCB. People outside of Japan and/or those not super familiar with JCB may not recognize the logo provided in here.

Add Ruby 2.4 in Travis CI

Problem

There has been some difficulties making releases and make the build pass during CI integration. One attempt to solve the problem was to downgrade the sassc version but the issue is still persisting.

For the time being, Ruby 2.4 will be removed from Travis CI in order to get master error-free and working with 2.5 should be the priority.

More information

From the history of builds, only in Ruby 2.4 doesn't pass, otherwise other Ruby versions (2.5.1, 2.6.2) are passing.

@SebastianSzturo @AnotherJoSmith @rafaelfranca @unixcharles

Hong Kong - New Payment Icon: PayMe

One of our partners is now first-to-market on a popular local digital wallet: PayMe created by HSBC bank.

For context, this is a QR-code based payment method that will sit within their HPSDK integration alongside other methods like Alipay, WeChat Pay, FPS.

Help Needed:

• Add to the admin as a selectable payment method through the QFPay integration
• Make the 'PayMe' icon (attached) visible at checkout when customer is selecting Payment method (=QFPay)

Syntax error in the most recent version.

SassC::SyntaxError (Error: error in C function image-url: non-conforming drawing primitive definition `c.707' @ error/draw.c/TracePath/5624
        on line 19:23 of ../../.gem/ruby/2.6.5/gems/payment_icons-1.3.2/app/assets/stylesheets/payment_icons/_payment_icons.scss, in function `image-url`
        from line 19:23 of ../../.gem/ruby/2.6.5/gems/payment_icons-1.3.2/app/assets/stylesheets/payment_icons/_payment_icons.scss
        from line 1:9 of app/assets/stylesheets/admin/modules/_payment_icons.scss
        from line 66:9 of app/assets/stylesheets/admin/style.scss
>>     background-image: image-url("payment_icons/#{$svg-name}.png");

   ----------------------^
):

app/assets/config/manifest.js:79

Vipps logo

Vipps has been implemented as a payment method by QuickPay. But the logo is missing, so if you could add that, that would be great.

Logo can be found here:

https://vppsvippsnoproductions.blob.core.windows.net/media/filer_public/0f/a2/0fa25458-82ca-4251-a2b1-7f49c68ebd9c/vipps-rgb-oransje-neg.png

Hong Kong - New Payment Icons: AlipayHK and Octopus

One of our partners is now adding two additional local wallets: AlipayHK and Octopus. It should be noted that the AlipayHK icon is different from the Alipay (China) icon. Image files for logos attached

For context, this is a QR-code based payment method that will sit within their HPSDK integration alongside other digital wallets like WeChat Pay and FPS.

Help Needed

1. Add to the admin as a selectable payment method through the QFPay integration
2. Make the 'AlipayHK' and 'Octopus' icon (attached) visible at checkout when customer is selecting Payment method (=QFPay)

Seven Eleven icon is outdated

The Seven Eleven icon has changed a bit. We should update it accordingly.

Current Seven Eleven icon SVG. (this repo)
Latest Seven Eleven icon SVG. (Wikipedia)

We can probably fit this new one within our original green rectangle. Definitely looks like it'll be a bit of a challenge though.

Note, it seems new logo may be Japan specific. We may need to create a new sevenelevenjapan.svg logo... unless we see this icon's usage as Japan specific. Then we can just update it.

Test for `viewBox`

A pull request was merged where the svg icons did not have a viewBox attribute. #113

We have a test that is to be checking for this attribute here. I'm not sure why the test did catch it.

Reproduction steps

• Checkout that branch, or current state of master
• Run rake to run the test suite
• Result: No errors thrown.

@maximevaillancourt any ideas why this didn't get caught by Travis?

Keep <svg> at the root of the structure

Issue

Some of the newest icon requests contain markups that are not needed at the root of the SVG file.

Examples

Reference example
Reference example

This is mostly due to SVG icons generated by vector applications such as Illustrator that keep its original layers.

Proposed solution

We should have a test that rejects any markups at the root except the <svg> to keep the SVG lightweight and clean.

Hiper and Hipercard icons are misnamed

Both the Hiper and Hipercard icons are misnamed as Hyper and Hypercard. (hyper.svg, hypercard.svg)

payment_icons/db/payment_icons.yml

Lines 400 to 406 in efb690e

	name: hyper
	label: Hyper
	group: credit_cards
	-
	name: hypercard
	label: Hypercard
	group: credit_cards

Quick Googling shows that they're not spelled with a y.

Related to Payment Icon

Hi,

I have a Payment Gateway whose Payment Icon I submitted to Shopify GIT Repository on branch "laybuy" at https://github.com/Sanjeev-Gupta/payment_icons.git. I want this icon to list as Payment Icon for my payment method on Shopify.

I uploaded it about 2 weeks ago, and no reply from Shopify. Can you please tell me what to do and how to track its processing ?

Icons for MercadoPago / South America

Hello!

I've been looking into Hosted Payments with MercadoPago + Shopify and I found that many of the card icons are missing for the South American Credit Card companies.

There's a bit of copy on the Shopify Partners admin about adding icons to this lib.

Here's a list I found here of South American credit card companies.

https://www.mercadopago.com.ar/developers/en/solutions/payments/custom-checkout/test-cards/test-local-cards/

• Naranja
• Hipercard
• Visa Débito
• Diners (Perhaps same as DinersClub?)
• Nativa Mastercard
• Mastercard Débito
• Tarjeta Shopping
• Elo
• Tarjeta MercadoPago
• Cencosud
• Cartão MercadoLivre
• Cabal
• Argencard

I'm unsure if MercadoPago itself should also have an Icon. Would a processor (similar to stripe) have an icon? I don't believe so. They just process the credit cards. However many of these companies do require you have a logo at checkout though.

Question is which of the above icons are y'all open to taking into this repo? All, some? I don't want to gather all the assets and then they don't get in. Thoughts?

Just found this. MercadoPago already has a bunch of their cards

Verify list of missing icons in Shopify platform

Based on previous conversations, it seems like some icons don't appear in Shopify platform.

This is mostly due to the fact the that deployment process requires manual labor and each icons need to be uploaded one by one.

change payment method name "Yahoo mobile" to "Y!mobile)

Hi @larouxn

Would you correct the string of telco name "Yahoo mobile (in Japanese ヤフーモバイル)" to "Y!mobile (same in Japanese Y!mobile)"

--"Yahoo mobile" is a mobile web portal provided by "Yahoo Japan Corporation"
--"Y!mobile" is a brand of the mobile network provided by "Softbank Cooperation"

#277

Thanks,
Satoshi