activemerchant / payment_icons

An easy to use library that allows you to manage and access payment icons
MIT License
149 stars 436 forks source link

Add new bob pay icons #1234

Open sthembisoo opened 1 month ago

sthembisoo commented 1 month ago

Why are you adding this icons?

I'm adding/updating this icon(s) because ..

Help us identify yourself

Link to the brand guidelines: https://www.bobpay.co.za/

Checklist to add new icons

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

Screenshot 2024-11-06 at 10 38 58 Screenshot 2024-11-11 at 08 50 30

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>

<!-- TODO: insert your icon here -->
<YOUR SVG CODE>

<br>
<!-- TODO: insert your icon here -->
<YOUR SVG CODE>
</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?

dannye0231 commented 1 month ago

@sthembisoo can you please email me (danny.elisha@shopify.com) with your Partner ID and App ID? I see an issue with the Bob Pay app which may get it delisted from the platform and I just want to see if this is the same app which you're trying to update.

dannye0231 commented 1 month ago

Hi @sthembisoo , can you please check your SVG file ID tags that are used? We are seeing an error when testing:

Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:78]: {:message=>"The 'bob_pay_capitec_pay' SVG file does not have the appropriate value"}. Expected: "Bob Pay Capitec Pay" Actual: "Capitec Pay"</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dannye0231"><img src="https://avatars.githubusercontent.com/u/143747522?v=4" />dannye0231</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Hi @sthembisoo , can you please check the new error that just came up? </p> <p>Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:81]: {:message=>"The 'bob_pay_instant_eft' SVG file does not have the appropriate 'id' value on the <title> tag"}. Expected: "pi-bob_pay_instant_eft" Actual: "pi-bob-pay-instant-eft"</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Hi @sthembisoo , can you please check the new error that just came up?</p> <p>Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:81]: {:message=>"The 'bob_pay_instant_eft' SVG file does not have the appropriate 'id' value on the <title> tag"}. Expected: "pi-bob_pay_instant_eft" Actual: "pi-bob-pay-instant-eft"</p> </blockquote> <p>Hi @dannye0231 </p> <p>Thanks for the update, I've updated my svg files to use the correct convention for the title tag.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dannye0231"><img src="https://avatars.githubusercontent.com/u/143747522?v=4" />dannye0231</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Hi @sthembisoo , it looks there is another issue that is flagged:</p> <p>PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern0_819_5041' ID should be pi-bob_pay_instant_eft-pattern0_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern0_819_5041".</p> <p>Are you able to take a look? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Hi @sthembisoo , it looks there is another issue that is flagged:</p> <p>PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern0_819_5041' ID should be pi-bob_pay_instant_eft-pattern0_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern0_819_5041".</p> <p>Are you able to take a look?</p> </blockquote> <p>Thanks for the update @dannye0231,</p> <p>I've updated my icons.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dannye0231"><img src="https://avatars.githubusercontent.com/u/143747522?v=4" />dannye0231</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG:</p> <p>Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG:</p> <p>Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".</p> </blockquote> <p>Hi Danny,</p> <p>thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG: Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".</p> </blockquote> <p>Hi Danny,</p> <p>thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update</p> </blockquote> <p>Hi @dannye0231,</p> <p>I'm just following up if there's any feedback on the latest commit I did for the payment icons?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dannye0231"><img src="https://avatars.githubusercontent.com/u/143747522?v=4" />dannye0231</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <blockquote> <p>Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG: Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".</p> </blockquote> <p>Hi Danny, thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update</p> </blockquote> <p>Hi @dannye0231,</p> <p>I'm just following up if there's any feedback on the latest commit I did for the payment icons?</p> </blockquote> <p>Hi @sthembisoo , I don't see any errors showing up in our test cases. The only piece left is to have our design team review the SVG and approve it. We're aiming to have another merge run closer to the end of this week.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <blockquote> <blockquote> <p>Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG: Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".</p> </blockquote> <p>Hi Danny, thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update</p> </blockquote> <p>Hi @dannye0231, I'm just following up if there's any feedback on the latest commit I did for the payment icons?</p> </blockquote> <p>Hi @sthembisoo , I don't see any errors showing up in our test cases. The only piece left is to have our design team review the SVG and approve it. We're aiming to have another merge run closer to the end of this week.</p> </blockquote> <p>Hi @dannye0231,</p> <p>Good to hear, thanks for the update.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <p>Hi @dannye0231,</p> <p>has there been any feedback from the design team about the payment icons?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dannye0231"><img src="https://avatars.githubusercontent.com/u/143747522?v=4" />dannye0231</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <p>Hi @sthembisoo , we should have the reviews completed this week</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Make sure the entire logo is within the borders. The T is currently overlapping with the right border</p> </blockquote> <p>Hi @Lydia-shan-git, I've updated the example screenshot. can you please have look at it again when you have capacity</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 1 week ago</strong> </div> <div class="markdown-body"> <p>Hi @Lydia-shan-git, do you have any feedback on the updated payment logo above? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sthembisoo"><img src="https://avatars.githubusercontent.com/u/50372462?v=4" />sthembisoo</a> commented <strong> 6 days ago</strong> </div> <div class="markdown-body"> <p>Hi @dannye0231, could you perhaps help with the design review step that we are left with?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>