Split checkout widget into separate components

This commit is contained in:
2025-05-15 17:00:20 +02:00
parent ec87ae59fc
commit 732fdb8687
23 changed files with 884 additions and 644 deletions

View File

@@ -1,13 +1,6 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2250_489)">
<rect width="64" height="64" rx="14" fill="#D13239" style="fill:#D13239;fill:color(display-p3 0.8196 0.1961 0.2235);fill-opacity:1;"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.1817 25.0386C25.9983 24.8444 25.7339 24.6933 25.4426 24.5746C25.1351 24.4559 24.7952 24.3696 24.4607 24.3103C24.0399 24.2347 23.6299 24.2024 23.3386 24.1916C23.0689 24.1808 22.8962 24.1808 22.8962 24.1808H19.2061H16.4601L14 39.0384H16.2982L17.2046 33.5356L21.6608 33.5571C21.6608 33.5571 23.3979 33.6273 24.628 32.9745C25.858 32.3217 26.1871 30.8381 26.1871 30.8381C26.1871 30.8381 26.322 30.2878 26.4353 29.6189C26.5594 28.8798 26.6834 27.995 26.7482 27.5256C26.7752 27.3206 26.7913 27.1911 26.7913 27.1911C26.7913 27.1911 26.8237 27.0401 26.8237 26.8027C26.8291 26.4736 26.7806 25.9773 26.5216 25.5025C26.4299 25.3353 26.322 25.1842 26.1817 25.0386ZM24.4122 27.6605C24.4122 27.6875 24.2072 28.8798 23.9374 30.2932C23.8349 30.8327 23.4195 31.124 22.9448 31.2265C22.1571 31.3938 21.3101 31.3614 21.3101 31.3614L17.5876 31.3506L18.4076 26.4143L21.7795 26.4251C21.7795 26.4251 22.0061 26.4197 22.3244 26.4251C22.6858 26.4305 23.166 26.4467 23.5598 26.5006C23.8997 26.5438 24.1694 26.6139 24.2557 26.7218C24.369 26.8621 24.4122 27.0455 24.4284 27.2073C24.45 27.4447 24.4122 27.6443 24.4122 27.6605Z" fill="white" style="fill:white;fill-opacity:1;"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.4098 29.3869L30.735 29.3923L30.8753 28.4913C30.8753 28.4913 31.1235 26.8621 31.6791 26.5492C31.8572 26.4467 32.1431 26.3549 32.4722 26.2956C33.0818 26.1877 33.8533 26.1769 34.4845 26.1985C35.4502 26.2309 35.817 26.2416 36.7989 26.3549C37.7808 26.4682 37.5326 27.4177 37.5326 27.4177L37.3384 28.8366C37.3384 28.8366 37.2521 29.4732 37.0255 29.867C36.8259 30.2177 36.2756 30.4551 35.9573 30.5576C35.1912 30.8057 32.5693 31.4747 32.5693 31.4747L30.5084 32.0682C30.5084 32.0682 29.2406 32.435 28.5339 33.2173C27.8218 34.0049 27.5412 34.8951 27.4441 35.3591C27.347 35.823 26.8021 39.033 26.8021 39.033L37.9264 39.0384L38.2987 36.8157L29.4996 36.8265L29.656 35.9201C29.656 35.9201 29.7585 34.9868 30.1362 34.6793C30.2549 34.5822 30.3142 34.4527 31.0156 34.2045C31.4364 34.0535 32.8714 33.6704 32.8714 33.6704L36.1893 32.7641C36.1893 32.7641 38.002 32.3001 38.7141 31.3075C39.4262 30.3202 39.7014 28.4266 39.7014 28.4266C39.7014 28.4266 39.8956 26.5869 39.7445 26.0097C39.5989 25.4324 39.054 24.7419 38.3904 24.4451C37.7268 24.1484 37.0363 23.9758 35.0348 24.0028C33.0333 24.0297 32.0406 24.1214 31.0263 24.4991C30.0121 24.8713 29.4241 25.5511 29.0518 26.5114C28.6472 27.4231 28.4098 29.3869 28.4098 29.3869Z" fill="#D4D4D4" style="fill:#D4D4D4;fill:color(display-p3 0.8297 0.8297 0.8297);fill-opacity:1;"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.3527 33.5194L50.9119 24.1754H48.1497L39.5502 33.4115L39.1617 35.7529H46.6823L46.132 39.033L48.441 39.0384L48.9859 35.7529L51.1169 35.7583L51.4999 33.5194H49.3527ZM47.0545 33.5248L42.1937 33.5194L48.1119 27.2128L47.0545 33.5248Z" fill="#D4D4D4" style="fill:#D4D4D4;fill:color(display-p3 0.8297 0.8297 0.8297);fill-opacity:1;"/>
</g>
<defs>
<clipPath id="clip0_2250_489">
<rect width="64" height="64" rx="14" fill="white" style="fill:white;fill-opacity:1;"/>
</clipPath>
</defs>
</svg>
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -9 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="57" height="39" rx="3.5" fill="white" stroke="#F3F3F3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.53279 19.7844C9.67319 19.8416 9.80059 19.9144 9.88899 20.008C9.95659 20.0782 10.0086 20.151 10.0528 20.2316C10.1776 20.4604 10.201 20.6996 10.1984 20.8582C10.1984 20.9726 10.1828 21.0454 10.1828 21.0454C10.1828 21.0454 10.175 21.1078 10.162 21.2066C10.1308 21.4328 10.071 21.8592 10.0112 22.2154C9.95659 22.5378 9.89159 22.803 9.89159 22.803C9.89159 22.803 9.73299 23.518 9.14019 23.8326C8.54739 24.1472 7.71019 24.1134 7.71019 24.1134L5.56259 24.103L5.12579 26.755H4.01819L5.20379 19.5946H6.52719H8.30559C8.30559 19.5946 8.38879 19.5946 8.51879 19.5998C8.65919 19.605 8.85679 19.6206 9.05959 19.657C9.22079 19.6856 9.38459 19.7272 9.53279 19.7844ZM8.80739 22.5404C8.93739 21.8592 9.03619 21.2846 9.03619 21.2716C9.03619 21.2703 9.0367 21.2665 9.0375 21.2606L9.03751 21.2605L9.03751 21.2605L9.03751 21.2605C9.0415 21.2309 9.05264 21.1484 9.04399 21.0532C9.03619 20.9752 9.01539 20.8868 8.96079 20.8192C8.91919 20.7672 8.78919 20.7334 8.62539 20.7126C8.43559 20.6866 8.20419 20.6788 8.02999 20.6762C7.87659 20.6736 7.76739 20.6762 7.76739 20.6762L6.14239 20.671L5.74719 23.05L7.54119 23.0552C7.54119 23.0552 7.94939 23.0708 8.32899 22.9902C8.55779 22.9408 8.75799 22.8004 8.80739 22.5404ZM18.404 21.5862L14.3376 21.5914L14.1738 22.6002H16.7764L13.516 25.7228L13.3392 26.755L17.5434 26.7524L17.7098 25.754L14.855 25.7592L18.2558 22.5118L18.404 21.5862ZM23.9186 19.5946H24.9846L23.7912 26.755L22.7226 26.7524L23.9186 19.5946ZM30.6292 21.5888L29.6074 21.5914L30.1274 26.755L31.365 26.7498L32.9536 23.1358L33.3176 26.7498H34.576L36.8276 21.5888H35.7668L34.1964 25.2366L33.8246 21.5862L32.5636 21.5836L30.9906 25.2236L30.6292 21.5888ZM20.6946 21.5212C21.134 21.516 21.6514 21.5368 21.9504 21.633C22.8396 21.9242 22.9618 22.6652 22.7902 23.6376L22.642 24.4956L19.171 24.506C19.171 24.506 19.1034 24.6646 19.0748 25.273C19.0722 25.2886 19.0722 25.299 19.0722 25.3068C19.0238 25.8048 19.5733 25.815 19.7427 25.8182C19.7555 25.8184 19.7662 25.8186 19.7742 25.819L19.8092 25.8208C19.9487 25.828 20.2626 25.8443 20.8064 25.7826C21.4044 25.715 21.4642 24.9844 21.4642 24.9844L22.5692 24.9818L22.5016 25.26L22.4999 25.267C22.491 25.3055 22.4545 25.462 22.3534 25.6786C22.2442 25.9126 22.0908 26.1102 22.0908 26.1102C22.0908 26.1102 21.7476 26.5678 21.0976 26.7212C20.4476 26.8746 19.5844 26.807 19.5844 26.807C19.5844 26.807 19.1736 26.8174 18.69 26.6302C18.2064 26.4456 18.0738 26.0478 17.9984 25.6214C17.923 25.1924 18.1778 23.9106 18.1778 23.9106C18.1778 23.9106 18.3052 22.751 18.7342 22.2206C19.1632 21.6902 19.9172 21.581 19.9172 21.581C20.0758 21.5472 20.2708 21.5264 20.6946 21.5212ZM19.34 23.5128L21.719 23.5154C21.719 23.5154 21.8074 23.089 21.7242 22.8082C21.6878 22.6886 21.5526 22.608 21.4096 22.5794C20.9806 22.491 20.4528 22.53 20.2552 22.5482C20.0576 22.5664 19.847 22.5898 19.6806 22.7146C19.5168 22.8394 19.4336 23.1358 19.4336 23.1358L19.34 23.5128ZM28.4998 21.6356C28.2008 21.5394 27.6834 21.5186 27.244 21.5238C26.8202 21.529 26.6252 21.5498 26.4666 21.5836C26.4666 21.5836 25.7126 21.6928 25.2836 22.2232C24.8546 22.7536 24.7272 23.9132 24.7272 23.9132C24.7272 23.9132 24.4724 25.195 24.5478 25.624C24.6232 26.0504 24.7558 26.4482 25.2394 26.6328C25.723 26.82 26.1338 26.8096 26.1338 26.8096C26.1338 26.8096 26.997 26.8772 27.647 26.7238C28.297 26.5704 28.6402 26.1128 28.6402 26.1128C28.6402 26.1128 28.7936 25.9152 28.9028 25.6812C29.0039 25.4646 29.0404 25.3081 29.0493 25.2696L29.051 25.2626L29.1186 24.9844L28.0136 24.987C28.0136 24.987 27.9538 25.7176 27.3558 25.7852C26.8371 25.8441 26.5276 25.832 26.3791 25.8261C26.3571 25.8253 26.3387 25.8245 26.3236 25.8242C26.3158 25.8239 26.3056 25.8236 26.2934 25.8234L26.2933 25.8234L26.2932 25.8234C26.1252 25.82 25.5731 25.8087 25.6216 25.312C25.6216 25.3042 25.6216 25.2938 25.6242 25.2782C25.6528 24.6698 25.7204 24.5112 25.7204 24.5112L29.1914 24.5008L29.3396 23.6428C29.5112 22.6678 29.389 21.9242 28.4998 21.6356ZM28.258 23.5154L25.879 23.5128L25.9726 23.1358C25.9726 23.1358 26.0558 22.8394 26.2196 22.7146C26.3834 22.5898 26.5966 22.5664 26.7942 22.5482C26.9918 22.53 27.5196 22.491 27.9486 22.5794C28.0916 22.608 28.2268 22.6886 28.2632 22.8082C28.3464 23.0864 28.258 23.5154 28.258 23.5154ZM38.0548 21.5914L38.7386 25.3666L40.6704 21.5888L41.7572 21.5992L38.9726 26.9942C38.9726 26.9942 38.4682 27.9718 38.1562 28.2188C37.8442 28.4658 37.6518 28.5776 37.397 28.6036L37.3287 28.6107C37.1213 28.6325 37.0151 28.6436 36.7938 28.6036L36.5338 28.5568L36.695 27.5922C36.695 27.5922 37.1266 27.6728 37.3814 27.5714C37.6388 27.47 37.8442 27.0332 37.8442 27.0332L37.9742 26.8148L36.968 21.5888L38.0548 21.5914ZM11.8 21.945C12.1458 21.7552 12.5514 21.5862 12.9804 21.5862H13.5992L13.4224 22.5846L12.8348 22.5872C11.9924 22.5872 11.5608 23.3022 11.4568 23.8794L10.9524 26.7264H9.81359L10.7236 21.5862H11.8598L11.8 21.945Z" fill="#D13239"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.835 14.6728L35.1558 12.0182C35.1558 12.0182 38.0496 11.961 40.5456 12.3484C43.0416 12.7332 45.3244 13.326 45.275 13.352L38.9466 16.6618C38.9466 16.6618 37.4672 15.7258 35.6316 15.1512C34.5916 14.8444 33.835 14.6728 33.835 14.6728ZM25.4682 13.4248L25.7438 14.9718C25.7438 14.9718 27.0178 14.6338 28.544 14.4518C30.5044 14.184 32.5922 14.47 32.5922 14.47L33.3774 12.0806C33.3774 12.0806 31.0036 12.2392 29.2122 12.572C27.4234 12.9048 25.4682 13.4248 25.4682 13.4248ZM19.5766 17.5068L17.9932 16.4408C17.9932 16.4408 19.4258 15.627 21.3316 14.8678C23.2348 14.1086 24.2514 13.7914 24.2514 13.7914L24.5738 15.302C24.5738 15.302 22.7408 15.9156 21.6904 16.4122C20.6036 16.875 19.5766 17.5068 19.5766 17.5068ZM15.6532 20.1848H12.2394C12.2394 20.1848 13.5706 19.1656 14.2414 18.7262C14.933 18.2504 16.5632 17.2416 16.5632 17.2416L18.4924 18.1438C18.4924 18.1438 17.5044 18.7704 16.961 19.1682C16.4176 19.566 15.6532 20.1848 15.6532 20.1848ZM42.1524 22.1036L43.273 22.1062L43.3406 21.672C43.3406 21.672 43.4602 20.8868 43.728 20.736C43.8138 20.6866 43.9516 20.6424 44.1102 20.6138C44.404 20.5618 44.7758 20.5566 45.08 20.567L45.1052 20.5679C45.552 20.5828 45.7309 20.5888 46.1954 20.6424C46.6686 20.697 46.549 21.1546 46.549 21.1546L46.4554 21.8384C46.4554 21.8384 46.4138 22.1452 46.3046 22.335C46.2084 22.504 45.9432 22.6184 45.7898 22.6678C45.4206 22.7874 44.157 23.1098 44.157 23.1098L43.1638 23.3958C43.1638 23.3958 42.5528 23.5726 42.2122 23.9496C41.869 24.3292 41.7338 24.7582 41.687 24.9818C41.6402 25.2054 41.3776 26.7524 41.3776 26.7524L46.7388 26.755L46.9182 25.6838L42.6776 25.689L42.753 25.2522C42.753 25.2522 42.8024 24.8024 42.9844 24.6542C42.9932 24.647 43.0014 24.6394 43.0101 24.6313C43.0578 24.5868 43.1224 24.5266 43.4082 24.4254C43.611 24.3526 44.3026 24.168 44.3026 24.168L45.9016 23.7312C45.9016 23.7312 46.7752 23.5076 47.1184 23.0292C47.4616 22.5534 47.5942 21.6408 47.5942 21.6408C47.5942 21.6408 47.6878 20.7542 47.615 20.476C47.5448 20.1978 47.2822 19.865 46.9624 19.722C46.6426 19.579 46.3098 19.4958 45.3452 19.5088C44.3806 19.5218 43.9022 19.566 43.4134 19.748C42.9246 19.9274 42.6412 20.255 42.4618 20.7178C42.2668 21.1572 42.1524 22.1036 42.1524 22.1036ZM52.2456 24.0952L52.997 19.592H51.6658L47.5214 24.0432L47.3342 25.1716H50.9586L50.6934 26.7524L51.8062 26.755L52.0688 25.1716L53.0958 25.1742L53.2804 24.0952H52.2456ZM51.138 24.0978L48.7954 24.0952L51.6476 21.0558L51.138 24.0978ZM41.4712 18.4376L40.0802 17.382L48.005 14.3244L48.0663 14.3523C49.0752 14.8103 49.6369 15.0653 50.6258 15.7076C51.021 15.965 51.5462 16.3758 51.6788 16.5058C52.0402 16.8672 52.386 17.2156 52.5758 17.5432C52.88 18.0684 52.9034 18.4376 52.9034 18.4376H41.4712Z" fill="#B3B2B1"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB