Add payment method icons for Scream Truck and Ansa

[carolkng]

Why are you adding this icons?

Ansa is a service that provides branded wallets for merchants on Shopify, and Scream Truck is a company that offers customer the option to pay with their own branded stored value balance. We're adding these merchant-specific icons to signal to a customer that they can pay with their Ansa balance or Scream Truck balance.

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.
• I'm an individual and I've read all the brand icon’s guidelines.

Link to the brand guidelines:

• Scream Truck home page: https://www.screamtruck.com/
• Ansa home page: https://www.ansa.dev/

Checklist to add new icons

• All icons have a corresponding entry in db/payment_icons.yml
• I have followed the icon guidelines detailed in the CONTRIBUTING.md file
• I have optimized the icon with SVGO
• I am confident that all icons are clear and easy to read/understand
• I have provided a link to the brand icon’s brand guidelines whenever possible.
• I have attached a screenshot comparison with the example icon provided in guidelines
• 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>

<!-- 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) Lacy (payment platform partner)

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

[dannye0231]

@carolkng are you able to check the following issue with your SVG?

Failure:
PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]:
{:message=>"The 'mask0_560_1482' ID should be pi-poweredbyansa-mask0_560_1482 (missing 'pi-' prefix)"}.
Expected /pi-(.*)/ to match "mask0_560_1482".

[carolkng]

@dannye0231 I've updated the icon mask id's -- would you be able to run the workflows again? Thanks!

[dannye0231]

@carolkng one more SVG issue:

Failure:
PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]:
{:message=>"The 'clip0_551_1452' ID should be pi-screamtruck-clip0_551_1452 (missing 'pi-' prefix)"}.
Expected /pi-(.*)/ to match "clip0_551_1452".

rails test /home/runner/work/payment_icons/payment_icons/test/unit/payment_icon_test.rb:61

....

[carolkng]

@dannye0231 updated to fix that issue (and would appreciate another workflow run)! Is there a local command off the top of your head that one could use to install test dependencies and run the test suite?

[dannye0231]

Thanks @carolkng , looks good now. As for testing, the easiest thing would be to just let our testing workflows run once the changes have been submitted. I'll try to get this PR reviewed now in preparation for next weeks merge.