Add the new payment method logos to the connect page

changelog/add-8808-woo-payment-method-logo

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add the new payment method logos to the connect page.

client/components/payment-method-logos/Icons/affirm.js

@@ -0,0 +1,74 @@
+export const Affirm = () => (
+	/* eslint-disable */
+	<svg
+		width="39"
+		height="24"
+		viewBox="0 0 39 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect
+			x="1.15002"
+			y="0.507812"
+			width="37"
+			height="23"
+			rx="1.5"
+			fill="white"
+		/>
+		<rect
+			x="1.15002"
+			y="0.507812"
+			width="37"
+			height="23"
+			rx="1.5"
+			stroke="#DDDDDD"
+		/>
+		<g clipPath="url(#clip0_2237_211612)">
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M8.7024 15.5686C8.39074 15.5686 8.23197 15.4151 8.23197 15.1629C8.23197 14.6924 8.7565 14.5343 9.71322 14.4325C9.71322 15.0594 9.28925 15.5686 8.69946 15.5686H8.7024ZM9.11402 12.0434C8.43014 12.0434 7.64394 12.365 7.21704 12.7055L7.6069 13.5287C7.94913 13.2153 8.50247 12.9472 9.00171 12.9472C9.47625 12.9472 9.73851 13.1059 9.73851 13.4258C9.73851 13.6405 9.56504 13.7492 9.23692 13.7922C8.01029 13.9509 7.04886 14.2896 7.04886 15.2346C7.04886 15.9837 7.5822 16.4371 8.41544 16.4371C9.01053 16.4371 9.53975 16.1066 9.79143 15.6727V16.3195H10.9005V13.6093C10.9005 12.492 10.1248 12.041 9.11461 12.041L9.11402 12.0434Z"
+				fill="#101820"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M20.2448 12.166V16.3151H21.4315V14.3158C21.4315 13.3662 22.0066 13.0869 22.407 13.0869C22.5873 13.0855 22.7639 13.1376 22.9145 13.2368L23.1315 12.1401C22.9633 12.0728 22.7833 12.0402 22.6023 12.0443C21.9925 12.0443 21.6091 12.3142 21.3562 12.8634V12.166H20.2448Z"
+				fill="#101820"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M28.6307 12.0439C28.0032 12.0439 27.534 12.4144 27.29 12.7719C27.0636 12.3103 26.5843 12.0439 26.0081 12.0439C25.3812 12.0439 24.9467 12.3921 24.7461 12.7931V12.1657H23.6018V16.3148H24.7897V14.1785C24.7897 13.4141 25.1913 13.0442 25.5659 13.0442C25.9051 13.0442 26.2168 13.2635 26.2168 13.8298V16.3148H27.4023V14.1785C27.4023 13.4029 27.7939 13.0442 28.1861 13.0442C28.5001 13.0442 28.8329 13.2723 28.8329 13.8216V16.3148H30.0184V13.4464C30.0184 12.5144 29.391 12.0439 28.633 12.0439"
+				fill="#101820"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M17.357 12.1658H16.2821V11.7442C16.2821 11.1949 16.5955 11.0385 16.8654 11.0385C17.0497 11.0409 17.2309 11.0862 17.3946 11.1708L17.7604 10.3341C17.7604 10.3341 17.3893 10.0918 16.7149 10.0918C15.9569 10.0918 15.0942 10.5193 15.0942 11.8606V12.1658H13.2978V11.7442C13.2978 11.1949 13.6107 11.0385 13.8811 11.0385C14.0657 11.0385 14.2475 11.0839 14.4104 11.1708L14.7761 10.3341C14.558 10.2065 14.2069 10.0918 13.7312 10.0918C12.9732 10.0918 12.1106 10.5193 12.1106 11.8606V12.1658H11.4238V13.0807H12.1124V16.3149H13.2978V13.0807H15.0966V16.3149H16.2821V13.0807H17.357V12.1658Z"
+				fill="#101820"
+			/>
+			<path
+				d="M19.2493 12.166H18.065V16.3134H19.2493V12.166Z"
+				fill="#101820"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M18.1085 11.4602H19.2686C19.9455 9.33217 22.2417 7.46166 24.9725 7.46166C28.2937 7.46166 31.1639 9.99018 31.1639 13.9264C31.174 14.7344 31.063 15.5393 30.8346 16.3144H31.9607L31.9719 16.2756C32.1616 15.5083 32.2552 14.7204 32.2506 13.93C32.2506 9.54034 29.0517 6.38086 24.9749 6.38086C21.7725 6.38086 18.9182 8.60361 18.109 11.4614L18.1085 11.4602Z"
+				fill="#4A4AF4"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_2237_211612">
+				<rect
+					width="25.2"
+					height="10.0553"
+					fill="white"
+					transform="translate(7.05002 6.37988)"
+				/>
+			</clipPath>
+		</defs>
+	</svg>
+	/* eslint-enable */
+);

client/components/payment-method-logos/Icons/amex.js

@@ -0,0 +1,16 @@
+export const Amex = () => (
+	/* eslint-disable */
+	<svg
+		width="39"
+		height="25"
+		viewBox="0 0 39 25"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M34.6947 5.90398L35.4627 3.816L38.8 3.79997V0L0.775024 0.0160244V24.0158L38.8 23.9998V20.2078L35.6627 20.2238L34.4387 18.7919L33.1667 20.2238H23.7588V12.5999H20.6548L24.5348 3.816H28.3107L29.2227 5.80798V3.816H33.9107L34.6947 5.90398ZM32.0467 7.28797L32.0387 6.44796L32.3587 7.28797L33.9187 11.4559H35.4707L37.0387 7.28797L37.3427 6.45597V11.4559L38.8 11.4399V5.03995L36.2627 5.05598L35.0307 8.30397L34.7027 9.18394L34.3667 8.30397L33.1267 5.05598H30.4147V11.4559H32.0467V7.28797ZM28.5348 11.4559H30.4147L27.5988 5.05598H25.4148L22.5828 11.4559H24.4388L24.9348 10.2239H28.0388L28.5348 11.4559ZM26.1668 7.22398L26.4868 6.42396L26.8068 7.22398L27.4708 8.83992H25.5028L26.1668 7.22398ZM25.0708 12.6079V18.9839H30.4147V17.5998H26.7028V16.4879H30.3428V15.1119H26.7028V13.9919H30.4147V12.6079H25.0708ZM36.3587 18.9839H38.4787L35.4867 15.7839L38.4787 12.6079H36.3907L34.4627 14.6799L32.5427 12.6079H30.4147L33.3987 15.8079L30.4147 18.9839H32.4787L34.4227 16.9039L36.3587 18.9839ZM37.1667 15.7759L38.8 17.5998V13.9439L37.1667 15.7759Z"
+			fill="#006FCF"
+		/>
+	</svg>
+	/* eslint-enable */
+);

client/components/payment-method-logos/Icons/applepay.js

@@ -0,0 +1,27 @@
+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 */
+);

client/components/payment-method-logos/Icons/cb.js

@@ -0,0 +1,48 @@
+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 */
+);