{"action":"created","issue":{"url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads/issues/6865","repository_url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads","labels_url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads/issues/6865/labels{/name}","comments_url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads/issues/6865/comments","events_url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads/issues/6865/events","html_url":"https://github.com/easydigitaldownloads/easy-digital-downloads/issues/6865","id":352403590,"node_id":"MDU6SXNzdWUzNTI0MDM1OTA=","number":6865,"title":"Use SVG images for payment icons at checkout","user":{"login":"amdrew","id":52581,"node_id":"MDQ6VXNlcjUyNTgx","avatar_url":"https://avatars2.githubusercontent.com/u/52581?v=4","gravatar_id":"","url":"https://api.github.com/users/amdrew","html_url":"https://github.com/amdrew","followers_url":"https://api.github.com/users/amdrew/followers","following_url":"https://api.github.com/users/amdrew/following{/other_user}","gists_url":"https://api.github.com/users/amdrew/gists{/gist_id}","starred_url":"https://api.github.com/users/amdrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amdrew/subscriptions","organizations_url":"https://api.github.com/users/amdrew/orgs","repos_url":"https://api.github.com/users/amdrew/repos","events_url":"https://api.github.com/users/amdrew/events{/privacy}","received_events_url":"https://api.github.com/users/amdrew/received_events","type":"User","site_admin":false},"labels":[{"id":2798128,"node_id":"MDU6TGFiZWwyNzk4MTI4","url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads/labels/Enhancement","name":"Enhancement","color":"84b6eb","default":false}],"state":"open","locked":false,"assignee":{"login":"amdrew","id":52581,"node_id":"MDQ6VXNlcjUyNTgx","avatar_url":"https://avatars2.githubusercontent.com/u/52581?v=4","gravatar_id":"","url":"https://api.github.com/users/amdrew","html_url":"https://github.com/amdrew","followers_url":"https://api.github.com/users/amdrew/followers","following_url":"https://api.github.com/users/amdrew/following{/other_user}","gists_url":"https://api.github.com/users/amdrew/gists{/gist_id}","starred_url":"https://api.github.com/users/amdrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amdrew/subscriptions","organizations_url":"https://api.github.com/users/amdrew/orgs","repos_url":"https://api.github.com/users/amdrew/repos","events_url":"https://api.github.com/users/amdrew/events{/privacy}","received_events_url":"https://api.github.com/users/amdrew/received_events","type":"User","site_admin":false},"assignees":[{"login":"amdrew","id":52581,"node_id":"MDQ6VXNlcjUyNTgx","avatar_url":"https://avatars2.githubusercontent.com/u/52581?v=4","gravatar_id":"","url":"https://api.github.com/users/amdrew","html_url":"https://github.com/amdrew","followers_url":"https://api.github.com/users/amdrew/followers","following_url":"https://api.github.com/users/amdrew/following{/other_user}","gists_url":"https://api.github.com/users/amdrew/gists{/gist_id}","starred_url":"https://api.github.com/users/amdrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amdrew/subscriptions","organizations_url":"https://api.github.com/users/amdrew/orgs","repos_url":"https://api.github.com/users/amdrew/repos","events_url":"https://api.github.com/users/amdrew/events{/privacy}","received_events_url":"https://api.github.com/users/amdrew/received_events","type":"User","site_admin":false}],"milestone":null,"comments":15,"created_at":"2018-08-21T06:35:35Z","updated_at":"2018-09-18T17:35:57Z","closed_at":null,"author_association":"MEMBER","body":"We should switch to SVG images for the payment icons at checkout, rather than the existing `.png` and `.gif` versions. These are the images that appear either above \"Select Payment Method\" (.png) or the image that appear when validating a credit card number (.gif)\r\n\r\n## Reasons why:\r\n\r\n1. The payment icons at checkout look blurry on retina displays. They should look crisp on any display.  We nearly had retina versions of the existing icons back in 2013 but they were never merged in: https://github.com/easydigitaldownloads/easy-digital-downloads/issues/1212\r\n\r\n    <img width=\"592\" alt=\"screen shot 2018-08-21 at 5 20 57 pm\" src=\"https://user-images.githubusercontent.com/52581/44382000-3093b080-a567-11e8-9bdd-f47bf938e2af.png\">\r\n\r\n    And zoomed in a bit for clarity:\r\n\r\n    <img width=\"853\" alt=\"screen shot 2018-08-21 at 5 25 35 pm\" src=\"https://user-images.githubusercontent.com/52581/44382006-3db09f80-a567-11e8-92fa-fb7dc45ea6e7.png\">\r\n\r\n2. I've researched each credit card provider and all our existing logos are now incorrect or outdated. We should be careful to use the assets provided by each provider, just as we would want others to use our brand guidelines correctly.\r\n\r\n3. We can't just double the size of the existing .png images. Screens are becoming more pixel dense, SVGs will future-proof the issue.\r\n\r\n4. SVGs would allow someone to use the images at whichever size they like. Perhaps the site owner/theme developer would like to place more emphasis on the icons to build trust.\r\n\r\n5. It will allow for crisp images on the `Payment Gateways` admin screen for the `Accepted Payment Method Icons` and also when a credit card number is being validated via JS.\r\n\r\n6. It would allow us to remove a decent chunk of CSS from our EDD stylesheet and 12 images from the icons folder.\r\n\r\n7. SVGs are well supported: https://caniuse.com/#search=svg. \r\n\r\n## Proposed icons:\r\n\r\nI've hunted down each provider's brand guidelines and logos they prefer others to use. Some companies have multiple versions of their logo but the one we want in each instance is called the \"Acceptance mark\".\r\n\r\n> An acceptance mark, in respect of credit cards, is a logo or design that indicates which card schemes an automated teller machine or merchant accepts\r\n\r\nWe can't use any ol' credit card icon pack from the internet, from what I've seen they are all wrong. Here are the proposed SVG icons I've created:\r\n\r\n<img width=\"568\" alt=\"screen shot 2018-08-21 at 5 21 19 pm\" src=\"https://user-images.githubusercontent.com/52581/44382657-e829c200-a569-11e8-8c4a-7451945940f3.png\">\r\n\r\nZoomed in:\r\n\r\n<img width=\"687\" alt=\"screen shot 2018-08-21 at 6 30 40 pm\" src=\"https://user-images.githubusercontent.com/52581/44384465-5e312780-a570-11e8-9336-7b54978a9e64.png\">\r\n\r\n## Notes\r\n\r\n1. Each SVG image has a viewbox height of 32 pixels, so they are the same height as the existing icons\r\n1. Some images are not as wide as the rest (e.g. American Express). This is how the provider would like their brand portrayed, we're not going to stretch the widths to suit us. IMO they all look perfectly fine.\r\n1. The SVG images will be combined into 1 `svg-icons.svg` file (cutting down image requests) and loaded into the footer of the checkout page. This allows us to reference each SVG like so:\r\n\r\n    ```\r\n    <svg width=\"50\" height=\"32\" class=\"payment-icon icon-mastercard\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-mastercard\" xlink:href=\"#icon-mastercard\"></use> </svg>\r\n    ```\r\n\r\n1. This image mentioned above will exist in EDD's `templates/images` folder so a child theme can replace it with their own icons if need be.\r\n\r\n1. We could create a function for handling the loading of not only payment icons, but any icon within EDD (and subsequently switch them to SVGs also). E.g the iPhone icon for the iOS app, the tick when you add a download to the cart, the X for removing downloads/discounts etc. I do this in Themedd 1.1 with `themedd_get_svg()`: https://github.com/easydigitaldownloads/themedd/blob/release/1.1/includes/icon-functions.php#L123\r\n\r\nHere's a list of each credit card provider and their relevant guidelines/downloads for reference:\r\n\r\n### Visa\r\nhttps://www.visaeurope.com/receiving-payments/pos_branding\r\n\r\n### American Express\r\nhttps://www.amexpop.com/Asset/Index/5\r\nhttps://merchant-supplies.americanexpress.com/?locale=en_CA#/catalog/All\r\n\r\n### Mastercard\r\nhttps://brand.mastercard.com/brandcenter/mastercard-brand-mark.html\r\nhttps://brand.mastercard.com/brandcenter/mastercard-brand-mark/downloads.html\r\n\r\n### Discover\r\nhttps://www.discovernetwork.com/en-us/business-resources/free-signage-logos\r\n\r\n### PayPal\r\nhttps://www.paypal.com/us/webapps/mpp/logo-center\r\n\r\n### Amazon\r\nhttps://pay.amazon.com/us/merchant/tools\r\n\r\nPR coming at some point."},"comment":{"url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads/issues/comments/422482070","html_url":"https://github.com/easydigitaldownloads/easy-digital-downloads/issues/6865#issuecomment-422482070","issue_url":"https://api.github.com/repos/easydigitaldownloads/easy-digital-downloads/issues/6865","id":422482070,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMjQ4MjA3MA==","user":{"login":"cklosowski","id":1390124,"node_id":"MDQ6VXNlcjEzOTAxMjQ=","avatar_url":"https://avatars0.githubusercontent.com/u/1390124?v=4","gravatar_id":"","url":"https://api.github.com/users/cklosowski","html_url":"https://github.com/cklosowski","followers_url":"https://api.github.com/users/cklosowski/followers","following_url":"https://api.github.com/users/cklosowski/following{/other_user}","gists_url":"https://api.github.com/users/cklosowski/gists{/gist_id}","starred_url":"https://api.github.com/users/cklosowski/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cklosowski/subscriptions","organizations_url":"https://api.github.com/users/cklosowski/orgs","repos_url":"https://api.github.com/users/cklosowski/repos","events_url":"https://api.github.com/users/cklosowski/events{/privacy}","received_events_url":"https://api.github.com/users/cklosowski/received_events","type":"User","site_admin":false},"created_at":"2018-09-18T17:35:57Z","updated_at":"2018-09-18T17:35:57Z","author_association":"MEMBER","body":"@amdrew for reference in the history of the issue, how would one output a list of payment icons somewhere other than the setting based one? That way if someone searches later they can come upon this issue and have some sort of expectation of how they should do it."}}
{"actor":{"display_login":"cklosowski"}}