Add a new icon for SEPA Direct Debit

sakifutamura commented 9 months ago

Why are you adding this icons?

I'm adding this icon because this gem currently has an icon for SEPA Bank Transfer, but not for SEPA Direct Debit

Help us identify yourself

[ ] I'm working/collaborating with the brand directly and they have provided the icons.
[ ] I'm associated with the brand and I've read all the brand icon’s guidelines.
[x] I'm an individual and I've read all the brand icon’s guidelines.

Link to the brand guidelines: https://www.europeanpaymentscouncil.eu/document-library/other/sepa-logo-visual-identity-guidelines

Checklist to add new icons

[x] All icons have a corresponding entry in db/payment_icons.yml
[x] I have followed the icon guidelines detailed in the CONTRIBUTING.md file
[x] I have optimized the icon with SVGO
[x] I am confident that all icons are clear and easy to read/understand
[x] I have provided a link to the brand icon’s brand guidelines whenever possible.
[x] I have attached a screenshot comparison with the example icon provided in guidelines
[x] I recognize that if my icon is not approved by the Shopify Partners team it may not receive review nor merger.

If this pull request is not adding new icons, you can remove this checklist.

Attach a screenshot of the icon along side the example Visa icon

Tips how to create a screenshot

We have found free online SVG editor https://www.freecodeformat.com/svg-editor.php very useful to create one. Here is a sample code for you to verify that you icon appears properly along side the placeholder.

<!-- Change background color if needed to showcase your icon better -->
<style> body { background: black; } </style>

<!-- DO NOT DELETE EXAMPLE -->
<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"/><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"/><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"/></svg>

<svg width="38" height="24" version="1.1" id="pi-sepadirectdebit-Layer_1" role="img" aria-labelledby="pi-sepadirectdebit" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 38 24" xml:space="preserve"><title id="pi-sepadirectdebit">SEPA Direct Debit</title><style type="text/css">.st2{fill:#0054a5}</style><path d="M3 1h32c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2z" fill="#fff"/><path d="M3 .5h32c1.4 0 2.5 1.1 2.5 2.5v18c0 1.4-1.1 2.5-2.5 2.5H3C1.6 23.5.5 22.4.5 21V3C.5 1.6 1.6.5 3 .5z" fill="none" stroke="#fff" stroke-opacity=".07"/><g id="pi-sepadirectdebit-rNOiWK.tif"><path class="st2" d="M10.7 10.5h-2c0-.3 0-.6-.1-.7-.1-.2-.5-.3-1-.3s-.9 0-1.1.1-.3.3-.3.6.1.5.2.6.3.1.4.1h.4c.9.1 1.4.1 1.6.1.7.1 1.2.3 1.5.6.2.2.4.5.4.9v.8c0 .7-.1 1.1-.2 1.4-.2.6-.7.9-1.5 1.1-.3.1-.8.1-1.5.1-1.1 0-1.9-.1-2.4-.2-.5-.2-.9-.5-1.1-1-.1-.3-.1-.8-.1-1.4h2v.2c0 .4.1.6.3.7.1.1.3.1.5.1h.7c.4 0 .6 0 .7-.1.2-.1.3-.2.4-.4v-.4c0-.4-.1-.6-.4-.7-.1 0-.6-.1-1.4-.1-.6 0-1.1-.1-1.4-.1-.7-.1-1.1-.4-1.3-.8-.2-.3-.3-.8-.3-1.5 0-.5.1-.9.2-1.2.1-.3.3-.5.5-.7.5-.2.5-.2.7-.2.4-.1.5-.1 1-.1h1.5c.9 0 1.5 0 1.8.1.9.2 1.3.9 1.3 2v.4zM19.7 16.1V7.9H23.8c.6 0 1 0 1.3.1.7.2 1.1.6 1.3 1.3.1.3.2.9.2 1.5 0 .8-.1 1.4-.2 1.8-.3.7-.8 1.1-1.6 1.2H21.9v2.1h-2.2v.2zm2.2-4h1.4c.4 0 .7 0 .8-.1.1-.1.2-.2.3-.4V11c0-.3 0-.6-.1-.8s-.3-.4-.6-.4H21.9v2.3zM31.2 14.7h-2.9l-.4 1.4h-2.3L28 8h3.3l2.5 8.1h-2.2l-.4-1.4zm-.4-1.6l-1-3.5-1 3.5h2z"/><path d="M16.7 9.1c.9 0 1.7.4 2.2 1.1l.5-1c-.8-.8-1.8-1.2-2.9-1.2-1.7 0-3.2 1-3.8 2.5h-.9l-.5 1.2h1.2v.7h-.6l-.5 1.2h1.4c.6 1.4 2.1 2.4 3.8 2.4.9 0 1.6-.3 2.3-.7v-1.4c-.5.6-1.3 1-2.2 1-1 0-1.9-.5-2.4-1.3h3l.5-1.2h-4V12v-.3h4.4l.5-1.2h-4.5c.5-.8 1.4-1.4 2.5-1.4z" fill="#ffc10e"/></g></svg>

<br>
<svg width="38" height="24" version="1.1" id="pi-sepadirectdebit-Layer_1" role="img" aria-labelledby="pi-sepadirectdebit" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 38 24" xml:space="preserve"><title id="pi-sepadirectdebit">SEPA Direct Debit</title><style type="text/css">.st2{fill:#0054a5}</style><path d="M3 1h32c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2z" fill="#fff"/><path d="M3 .5h32c1.4 0 2.5 1.1 2.5 2.5v18c0 1.4-1.1 2.5-2.5 2.5H3C1.6 23.5.5 22.4.5 21V3C.5 1.6 1.6.5 3 .5z" fill="none" stroke="#fff" stroke-opacity=".07"/><g id="pi-sepadirectdebit-rNOiWK.tif"><path class="st2" d="M10.7 10.5h-2c0-.3 0-.6-.1-.7-.1-.2-.5-.3-1-.3s-.9 0-1.1.1-.3.3-.3.6.1.5.2.6.3.1.4.1h.4c.9.1 1.4.1 1.6.1.7.1 1.2.3 1.5.6.2.2.4.5.4.9v.8c0 .7-.1 1.1-.2 1.4-.2.6-.7.9-1.5 1.1-.3.1-.8.1-1.5.1-1.1 0-1.9-.1-2.4-.2-.5-.2-.9-.5-1.1-1-.1-.3-.1-.8-.1-1.4h2v.2c0 .4.1.6.3.7.1.1.3.1.5.1h.7c.4 0 .6 0 .7-.1.2-.1.3-.2.4-.4v-.4c0-.4-.1-.6-.4-.7-.1 0-.6-.1-1.4-.1-.6 0-1.1-.1-1.4-.1-.7-.1-1.1-.4-1.3-.8-.2-.3-.3-.8-.3-1.5 0-.5.1-.9.2-1.2.1-.3.3-.5.5-.7.5-.2.5-.2.7-.2.4-.1.5-.1 1-.1h1.5c.9 0 1.5 0 1.8.1.9.2 1.3.9 1.3 2v.4zM19.7 16.1V7.9H23.8c.6 0 1 0 1.3.1.7.2 1.1.6 1.3 1.3.1.3.2.9.2 1.5 0 .8-.1 1.4-.2 1.8-.3.7-.8 1.1-1.6 1.2H21.9v2.1h-2.2v.2zm2.2-4h1.4c.4 0 .7 0 .8-.1.1-.1.2-.2.3-.4V11c0-.3 0-.6-.1-.8s-.3-.4-.6-.4H21.9v2.3zM31.2 14.7h-2.9l-.4 1.4h-2.3L28 8h3.3l2.5 8.1h-2.2l-.4-1.4zm-.4-1.6l-1-3.5-1 3.5h2z"/><path d="M16.7 9.1c.9 0 1.7.4 2.2 1.1l.5-1c-.8-.8-1.8-1.2-2.9-1.2-1.7 0-3.2 1-3.8 2.5h-.9l-.5 1.2h1.2v.7h-.6l-.5 1.2h1.4c.6 1.4 2.1 2.4 3.8 2.4.9 0 1.6-.3 2.3-.7v-1.4c-.5.6-1.3 1-2.2 1-1 0-1.9-.5-2.4-1.3h3l.5-1.2h-4V12v-.3h4.4l.5-1.2h-4.5c.5-.8 1.4-1.4 2.5-1.4z" fill="#ffc10e"/></g></svg>

</br

If the icons are intended for use by Shopify, please provide the following info:

Who are you working with at Shopify? (avoid adding personal details, provide github handle(preferred) or first name and last name)

What's the expected date of this change to deploy on Shopify?

Jacquesattaque commented 9 months ago

@sakifutamura This payment method already exists as sepa_bank_transfer. You can go ahead and use that.

sakifutamura commented 9 months ago

@Jacquesattaque SEPA Direct Debit is different than SEPA bank transfer; SEPA Direct Debit is a reusable payment method intended for recurring payments, while SEPA Bank Transfers are one-time direct wire transfers. We need to be able to change the hover label used for the payment icon, depending on which SEPA payment method is being used, so we don't introduce confusion to our customers. I suggest that this is similar to how Klarna has four distinct payment methods listed here with the same logo; because Klarna, Klarna Pay Now, Klarna Pay Later, and Klarna Slice It are distinct payment methods. Could you please re-consider your decision to close this PR? :pray:

Jacquesattaque commented 9 months ago

@sakifutamura Thanks for the context. Yes, you can resubmit this — please use the same icon as for SEPA bank transfer though. It looks like the size of the logo is different in yours.

activemerchant / payment_icons