Add new payment logo SVGs for Discover, JCB, Maestro, Mastercard, UnionPay, and Visa

- Added discover.svg for Discover card logo.
- Added jcb.svg for JCB card logo.
- Added maestro.svg for Maestro card logo.
- Added mastercard.svg for Mastercard logo.
- Added unionpay.svg for UnionPay logo.
- Added visa.svg for Visa card logo.

webapp/public/payment-logos/LICENSE

@@ -0,0 +1,428 @@
+Attribution-ShareAlike 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+	wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More_considerations
+     for the public: 
+	wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution-ShareAlike 4.0 International Public
+License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution-ShareAlike 4.0 International Public License ("Public
+License"). To the extent this Public License may be interpreted as a
+contract, You are granted the Licensed Rights in consideration of Your
+acceptance of these terms and conditions, and the Licensor grants You
+such rights in consideration of benefits the Licensor receives from
+making the Licensed Material available under these terms and
+conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. BY-SA Compatible License means a license listed at
+     creativecommons.org/compatiblelicenses, approved by Creative
+     Commons as essentially the equivalent of this Public License.
+
+  d. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  e. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  f. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  g. License Elements means the license attributes listed in the name
+     of a Creative Commons Public License. The License Elements of this
+     Public License are Attribution and ShareAlike.
+
+  h. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  i. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  j. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  k. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  l. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  m. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part; and
+
+            b. produce, reproduce, and Share Adapted Material.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. Additional offer from the Licensor -- Adapted Material.
+               Every recipient of Adapted Material from You
+               automatically receives an offer from the Licensor to
+               exercise the Licensed Rights in the Adapted Material
+               under the conditions of the Adapter's License You apply.
+
+            c. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+  b. ShareAlike.
+
+     In addition to the conditions in Section 3(a), if You Share
+     Adapted Material You produce, the following conditions also apply.
+
+       1. The Adapter's License You apply must be a Creative Commons
+          license with the same License Elements, this version or
+          later, or a BY-SA Compatible License.
+
+       2. You must include the text of, or the URI or hyperlink to, the
+          Adapter's License You apply. You may satisfy this condition
+          in any reasonable manner based on the medium, means, and
+          context in which You Share Adapted Material.
+
+       3. You may not offer or impose any additional or different terms
+          or conditions on, or apply any Effective Technological
+          Measures to, Adapted Material that restrict exercise of the
+          rights granted under the Adapter's License You apply.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material,
+
+     including for purposes of Section 3(b); and
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.
+

webapp/public/payment-logos/NOTICE.md

@@ -0,0 +1,4 @@
+Payment logos in this directory are from datatrans/payment-logos.
+
+Source: https://github.com/datatrans/payment-logos
+License: CC-BY-SA-4.0

webapp/public/payment-logos/cards/american-express.svg

@@ -0,0 +1,4 @@
+<svg width="120" height="80" version="1.1" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+<rect x="40" width="80" height="80" rx="4" fill="#fff" fill-rule="evenodd" />
+<path d="m120 76v-8.6763h-9.651l-4.969-5.4944-4.994 5.4944h-31.822v-25.607h-10.27l12.74-28.831h12.286l4.3857 9.877v-9.877h15.208l2.64 7.4429 2.658-7.4429h11.789v-8.8854c0-2.2091-1.7909-4-4-4h-112c-2.2091 4.4409e-16 -4 1.7909-4 4v72c4.4409e-16 2.2091 1.7909 4 4 4h112c2.2091 0 4-1.7909 4-4zm-8.026-11.882h8.026l-10.616-11.258 10.616-11.13h-7.898l-6.556 7.1645-6.4935-7.1645h-8.0275l10.554 11.194-10.554 11.194h7.8041l6.5889-7.2283 6.556 7.2283zm1.878-11.249 6.148 6.5406v-13.027l-6.148 6.4861zm-35.78 6.0675v-3.4864h12.633v-5.0534h-12.633v-3.4859h12.953l5e-4 -5.1815h-19.062v22.388h19.062l-5e-4 -5.1813h-12.953zm35.883-20.456h6.045v-22.388h-9.403l-5.022 13.944-4.989-13.944h-9.5631v22.388h6.0446v-15.672l5.7575 15.672h5.373l5.757-15.704v15.704zm-29.809 0h6.8765l-9.8824-22.388h-7.8682l-9.8833 22.388h6.7166l1.8554-4.4776h10.298l1.887 4.4776zm-3.9976-9.4992h-6.0773l3.0387-7.3242 3.0386 7.3242z" fill="#0690FF"/>
+</svg>

webapp/public/payment-logos/cards/diners.svg

@@ -0,0 +1,11 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="url(#paint0_linear_804_2)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.3997 64.8343C79.0213 64.8992 91.4542 53.7631 91.4542 40.2157C91.4542 25.4007 79.0213 15.1605 65.3997 15.1654H53.6768C39.8921 15.1605 28.5459 25.4038 28.5459 40.2157C28.5459 53.7661 39.8921 64.8993 53.6768 64.8343H65.3997Z" fill="#3477B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.6852 17.1522C41.0891 17.1561 30.8821 27.3313 30.8792 39.8896C30.8821 52.4456 41.089 62.6199 53.6852 62.6238C66.2843 62.6199 76.4934 52.4456 76.4952 39.8896C76.4933 27.3313 66.2843 17.1561 53.6852 17.1522ZM39.2291 39.8896C39.241 33.7529 43.0866 28.5199 48.5095 26.4404V53.3355C43.0866 51.2572 39.2409 46.0271 39.2291 39.8896ZM58.859 53.3415V26.4396C64.2838 28.514 68.1355 33.7499 68.1453 39.8896C68.1355 46.0311 64.2838 51.263 58.859 53.3415Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_804_2" x1="1.68141e-06" y1="21" x2="120" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3479C0"/>
+<stop offset="1" stop-color="#133362"/>
+</linearGradient>
+</defs>
+</svg>

webapp/public/payment-logos/cards/discover.svg

@@ -0,0 +1,22 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29 80H116.002C118.21 80 120 78.211 120 75.9957V48C120 48 87.8616 70.1063 29 80Z" fill="#E7792B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.088 33.8624C113.088 30.7125 110.888 28.8951 107.053 28.8951H102.12V45.7197H105.443V38.9609H105.877L110.481 45.7197H114.571L109.202 38.6314C111.708 38.129 113.088 36.4383 113.088 33.8624ZM106.414 36.6411H105.443V31.5451H106.467C108.538 31.5451 109.665 32.4018 109.665 34.0385C109.665 35.7305 108.538 36.6411 106.414 36.6411Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.4839 45.7197H99.9176V42.8713H93.8077V38.3298H99.6923V35.4802H93.8077V31.746H99.9176V28.8951H90.4839V45.7197Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.7677 40.1959L76.2205 28.8951H72.5864L79.8236 46.1512H81.613L88.9799 28.8951H85.3742L80.7677 40.1959Z" fill="#1A1918"/>
+<path d="M64.6178 46.7197C69.7118 46.7197 73.8414 42.6454 73.8414 37.6197C73.8414 32.5939 69.7118 28.5197 64.6178 28.5197C59.5238 28.5197 55.3943 32.5939 55.3943 37.6197C55.3943 42.6454 59.5238 46.7197 64.6178 46.7197Z" fill="url(#paint0_radial_823_341)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.2231 37.3191C41.2231 42.2643 45.159 46.0986 50.224 46.0986C51.6556 46.0986 52.8817 45.8211 54.3943 45.1184V41.2555C53.0642 42.5685 51.8869 43.0982 50.3788 43.0982C47.0287 43.0982 44.651 40.7017 44.651 37.2944C44.651 34.0645 47.1038 31.5165 50.224 31.5165C51.8104 31.5165 53.0115 32.0749 54.3943 33.4093V29.5483C52.9344 28.8177 51.7334 28.5148 50.3024 28.5148C45.2631 28.5148 41.2231 32.4272 41.2231 37.3191Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2687 35.3515C33.2725 34.6229 32.6868 34.1419 32.6868 33.2332C32.6868 32.173 33.731 31.3683 35.1646 31.3683C36.1614 31.3683 36.9803 31.772 37.8467 32.7307L39.5873 30.4824C38.157 29.248 36.446 28.6169 34.5763 28.6169C31.5589 28.6169 29.2576 30.6839 29.2576 33.4379C29.2576 35.7558 30.3295 36.9421 33.453 38.0516C34.7555 38.5047 35.4182 38.8063 35.7529 39.0097C36.417 39.4381 36.7497 40.0439 36.7497 40.7504C36.7497 42.1135 35.6515 43.1236 34.1671 43.1236C32.5807 43.1236 31.3032 42.341 30.537 40.8798L28.3879 42.9214C29.9204 45.1405 31.7611 46.124 34.2923 46.124C37.7485 46.124 40.1736 43.8568 40.1736 40.5996C40.1736 37.9268 39.0523 36.7165 35.2687 35.3515Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8091 28.8951H27.1355V45.7197H23.8091V28.8951Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1242 28.8951H8.2417V45.7197H13.0985C15.6811 45.7197 17.5456 45.1184 19.1828 43.7775C21.1283 42.1889 22.2786 39.7949 22.2786 37.319C22.2786 32.3537 18.5187 28.8951 13.1242 28.8951ZM17.01 41.5336C15.9644 42.4651 14.6073 42.8713 12.4582 42.8713H11.5655V31.746H12.4582C14.6073 31.746 15.9111 32.1249 17.01 33.1064C18.1603 34.1171 18.8521 35.683 18.8521 37.2943C18.8521 38.9096 18.1603 40.5235 17.01 41.5336Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115.21 29.5275C115.21 29.233 115.005 29.0712 114.643 29.0712H114.162V30.5499H114.52V29.9766L114.939 30.5499H115.376L114.883 29.9402C115.094 29.8843 115.21 29.7329 115.21 29.5275ZM114.58 29.7296H114.52V29.3429H114.584C114.761 29.3429 114.853 29.4059 114.853 29.5327C114.853 29.664 114.76 29.7296 114.58 29.7296Z" fill="#1A1918"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M114.715 28.5187C113.987 28.5187 113.41 29.092 113.41 29.8077C113.41 30.5233 113.994 31.0973 114.715 31.0973C115.424 31.0973 116.005 30.5175 116.005 29.8077C116.005 29.1018 115.424 28.5187 114.715 28.5187ZM114.71 30.8672C114.138 30.8672 113.669 30.3966 113.669 29.8096C113.669 29.2207 114.132 28.7508 114.71 28.7508C115.28 28.7508 115.745 29.2318 115.745 29.8096C115.745 30.3914 115.28 30.8672 114.71 30.8672Z" fill="#1A1918"/>
+<defs>
+<radialGradient id="paint0_radial_823_341" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(71.5 44) rotate(-142.431) scale(16.4012 16.1816)">
+<stop stop-color="#F59900"/>
+<stop offset="0.210082" stop-color="#F39501"/>
+<stop offset="0.908163" stop-color="#CE3C0B"/>
+<stop offset="1" stop-color="#A4420A"/>
+</radialGradient>
+</defs>
+</svg>

webapp/public/payment-logos/cards/jcb.svg

@@ -0,0 +1,42 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path d="M100.9 58.8C100.9 65.8 95.1996 71.5 88.1996 71.5H19.0996V21.2C19.0996 14.2 24.7996 8.5 31.7996 8.5H100.9V58.8Z" fill="white"/>
+<path d="M78.3994 45.9H83.6494C83.7994 45.9 84.1494 45.85 84.2994 45.85C85.2994 45.65 86.1494 44.75 86.1494 43.5C86.1494 42.3 85.2994 41.4 84.2994 41.15C84.1494 41.1 83.8494 41.1 83.6494 41.1H78.3994V45.9Z" fill="url(#paint0_linear_833_6149)"/>
+<path d="M83.0494 12.75C78.0494 12.75 73.9494 16.8 73.9494 21.85V31.3H86.7994C87.0994 31.3 87.4494 31.3 87.6994 31.35C90.5994 31.5 92.7494 33 92.7494 35.6C92.7494 37.65 91.2994 39.4 88.5994 39.75V39.85C91.5494 40.05 93.7994 41.7 93.7994 44.25C93.7994 47 91.2994 48.8 87.9994 48.8H73.8994V67.3H87.2494C92.2494 67.3 96.3494 63.25 96.3494 58.2V12.75H83.0494Z" fill="url(#paint1_linear_833_6149)"/>
+<path d="M85.4994 36.2C85.4994 35 84.6494 34.2 83.6494 34.05C83.5494 34.05 83.2994 34 83.1494 34H78.3994V38.4H83.1494C83.2994 38.4 83.5994 38.4 83.6494 38.35C84.6494 38.2 85.4994 37.4 85.4994 36.2Z" fill="url(#paint2_linear_833_6149)"/>
+<path d="M57.8988 12.75C52.8988 12.75 48.7988 16.8 48.7988 21.85V33.75C51.0988 31.8 55.0988 30.55 61.5488 30.85C64.9988 31 68.6988 31.95 68.6988 31.95V35.8C66.8488 34.85 64.6488 34 61.7988 33.8C56.8988 33.45 53.9488 35.85 53.9488 40.05C53.9488 44.3 56.8988 46.7 61.7988 46.3C64.6488 46.1 66.8488 45.2 68.6988 44.3V48.15C68.6988 48.15 65.0488 49.1 61.5488 49.25C55.0988 49.55 51.0988 48.3 48.7988 46.35V67.35H62.1488C67.1488 67.35 71.2488 63.3 71.2488 58.25V12.75H57.8988Z" fill="url(#paint3_linear_833_6149)"/>
+<path d="M32.7496 12.75C27.7496 12.75 23.6496 16.8 23.6496 21.85V44.3C26.1996 45.55 28.8496 46.35 31.4996 46.35C34.6496 46.35 36.3496 44.45 36.3496 41.85V31.25H44.1496V41.8C44.1496 45.9 41.5996 49.25 32.9496 49.25C27.6996 49.25 23.5996 48.1 23.5996 48.1V67.25H36.9496C41.9496 67.25 46.0496 63.2 46.0496 58.15V12.75H32.7496Z" fill="url(#paint4_linear_833_6149)"/>
+<defs>
+<linearGradient id="paint0_linear_833_6149" x1="60.9804" y1="40.0821" x2="126.075" y2="40.0821" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007940"/>
+<stop offset="0.2285" stop-color="#00873F"/>
+<stop offset="0.7433" stop-color="#40A737"/>
+<stop offset="1" stop-color="#5CB531"/>
+</linearGradient>
+<linearGradient id="paint1_linear_833_6149" x1="73.9404" y1="40.0023" x2="96.4108" y2="40.0023" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007940"/>
+<stop offset="0.2285" stop-color="#00873F"/>
+<stop offset="0.7433" stop-color="#40A737"/>
+<stop offset="1" stop-color="#5CB531"/>
+</linearGradient>
+<linearGradient id="paint2_linear_833_6149" x1="73.9396" y1="36.1925" x2="96.409" y2="36.1925" gradientUnits="userSpaceOnUse">
+<stop stop-color="#007940"/>
+<stop offset="0.2285" stop-color="#00873F"/>
+<stop offset="0.7433" stop-color="#40A737"/>
+<stop offset="1" stop-color="#5CB531"/>
+</linearGradient>
+<linearGradient id="paint3_linear_833_6149" x1="48.6689" y1="40.0023" x2="70.8287" y2="40.0023" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6C2C2F"/>
+<stop offset="0.1735" stop-color="#882730"/>
+<stop offset="0.5731" stop-color="#BE1833"/>
+<stop offset="0.8585" stop-color="#DC0436"/>
+<stop offset="1" stop-color="#E60039"/>
+</linearGradient>
+<linearGradient id="paint4_linear_833_6149" x1="23.6382" y1="40.0023" x2="46.4553" y2="40.0023" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F286F"/>
+<stop offset="0.4751" stop-color="#004E94"/>
+<stop offset="0.8261" stop-color="#0066B1"/>
+<stop offset="1" stop-color="#006FBC"/>
+</linearGradient>
+</defs>
+</svg>

webapp/public/payment-logos/cards/maestro.svg

@@ -0,0 +1,7 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.5288 54.6562V53.7384H97.289L97.0137 54.3698L96.7378 53.7384H96.498V54.6562H96.6675V53.9637L96.9257 54.5609H97.1011L97.36 53.9624V54.6562H97.5288ZM96.0111 54.6562V53.8947H96.318V53.7397H95.5361V53.8947H95.843V54.6562H96.0111Z" fill="#00A2E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6521 58.595H70.3479V21.4044H49.6521V58.595Z" fill="#7375CF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.2675 40.0003C98.2675 53.063 87.6791 63.652 74.6171 63.652C69.0996 63.652 64.0229 61.7624 60 58.5956C65.5011 54.2646 69.0339 47.5448 69.0339 40.0003C69.0339 32.4552 65.5011 25.7354 60 21.4044C64.0229 18.2376 69.0996 16.348 74.6171 16.348C87.6791 16.348 98.2675 26.937 98.2675 40.0003Z" fill="#00A2E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.966 40.0003C50.966 32.4552 54.4988 25.7354 59.9999 21.4044C55.977 18.2376 50.9003 16.348 45.3828 16.348C32.3208 16.348 21.7324 26.937 21.7324 40.0003C21.7324 53.063 32.3208 63.652 45.3828 63.652C50.9003 63.652 55.977 61.7624 59.9999 58.5956C54.4988 54.2646 50.966 47.5448 50.966 40.0003Z" fill="#EB001B"/>
+</svg>

webapp/public/payment-logos/cards/mastercard.svg

@@ -0,0 +1,7 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.5288 54.6562V53.7384H97.289L97.0137 54.3698L96.7378 53.7384H96.498V54.6562H96.6675V53.9637L96.9257 54.5609H97.1011L97.36 53.9624V54.6562H97.5288ZM96.0111 54.6562V53.8947H96.318V53.7397H95.5361V53.8947H95.843V54.6562H96.0111Z" fill="#F79E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6521 58.595H70.3479V21.4044H49.6521V58.595Z" fill="#FF5F00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.2675 40.0003C98.2675 53.063 87.6791 63.652 74.6171 63.652C69.0996 63.652 64.0229 61.7624 60 58.5956C65.5011 54.2646 69.0339 47.5448 69.0339 40.0003C69.0339 32.4552 65.5011 25.7354 60 21.4044C64.0229 18.2376 69.0996 16.348 74.6171 16.348C87.6791 16.348 98.2675 26.937 98.2675 40.0003Z" fill="#F79E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.966 40.0003C50.966 32.4552 54.4988 25.7354 59.9999 21.4044C55.977 18.2376 50.9003 16.348 45.3828 16.348C32.3208 16.348 21.7324 26.937 21.7324 40.0003C21.7324 53.063 32.3208 63.652 45.3828 63.652C50.9003 63.652 55.977 61.7624 59.9999 58.5956C54.4988 54.2646 50.966 47.5448 50.966 40.0003Z" fill="#EB001B"/>
+</svg>

webapp/public/payment-logos/cards/unionpay.svg

@@ -0,0 +1,16 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.5282 14.1788C73.7421 14.2654 70.3351 16.4596 69.7146 19.1653L60.2981 60.8371C59.6776 63.568 61.3656 65.7903 64.0813 65.8312H84.9996C87.6739 65.6989 90.2725 63.5298 90.8824 60.8549L100.299 19.1828C100.93 16.424 99.201 14.1839 96.4402 14.1839L76.5282 14.1788Z" fill="#01798A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.2982 60.8371L69.7148 19.1653C70.3353 16.4596 73.7422 14.2654 76.4776 14.1815L68.5607 14.1764L54.2967 14.1737C51.5536 14.2298 48.1023 16.4394 47.482 19.1653L38.0627 60.8371C37.4399 63.568 39.1304 65.7903 41.8443 65.8312H64.0814C61.3657 65.7903 59.6777 63.568 60.2982 60.8371Z" fill="#024381"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.0627 60.8371L47.482 19.1653C48.1023 16.4394 51.5536 14.2298 54.2967 14.1737L36.0237 14.1689C33.2653 14.1689 29.7287 16.4039 29.0983 19.1653L19.6789 60.8371C19.6216 61.0914 19.5898 61.3406 19.5708 61.5845V62.3576C19.7552 64.3483 21.2754 65.798 23.4605 65.8312H41.8443C39.1304 65.7903 37.4399 63.568 38.0627 60.8371Z" fill="#DD0228"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.6818 44.5384H55.0276C55.3454 44.5384 55.5592 44.4318 55.6594 44.2206L56.558 42.8756H58.9644L58.4626 43.7603H61.3479L60.9819 45.1157H57.5486C57.1532 45.7107 56.6665 45.9904 56.0812 45.9572H54.2929L54.6818 44.5384ZM54.2867 46.4811H60.608L60.2051 47.9535H57.6629L57.275 49.3747H59.7488L59.3458 50.8469H56.872L56.2974 52.947C56.1551 53.298 56.3422 53.4559 56.8556 53.4201H58.8717L58.4982 54.7882H54.6274C53.8937 54.7882 53.642 54.3685 53.8722 53.527L54.6069 50.8469H53.0256L53.4273 49.3747H55.0088L55.3964 47.9535H53.8848L54.2867 46.4811ZM64.3762 42.8656L64.2766 43.7275C64.2766 43.7275 65.4691 42.8322 66.552 42.8322H70.5538L69.0234 48.3727C68.8965 49.0061 68.3523 49.3211 67.3911 49.3211H62.8554L61.7929 53.2116C61.7317 53.4201 61.8182 53.527 62.0471 53.527H62.9395L62.6115 54.7346H60.3426C59.4717 54.7346 59.1095 54.4727 59.2531 53.9466L62.2554 42.8656H64.3762ZM67.765 44.4318H64.1932L63.7659 45.9268C63.7659 45.9268 64.3608 45.4973 65.3548 45.4819C66.3461 45.4664 67.4776 45.4819 67.4776 45.4819L67.765 44.4318ZM66.471 47.8999C66.735 47.9357 66.8828 47.8312 66.9006 47.5845L67.1192 46.7964H63.5419L63.2419 47.8999H66.471ZM64.0581 49.6899H66.12L66.0817 50.5823H66.6307C66.9081 50.5823 67.0456 50.4935 67.0456 50.3181L67.2081 49.7408H68.9218L68.693 50.5823C68.4994 51.2842 67.9863 51.6503 67.1523 51.6861H66.054L66.0488 53.2116C66.0287 53.4559 66.2496 53.5804 66.7046 53.5804H67.7369L67.4037 54.7882H64.9276C64.2335 54.8212 63.8932 54.4905 63.9004 53.7889L64.0581 49.6899Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8218 44.5995L73.3 42.9164H75.7177L75.6133 43.534C75.6133 43.534 76.8488 42.9164 77.7385 42.9164H80.7282L80.253 44.5995H79.7827L77.5275 52.5378H77.9978L77.5504 54.1143H77.0801L76.8844 54.7983H74.543L74.7383 54.1143H70.1191L70.5693 52.5378H71.0321L73.2894 44.5995H72.8218ZM75.4303 44.5995L74.815 46.7479C74.815 46.7479 75.8678 46.3439 76.7753 46.2295C76.9758 45.4792 77.2378 44.5995 77.2378 44.5995H75.4303ZM74.53 47.755L73.9126 50.0053C73.9126 50.0053 75.0794 49.4307 75.8801 49.3823C76.1114 48.5126 76.3429 47.755 76.3429 47.755H74.53ZM74.9826 52.5378L75.4454 50.9055H73.6407L73.1755 52.5378H74.9826ZM80.8301 42.8122H83.1031L83.1995 43.651C83.1845 43.8645 83.3114 43.9665 83.5809 43.9665H83.9825L83.5762 45.3877H81.9055C81.2676 45.4207 80.9395 45.1768 80.9091 44.6503L80.8301 42.8122ZM87.5266 45.8608L87.0946 47.3865H84.7504L84.3485 48.805H86.6903L86.2555 50.3282H83.6473L83.0572 51.2209H84.3338L84.6287 53.0082C84.6639 53.1862 84.8216 53.2727 85.0911 53.2727H85.4876L85.071 54.7447H83.6675C82.9403 54.7805 82.5643 54.5363 82.5336 54.0101L82.1953 52.3777L81.0336 54.1143C80.7589 54.605 80.3368 54.834 79.7677 54.7983H77.6243L78.0413 53.3259H78.71C78.9847 53.3259 79.2132 53.2039 79.4191 52.9573L81.2371 50.3282H78.893L79.3274 48.805H81.87L82.2743 47.3865H79.7293L80.1641 45.8608H87.5266Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M89.8554 40.9179C89.0926 42.5399 88.3657 43.4857 87.9388 43.9256C87.5113 44.3606 86.665 45.3726 84.626 45.2962L84.8015 44.058C86.5172 43.5291 87.4452 41.1464 87.9741 40.0913L87.3437 32.3209L88.6708 32.3031H89.7843L89.904 37.1775L91.9909 32.3031H94.1038L89.8554 40.9179Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.9472 32.8904L83.1078 33.4677C82.2308 32.7813 81.43 32.3566 79.8846 33.0735C77.7792 34.0499 76.02 41.5382 81.8165 39.0717L82.147 39.4633L84.4275 39.5218L85.925 32.7175L83.9472 32.8904ZM82.6505 36.6104C82.2841 37.6911 81.4659 38.4055 80.8252 38.2022C80.1846 38.0038 79.9557 36.9612 80.3269 35.8781C80.6929 34.7949 81.5165 34.083 82.1521 34.2864C82.7928 34.4847 83.024 35.5272 82.6505 36.6104Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.7625 27.8254H75.9591C76.9583 27.8254 77.731 28.0519 78.2622 28.4966C78.7911 28.9468 79.0558 29.5927 79.0558 30.4343V30.4596C79.0558 30.6197 79.0452 30.8003 79.0302 30.996C79.0045 31.1893 78.9713 31.385 78.9286 31.5885C78.6997 32.7023 78.1682 33.5973 77.3472 34.2762C76.5232 34.9525 75.5473 35.2933 74.4236 35.2933H71.6369L70.7752 39.5218H68.3623L70.7625 27.8254ZM72.0613 33.2592H74.3727C74.975 33.2592 75.4529 33.1192 75.8014 32.8422C76.1473 32.5625 76.3761 32.1354 76.503 31.5557C76.5232 31.4486 76.5358 31.3521 76.5512 31.2632C76.5591 31.1794 76.569 31.0952 76.569 31.0141C76.569 30.5995 76.4219 30.2995 76.1267 30.1113C75.8319 29.9204 75.3694 29.8291 74.7284 29.8291H72.7657L72.0613 33.2592Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.9146 32.3006H63.7046L63.5015 33.3431L63.7553 33.0456C64.3354 32.4253 65.0421 32.1175 65.8709 32.1175C66.6235 32.1175 67.1673 32.3363 67.5053 32.776C67.8388 33.216 67.9353 33.8237 67.7724 34.6043L66.7911 39.5218H64.9504L65.8405 35.0646C65.9318 34.6043 65.9065 34.261 65.7666 34.0397C65.6216 33.8185 65.3595 33.7093 64.9761 33.7093C64.503 33.7093 64.1066 33.8566 63.7785 34.1492C63.4529 34.4441 63.237 34.8535 63.1355 35.3747L62.3118 39.5218H60.4722L61.9146 32.3006Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.4452 38.97C52.9265 38.4742 52.6646 37.8055 52.6621 36.9563C52.6621 36.8112 52.6709 36.6461 52.6902 36.4654C52.7093 36.2823 52.7335 36.1043 52.7677 35.9392C53.0028 34.767 53.5038 33.8364 54.2753 33.1498C55.0456 32.4608 55.975 32.1149 57.0631 32.1149C57.9541 32.1149 58.6608 32.3642 59.1784 32.8625C59.6956 33.3635 59.9548 34.0397 59.9548 34.8994C59.9548 35.0466 59.9436 35.217 59.9244 35.4001C59.9015 35.5857 59.8738 35.7637 59.8416 35.9392C59.6118 37.0935 59.1124 38.014 58.3407 38.6879C57.569 39.3668 56.6423 39.7047 55.5618 39.7047C54.6669 39.7047 53.9626 39.4607 53.4452 38.97ZM57.2245 37.541C57.5741 37.1622 57.8245 36.5874 57.9771 35.8222C58 35.7028 58.0202 35.5781 58.0328 35.4535C58.0455 35.3314 58.0506 35.217 58.0506 35.1128C58.0506 34.6678 57.9374 34.3221 57.7099 34.0779C57.4838 33.8312 57.1623 33.7093 56.7467 33.7093C56.1973 33.7093 55.7499 33.9023 55.3993 34.2889C55.0456 34.6755 54.7952 35.2603 54.6375 36.0383C54.616 36.1578 54.5982 36.2774 54.5818 36.3943C54.5691 36.5138 54.5653 36.6257 54.5677 36.7273C54.5677 37.1698 54.681 37.5106 54.9084 37.752C55.1345 37.9937 55.4547 38.1131 55.8758 38.1131C56.4275 38.1131 56.8749 37.9224 57.2245 37.541Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.7065 32.3031H51.6897L50.1362 39.5193H48.157L49.7065 32.3031ZM50.3308 29.6741H52.3316L51.9579 31.4257H49.9572L50.3308 29.6741Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.4044 32.3006H43.1929L42.9884 33.3431L43.245 33.0456C43.8248 32.4253 44.529 32.1175 45.3603 32.1175C46.1129 32.1175 46.6556 32.3363 46.9964 32.776C47.3318 33.216 47.4234 33.8237 47.2647 34.6043L46.2794 39.5218H44.4413L45.3311 35.0646C45.4227 34.6043 45.3974 34.261 45.256 34.0397C45.1164 33.8185 44.8492 33.7093 44.4641 33.7093C43.9913 33.7093 43.5934 33.8566 43.2692 34.1492C42.9437 34.4441 42.729 34.8535 42.6235 35.3747L41.8036 39.5218H39.9617L41.4044 32.3006Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.0721 35.484C38.7924 36.8546 38.1441 37.9072 37.1385 38.6548C36.142 39.3896 34.8567 39.7582 33.2831 39.7582C31.8022 39.7582 30.7165 39.3819 30.0237 38.6267C29.5432 38.0902 29.3042 37.4087 29.3042 36.5849C29.3042 36.2443 29.345 35.8781 29.4263 35.484L31.103 27.3984H33.6352L31.9814 35.3925C31.9305 35.6138 31.9102 35.8197 31.9128 36.0053C31.9102 36.4148 32.0118 36.7503 32.2177 37.0121C32.5177 37.4013 33.0046 37.5944 33.6822 37.5944C34.4613 37.5944 35.1033 37.4038 35.6016 37.0197C36.1 36.6384 36.4254 36.0969 36.5715 35.3925L38.2305 27.3984H40.7499L39.0721 35.484Z" fill="white"/>
+</svg>

webapp/public/payment-logos/cards/visa.svg

@@ -0,0 +1,7 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.6666 44.9375L90.3239 35.0625L92.3809 44.9375H86.6666ZM100.952 52.8375L95.8086 27.1625H88.7383C86.3525 27.1625 85.7723 29.0759 85.7723 29.0759L76.1904 52.8375H82.8868L84.2269 49.0244H92.3947L93.1479 52.8375H100.952Z" fill="#1434CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.1866 33.5711L78.0952 28.244C78.0952 28.244 75.2896 27.1625 72.3648 27.1625C69.2031 27.1625 61.6955 28.5638 61.6955 35.3738C61.6955 41.7825 70.5071 41.8621 70.5071 45.2266C70.5071 48.5912 62.6034 47.9901 59.9955 45.8676L59.0476 51.4362C59.0476 51.4362 61.8919 52.8375 66.2397 52.8375C70.5869 52.8375 77.1467 50.5544 77.1467 44.3455C77.1467 37.8964 68.2552 37.296 68.2552 34.4921C68.2552 31.6882 74.4602 32.0484 77.1866 33.5711Z" fill="#1434CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.6517 52.8375H47.6191L52.0144 27.1625H59.0477L54.6517 52.8375Z" fill="#1434CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.3113 27.1625L35.9217 44.8213L35.1663 41.0185L35.167 41.0199L32.9114 29.4749C32.9114 29.4749 32.6394 27.1625 29.7324 27.1625H19.1709L19.0476 27.5966C19.0476 27.5966 22.2782 28.2669 26.057 30.5326L31.8793 52.8375H38.8617L49.5238 27.1625H42.3113Z" fill="#1434CB"/>
+</svg>

webapp/src/components/VaultPage.tsx

@@ -9,6 +9,7 @@ import {
   MOBILE_LAYOUT_QUERY,
   VAULT_LIST_OVERSCAN,
   VAULT_LIST_ROW_HEIGHT,
+  cardListSubtitle,
   FOLDER_SORT_STORAGE_KEY,
   VAULT_SORT_STORAGE_KEY,
   cipherTypeKey,
@@ -501,6 +502,9 @@ const folderName = useCallback((id: string | null | undefined): string => {
     if (Number(cipher.type || 1) === 1) {
       return cipher.login?.decUsername || cipherMetaById.get(cipher.id)?.firstUri || '';
     }
+    if (Number(cipher.type || 1) === 3) {
+      return cardListSubtitle(cipher);
+    }
     return cipherTypeLabel(Number(cipher.type || 1));
   }, [cipherMetaById]);
 

webapp/src/components/vault/VaultDetailView.tsx

@@ -5,10 +5,12 @@ import { useDialogLifecycle } from '@/components/ConfirmDialog';
 import type { Cipher } from '@/lib/types';
 import { t } from '@/lib/i18n';
 import {
+  CardBrandIcon,
   TOTP_PERIOD_SECONDS,
   TOTP_RING_CIRCUMFERENCE,
   VaultListIcon,
   copyToClipboard,
+  displayCardBrand,
   formatAttachmentSize,
   formatHistoryTime,
   formatTotp,
@@ -246,7 +248,13 @@ export default function VaultDetailView(props: VaultDetailViewProps) {
               <h4>{t('txt_card_details')}</h4>
               <div className="kv-line"><span>{t('txt_cardholder_name')}</span><strong>{props.selectedCipher.card.decCardholderName || ''}</strong></div>
               <div className="kv-line"><span>{t('txt_number')}</span><strong>{props.selectedCipher.card.decNumber || ''}</strong></div>
-              <div className="kv-line"><span>{t('txt_brand')}</span><strong>{props.selectedCipher.card.decBrand || ''}</strong></div>
+              <div className="kv-line">
+                <span>{t('txt_brand')}</span>
+                <strong className="card-brand-detail">
+                  <CardBrandIcon brand={props.selectedCipher.card.decBrand} />
+                  {displayCardBrand(props.selectedCipher.card.decBrand)}
+                </strong>
+              </div>
               <div className="kv-line"><span>{t('txt_expiry')}</span><strong>{`${props.selectedCipher.card.decExpMonth || ''}/${props.selectedCipher.card.decExpYear || ''}`}</strong></div>
               <div className="kv-line"><span>{t('txt_security_code')}</span><strong>{props.selectedCipher.card.decCode || ''}</strong></div>
             </div>

webapp/src/components/vault/VaultEditor.tsx

@@ -5,13 +5,17 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { useDialogLifecycle } from '@/components/ConfirmDialog';
 import type { Cipher, Folder, VaultDraft, VaultDraftField } from '@/lib/types';
 import { t } from '@/lib/i18n';
+import { cardBrand } from '@/lib/import-format-shared';
 import {
+  CARD_BRAND_OPTIONS,
+  CardBrandIcon,
   cipherTypeLabel,
   createEmptyLoginUri,
   formatAttachmentSize,
   formatHistoryTime,
   getCreateTypeOptions,
   getWebsiteMatchOptions,
+  normalizeCardBrand,
   toBooleanFieldValue,
 } from '@/components/vault/vault-page-helpers';
 
@@ -126,6 +130,10 @@ function WebsiteRow(props: WebsiteRowProps) {
 
 export default function VaultEditor(props: VaultEditorProps) {
   const createTypeOptions = getCreateTypeOptions();
+  const normalizedDraftCardBrand = normalizeCardBrand(props.draft.cardBrand);
+  const cardBrandOptions = normalizedDraftCardBrand && !CARD_BRAND_OPTIONS.includes(normalizedDraftCardBrand as any)
+    ? [...CARD_BRAND_OPTIONS, normalizedDraftCardBrand]
+    : CARD_BRAND_OPTIONS;
   const totpQrVideoRef = useRef<HTMLVideoElement | null>(null);
   const totpQrFileRef = useRef<HTMLInputElement | null>(null);
   const totpQrStreamRef = useRef<MediaStream | null>(null);
@@ -435,8 +443,37 @@ export default function VaultEditor(props: VaultEditorProps) {
           <h4>{t('txt_card_details')}</h4>
           <div className="field-grid">
             <label className="field"><span>{t('txt_cardholder_name')}</span><input className="input" value={props.draft.cardholderName} onInput={(e) => props.onUpdateDraft({ cardholderName: (e.currentTarget as HTMLInputElement).value })} /></label>
-            <label className="field"><span>{t('txt_number')}</span><input className="input" value={props.draft.cardNumber} onInput={(e) => props.onUpdateDraft({ cardNumber: (e.currentTarget as HTMLInputElement).value })} /></label>
+            <label className="field">
-            <label className="field"><span>{t('txt_brand')}</span><input className="input" value={props.draft.cardBrand} onInput={(e) => props.onUpdateDraft({ cardBrand: (e.currentTarget as HTMLInputElement).value })} /></label>
+              <span>{t('txt_number')}</span>
+              <input
+                className="input"
+                value={props.draft.cardNumber}
+                onInput={(e) => {
+                  const value = (e.currentTarget as HTMLInputElement).value;
+                  const detectedBrand = normalizeCardBrand(cardBrand(value) || '');
+                  props.onUpdateDraft({
+                    cardNumber: value,
+                    ...(props.draft.cardBrand ? {} : { cardBrand: detectedBrand }),
+                  });
+                }}
+              />
+            </label>
+            <label className="field">
+              <span>{t('txt_brand')}</span>
+              <div className="card-brand-select-row">
+                <CardBrandIcon brand={normalizedDraftCardBrand} />
+                <select
+                  className="input card-brand-select"
+                  value={normalizedDraftCardBrand}
+                  onInput={(e) => props.onUpdateDraft({ cardBrand: (e.currentTarget as HTMLSelectElement).value })}
+                >
+                  <option value="">{t('txt_select')}</option>
+                  {cardBrandOptions.map((brand) => (
+                    <option key={brand} value={brand}>{brand}</option>
+                  ))}
+                </select>
+              </div>
+            </label>
             <label className="field"><span>{t('txt_security_code_cvv')}</span><input className="input" value={props.draft.cardCode} onInput={(e) => props.onUpdateDraft({ cardCode: (e.currentTarget as HTMLInputElement).value })} /></label>
             <label className="field"><span>{t('txt_expiry_month')}</span><input className="input" value={props.draft.cardExpMonth} onInput={(e) => props.onUpdateDraft({ cardExpMonth: (e.currentTarget as HTMLInputElement).value })} /></label>
             <label className="field"><span>{t('txt_expiry_year')}</span><input className="input" value={props.draft.cardExpYear} onInput={(e) => props.onUpdateDraft({ cardExpYear: (e.currentTarget as HTMLInputElement).value })} /></label>

webapp/src/components/vault/VaultListPanel.tsx

@@ -92,7 +92,7 @@ const CipherListItem = memo(function CipherListItem(props: CipherListItemProps)
         onInput={(e) => props.onToggleSelected(props.cipher.id, (e.currentTarget as HTMLInputElement).checked)}
       />
       <button type="button" className="row-main" onClick={() => props.onSelectCipher(props.cipher.id)}>
-        <div className="list-icon-wrap">
+        <div className={`list-icon-wrap ${Number(props.cipher.type || 1) === 3 ? 'card-list-icon-wrap' : ''}`}>
           <VaultListIcon cipher={props.cipher} />
         </div>
         <div className="list-text">

webapp/src/components/vault/vault-page-helpers.tsx

@@ -28,6 +28,89 @@ interface TypeOption {
   label: string;
 }
 
+export const CARD_BRAND_OPTIONS = [
+  'Visa',
+  'Mastercard',
+  'American Express',
+  'Discover',
+  'Diners Club',
+  'JCB',
+  'Maestro',
+  'UnionPay',
+  'RuPay',
+] as const;
+
+type CardBrand = typeof CARD_BRAND_OPTIONS[number];
+
+const CARD_BRAND_ALIASES: Record<string, CardBrand> = {
+  amex: 'American Express',
+  'american express': 'American Express',
+  americanexpress: 'American Express',
+  discover: 'Discover',
+  diners: 'Diners Club',
+  'diners club': 'Diners Club',
+  dinersclub: 'Diners Club',
+  jcb: 'JCB',
+  maestro: 'Maestro',
+  mastercard: 'Mastercard',
+  master: 'Mastercard',
+  rupay: 'RuPay',
+  unionpay: 'UnionPay',
+  'union pay': 'UnionPay',
+  visa: 'Visa',
+};
+
+const CARD_BRAND_LOGO_SLUGS: Partial<Record<CardBrand, string>> = {
+  'American Express': 'american-express',
+  'Diners Club': 'diners',
+  Discover: 'discover',
+  JCB: 'jcb',
+  Maestro: 'maestro',
+  Mastercard: 'mastercard',
+  UnionPay: 'unionpay',
+  Visa: 'visa',
+};
+
+export function normalizeCardBrand(value: string | null | undefined): string {
+  const normalized = String(value || '').trim();
+  if (!normalized) return '';
+  return CARD_BRAND_ALIASES[normalized.toLowerCase().replace(/\s+/g, ' ')] || normalized;
+}
+
+export function displayCardBrand(value: string | null | undefined): string {
+  return normalizeCardBrand(value);
+}
+
+export function cardLast4(value: string | null | undefined): string {
+  const digits = String(value || '').replace(/\D/g, '');
+  return digits.length >= 4 ? digits.slice(-4) : '';
+}
+
+export function cardListSubtitle(cipher: Cipher): string {
+  const brand = displayCardBrand(cipher.card?.decBrand ?? cipher.card?.brand);
+  const last4 = cardLast4(cipher.card?.decNumber ?? cipher.card?.number);
+  if (brand && last4) return `${brand}, *${last4}`;
+  if (brand) return brand;
+  if (last4) return `*${last4}`;
+  return cipherTypeLabel(3);
+}
+
+export function CardBrandIcon({ brand }: { brand?: string | null }) {
+  const display = displayCardBrand(brand);
+  const key = display.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'generic';
+  const label = display || t('txt_card');
+  const logoSlug = CARD_BRAND_LOGO_SLUGS[display as CardBrand];
+  return (
+    <span className={`card-brand-icon card-brand-${key}`} aria-label={label} title={label}>
+      {logoSlug ? (
+        <img src={`/payment-logos/cards/${logoSlug}.svg`} alt="" loading="lazy" decoding="async" />
+      ) : (
+        <CreditCard size={18} />
+      )}
+    </span>
+  );
+}
+
 export function getCreateTypeOptions(): TypeOption[] {
   return [
     { type: 1, label: t('txt_login') },
@@ -323,7 +406,7 @@ export function draftFromCipher(cipher: Cipher): VaultDraft {
   if (cipher.card) {
     draft.cardholderName = cipher.card.decCardholderName || '';
     draft.cardNumber = cipher.card.decNumber || '';
-    draft.cardBrand = cipher.card.decBrand || '';
+    draft.cardBrand = normalizeCardBrand(cipher.card.decBrand || '');
     draft.cardExpMonth = cipher.card.decExpMonth || '';
     draft.cardExpYear = cipher.card.decExpYear || '';
     draft.cardCode = cipher.card.decCode || '';
@@ -425,6 +508,9 @@ export function firstPasskeyCreationTime(cipher: Cipher | null): string | null {
 }
 
 export function VaultListIcon({ cipher }: { cipher: Cipher }) {
+  if (Number(cipher.type || 1) === 3) {
+    return <CardBrandIcon brand={cipher.card?.decBrand ?? cipher.card?.brand} />;
+  }
   return <WebsiteIcon cipher={cipher} fallback={<TypeIcon type={Number(cipher.type || 1)} />} />;
 }
 

webapp/src/lib/i18n/locales/en.ts

@@ -710,6 +710,7 @@ const en: Record<string, string> = {
   "txt_security_code": "Security Code",
   "txt_security_code_cvv": "Security Code (CVV)",
   "txt_select_all": "Select All",
+  "txt_select": "Select",
   "txt_select_duplicate_items": "Select Duplicates",
   "txt_select_an_item": "Select an item",
   "txt_send_created": "Send created",

webapp/src/lib/i18n/locales/es.ts

@@ -710,6 +710,7 @@ const es: Record<string, string> = {
   "txt_security_code": "Código de seguridad",
   "txt_security_code_cvv": "Código de seguridad (CVV)",
   "txt_select_all": "Seleccionar todo",
+  "txt_select": "Seleccionar",
   "txt_select_duplicate_items": "Seleccionar duplicados",
   "txt_select_an_item": "Seleccione un elemento",
   "txt_send_created": "Envío creado",

webapp/src/lib/i18n/locales/ru.ts

@@ -710,6 +710,7 @@ const ru: Record<string, string> = {
   "txt_security_code": "Код безопасности",
   "txt_security_code_cvv": "Код безопасности (CVV)",
   "txt_select_all": "Выбрать все",
+  "txt_select": "Выбрать",
   "txt_select_duplicate_items": "Выберите дубликаты",
   "txt_select_an_item": "Выберите элемент",
   "txt_send_created": "Отправить создано",

webapp/src/lib/i18n/locales/zh-CN.ts

@@ -602,7 +602,7 @@ const zhCN: Record<string, string> = {
   "txt_note": "笔记",
   "txt_notes": "备注",
   "txt_replace_device_name_with_note": "为这台设备设置自定义名称，不会改变系统识别到的设备类型。",
-  "txt_number": "数字",
+  "txt_number": "号码",
   "txt_open": "打开",
   "txt_opera_browser": "Opera 浏览器",
   "txt_opera_extension": "Opera 扩展",
@@ -710,6 +710,7 @@ const zhCN: Record<string, string> = {
   "txt_security_code": "安全码",
   "txt_security_code_cvv": "安全码 (CVV)",
   "txt_select_all": "全选",
+  "txt_select": "请选择",
   "txt_select_duplicate_items": "选择重复项",
   "txt_select_an_item": "请选择一个项目",
   "txt_send_created": "Send 已创建",

webapp/src/lib/i18n/locales/zh-TW.ts

@@ -602,7 +602,7 @@ const zhTW: Record<string, string> = {
   "txt_note": "筆記",
   "txt_notes": "備註",
   "txt_replace_device_name_with_note": "為這臺設備設置自定義名稱，不會改變系統識別到的設備類型。",
-  "txt_number": "數字",
+  "txt_number": "號碼",
   "txt_open": "打開",
   "txt_opera_browser": "Opera 瀏覽器",
   "txt_opera_extension": "Opera 擴展",
@@ -710,6 +710,7 @@ const zhTW: Record<string, string> = {
   "txt_security_code": "安全碼",
   "txt_security_code_cvv": "安全碼 (CVV)",
   "txt_select_all": "全選",
+  "txt_select": "請選擇",
   "txt_select_duplicate_items": "選擇重複項",
   "txt_select_an_item": "請選擇一個項目",
   "txt_send_created": "Send 已創建",

webapp/src/styles/dark.css

@@ -198,6 +198,27 @@
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(139, 184, 255, 0.12);
 }
 
+:root[data-theme='dark'] .card-brand-icon {
+  color: #bfdbfe;
+  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
+  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
+}
+
+:root[data-theme='dark'] .card-brand-icon:has(img) {
+  background: #fff;
+}
+
+:root[data-theme='dark'] .card-brand-american-express {
+  color: #fff;
+  background: #2563eb;
+}
+
+:root[data-theme='dark'] .card-brand-mastercard,
+:root[data-theme='dark'] .card-brand-maestro,
+:root[data-theme='dark'] .card-brand-discover {
+  color: #f8fafc;
+}
+
 :root[data-theme='dark'] .mobile-sidebar-sheet,
 :root[data-theme='dark'] .mobile-sidebar-close,
 :root[data-theme='dark'] .nav-layout-menu,

webapp/src/styles/vault.css

@@ -379,6 +379,101 @@
   transition: transform 240ms var(--ease-out-soft), filter 240ms var(--ease-out-soft);
 }
 
+.card-list-icon-wrap {
+  @apply w-9;
+}
+
+.card-brand-icon {
+  @apply inline-grid h-6 w-9 shrink-0 place-items-center rounded border text-[7px] font-black uppercase leading-none;
+  letter-spacing: 0;
+  color: #1e3a8a;
+  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
+  border-color: rgba(96, 125, 169, 0.34);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+}
+
+.card-brand-icon span {
+  @apply block max-w-full overflow-hidden text-ellipsis whitespace-nowrap px-0.5;
+}
+
+.card-brand-icon img {
+  @apply block h-full w-full object-contain;
+}
+
+.card-brand-icon svg {
+  @apply h-[18px] w-[18px];
+}
+
+.card-brand-icon:has(img) {
+  color: inherit;
+  background: #fff;
+}
+
+.card-brand-visa {
+  color: #1a4db3;
+}
+
+.card-brand-mastercard {
+  color: #111827;
+  background:
+    radial-gradient(circle at 38% 50%, rgba(235, 0, 27, 0.88) 0 24%, transparent 25%),
+    radial-gradient(circle at 62% 50%, rgba(247, 158, 27, 0.88) 0 24%, transparent 25%),
+    #fff;
+}
+
+.card-brand-american-express {
+  color: #fff;
+  background: #2e77bb;
+  border-color: rgba(46, 119, 187, 0.45);
+}
+
+.card-brand-discover {
+  color: #172554;
+  background:
+    radial-gradient(circle at 72% 50%, rgba(245, 130, 32, 0.9) 0 26%, transparent 27%),
+    #fff;
+}
+
+.card-brand-diners-club {
+  color: #0f5fa8;
+}
+
+.card-brand-jcb {
+  color: #0f766e;
+}
+
+.card-brand-maestro {
+  color: #1e40af;
+  background:
+    radial-gradient(circle at 38% 50%, rgba(0, 85, 164, 0.86) 0 24%, transparent 25%),
+    radial-gradient(circle at 62% 50%, rgba(237, 28, 36, 0.82) 0 24%, transparent 25%),
+    #fff;
+}
+
+.card-brand-unionpay {
+  color: #0f766e;
+}
+
+.card-brand-rupay {
+  color: #1e3a8a;
+}
+
+.card-brand-select-row {
+  @apply flex items-center gap-2;
+}
+
+.card-brand-select-row .card-brand-icon {
+  @apply h-8 w-11;
+}
+
+.card-brand-select {
+  @apply min-w-0 flex-1;
+}
+
+.card-brand-detail {
+  @apply inline-flex min-w-0 items-center gap-2;
+}
+
 .list-icon {
   @apply h-6 w-6 rounded-md;
   opacity: 0;