From 4b2a9f7138189224502a221f4ddd2c01d4262d41 Mon Sep 17 00:00:00 2001
From: myprestarocks <info@mypresta.rocks>
Date: Mon, 26 Jan 2026 14:45:40 +0000
Subject: [PATCH] Update payment icons to match template naming convention

- Renamed all icon IDs to use -color suffix (visa-color, mastercard-color, etc.)
- Changed underscore naming for multi-word icons (apple_pay-color, google_pay-color, etc.)
- Added missing icons: discover, jcb, unionpay, affirm, afterpay
- Now contains 27 payment icons matching actual template usage
- Updated README with categorized icon list

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 README.md            |  22 +++++--
 sprites/payments.svg | 152 +++++++++++++++++++++++++++++++++++++++----
 2 files changed, 158 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 3705f46..0af6812 100644
--- a/README.md
+++ b/README.md
@@ -125,12 +125,26 @@ Include sprite once (hidden), use anywhere:
 {include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/payments.svg"}
 
 <!-- Use icons -->
-<svg width="38" height="24"><use href="#visa"/></svg>
-<svg width="38" height="24"><use href="#mastercard"/></svg>
-<svg width="38" height="24"><use href="#paypal"/></svg>
+<svg width="38" height="24"><use href="#visa-color"/></svg>
+<svg width="38" height="24"><use href="#mastercard-color"/></svg>
+<svg width="38" height="24"><use href="#paypal-color"/></svg>
 ```
 
-Available: `visa`, `mastercard`, `amex`, `paypal`, `stripe`, `applepay`, `googlepay`, `klarna`, `ideal`, `bancontact`, `sepa`, `card`
+Available (27 icons):
+
+| Card Networks | Wallets | BNPL | Regional |
+|---------------|---------|------|----------|
+| `visa-color` | `paypal-color` | `klarna-color` | `ideal-color` |
+| `mastercard-color` | `apple_pay-color` | `alma-color` | `bancontact-color` |
+| `american_express-color` | `google_pay-color` | `affirm-color` | `blik-color` |
+| `discover-color` | `samsung_pay-color` | `afterpay-color` | `eps-color` |
+| `jcb-color` | `revolut-color` | | `multibanco-color` |
+| `unionpay-color` | `alipay-color` | | `p24-color` |
+| `card-color` | `wechat_pay-color` | | `sepa-color` |
+| | `satispay-color` | | `twint-color` |
+| | `mobilepay-color` | | |
+| | `link-color` | | |
+| | `stripe-color` | | |
 
 ### Social Icons
 
diff --git a/sprites/payments.svg b/sprites/payments.svg
index 67cc01a..4a8e5b1 100644
--- a/sprites/payments.svg
+++ b/sprites/payments.svg
@@ -1,13 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
   <!-- Visa -->
-  <symbol id="visa" viewBox="0 0 38 24">
+  <symbol id="visa-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#fff"/>
     <path fill="#1A1F71" d="M15.3 15.9h-2.4l1.5-9.3h2.4l-1.5 9.3zm10.2-9.1c-.5-.2-1.2-.4-2.2-.4-2.4 0-4.1 1.3-4.1 3.1 0 1.4 1.2 2.1 2.2 2.6 1 .5 1.3.8 1.3 1.2 0 .7-.8 1-1.5 1-1 0-1.6-.2-2.4-.5l-.3-.2-.4 2.2c.6.3 1.7.5 2.9.5 2.6 0 4.2-1.3 4.3-3.2 0-1.1-.6-1.9-2-2.6-.9-.4-1.4-.7-1.4-1.2 0-.4.4-.8 1.4-.8.8 0 1.4.2 1.8.4l.2.1.4-2.2zM29 15.9h2l-1.8-9.3h-1.9c-.4 0-.8.2-1 .7l-3.6 8.6h2.6l.5-1.4h3.1l.1 1.4zm-2.7-3.4l1.3-3.5.7 3.5h-2zm-13.5-5.9l-2.4 6.4-.3-1.3c-.5-1.6-2-3.4-3.6-4.3l2.2 8.5h2.6l3.9-9.3h-2.4z"/>
     <path fill="#F9A533" d="M7.3 6.6H3.5l-.1.3c3 .8 5 2.7 5.9 5l-.8-4.3c-.2-.7-.6-1-1.2-1z"/>
   </symbol>
 
   <!-- Mastercard -->
-  <symbol id="mastercard" viewBox="0 0 38 24">
+  <symbol id="mastercard-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#fff"/>
     <circle cx="15" cy="12" r="7" fill="#EA001B"/>
     <circle cx="23" cy="12" r="7" fill="#F79E1B"/>
@@ -15,13 +15,13 @@
   </symbol>
 
   <!-- American Express -->
-  <symbol id="amex" viewBox="0 0 38 24">
+  <symbol id="american_express-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#006FCF"/>
     <path fill="#fff" d="M8.5 11.6l-.8-2-.8 2h1.6zm17.1-1.8h-2.4v.9h2.3v1.4h-2.3v1h2.5l1.1-1.7-1.2-1.6zm-7.5 0h-1.4l-1.1 1.5-1-1.5H12v3.3l-1.6-3.3H8.6L6.4 14h1.5l.4-.9h2.3l.4.9h2.6v-2.6l1.2 2.6h1l1.2-2.6v2.6h1.5v-4.2zm9.2 0l-1.4 2-1.5-2h-1.7l2.3 3v1.2h1.6v-1.2l2.4-3h-1.7z"/>
   </symbol>
 
   <!-- PayPal -->
-  <symbol id="paypal" viewBox="0 0 38 24">
+  <symbol id="paypal-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#fff"/>
     <path fill="#003087" d="M14.8 7h-4.5c-.3 0-.6.2-.6.5l-1.8 11.5c0 .2.2.4.4.4h2.2c.3 0 .6-.2.6-.5l.5-3.2c0-.3.3-.5.6-.5h1.5c2.9 0 4.6-1.4 5-4.2.2-1.2 0-2.1-.5-2.8-.6-.8-1.7-1.2-3.4-1.2z"/>
     <path fill="#003087" d="M15.4 10.8c-.2 1.6-1.3 1.6-2.4 1.6h-.6l.4-2.7c0-.2.2-.3.4-.3h.3c.7 0 1.4 0 1.8.4.2.3.3.6.1 1z"/>
@@ -30,19 +30,19 @@
   </symbol>
 
   <!-- Stripe -->
-  <symbol id="stripe" viewBox="0 0 38 24">
+  <symbol id="stripe-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#6772E5"/>
     <path fill="#fff" d="M17.6 10.5c0-.6.5-.9 1.3-.9.7 0 1.6.2 2.3.6V8c-.8-.3-1.5-.4-2.3-.4-1.9 0-3.1 1-3.1 2.6 0 2.6 3.5 2.2 3.5 3.3 0 .7-.6 1-1.4 1-.8 0-1.8-.3-2.6-.8v2.2c.9.4 1.8.6 2.6.6 1.9 0 3.2-1 3.2-2.6 0-2.8-3.5-2.3-3.5-3.4z"/>
   </symbol>
 
   <!-- Apple Pay -->
-  <symbol id="applepay" viewBox="0 0 38 24">
+  <symbol id="apple_pay-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#000"/>
     <path fill="#fff" d="M13.1 8.2c-.3.4-.8.7-1.3.6-.1-.5.2-1 .4-1.3.3-.4.8-.6 1.2-.7.1.5-.1 1-.3 1.4zm.3.7c-.7 0-1.4.4-1.7.4-.4 0-.9-.4-1.5-.4-.8 0-1.5.5-1.9 1.2-.8 1.4-.2 3.4.6 4.5.4.6.9 1.2 1.5 1.2.6 0 .8-.4 1.5-.4.7 0 .9.4 1.5.4.7 0 1.1-.6 1.5-1.1.5-.7.7-1.3.7-1.4-.1 0-1.3-.5-1.3-1.9 0-1.2 1-1.8 1-1.8-.5-.8-1.4-.9-1.7-.9l-.2.2zm6.9-1.3v8.1h1.3v-2.8h1.7c1.6 0 2.7-1.1 2.7-2.7 0-1.5-1.1-2.6-2.6-2.6h-3.1zm1.3 1.1h1.4c1.1 0 1.7.6 1.7 1.6 0 1-.6 1.6-1.7 1.6h-1.4V8.7zm7.1 7.1c.8 0 1.6-.4 1.9-1.1h0v1h1.2v-4c0-1.2-.9-2-2.4-2-1.4 0-2.4.8-2.4 1.9h1.2c.1-.6.6-.9 1.2-.9.8 0 1.2.4 1.2 1v.5l-1.6.1c-1.5.1-2.3.7-2.3 1.8 0 1 .8 1.7 2 1.7zm.3-1c-.7 0-1.1-.3-1.1-.8 0-.6.4-.9 1.3-.9l1.4-.1v.5c0 .8-.7 1.3-1.6 1.3z"/>
   </symbol>
 
   <!-- Google Pay -->
-  <symbol id="googlepay" viewBox="0 0 38 24">
+  <symbol id="google_pay-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#fff"/>
     <path fill="#5F6368" d="M18.5 12.5v2.4h-.8v-6h2.1c.5 0 1 .2 1.4.5.4.4.6.8.6 1.3s-.2 1-.6 1.3c-.4.4-.9.5-1.4.5h-1.3zm0-2.8v2h1.4c.3 0 .6-.1.8-.3.4-.4.4-1 0-1.4-.2-.2-.5-.3-.8-.3h-1.4z"/>
     <path fill="#5F6368" d="M23.6 10.5c.6 0 1 .2 1.4.5.4.3.5.8.5 1.4v2.5h-.7v-.6h0c-.3.5-.8.7-1.3.7-.5 0-.9-.1-1.2-.4-.3-.3-.5-.6-.5-1 0-.5.2-.8.5-1.1.3-.3.8-.4 1.4-.4.5 0 .9.1 1.2.3v-.2c0-.3-.1-.5-.3-.7-.2-.2-.5-.3-.8-.3-.4 0-.8.2-1 .5l-.7-.4c.4-.5.9-.8 1.5-.8zm-1.1 2.9c0 .2.1.4.3.5.2.1.4.2.6.2.4 0 .7-.1.9-.4.3-.2.4-.5.4-.9-.2-.2-.6-.3-1-.3-.3 0-.6.1-.8.2-.3.2-.4.4-.4.7z"/>
@@ -54,13 +54,13 @@
   </symbol>
 
   <!-- Klarna -->
-  <symbol id="klarna" viewBox="0 0 38 24">
+  <symbol id="klarna-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#FFB3C7"/>
     <path fill="#0A0B09" d="M10.5 7h2v10h-2V7zm3.8 0c0 2.2-.8 4.2-2.2 5.8l3.8 4.2h-2.6L10 13l.7-.6c1.6-1.3 2.6-3.2 2.6-5.4h1zm4.8 6.3c-.7 0-1.2.6-1.2 1.2 0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2c0-.6-.5-1.2-1.2-1.2zm7.4-6.3h-2v10h2V7zm-4.7 3.5c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v5.5h2v-5.3c0-.2.2-.4.4-.4s.4.2.4.4v5.3h2v-5.5h-1.2zm7.5 0c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v5.5h2v-5.3c0-.2.2-.4.4-.4s.4.2.4.4v5.3h2v-5.5h-1.2z"/>
   </symbol>
 
   <!-- iDEAL -->
-  <symbol id="ideal" viewBox="0 0 38 24">
+  <symbol id="ideal-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#fff"/>
     <path fill="#C06" d="M8 6h22v12H8z"/>
     <path fill="#fff" d="M10 8h18v8H10z"/>
@@ -69,7 +69,7 @@
   </symbol>
 
   <!-- Bancontact -->
-  <symbol id="bancontact" viewBox="0 0 38 24">
+  <symbol id="bancontact-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#fff"/>
     <path fill="#005498" d="M6 6h13v12H6z"/>
     <path fill="#FFD800" d="M19 6h13v12H19z"/>
@@ -77,7 +77,7 @@
   </symbol>
 
   <!-- SEPA -->
-  <symbol id="sepa" viewBox="0 0 38 24">
+  <symbol id="sepa-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#fff"/>
     <rect x="4" y="6" width="30" height="12" rx="1" fill="#2E4A9D"/>
     <path fill="#FFD617" d="M12 12l4-3v6z"/>
@@ -85,10 +85,138 @@
   </symbol>
 
   <!-- Generic Card -->
-  <symbol id="card" viewBox="0 0 38 24">
+  <symbol id="card-color" viewBox="0 0 38 24">
     <rect width="38" height="24" rx="3" fill="#E6E6E6"/>
     <rect x="4" y="8" width="8" height="6" rx="1" fill="#B3B3B3"/>
     <rect x="4" y="16" width="12" height="2" rx="1" fill="#B3B3B3"/>
     <rect x="26" y="16" width="8" height="2" rx="1" fill="#B3B3B3"/>
   </symbol>
+
+  <!-- Alipay -->
+  <symbol id="alipay-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#1677FF"/>
+    <path fill="#fff" d="M25.5 14.5c-2-.8-4.2-1.8-5.5-2.3.6-1.1 1-2.4 1.2-3.7h-3.4v-1.2h4.1V6.2h-4.1V5h-1.6v1.2h-4v1.1h4v1.2h-3.3v1.1h5.5c-.2.9-.5 1.8-.9 2.5-1.5-.4-3.2-.6-4.5-.6-2.7 0-4.5 1.2-4.5 2.8 0 1.7 1.8 2.8 4.5 2.8 2 0 3.8-.7 5.2-1.9 2.5 1.2 5.8 2.5 7.3 2.9V14.5zm-12.5.2c0-.8 1-1.4 2.5-1.4.9 0 1.9.1 2.9.4-.9.8-2.1 1.3-3.3 1.3-1.4 0-2.1-.4-2.1-.3z"/>
+  </symbol>
+
+  <!-- Alma -->
+  <symbol id="alma-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#FA5022"/>
+    <path fill="#fff" d="M11 16h2.5l1-3h3l1 3h2.5l-3.5-9h-3l-3.5 9zm4.2-5l.8-2.5.8 2.5h-1.6zm7.8 5h2v-9h-2v9zm4-9v9h2v-3.5l2.5 3.5h2.5l-3-4 2.8-5h-2.4l-2.4 4.2V7h-2z"/>
+  </symbol>
+
+  <!-- Blik -->
+  <symbol id="blik-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#fff"/>
+    <circle cx="11" cy="12" r="4" fill="#E6007E"/>
+    <circle cx="19" cy="12" r="4" fill="#000"/>
+    <circle cx="27" cy="12" r="4" fill="#E6007E"/>
+  </symbol>
+
+  <!-- EPS -->
+  <symbol id="eps-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#fff"/>
+    <rect x="4" y="6" width="30" height="12" rx="2" fill="#9E1C72"/>
+    <path fill="#fff" d="M10 10h4v1h-3v1h2.5v1H11v1h3v1h-4v-5zm6 0h2.5c1 0 1.5.5 1.5 1.3 0 .6-.3 1-.8 1.2.5.1.8.5.8 1.1 0 .9-.6 1.4-1.6 1.4H16v-5zm1.2 2h1c.4 0 .6-.2.6-.5s-.2-.5-.6-.5h-1v1zm0 2h1.1c.4 0 .6-.2.6-.5s-.2-.5-.6-.5h-1.1v1zm5.8-2.5c-.4-.3-.9-.5-1.5-.5s-1 .2-1 .5c0 .8 2.8.4 2.8 2 0 1-.9 1.5-2 1.5-.9 0-1.6-.3-2.1-.7l.5-.9c.4.4 1 .6 1.6.6s1-.2 1-.6c0-.8-2.8-.4-2.8-2 0-.9.8-1.4 2-1.4.8 0 1.4.2 1.9.5l-.4.9z"/>
+  </symbol>
+
+  <!-- Stripe Link -->
+  <symbol id="link-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#00D66F"/>
+    <path fill="#fff" d="M19 7c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/>
+    <circle cx="19" cy="12" r="1.5" fill="#fff"/>
+  </symbol>
+
+  <!-- MobilePay -->
+  <symbol id="mobilepay-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#5A78FF"/>
+    <path fill="#fff" d="M15 7h2l3 5 3-5h2v10h-2v-6.5l-2.5 4h-1l-2.5-4V17h-2V7z"/>
+  </symbol>
+
+  <!-- Multibanco -->
+  <symbol id="multibanco-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#fff"/>
+    <rect x="8" y="6" width="22" height="12" rx="1" fill="#1E4388"/>
+    <path fill="#fff" d="M13 10h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2z"/>
+    <rect x="13" y="15" width="12" height="1" fill="#D4A517"/>
+  </symbol>
+
+  <!-- Przelewy24 (P24) -->
+  <symbol id="p24-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#fff"/>
+    <rect x="4" y="6" width="30" height="12" rx="1" fill="#D13239"/>
+    <path fill="#fff" d="M10 10h2c1.5 0 2.5.8 2.5 2s-1 2-2.5 2h-1v2h-1v-6zm1 3h1c.8 0 1.3-.4 1.3-1s-.5-1-1.3-1h-1v2zm7-3h4v1h-2.5v1h2v1h-2v2h3v1h-4.5v-6z"/>
+  </symbol>
+
+  <!-- Revolut -->
+  <symbol id="revolut-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#191C1F"/>
+    <path fill="#fff" d="M12 8h4c1.5 0 2.5 1 2.5 2.3 0 1-.6 1.8-1.5 2.1l2 3.6h-1.8l-1.8-3.3h-1.6V16H12V8zm1.8 3.2h2c.6 0 1-.4 1-1s-.4-1-1-1h-2v2z"/>
+    <circle cx="25" cy="12" r="4" fill="#fff"/>
+    <circle cx="25" cy="12" r="2" fill="#191C1F"/>
+  </symbol>
+
+  <!-- Samsung Pay -->
+  <symbol id="samsung_pay-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#1428A0"/>
+    <path fill="#fff" d="M8 14.5c0-.5.4-.9.9-.9h.6c.3 0 .5.1.7.3l1.8 2v-2.3h1v3.9h-.7c-.2 0-.4-.1-.5-.2l-1.9-2.1v2.3H9c-.5 0-.9-.4-.9-.9v-2.1zm7-1l1.3 2.6 1.3-2.6h1.2l-1.9 3.9h-1.2l-1.9-3.9H15zm5 0h2.8v.9H21v.7h1.7v.8H21v.7h1.8v.9h-2.8v-4zm4 0h2.8v.9H25v.7h1.7v.8H25v1.6h-1v-4zm4 0h1v3.1h1.8v.9H28v-4z"/>
+    <path fill="#fff" d="M11 8h16c.5 0 1 .4 1 1v1H10V9c0-.6.4-1 1-1z"/>
+  </symbol>
+
+  <!-- Satispay -->
+  <symbol id="satispay-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#F24444"/>
+    <circle cx="19" cy="12" r="6" fill="#fff"/>
+    <path fill="#F24444" d="M17 10h4v1h-3v1h2v1h-2v2h-1v-5z"/>
+  </symbol>
+
+  <!-- TWINT -->
+  <symbol id="twint-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#000"/>
+    <path fill="#FFFC00" d="M10 10h3v1h-1v5h-1v-5h-1v-1zm5 0h1l1 4 1-4h1l-1.5 6h-1l-1.5-6zm5 0h1v6h-1v-6zm3 0h1l2 4v-4h1v6h-1l-2-4v4h-1v-6zm6 0h3v1h-1v5h-1v-5h-1v-1z"/>
+  </symbol>
+
+  <!-- WeChat Pay -->
+  <symbol id="wechat_pay-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#07C160"/>
+    <path fill="#fff" d="M19 6c-4.4 0-8 3.1-8 7 0 2.2 1.2 4.2 3 5.5l-.8 2.5 3-1.5c.9.3 1.8.5 2.8.5 4.4 0 8-3.1 8-7s-3.6-7-8-7zm-3 5.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm6 0c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/>
+  </symbol>
+
+  <!-- Discover -->
+  <symbol id="discover-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#fff"/>
+    <rect x="0" y="0" width="38" height="24" rx="3" fill="#F9F9F9"/>
+    <path fill="#F47216" d="M38 12c0 6.6-8.5 12-19 12S0 18.6 0 12h38z"/>
+    <circle cx="24" cy="12" r="5" fill="#F47216"/>
+  </symbol>
+
+  <!-- JCB -->
+  <symbol id="jcb-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#fff"/>
+    <rect x="6" y="6" width="8" height="12" rx="2" fill="#0B4EA2"/>
+    <rect x="15" y="6" width="8" height="12" rx="2" fill="#BF1E2D"/>
+    <rect x="24" y="6" width="8" height="12" rx="2" fill="#009945"/>
+    <path fill="#fff" d="M9 10h2v4c0 .5-.4 1-1 1s-1-.5-1-1v-4zm10 0h2c1 0 1.5.7 1.5 1.5 0 .5-.2 1-.7 1.2.4.2.7.6.7 1.1 0 .9-.6 1.7-1.5 1.7h-2v-5.5zm1 2h.8c.4 0 .6-.2.6-.5s-.2-.5-.6-.5h-.8v1zm0 2h.8c.4 0 .7-.2.7-.5s-.2-.5-.7-.5H20v1zm8-1.5c0 1.4-1 2.5-2.3 2.5S25 14 25 12.5c0-1.4 1-2.5 2.3-2.5h.5v1h-.5c-.8 0-1.3.7-1.3 1.5s.5 1.5 1.3 1.5.8-.2.8-.5v-1h1v2z"/>
+  </symbol>
+
+  <!-- UnionPay -->
+  <symbol id="unionpay-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#fff"/>
+    <path fill="#E21836" d="M11 6h7l-2 12h-7z"/>
+    <path fill="#00447C" d="M16 6h7l-2 12h-7z"/>
+    <path fill="#019B7E" d="M21 6h7l-2 12h-7z"/>
+  </symbol>
+
+  <!-- Affirm -->
+  <symbol id="affirm-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#0FA0EA"/>
+    <path fill="#fff" d="M11 16h2l.5-2h2l.5 2h2l-2-8h-3l-2 8zm2.8-4l.7-2.5.7 2.5h-1.4zm6.2 4h2v-3h2v-2h-2v-1h2.5v-2H20v8zm7-8v8h2v-8h-2z"/>
+  </symbol>
+
+  <!-- Afterpay -->
+  <symbol id="afterpay-color" viewBox="0 0 38 24">
+    <rect width="38" height="24" rx="3" fill="#B2FCE4"/>
+    <path fill="#000" d="M11 16h2l.5-2h2l.5 2h2l-2-8h-3l-2 8zm2.8-4l.7-2.5.7 2.5h-1.4z"/>
+    <circle cx="26" cy="12" r="4" fill="#000"/>
+    <path fill="#B2FCE4" d="M24.5 11l1 1.5 1.5-2.5h1l-2 3.5v1.5h-1v-1.5l-2-3.5h1l1.5 2.5z"/>
+  </symbol>
 </svg>