Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add new shared payment methods logos component (#49300) 

* Add WooPaymentMethodsLogos component

---------

Co-authored-by: Anurag Bhandari <anurag.bhd@gmail.com>
This commit is contained in:
Cvetan Cvetanov 2024-07-16 17:42:52 +03:00 committed by GitHub
parent 4dbe1c96e7
commit 54dd7a621a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 223 additions and 698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/onboarding/changelog/9063-add-shared-logos-component Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add a new shared component to display logos of payment methods supported by WooPayments.

32
packages/js/onboarding/src/components/WCPayBanner/Icons/amex.js
View File

@ -1,32 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Amex = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.18945"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="#006FCF"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.1205 25.2823V18.0771H19.3189L20.1985 19.1441L21.1072 18.0771H50.8653V24.7854C50.8653 24.7854 50.0871 25.2751 49.187 25.2823H32.7093L31.7176 24.1465V25.2823H28.4679V23.3435C28.4679 23.3435 28.0239 23.6141 27.0642 23.6141H25.9581V25.2823H21.0376L20.1593 24.1924L19.2675 25.2823H11.1205ZM1.56836 12.6465L3.41294 8.63574H6.60294L7.64976 10.8824V8.63574H11.6152L12.2384 10.2596L12.8425 8.63574H30.6434V9.4521C30.6434 9.4521 31.5792 8.63574 33.1171 8.63574L38.8928 8.65457L39.9215 10.8718V8.63574H43.24L44.1534 9.90939V8.63574H47.5023V15.841H44.1534L43.2781 14.5632V15.841H38.4025L37.9121 14.7052H36.6014L36.1191 15.841H32.8126C31.4893 15.841 30.6434 15.0413 30.6434 15.0413V15.841H25.658L24.6685 14.7052V15.841H6.13036L5.64039 14.7052H4.33383L3.84732 15.841H1.56836V12.6465ZM1.5779 14.9189L4.06583 9.52391H5.95199L8.43755 14.9189H6.7821L6.32542 13.8386H3.65672L3.19767 14.9189H1.5779ZM5.79982 12.6674L4.98636 10.7795L4.17053 12.6674H5.79982ZM8.60869 14.9182V9.52317L10.9105 9.53115L12.2493 13.0095L13.556 9.52317H15.8394V14.9182H14.3933V10.9429L12.8603 14.9182H11.592L10.0548 10.9429V14.9182H8.60869ZM16.8289 14.9182V9.52317H21.5479V10.73H18.2902V11.6528H21.4717V12.7886H18.2902V13.7469H21.5479V14.9182H16.8289ZM22.3851 14.9189V9.52391H25.6033C26.6696 9.52391 27.625 10.1389 27.625 11.2742C27.625 12.2447 26.8195 12.8698 26.0385 12.9313L27.9413 14.9189H26.1741L24.4402 13.0023H23.8313V14.9189H22.3851ZM25.4843 10.7306H23.8313V11.8664H25.5057C25.7956 11.8664 26.1694 11.6569 26.1694 11.2985C26.1694 11.0199 25.8809 10.7306 25.4843 10.7306ZM29.692 14.9182H28.2154V9.52317H29.692V14.9182ZM33.1931 14.9182H32.8744C31.3323 14.9182 30.396 13.7851 30.396 12.2429C30.396 10.6626 31.3218 9.52317 33.2692 9.52317H34.8676V10.8009H33.2108C32.4202 10.8009 31.8611 11.3763 31.8611 12.2562C31.8611 13.301 32.5004 13.7398 33.4215 13.7398H33.802L33.1931 14.9182ZM33.8521 14.9189L36.34 9.52391H38.2262L40.7117 14.9189H39.0563L38.5996 13.8386H35.9309L35.4719 14.9189H33.8521ZM38.074 12.6674L37.2605 10.7795L36.4447 12.6674H38.074ZM40.8805 14.9182V9.52317H42.7191L45.0667 12.9128V9.52317H46.5128V14.9182H44.7337L42.3267 11.4398V14.9182H40.8805ZM12.1099 24.3594V18.9643H16.8289V20.1711H13.5713V21.0939H16.7528V22.2297H13.5713V23.1881H16.8289V24.3594H12.1099ZM35.2329 24.3594V18.9643H39.9519V20.1711H36.6943V21.0939H39.8606V22.2297H36.6943V23.1881H39.9519V24.3594H35.2329ZM17.0121 24.3594L19.3097 21.6951L16.9574 18.9643H18.7793L20.1803 20.6525L21.586 18.9643H23.3366L21.0151 21.6618L23.317 24.3594H21.4953L20.1351 22.6978L18.8079 24.3594H17.0121ZM23.4887 24.3603V18.9653H26.6831C27.9938 18.9653 28.7595 19.7531 28.7595 20.7799C28.7595 22.0193 27.7832 22.6566 26.4952 22.6566H24.9729V24.3603H23.4887ZM26.5761 20.1853H24.973V21.4276H26.5714C26.9937 21.4276 27.2897 21.1665 27.2897 20.8064C27.2897 20.4232 26.9922 20.1853 26.5761 20.1853ZM29.3875 24.3594V18.9643H32.6056C33.672 18.9643 34.6274 19.5793 34.6274 20.7146C34.6274 21.6851 33.8218 22.3102 33.0409 22.3717L34.9437 24.3594H33.1765L31.4426 22.4427H30.8337V24.3594H29.3875ZM32.4867 20.171H30.8337V21.3068H32.5082C32.798 21.3068 33.1718 21.0974 33.1718 20.7389C33.1718 20.4603 32.8833 20.171 32.4867 20.171ZM40.6217 24.3594V23.1881H43.5159C43.9441 23.1881 44.1295 22.9722 44.1295 22.7355C44.1295 22.5087 43.9447 22.2794 43.5159 22.2794H42.208C41.0712 22.2794 40.4381 21.6334 40.4381 20.6636C40.4381 19.7985 41.0178 18.9643 42.7072 18.9643H45.5233L44.9144 20.1782H42.4788C42.0132 20.1782 41.8699 20.4061 41.8699 20.6237C41.8699 20.8473 42.047 21.0939 42.4027 21.0939H43.7727C45.04 21.0939 45.5899 21.7644 45.5899 22.6424C45.5899 23.5863 44.9772 24.3594 43.7038 24.3594H40.6217ZM45.7176 24.3594V23.1881H48.6118C49.04 23.1881 49.2254 22.9722 49.2254 22.7355C49.2254 22.5087 49.0406 22.2794 48.6118 22.2794H47.3039C46.1671 22.2794 45.534 21.6334 45.534 20.6636C45.534 19.7985 46.1138 18.9643 47.8031 18.9643H50.6192L50.0103 20.1782H47.5747C47.1092 20.1782 46.9658 20.4061 46.9658 20.6237C46.9658 20.8473 47.1429 21.0939 47.4986 21.0939H48.8687C50.1359 21.0939 50.6858 21.7644 50.6858 22.6424C50.6858 23.5863 50.0731 24.3594 48.7997 24.3594H45.7176Z"
fill="white"
/>
</svg>
/* eslint-enable */
);

32
packages/js/onboarding/src/components/WCPayBanner/Icons/applepay.js
View File

@ -1,32 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const ApplePay = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.878906"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.8352 13.0607C15.4642 13.5024 14.8707 13.8507 14.2771 13.8009C14.2029 13.2038 14.4935 12.5693 14.8336 12.1774C15.2045 11.7233 15.8537 11.3999 16.3792 11.375C16.4411 11.997 16.1999 12.6066 15.8352 13.0607ZM16.373 13.9192C15.8501 13.8889 15.373 14.0774 14.9876 14.2297C14.7396 14.3277 14.5296 14.4106 14.3698 14.4106C14.1905 14.4106 13.9718 14.3232 13.7263 14.2251C13.4046 14.0965 13.0367 13.9495 12.651 13.9565C11.7669 13.969 10.9446 14.4728 10.4933 15.2753C9.56588 16.8801 10.2522 19.2563 11.1486 20.5626C11.5876 21.2095 12.1131 21.9186 12.8056 21.8937C13.1102 21.8822 13.3294 21.7886 13.5562 21.6918C13.8173 21.5803 14.0885 21.4645 14.512 21.4645C14.9208 21.4645 15.1802 21.5773 15.4292 21.6856C15.6659 21.7885 15.8933 21.8874 16.2308 21.8813C16.948 21.8689 17.3993 21.2344 17.8383 20.5875C18.312 19.8931 18.5202 19.2155 18.5518 19.1127L18.5555 19.1008C18.5547 19.1 18.5488 19.0973 18.5385 19.0926C18.3802 19.0196 17.1698 18.4621 17.1582 16.9672C17.1465 15.7124 18.1182 15.0767 18.2712 14.9766L18.2712 14.9766C18.2805 14.9705 18.2868 14.9664 18.2896 14.9642C17.6713 14.0436 16.7068 13.9441 16.373 13.9192ZM21.3377 21.8128V12.1153H24.9546C26.8217 12.1153 28.1263 13.4091 28.1263 15.3001C28.1263 17.1911 26.797 18.4974 24.9051 18.4974H22.8339V21.8128H21.3377ZM22.8339 13.3841H24.5589C25.8572 13.3841 26.5991 14.0808 26.5991 15.3062C26.5991 16.5317 25.8572 17.2346 24.5527 17.2346H22.8339V13.3841ZM33.0661 20.6496C32.6704 21.4085 31.7986 21.8874 30.8589 21.8874C29.4678 21.8874 28.4971 21.0539 28.4971 19.7974C28.4971 18.5533 29.4368 17.838 31.1742 17.7322L33.0413 17.6203V17.0853C33.0413 16.2953 32.5282 15.8661 31.6131 15.8661C30.8589 15.8661 30.3086 16.258 30.1973 16.8552H28.8495C28.8928 15.5986 30.0675 14.6842 31.6564 14.6842C33.369 14.6842 34.4819 15.5862 34.4819 16.9858V21.8128H33.097V20.6496H33.0661ZM31.2609 20.7368C30.4633 20.7368 29.9563 20.3511 29.9563 19.7602C29.9563 19.1506 30.4448 18.796 31.3784 18.74L33.0415 18.6343V19.1817C33.0415 20.0898 32.2748 20.7368 31.2609 20.7368ZM39.0756 22.1922C38.4759 23.8903 37.7897 24.4502 36.3306 24.4502C36.2193 24.4502 35.8483 24.4377 35.7617 24.4129V23.2496C35.8545 23.2621 36.0832 23.2745 36.2007 23.2745C36.8623 23.2745 37.2332 22.9946 37.462 22.2668L37.598 21.8376L35.0631 14.7775H36.6273L38.3894 20.5065H38.4203L40.1823 14.7775H41.7033L39.0756 22.1922Z"
fill="black"
/>
</svg>
/* eslint-enable */
);

24
packages/js/onboarding/src/components/WCPayBanner/Icons/cb.js
View File

@ -1,24 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const CB = () => (
/* eslint-disable */
<svg width="64" height="40" viewBox="0 0 39 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.09985" y="0.723633" width="37.4" height="23" rx="1.5" fill="url(#paint0_linear_685_110690)" />
<rect x="1.09985" y="0.723633" width="37.4" height="23" rx="1.5" stroke="#DDDDDD" />
<path fillRule="evenodd" clipRule="evenodd"
d="M13.307 11.7158H20.0383C19.9783 10.2608 19.6393 8.76069 18.6111 7.79714C17.3863 6.64937 15.241 6.22363 13.3241 6.22363C11.3289 6.22363 9.1224 6.6906 7.89114 7.92209C6.82939 8.98291 6.59985 10.6897 6.59985 12.2233C6.59985 13.8297 7.04892 15.6982 8.20072 16.7744C9.4255 17.9196 11.4101 18.2236 13.3241 18.2236C15.1833 18.2236 17.1974 17.8803 18.4151 16.7931C19.6293 15.7072 20.0489 13.878 20.0489 12.2233V12.2156H13.307V11.7158ZM20.4897 12.2158V17.9553H29.8536V17.9476C31.2238 17.8729 32.3138 16.6375 32.3138 15.1207C32.3138 13.6032 31.2238 12.2886 29.8536 12.2133V12.2158H20.4897ZM29.7471 6.46388C31.0825 6.46388 32.1425 7.62259 32.1425 9.08467C32.1425 10.4688 31.169 11.5992 29.9307 11.7158H20.4897V6.45551H29.4516C29.5068 6.44876 29.571 6.45351 29.6339 6.45814C29.673 6.46103 29.7116 6.46388 29.7471 6.46388Z"
fill="#FEFEFE" />
<defs>
<linearGradient id="paint0_linear_685_110690" x1="11.0155" y1="-2.81556" x2="3.21751" y2="23.5991"
gradientUnits="userSpaceOnUse">
<stop stopColor="#222E72" />
<stop offset="0.591647" stopColor="#40CBFF" />
<stop offset="1" stopColor="#3CB792" />
</linearGradient>
</defs>
</svg>
/* eslint-enable */
);

52
packages/js/onboarding/src/components/WCPayBanner/Icons/discover.js
View File

@ -1,52 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Discover = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.878906"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.1461 17.7823C17.1461 19.9191 18.8322 21.576 21.0021 21.576C21.6154 21.576 22.141 21.456 22.7888 21.1524V19.4832C22.2192 20.0506 21.7145 20.2795 21.0685 20.2795C19.6332 20.2795 18.6146 19.2439 18.6146 17.7717C18.6146 16.376 19.6654 15.2751 21.0021 15.2751C21.6818 15.2751 22.1963 15.5163 22.7888 16.0929V14.4246C22.1633 14.1089 21.649 13.978 21.0357 13.978C18.8768 13.978 17.1461 15.6685 17.1461 17.7823ZM13.4892 16.0168C13.4892 16.4097 13.7401 16.6173 14.5953 16.9321C16.2163 17.5222 16.6967 18.0449 16.6967 19.2001C16.6967 20.6072 15.6577 21.5872 14.177 21.5872C13.0926 21.5872 12.304 21.1622 11.6475 20.2031L12.5682 19.3209C12.8962 19.9523 13.4437 20.2907 14.1234 20.2907C14.7593 20.2907 15.2298 19.8542 15.2298 19.2653C15.2298 18.96 15.0873 18.6979 14.8025 18.5128C14.6594 18.4252 14.3754 18.2949 13.8174 18.0988C12.479 17.6197 12.0201 17.1068 12.0201 16.1053C12.0201 14.9155 13.006 14.0224 14.2987 14.0224C15.0997 14.0224 15.8327 14.2948 16.4455 14.8282L15.6998 15.7997C15.3286 15.3857 14.9775 15.211 14.5507 15.211C13.9366 15.211 13.4892 15.559 13.4892 16.0168ZM9.68583 21.4123H11.1109V14.1424H9.68583V21.4123ZM6.77288 19.6035C6.32524 20.006 5.74353 20.1815 4.82283 20.1815H4.44039V15.374H4.82283C5.74353 15.374 6.30238 15.538 6.77288 15.9621C7.26569 16.3986 7.56205 17.0755 7.56205 17.7717C7.56205 18.4697 7.26569 19.1671 6.77288 19.6035ZM5.10834 14.1424H3.0166V21.4121H5.09733C6.20374 21.4121 7.0025 21.1525 7.70389 20.5728C8.53737 19.8867 9.03017 18.8523 9.03017 17.7824C9.03017 15.6369 7.41938 14.1424 5.10834 14.1424ZM32.1394 14.1424L34.0875 19.0255L36.061 14.1424H37.6057L34.4496 21.5988H33.6828L30.5826 14.1424H32.1394ZM38.2501 21.4122H42.2913V20.1815H39.6741V18.2191H42.1951V16.9878H39.6741V15.3742H42.2913V14.1424H38.2501V21.4122ZM44.6585 17.4893H45.0748C45.9851 17.4893 46.4674 17.0958 46.4674 16.365C46.4674 15.6575 45.9851 15.2876 45.0974 15.2876H44.6585V17.4893ZM45.3485 14.1422C46.9918 14.1422 47.9339 14.9275 47.9339 16.2886C47.9339 17.4016 47.3429 18.1325 46.2695 18.3496L48.5695 21.4121H46.817L44.8447 18.4917H44.6587V21.4121H43.2353V14.1422H45.3485Z"
fill="#1D1D1B"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.415 19.8859C31.5716 18.0862 31.0433 15.6953 29.235 14.5445C27.4267 13.3937 25.0236 13.9191 23.867 15.7188C22.7107 17.518 23.2391 19.9096 25.0474 21.0604C26.8557 22.2112 29.2587 21.6851 30.415 19.8859Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="32.5088"
y1="16.6279"
x2="25.9795"
y2="12.4317"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F6A000" />
<stop offset="0.623918" stopColor="#E47E02" />
<stop offset="1" stopColor="#D36002" />
</linearGradient>
</defs>
</svg>
/* eslint-enable */
);

52
packages/js/onboarding/src/components/WCPayBanner/Icons/giropay.js
View File

@ -1,52 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Giropay = () => (
/* eslint-disable */
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 4C0 1.79086 1.79086 0 4 0H60C62.2091 0 64 1.79086 64 4V36C64 38.2091 62.2091 40 60 40H4C1.79086 40 0 38.2091 0 36V4Z"
fill="white"
/>
<path
d="M12 11C12 8.79086 13.7909 7 16 7H48.8571C51.0663 7 52.8571 8.79086 52.8571 11V29C52.8571 31.2091 51.0663 33 48.8571 33H16C13.7909 33 12 31.2091 12 29V11Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M48.8571 9H16C14.8954 9 14 9.89543 14 11V29C14 30.1046 14.8954 31 16 31H48.8571C49.9617 31 50.8571 30.1046 50.8571 29V11C50.8571 9.89543 49.9617 9 48.8571 9ZM16 7C13.7909 7 12 8.79086 12 11V29C12 31.2091 13.7909 33 16 33H48.8571C51.0663 33 52.8571 31.2091 52.8571 29V11C52.8571 8.79086 51.0663 7 48.8571 7H16Z"
fill="#0F3365"
/>
<path
d="M32.4285 7H48.857C51.0662 7 52.857 8.79086 52.857 11V29C52.857 31.2091 51.0662 33 48.857 33H32.4285V7Z"
fill="#0F3365"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M35.2142 28.1058H39.4694V22.1896H39.5169C40.3211 23.4859 41.9291 23.966 43.4183 23.966C47.083 23.966 49.0452 21.2899 49.0452 18.0698C49.0452 15.4361 47.1788 12.5715 43.7737 12.5715C41.8349 12.5715 40.0373 13.2615 39.1865 14.7878H39.139V12.8223H35.2142V28.1058ZM44.648 18.1539C44.648 19.8896 43.6784 21.0808 42.0716 21.0808C40.6524 21.0808 39.4691 19.8896 39.4691 18.2999C39.4691 16.6696 40.5103 15.4567 42.0716 15.4567C43.7259 15.4567 44.648 16.7105 44.648 18.1539Z"
fill="#FFFFFE"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M29.6351 12.8223H25.7804V14.7871H25.7341C24.8353 13.4496 23.369 12.5715 21.549 12.5715C17.7192 12.5715 15.9929 14.9962 15.9929 18.2372C15.9929 21.4584 18.0972 23.7145 21.4785 23.7145C23.1807 23.7145 24.5991 23.1307 25.615 21.8537H25.6629V22.4404C25.6629 24.573 24.3395 25.5971 21.8802 25.5971C20.1068 25.5971 19.0193 25.2629 17.7192 24.6984L17.5059 27.6676C18.4993 27.98 20.1781 28.3572 22.2111 28.3572C27.1762 28.3572 29.6351 26.9139 29.6351 22.4404V12.8223ZM20.3904 18.1742C20.3904 16.6902 21.218 15.4567 22.8022 15.4567C24.7169 15.4567 25.521 16.8146 25.521 18.0278C25.521 19.7012 24.3148 20.83 22.8022 20.83C21.5255 20.83 20.3904 19.8672 20.3904 18.1742Z"
fill="#D8232A"
/>
<path
d="M4 1H60V-1H4V1ZM63 4V36H65V4H63ZM60 39H4V41H60V39ZM1 36V4H-1V36H1ZM4 39C2.34315 39 1 37.6569 1 36H-1C-1 38.7614 1.23858 41 4 41V39ZM63 36C63 37.6569 61.6569 39 60 39V41C62.7614 41 65 38.7614 65 36H63ZM60 1C61.6569 1 63 2.34315 63 4H65C65 1.23858 62.7614 -1 60 -1V1ZM4 -1C1.23858 -1 -1 1.23858 -1 4H1C1 2.34315 2.34315 1 4 1V-1Z"
fill="#DDDDDD"
/>
</svg>
/* eslint-enable */
);

68
packages/js/onboarding/src/components/WCPayBanner/Icons/gpay.js
View File

@ -1,68 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const GooglePay = () => (
/* eslint-disable */
<svg
width="84"
height="58"
viewBox="0 0 84 58"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="83"
height="57"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M40.4322 34.9714V28.4303V28.429H43.9665C45.4236 28.4299 46.6482 27.9715 47.6403 27.0538C48.6429 26.1828 49.2035 24.9306 49.175 23.6253C49.1948 22.3273 48.6353 21.0844 47.6403 20.2162C46.6569 19.2935 45.3343 18.7901 43.9665 18.8178H38.293V34.9714H40.4322ZM40.4322 26.4454V20.8065V20.8052H44.0196C44.8192 20.7834 45.59 21.0956 46.1362 21.6624C46.6859 22.1807 46.996 22.8927 46.996 23.6363C46.996 24.3799 46.6859 25.0919 46.1362 25.6102C45.5833 26.1651 44.8149 26.4683 44.0196 26.4454H40.4322Z"
fill="#5F6368"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M57.8487 24.7879C56.9337 23.9682 55.6856 23.5583 54.1045 23.5583C52.0733 23.5583 50.5396 24.2801 49.5032 25.7236L51.3873 26.8746C52.0835 25.8968 53.0291 25.4079 54.2241 25.4079C54.9859 25.3992 55.7231 25.6693 56.2888 26.1644C56.8529 26.6168 57.1773 27.2912 57.1724 28.0011V28.4754C56.3504 28.0243 55.3043 27.7987 54.034 27.7987C52.5459 27.8005 51.3563 28.139 50.4652 28.8144C49.5741 29.4898 49.1285 30.3993 49.1285 31.543C49.1091 32.5844 49.5748 33.5787 50.3961 34.2496C51.2411 34.9714 52.2912 35.3323 53.5464 35.3323C55.0168 35.3323 56.1949 34.7007 57.0807 33.4376H57.1738V34.9714H59.2199V28.1596C59.2208 26.7315 58.7638 25.6076 57.8487 24.7879ZM52.0464 32.9414C51.5983 32.6281 51.334 32.1239 51.3369 31.5881C51.3369 30.9862 51.6279 30.4848 52.2138 30.0723C52.794 29.6659 53.5186 29.4627 54.3876 29.4627C55.5808 29.4627 56.5108 29.7205 57.1778 30.236C57.1778 31.1073 56.8235 31.8665 56.1149 32.5135C55.4766 33.1327 54.6113 33.4813 53.7086 33.4827C53.1068 33.4937 52.5195 33.3024 52.0464 32.9414Z"
fill="#5F6368"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M70.9654 23.9192L63.8223 39.8434H61.6141L64.2648 34.2716L59.5679 23.9192H61.8931L65.2879 31.8588H65.3344L68.6362 23.9192H70.9654Z"
fill="#5F6368"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.7877 27.0203C31.7885 26.3879 31.7333 25.7566 31.6229 25.1333H22.6011V28.7074H27.7684C27.5547 29.8609 26.8645 30.8797 25.8577 31.5275V33.8475H28.9416C30.7473 32.2325 31.7877 29.8442 31.7877 27.0203Z"
fill="#4285F4"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6012 36.0889C25.1828 36.0889 27.3566 35.2666 28.9417 33.8488L25.8578 31.5288C24.9995 32.0933 23.894 32.4156 22.6012 32.4156C20.1059 32.4156 17.988 30.7838 17.2306 28.585H14.0537V30.9759C15.6776 34.1104 18.9848 36.0887 22.6012 36.0889Z"
fill="#34A853"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.2307 28.585C16.8303 27.4328 16.8303 26.185 17.2307 25.0328V22.6419H14.0538C12.6956 25.2637 12.6956 28.3541 14.0538 30.9759L17.2307 28.585Z"
fill="#FBBC04"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6012 21.2022C23.9655 21.1806 25.2837 21.6806 26.271 22.5942L29.0015 19.9456C27.2701 18.368 24.9764 17.502 22.6012 17.5289C18.9848 17.529 15.6776 19.5074 14.0537 22.6419L17.2306 25.0328C17.988 22.834 20.1059 21.2022 22.6012 21.2022Z"
fill="#EA4335"
/>
</svg>
/* eslint-enable */
);

12
packages/js/onboarding/src/components/WCPayBanner/Icons/index.js
View File

@ -1,12 +0,0 @@
export * from './amex';
export * from './applepay';
export * from './cb';
export * from './discover';
export * from './giropay';
export * from './gpay';
export * from './jcb';
export * from './maestro';
export * from './mastercard';
export * from './unionpay';
export * from './visa';
export * from './woopay';

44
packages/js/onboarding/src/components/WCPayBanner/Icons/jcb.js
View File

File diff suppressed because one or more lines are too long

72
packages/js/onboarding/src/components/WCPayBanner/Icons/maestro.js
View File

@ -1,72 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Maestro = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="49.6897"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
d="M29.9708 22.8244H21.3047V7.35352H29.9708V22.8244Z"
fill="#6C6BBD"
/>
<path
d="M21.8549 15.0891C21.8549 11.9507 23.3341 9.15521 25.6375 7.35365C23.9531 6.03626 21.8272 5.24995 19.5168 5.24995C14.0471 5.24995 9.61328 9.65501 9.61328 15.0891C9.61328 20.5232 14.0471 24.9282 19.5168 24.9282C21.8272 24.9282 23.9531 24.1419 25.6375 22.8245C23.3341 21.023 21.8549 18.2274 21.8549 15.0891Z"
fill="#EB001B"
/>
<path
d="M41.6626 15.0891C41.6626 20.5232 37.2288 24.9282 31.7591 24.9282C29.4487 24.9282 27.3228 24.1419 25.6377 22.8245C27.9418 21.023 29.421 18.2274 29.421 15.0891C29.421 11.9507 27.9418 9.15521 25.6377 7.35365C27.3228 6.03626 29.4487 5.24995 31.7591 5.24995C37.2288 5.24995 41.6626 9.65501 41.6626 15.0891Z"
fill="#0099DF"
/>
<path
d="M32.9036 27.1956C33.0188 27.1956 33.1845 27.2175 33.311 27.2669L33.1347 27.8024C33.0138 27.753 32.8929 27.7367 32.777 27.7367C32.403 27.7367 32.216 27.9769 32.216 28.4085V29.8735H31.6436V27.2613H32.2103V27.5784C32.3589 27.3489 32.5736 27.1956 32.9036 27.1956Z"
fill="#231F20"
/>
<path
d="M30.7887 27.7807H29.8536V28.9611C29.8536 29.2232 29.9468 29.3984 30.2333 29.3984C30.382 29.3984 30.569 29.3489 30.739 29.2507L30.904 29.7368C30.7226 29.8625 30.4367 29.9395 30.1893 29.9395C29.5123 29.9395 29.2762 29.5785 29.2762 28.9717V27.7807H28.7422V27.2615H29.2762V26.469H29.8536V27.2615H30.7887V27.7807Z"
fill="#231F20"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.1754 27.1958C24.9128 27.1958 25.4191 27.7532 25.4247 28.5676C25.4247 28.6433 25.4192 28.7135 25.4135 28.7842L25.4134 28.7859H23.4607C23.5432 29.2557 23.8788 29.4252 24.2472 29.4252C24.511 29.4252 24.7919 29.327 25.0116 29.1519L25.2925 29.5729C24.9732 29.8406 24.6105 29.9388 24.2144 29.9388C23.4273 29.9388 22.8662 29.3977 22.8662 28.5676C22.8662 27.7532 23.4052 27.1958 24.1754 27.1958ZM24.1648 27.7036C23.7574 27.7036 23.5269 27.9607 23.4658 28.3379H24.8304C24.77 27.9332 24.5332 27.7036 24.1648 27.7036Z"
fill="#231F20"
/>
<path
d="M27.9386 27.9283C27.7793 27.8295 27.455 27.7038 27.1193 27.7038C26.8057 27.7038 26.6187 27.8189 26.6187 28.0103C26.6187 28.1848 26.8164 28.2342 27.0639 28.2668L27.3334 28.3049C27.9058 28.3875 28.2522 28.6277 28.2522 29.0868C28.2522 29.5841 27.812 29.9395 27.0532 29.9395C26.6237 29.9395 26.2277 29.83 25.9141 29.6004L26.1836 29.1575C26.3763 29.3052 26.6628 29.4309 27.0589 29.4309C27.4493 29.4309 27.6584 29.3164 27.6584 29.1137C27.6584 28.9667 27.5098 28.8842 27.1962 28.841L26.9266 28.8028C26.3379 28.7203 26.0186 28.4582 26.0186 28.0322C26.0186 27.513 26.4481 27.1958 27.1137 27.1958C27.5318 27.1958 27.9115 27.289 28.1861 27.4692L27.9386 27.9283Z"
fill="#231F20"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M35.561 27.3015C35.3872 27.2308 35.1982 27.1958 34.9942 27.1958C34.7902 27.1958 34.6013 27.2308 34.4275 27.3015C34.2537 27.3716 34.1044 27.4685 33.9785 27.5918C33.8526 27.715 33.7537 27.8608 33.6819 28.0284C33.6101 28.1967 33.5742 28.3793 33.5742 28.5764C33.5742 28.7734 33.6101 28.9561 33.6819 29.1243C33.7537 29.292 33.8526 29.4384 33.9785 29.5616C34.1044 29.6848 34.2537 29.7812 34.4275 29.8519C34.6013 29.9219 34.7902 29.9569 34.9942 29.9569C35.1982 29.9569 35.3872 29.9219 35.561 29.8519C35.7348 29.7812 35.8853 29.6848 36.0118 29.5616C36.139 29.4384 36.2379 29.292 36.3097 29.1243C36.3815 28.9561 36.4174 28.7734 36.4174 28.5764C36.4174 28.3793 36.3815 28.1967 36.3097 28.0284C36.2379 27.8608 36.139 27.715 36.0118 27.5918C35.8853 27.4685 35.7348 27.3716 35.561 27.3015ZM34.666 27.7969C34.7674 27.7563 34.8763 27.7356 34.9941 27.7356C35.1118 27.7356 35.2214 27.7563 35.3221 27.7969C35.4235 27.8382 35.5117 27.8958 35.5854 27.9696C35.6603 28.0434 35.7182 28.1322 35.761 28.2354C35.8032 28.3386 35.824 28.4525 35.824 28.5763C35.824 28.7008 35.8032 28.8141 35.761 28.9173C35.7182 29.0205 35.6603 29.1093 35.5854 29.1831C35.5117 29.2569 35.4235 29.3145 35.3221 29.3558C35.2214 29.3971 35.1118 29.4171 34.9941 29.4171C34.8763 29.4171 34.7674 29.3971 34.666 29.3558C34.5652 29.3145 34.4777 29.2569 34.404 29.1831C34.3303 29.1093 34.2724 29.0205 34.2302 28.9173C34.188 28.8141 34.1672 28.7008 34.1672 28.5763C34.1672 28.4525 34.188 28.3386 34.2302 28.2354C34.2724 28.1322 34.3303 28.0434 34.404 27.9696C34.4777 27.8958 34.5652 27.8382 34.666 27.7969Z"
fill="#231F20"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.2524 27.2615V28.5676V29.8737H21.6806V29.5566C21.4986 29.7918 21.224 29.9394 20.85 29.9394C20.1126 29.9394 19.5352 29.3652 19.5352 28.5676C19.5352 27.7694 20.1126 27.1958 20.85 27.1958C21.224 27.1958 21.4986 27.3434 21.6806 27.5786V27.2615H22.2524ZM20.9211 27.7312C20.4262 27.7312 20.1233 28.1084 20.1233 28.5675C20.1233 29.0267 20.4262 29.4033 20.9211 29.4033C21.394 29.4033 21.7133 29.0429 21.7133 28.5675C21.7133 28.0921 21.394 27.7312 20.9211 27.7312Z"
fill="#231F20"
/>
<path
d="M19.0293 29.8735V28.234C19.0293 27.6166 18.6332 27.2012 17.9953 27.1956C17.6597 27.19 17.3127 27.2938 17.0709 27.6604C16.8896 27.3707 16.603 27.1956 16.2013 27.1956C15.9211 27.1956 15.6459 27.2775 15.4312 27.5834V27.2613H14.8594V29.8735H15.4368V28.4254C15.4368 27.9719 15.69 27.7311 16.0804 27.7311C16.4601 27.7311 16.6528 27.9769 16.6528 28.4198V29.8735H17.2302V28.4254C17.2302 27.9719 17.4947 27.7311 17.8738 27.7311C18.2649 27.7311 18.4519 27.9769 18.4519 28.4198V29.8735H19.0293V29.8735Z"
fill="#231F20"
/>
</svg>
/* eslint-enable */
);

44
packages/js/onboarding/src/components/WCPayBanner/Icons/mastercard.js
View File

@ -1,44 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const MasterCard = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.6846 27.0292V28.3215V29.6137H18.1154V29.2999C17.9349 29.5327 17.661 29.6787 17.2886 29.6787C16.5546 29.6787 15.9791 29.1112 15.9791 28.3215C15.9791 27.5324 16.5546 26.9642 17.2886 26.9642C17.661 26.9642 17.9349 27.1103 18.1154 27.343V27.0292H18.6846ZM17.3594 27.494C16.8667 27.494 16.5652 27.8672 16.5652 28.3215C16.5652 28.7757 16.8667 29.1489 17.3594 29.1489C17.8302 29.1489 18.148 28.7918 18.148 28.3215C18.148 27.8511 17.8302 27.494 17.3594 27.494ZM37.9186 28.3215C37.9186 27.8672 38.2201 27.494 38.7128 27.494C39.1842 27.494 39.5014 27.8511 39.5014 28.3215C39.5014 28.7918 39.1842 29.1489 38.7128 29.1489C38.2201 29.1489 37.9186 28.7757 37.9186 28.3215ZM40.0386 25.9913V28.3215V29.6137H39.4688V29.2999C39.2882 29.5327 39.0143 29.6787 38.642 29.6787C37.9079 29.6787 37.3325 29.1112 37.3325 28.3215C37.3325 27.5324 37.9079 26.9642 38.642 26.9642C39.0143 26.9642 39.2882 27.1103 39.4688 27.343V25.9913H40.0386ZM25.7496 27.4674C26.1163 27.4674 26.352 27.6945 26.4122 28.0943H25.0538C25.1146 27.7211 25.3441 27.4674 25.7496 27.4674ZM24.4571 28.3215C24.4571 27.5157 24.9937 26.9642 25.7609 26.9642C26.4943 26.9642 26.9983 27.5157 27.0039 28.3215C27.0039 28.397 26.9983 28.4675 26.9926 28.5375L25.0488 28.5375C25.1309 29.0029 25.465 29.1706 25.8317 29.1706C26.0944 29.1706 26.374 29.0728 26.5933 28.9001L26.8723 29.3167C26.5545 29.5815 26.1934 29.6787 25.7991 29.6787C25.0156 29.6787 24.4571 29.1434 24.4571 28.3215ZM32.6337 28.3215C32.6337 27.8672 32.9353 27.494 33.4279 27.494C33.8987 27.494 34.2165 27.8511 34.2165 28.3215C34.2165 28.7918 33.8987 29.1489 33.4279 29.1489C32.9353 29.1489 32.6337 28.7757 32.6337 28.3215ZM34.7529 27.0292V28.3215V29.6137H34.1837V29.2999C34.0026 29.5327 33.7293 29.6787 33.3569 29.6787C32.6229 29.6787 32.0475 29.1112 32.0475 28.3215C32.0475 27.5324 32.6229 26.9642 33.3569 26.9642C33.7293 26.9642 34.0026 27.1103 34.1837 27.343V27.0292H34.7529ZM29.4191 28.3215C29.4191 29.1056 29.972 29.6787 30.8157 29.6787C31.21 29.6787 31.4726 29.5921 31.7572 29.3705L31.4839 28.9162C31.2701 29.0679 31.0457 29.1489 30.7988 29.1489C30.3443 29.1434 30.0102 28.8191 30.0102 28.3215C30.0102 27.8239 30.3443 27.4996 30.7988 27.494C31.0457 27.494 31.2701 27.5751 31.4839 27.7267L31.7572 27.2724C31.4726 27.0509 31.21 26.9642 30.8157 26.9642C29.972 26.9642 29.4191 27.5373 29.4191 28.3215ZM36.0674 27.3431C36.2153 27.1159 36.4291 26.9643 36.7575 26.9643C36.8729 26.9643 37.0371 26.986 37.1631 27.0349L36.9876 27.5646C36.8672 27.5157 36.7469 27.4997 36.6315 27.4997C36.2592 27.4997 36.073 27.7373 36.073 28.165V29.6138H35.5032V27.0293H36.0674V27.3431ZM21.4996 27.2347C21.2257 27.0564 20.8483 26.9642 20.4321 26.9642C19.7689 26.9642 19.342 27.278 19.342 27.7917C19.342 28.2132 19.6599 28.4731 20.2453 28.5542L20.5142 28.5919C20.8264 28.6352 20.9737 28.7163 20.9737 28.8624C20.9737 29.0623 20.7656 29.1762 20.377 29.1762C19.9827 29.1762 19.6981 29.0518 19.5063 28.9057L19.238 29.3433C19.5502 29.5704 19.9444 29.6787 20.3713 29.6787C21.1273 29.6787 21.5654 29.3272 21.5654 28.8352C21.5654 28.3809 21.2207 28.1432 20.6509 28.0621L20.3826 28.0238C20.1363 27.9916 19.9388 27.9433 19.9388 27.77C19.9388 27.5806 20.125 27.4674 20.4371 27.4674C20.7712 27.4674 21.0947 27.5918 21.2533 27.689L21.4996 27.2347ZM28.1542 27.3431C28.3015 27.1159 28.5152 26.9643 28.8437 26.9643C28.959 26.9643 29.1233 26.986 29.2493 27.0349L29.0738 27.5646C28.9534 27.5157 28.833 27.4997 28.7177 27.4997C28.3454 27.4997 28.1592 27.7373 28.1592 28.165V29.6138H27.59V27.0293L28.1542 27.0293V27.3431ZM23.9862 27.0292H23.0553V26.2451H22.4799V27.0292H21.949V27.5429H22.4799V28.7219C22.4799 29.3216 22.7156 29.6787 23.3888 29.6787C23.6358 29.6787 23.9204 29.6032 24.1009 29.4788L23.9367 28.9973C23.7668 29.0945 23.5806 29.1434 23.4327 29.1434C23.1481 29.1434 23.0553 28.9701 23.0553 28.7108V27.5429H23.9862V27.0292ZM15.4758 27.9917V29.6138H14.9003V28.1755C14.9003 27.7373 14.7142 27.4941 14.3255 27.4941C13.9475 27.4941 13.6849 27.7324 13.6849 28.1811V29.6138H13.1095V28.1755C13.1095 27.7373 12.9183 27.4941 12.5403 27.4941C12.151 27.4941 11.899 27.7324 11.899 28.1811V29.6138H11.3242V27.0293H11.894V27.348C12.1078 27.0454 12.3811 26.9643 12.6606 26.9643C13.0606 26.9643 13.3451 27.1376 13.5257 27.4242C13.767 27.0615 14.1118 26.9587 14.4459 26.9643C15.0815 26.9699 15.4758 27.3808 15.4758 27.9917Z"
fill="#231F20"
/>
<path
d="M29.9381 22.6376H21.3115V7.33105H29.9381V22.6376Z"
fill="#FF5F00"
/>
<path
d="M21.8586 14.9846C21.8586 11.8796 23.331 9.11372 25.624 7.33129C23.9472 6.02789 21.831 5.24994 19.5311 5.24994C14.0864 5.24994 9.67285 9.60822 9.67285 14.9846C9.67285 20.361 14.0864 24.7192 19.5311 24.7192C21.831 24.7192 23.9472 23.9413 25.624 22.6379C23.331 20.8555 21.8586 18.0896 21.8586 14.9846Z"
fill="#EB001B"
/>
<path
d="M41.5758 14.9846C41.5758 20.361 37.1622 24.7192 31.7175 24.7192C29.4177 24.7192 27.3014 23.9413 25.624 22.6379C27.9176 20.8555 29.3901 18.0896 29.3901 14.9846C29.3901 11.8796 27.9176 9.11372 25.624 7.33129C27.3014 6.02789 29.4177 5.24994 31.7175 5.24994C37.1622 5.24994 41.5758 9.60822 41.5758 14.9846Z"
fill="#F79E1B"
/>
</svg>
/* eslint-enable */
);

116
packages/js/onboarding/src/components/WCPayBanner/Icons/unionpay.js
View File

@ -1,116 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const UnionPay = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.878906"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M44.0545 5.25735L34.3353 5.25488C34.3341 5.25488 34.3328 5.25488 34.3328 5.25488C34.3253 5.25488 34.3179 5.2562 34.3106 5.2562C32.9754 5.29641 31.3124 6.34915 31.0096 7.64726L26.4132 27.6401C26.1104 28.9503 26.9343 30.0165 28.2599 30.0361H38.4703C39.7756 29.9726 41.044 28.932 41.3417 27.6486L45.9382 7.65564C46.2459 6.33208 45.402 5.25735 44.0545 5.25735Z"
fill="#01798A"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M26.4134 27.6401L31.0097 7.64729C31.3126 6.34917 32.9755 5.29643 34.3107 5.25622L30.4464 5.25376L23.484 5.25244C22.1451 5.27936 20.4605 6.33949 20.1577 7.64729L15.5601 27.6401C15.2561 28.9503 16.0813 30.0165 17.4059 30.0361H28.26C26.9345 30.0165 26.1105 28.9503 26.4134 27.6401"
fill="#024381"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.5602 27.64L20.1578 7.64714C20.4606 6.33934 22.1452 5.27922 23.4841 5.2523L14.5649 5.25C13.2185 5.25 11.4923 6.32227 11.1846 7.64714L6.58694 27.64C6.55896 27.762 6.54344 27.8815 6.53418 27.9986V28.3695C6.62418 29.3246 7.36619 30.0201 8.43278 30.036H17.406C16.0814 30.0163 15.2562 28.9502 15.5602 27.64Z"
fill="#DD0228"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M23.6716 19.8205H23.8404C23.9955 19.8205 24.0999 19.7693 24.1488 19.668L24.5874 19.0227H25.762L25.5171 19.4472H26.9254L26.7467 20.0975H25.0709C24.8779 20.3829 24.6403 20.5171 24.3547 20.5012H23.4818L23.6716 19.8205H23.6716ZM23.4788 20.7527H26.5643L26.3676 21.4591H25.1268L24.9374 22.1409H26.1449L25.9482 22.8473H24.7407L24.4602 23.8548C24.3908 24.0232 24.4821 24.099 24.7327 24.0818H25.7168L25.5345 24.7382H23.6451C23.287 24.7382 23.1641 24.5368 23.2765 24.1331L23.6351 22.8473H22.8633L23.0593 22.1409H23.8313L24.0205 21.4591H23.2827L23.4788 20.7527H23.4788ZM28.4035 19.018L28.355 19.4315C28.355 19.4315 28.937 19.002 29.4656 19.002H31.4189L30.6719 21.6601C30.61 21.964 30.3443 22.1151 29.8752 22.1151H27.6612L27.1426 23.9817C27.1128 24.0817 27.155 24.133 27.2667 24.133H27.7023L27.5422 24.7124H26.4347C26.0096 24.7124 25.8328 24.5867 25.903 24.3343L27.3684 19.018H28.4035H28.4035ZM30.0576 19.7693H28.3141L28.1056 20.4866C28.1056 20.4866 28.3959 20.2805 28.8811 20.2731C29.365 20.2657 29.9173 20.2731 29.9173 20.2731L30.0576 19.7693ZM29.4261 21.4333C29.555 21.4504 29.6271 21.4003 29.6358 21.282L29.7425 20.9039H27.9964L27.85 21.4333H29.4261ZM28.2483 22.2921H29.2547L29.236 22.7203H29.504C29.6394 22.7203 29.7065 22.6776 29.7065 22.5935L29.7858 22.3166H30.6223L30.5106 22.7203C30.4161 23.057 30.1656 23.2327 29.7586 23.2499H29.2225L29.22 23.9817C29.2101 24.0989 29.318 24.1587 29.54 24.1587H30.0439L29.8813 24.7381H28.6727C28.3339 24.754 28.1678 24.5953 28.1713 24.2587L28.2483 22.2921V22.2921Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.0529 15.4764C15.9164 16.1339 15.6 16.639 15.1091 16.9976C14.6227 17.3502 13.9954 17.527 13.2273 17.527C12.5044 17.527 11.9745 17.3465 11.6364 16.9841C11.4018 16.7267 11.2852 16.3998 11.2852 16.0045C11.2852 15.8411 11.3051 15.6654 11.3448 15.4764L12.1631 11.5972H13.3991L12.5919 15.4325C12.5671 15.5386 12.5571 15.6374 12.5584 15.7265C12.5571 15.9229 12.6068 16.0839 12.7073 16.2095C12.8537 16.3962 13.0914 16.4889 13.4221 16.4889C13.8024 16.4889 14.1158 16.3974 14.359 16.2132C14.6022 16.0302 14.761 15.7704 14.8324 15.4325L15.6422 11.5972H16.8719L16.0529 15.4764Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.2436 13.9502H22.2116L21.4534 17.4123H20.4873L21.2436 13.9502ZM21.5482 12.689H22.5248L22.3424 13.5293H21.3659L21.5482 12.689Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M23.0688 17.1487C22.8156 16.9109 22.6878 16.59 22.6865 16.1826C22.6865 16.113 22.6908 16.0338 22.7002 15.9471C22.7095 15.8592 22.7214 15.7739 22.738 15.6946C22.8528 15.1323 23.0973 14.6858 23.4739 14.3564C23.8499 14.0258 24.3036 13.8599 24.8347 13.8599C25.2696 13.8599 25.6145 13.9794 25.8672 14.2185C26.1196 14.4589 26.2462 14.7833 26.2462 15.1957C26.2462 15.2664 26.2407 15.3481 26.2313 15.436C26.2201 15.525 26.2066 15.6104 26.1909 15.6946C26.0787 16.2484 25.8349 16.69 25.4583 17.0134C25.0816 17.3391 24.6293 17.5012 24.1019 17.5012C23.6651 17.5012 23.3213 17.3841 23.0688 17.1487M24.9136 16.4631C25.0843 16.2814 25.2065 16.0056 25.2809 15.6385C25.2921 15.5812 25.302 15.5214 25.3082 15.4616C25.3143 15.403 25.3168 15.3482 25.3168 15.2981C25.3168 15.0846 25.2616 14.9188 25.1506 14.8016C25.0402 14.6833 24.8832 14.6248 24.6804 14.6248C24.4122 14.6248 24.1939 14.7174 24.0227 14.9029C23.8501 15.0884 23.7279 15.3689 23.6509 15.7422C23.6404 15.7995 23.6317 15.8569 23.6237 15.913C23.6175 15.9703 23.6157 16.024 23.6168 16.0728C23.6168 16.285 23.6721 16.4485 23.7831 16.5644C23.8935 16.6803 24.0498 16.7376 24.2553 16.7376C24.5246 16.7376 24.743 16.6461 24.9136 16.4631Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M32.5262 19.8496L32.7596 19.0421H33.9397L33.8888 19.3385C33.8888 19.3385 34.4918 19.0421 34.9261 19.0421C35.3606 19.0421 36.3854 19.0421 36.3854 19.0421L36.1535 19.8496H35.9239L34.8231 23.6582H35.0527L34.8343 24.4146H34.6047L34.5092 24.7427H33.3664L33.4617 24.4146H31.207L31.4268 23.6582H31.6527L32.7544 19.8496H32.5262H32.5262ZM33.7993 19.8498L33.4989 20.8805C33.4989 20.8805 34.0128 20.6866 34.4558 20.6318C34.5536 20.2718 34.6815 19.8498 34.6815 19.8498H33.7993V19.8498ZM33.3598 21.3637L33.0585 22.4433C33.0585 22.4433 33.628 22.1676 34.0188 22.1444C34.1317 21.7271 34.2447 21.3637 34.2447 21.3637H33.3598V21.3637ZM33.5808 23.6583L33.8067 22.8751H32.9258L32.6987 23.6583H33.5808ZM36.4352 18.9922H37.5447L37.5918 19.3946C37.5844 19.4971 37.6463 19.546 37.7779 19.546H37.9739L37.7756 20.2279H36.9601C36.6487 20.2437 36.4886 20.1267 36.4738 19.8741L36.4352 18.9922ZM36.1102 20.4548H39.7039L39.493 21.1868H38.3488L38.1526 21.8673H39.2957L39.0835 22.5981H37.8104L37.5224 23.0264H38.1455L38.2894 23.8839C38.3066 23.9693 38.3836 24.0108 38.5151 24.0108H38.7086L38.5053 24.717H37.8202C37.4653 24.7342 37.2818 24.6171 37.2667 24.3646L37.1016 23.5814L36.5346 24.4146C36.4005 24.65 36.1945 24.7599 35.9167 24.7427H34.8705L35.074 24.0363H35.4004C35.5345 24.0363 35.646 23.9778 35.7465 23.8595L36.634 22.5981H35.4898L35.7018 21.8673H36.9428L37.1402 21.1868H35.898L36.1102 20.4548Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.1915 13.9492H18.0645L17.9647 14.4493L18.0899 14.3066C18.3729 14.009 18.7166 13.8613 19.1224 13.8613C19.4898 13.8613 19.7547 13.9663 19.921 14.1773C20.0847 14.3884 20.1294 14.6799 20.0519 15.0544L19.571 17.4137H18.6738L19.1081 15.2752C19.1529 15.0544 19.1405 14.8897 19.0715 14.7836C19.0033 14.6774 18.873 14.625 18.685 14.625C18.4542 14.625 18.26 14.6957 18.1017 14.8361C17.9429 14.9776 17.8381 15.174 17.7865 15.424L17.3863 17.4137H16.4873L17.1915 13.9492Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M27.2021 13.9492H28.0758L27.9767 14.4493L28.1006 14.3066C28.3837 14.009 28.7287 13.8613 29.1332 13.8613C29.5005 13.8613 29.766 13.9663 29.931 14.1773C30.0937 14.3884 30.1408 14.6799 30.0614 15.0544L29.5823 17.4137H28.6839L29.1184 15.2752C29.1629 15.0544 29.1506 14.8897 29.0823 14.7836C29.0115 14.6774 28.8836 14.625 28.6964 14.625C28.4655 14.625 28.272 14.6957 28.1119 14.8361C27.953 14.9776 27.8476 15.174 27.798 15.424L27.396 17.4137H26.498L27.2021 13.9492"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5212 11.8018H34.0577C34.5454 11.8018 34.9225 11.9104 35.1818 12.1238C35.44 12.3398 35.5692 12.6497 35.5692 13.0534V13.0656C35.5692 13.1424 35.564 13.229 35.5567 13.3229C35.5441 13.4157 35.5279 13.5095 35.5071 13.6072C35.3954 14.1415 35.1359 14.571 34.7352 14.8967C34.333 15.2211 33.8567 15.3846 33.3082 15.3846H31.9479L31.5274 17.4133H30.3496L31.5212 11.8018M32.1554 14.4087H33.2835C33.5776 14.4087 33.8108 14.3415 33.9809 14.2086C34.1497 14.0744 34.2614 13.8695 34.3234 13.5914C34.3332 13.54 34.3394 13.4937 34.3469 13.451C34.3508 13.4108 34.3556 13.3704 34.3556 13.3315C34.3556 13.1326 34.2838 12.9887 34.1397 12.8984C33.9958 12.8068 33.7701 12.763 33.4572 12.763H32.4991L32.1554 14.4087"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M40.8406 18.0833C40.4683 18.8615 40.1135 19.3152 39.9051 19.5263C39.6964 19.735 39.2833 20.2205 38.2881 20.1839L38.3737 19.5898C39.2112 19.3361 39.6642 18.1929 39.9223 17.6867L39.6146 13.9587L40.2624 13.9502H40.8059L40.8643 16.2888L41.8829 13.9502H42.9143L40.8406 18.0833Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M37.9561 14.232L37.5464 14.509C37.1183 14.1796 36.7274 13.9759 35.9731 14.3199C34.9454 14.7883 34.0868 18.381 36.9161 17.1976L37.0774 17.3855L38.1905 17.4135L38.9215 14.1491L37.9561 14.232M37.3233 16.0168C37.1445 16.5353 36.7451 16.8781 36.4324 16.7805C36.1196 16.6853 36.008 16.1851 36.1891 15.6655C36.3678 15.1458 36.7698 14.8042 37.08 14.9018C37.3927 14.997 37.5056 15.4971 37.3233 16.0168Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M34.3328 5.26107L30.4463 5.25342L34.3106 5.26981C34.318 5.26981 34.3253 5.26107 34.3328 5.26107"
fill="#E02F41"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.4467 5.27406L23.5378 5.25C23.5204 5.25 23.5024 5.25765 23.4844 5.26531L30.4467 5.27406"
fill="#2E4F7D"
/>
</svg>
/* eslint-enable */
);

46
packages/js/onboarding/src/components/WCPayBanner/Icons/visa.js
View File

@ -1,46 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Visa = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
d="M22.6435 24.004H19.248L21.3718 11.7534H24.7671L22.6435 24.004Z"
fill="#15195A"
/>
<path
d="M34.952 12.0528C34.2823 11.8049 33.22 11.5312 31.9066 11.5312C28.5534 11.5312 26.1922 13.1993 26.1777 15.5842C26.1499 17.3437 27.8683 18.321 29.1536 18.9077C30.4672 19.5072 30.9138 19.8985 30.9138 20.4329C30.9004 21.2536 29.8522 21.6319 28.8747 21.6319C27.5191 21.6319 26.7927 21.4369 25.6889 20.9803L25.2417 20.7845L24.7666 23.5345C25.563 23.873 27.0302 24.1733 28.5534 24.1865C32.1162 24.1865 34.4356 22.5442 34.4631 20.0028C34.4767 18.6082 33.5693 17.5396 31.613 16.6665C30.4254 16.1059 29.6981 15.728 29.6981 15.1544C29.7121 14.6331 30.3133 14.099 31.6539 14.099C32.7577 14.0729 33.5687 14.3204 34.1831 14.5681L34.4902 14.6982L34.952 12.0528Z"
fill="#15195A"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M41.0301 11.7534H43.6565L46.3957 24.0039H43.2519C43.2519 24.0039 42.9442 22.5963 42.8467 22.1662H38.4873C38.3612 22.4919 37.7747 24.0039 37.7747 24.0039H34.2119L39.2554 12.7699C39.6049 11.9748 40.2202 11.7534 41.0301 11.7534ZM40.8208 16.2365C40.8208 16.2365 39.7448 18.9603 39.4652 19.6641H42.2875C42.1478 19.0516 41.5048 16.1192 41.5048 16.1192L41.2676 15.0636C41.1676 15.3355 41.0231 15.7092 40.9256 15.9612C40.8596 16.1321 40.8151 16.2471 40.8208 16.2365Z"
fill="#15195A"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.53636 11.7534H9.99929C10.7398 11.7792 11.3406 12.0008 11.5361 12.7832L12.7233 18.4113C12.7234 18.4118 12.7236 18.4124 12.7238 18.4129L13.0871 20.1072L16.4124 11.7534H20.0028L14.6657 23.991H11.0752L8.04881 13.3464C7.00461 12.7769 5.81289 12.3188 4.48047 12.0009L4.53636 11.7534Z"
fill="#15195A"
/>
</svg>
/* eslint-enable */
);

44
packages/js/onboarding/src/components/WCPayBanner/PaymentMethodsIcons.tsx
View File

@ -1,44 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Text } from '@woocommerce/experimental';
/**
* Internal dependencies
*/
import {
Visa,
MasterCard,
Amex,
WooPay,
ApplePay,
Giropay,
GooglePay,
CB,
Discover,
UnionPay,
JCB,
} from './Icons';
export const PaymentMethodsIcons: React.VFC< {
isWooPayEligible: boolean;
} > = ( { isWooPayEligible = false } ) => (
<div className="woocommerce-recommended-payments-banner__footer_icon_container">
<Visa />
<MasterCard />
<Amex />
{ isWooPayEligible && <WooPay /> }
<ApplePay />
<GooglePay />
<CB />
<Giropay />
<Discover />
<UnionPay />
<JCB />
<Text variant="caption" as="p" size="12" lineHeight="16px">
{ __( '& more.', 'woocommerce' ) }
</Text>
</div>
);

5
packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss
View File

@ -53,10 +53,13 @@
padding: 20px 15px 30px;
p {
color: #757575;
font-style: normal;
font-weight: 400;
}
@media screen and (max-width: 1024px) {
justify-content: left;
}
}
.woocommerce-recommended-payments-banner__footer_icon_container {

7
packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx
View File

@ -13,7 +13,7 @@ import { Text } from '@woocommerce/experimental';
/**
* Internal dependencies
*/
import { PaymentMethodsIcons } from './PaymentMethodsIcons';
import { WooPaymentMethodsLogos } from '../WooPaymentsMethodsLogos';
import { WCPayBannerImage } from './WCPayBannerImage';
export const WCPayBannerFooter: React.VFC< {
@ -28,7 +28,10 @@ export const WCPayBannerFooter: React.VFC< {
) }
</Text>
</div>
<PaymentMethodsIcons isWooPayEligible={ isWooPayEligible } />
<WooPaymentMethodsLogos
isWooPayEligible={ isWooPayEligible }
maxElements={ 10 }
/>
</CardFooter>
);

2
packages/js/onboarding/src/components/WCPayBanner/index.ts
View File

@ -1,5 +1,3 @@
export * from './Icons';
export * from './WCPayBannerImage';
export * from './WCPayBannerImageCut';
export * from './PaymentMethodsIcons';
export * from './WCPayBanner';

40
packages/js/onboarding/src/components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss Normal file
View File

@ -0,0 +1,40 @@
.woocommerce-woopayments-payment-methods-logos {
display: flex;
align-items: center;
padding: $gap-small 0;
svg {
width: 38px;
height: 24px;
margin-right: 8px;
border: 1px solid $gray-300;
border-radius: 3px;
}
&-count {
width: 38px;
height: 24px;
background-color: rgba($gray-700, 0.10);
color: $gray-900;
text-align: center;
line-height: 24px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
}
}
.wc_payment_gateways_wrapper [data-gateway_id="pre_install_woocommerce_payments_promotion"] {
.woocommerce-woopayments-payment-methods-logos {
padding: 0;
}
@media only screen and (max-width: 768px) {
.wc-payment-gateway-method__name {
display: block;
}
.pre-install-payment-gateway__subtitle {
margin-left: 0;
}
}
}

140
packages/js/onboarding/src/components/WooPaymentsMethodsLogos/index.tsx Normal file
View File

@ -0,0 +1,140 @@
/**
* External dependencies
*/
import React, { useState, useEffect } from 'react';
import { Fragment, createElement } from '@wordpress/element';
/**
* Internal dependencies
*/
import Visa from '../../images/cards/visa';
import MasterCard from '../../images/cards/mastercard';
import Amex from '../../images/cards/amex';
import Discover from '../../images/cards/discover';
import ApplePay from '../../images/cards/applepay';
import GooglePay from '../../images/cards/googlepay';
import JCB from '../../images/cards/jcb';
import WooPay from '../../images/payment-methods/woopay';
import AfterPay from '../../images/payment-methods/afterpay';
import Affirm from '../../images/payment-methods/affirm';
import Klarna from '../../images/payment-methods/klarna';
/**
* Payment methods logos
*/
const PaymentMethods = [
{
name: 'visa',
component: <Visa key="visa" />,
},
{
name: 'mastercard',
component: <MasterCard key="mastercard" />,
},
{
name: 'amex',
component: <Amex key="amex" />,
},
{
name: 'discover',
component: <Discover key="discover" />,
},
{
name: 'woopay',
component: <WooPay key="woopay" />,
},
{
name: 'applepay',
component: <ApplePay key="applepay" />,
},
{
name: 'googlepay',
component: <GooglePay key="googlepay" />,
},
{
name: 'afterpay',
component: <AfterPay key="afterpay" />,
},
{
name: 'affirm',
component: <Affirm key="affirm" />,
},
{
name: 'klarna',
component: <Klarna key="klarna" />,
},
{
name: 'jcb',
component: <JCB key="jcb" />,
},
];
// Maximum number of logos to be displayed on a mobile screen.
const maxElementsMobile = 5;
// Maximum number of logos to be displayed on a tablet screen.
const maxElementsTablet = 7;
// Maximum number of logos to be displayed on a desktop screen.
const maxElementsDesktop = 10;
// Total number of available payment methods from https://woocommerce.com/document/woopayments/payment-methods.
const totalPaymentMethods = 20;
export const WooPaymentMethodsLogos: React.VFC< {
isWooPayEligible: boolean;
maxElements: number;
} > = ( { isWooPayEligible = false, maxElements = maxElementsDesktop } ) => {
const [ maxShownElements, setMaxShownElements ] = useState( maxElements );
// Determine the maximum number of logos to display, taking into account WooPay’s eligibility.
const getMaxShownElements = (
maxElementsNumber: number,
isWooPayAvailable: boolean
) => {
if ( ! isWooPayAvailable ) {
return maxElementsNumber + 1;
}
return maxElementsNumber;
};
useEffect( () => {
const updateMaxElements = () => {
if ( window.innerWidth <= 480 ) {
setMaxShownElements( maxElementsMobile );
} else if ( window.innerWidth <= 768 ) {
setMaxShownElements( maxElementsTablet );
} else {
setMaxShownElements( maxElements );
}
};
updateMaxElements();
window.addEventListener( 'resize', updateMaxElements );
return () => {
window.removeEventListener( 'resize', updateMaxElements );
};
}, [ maxElements ] );
return (
<>
<div className="woocommerce-woopayments-payment-methods-logos">
{ PaymentMethods.slice(
0,
getMaxShownElements( maxShownElements, isWooPayEligible )
).map( ( pm ) => {
if ( ! isWooPayEligible && pm.name === 'woopay' ) {
return null;
}
return pm.component;
} ) }
{ maxShownElements < totalPaymentMethods && (
<div className="woocommerce-woopayments-payment-methods-logos-count">
+ { totalPaymentMethods - maxShownElements }
</div>
) }
</div>
</>
);
};

2
packages/js/onboarding/src/components/WCPayBanner/Icons/woopay.js → packages/js/onboarding/src/images/payment-methods/woopay.js
View File

@ -3,7 +3,7 @@
*/
import { createElement } from '@wordpress/element';
export const WooPay = () => (
export default () => (
/* eslint-disable */
<svg
width="64"

1
packages/js/onboarding/src/index.ts
View File

@ -30,3 +30,4 @@ export { WooOnboardingTaskListHeader } from './components/WooOnboardingTaskListH
export { WooOnboardingTask } from './components/WooOnboardingTask';
export * from './utils/countries';
export { Loader } from './components/Loader';
export { WooPaymentMethodsLogos } from './components/WooPaymentsMethodsLogos';

1
packages/js/onboarding/src/style.scss
View File

@ -3,3 +3,4 @@
@import 'components/WCPayBenefits/WCPayBenefits.scss';
@import 'components/RecommendedRibbon/RecommendedRibbon.scss';
@import 'components/Loader/Loader.scss';
@import 'components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss';

7
plugins/woocommerce-admin/client/payments-welcome/banner.tsx
View File

@ -3,6 +3,7 @@
*/
import { Card, CardBody, Button, CardDivider } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { WooPaymentMethodsLogos } from '@woocommerce/onboarding';
/**
* Internal dependencies
@ -11,7 +12,6 @@ import { getAdminSetting } from '~/utils/admin-settings';
import sanitizeHTML from '~/lib/sanitize-html';
import WooPaymentsLogo from './woopayments.svg';
import ExitSurveyModal from './exit-survey-modal';
import PaymentMethods from './payment-methods';
import strings from './strings';
interface Props {
@ -76,7 +76,10 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => {
<CardDivider />
<CardBody className="woopayments-welcome-page__payments">
<p>{ strings.paymentOptions }</p>
<PaymentMethods />
<WooPaymentMethodsLogos
isWooPayEligible={ isWooPayEligible }
maxElements={ 10 }
/>
</CardBody>
{ isExitSurveyModalOpen && (
<ExitSurveyModal

51
plugins/woocommerce-admin/client/payments-welcome/payment-methods.tsx
View File

@ -1,51 +0,0 @@
/**
* External dependencies
*/
import {
Visa,
MasterCard,
Amex,
ApplePay,
GooglePay,
CB,
Discover,
Ideal,
Klarna,
Affirm,
AfterPay,
ClearPay,
Woo,
} from '@woocommerce/onboarding';
/**
* Internal dependencies
*/
import strings from './strings';
import { getAdminSetting } from '~/utils/admin-settings';
const PaymentMethods: React.FC = () => {
const wccomSettings = getAdminSetting( 'wccomHelper', false );
return (
<div className="woopayments-welcome-page__payment-methods">
<Visa />
<MasterCard />
<Amex />
<CB />
<Discover />
<Ideal />
<ApplePay />
<GooglePay />
<Woo />
<Klarna />
<Affirm />
{ wccomSettings && wccomSettings.storeCountry === 'GB' ? (
<ClearPay />
) : (
<AfterPay />
) }
<span>{ strings.andMore }</span>
</div>
);
};
export default PaymentMethods;

19
plugins/woocommerce-admin/client/wp-admin-scripts/payment-method-promotions/payment-promotion-row.tsx
View File

@ -12,11 +12,13 @@ import { recordEvent } from '@woocommerce/tracks';
import { useDispatch, useSelect } from '@wordpress/data';
import { sanitize } from 'dompurify';
import { __ } from '@wordpress/i18n';
import { WooPaymentMethodsLogos } from '@woocommerce/onboarding';
/**
* Internal dependencies
*/
import './payment-promotion-row.scss';
import { getAdminSetting } from '~/utils/admin-settings';
function sanitizeHTML( html: string ) {
return {
@ -116,6 +118,8 @@ export const PaymentPromotionRow: React.FC< PaymentPromotionRowProps > = ( {
return null;
}
const isWooPayEligible = getAdminSetting( 'isWooPayEligible', false );
return (
<>
{ columns.map( ( column ) => {
@ -131,7 +135,20 @@ export const PaymentPromotionRow: React.FC< PaymentPromotionRowProps > = ( {
>
{ title }
</Link>
{ subTitleContent ? (
{ gatewayId ===
'pre_install_woocommerce_payments_promotion' && (
<div className="pre-install-payment-gateway__subtitle">
<WooPaymentMethodsLogos
maxElements={ 5 }
isWooPayEligible={
isWooPayEligible
}
/>
</div>
) }
{ gatewayId !==
'pre_install_woocommerce_payments_promotion' &&
subTitleContent ? (
<div
className="pre-install-payment-gateway__subtitle"
dangerouslySetInnerHTML={ sanitizeHTML(

4
plugins/woocommerce/changelog/9063-use-shared-logos-component Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Utilize the new shared component to showcase WooPayments payment method logos.