-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_card_logo.js
144 lines (136 loc) · 14.9 KB
/
_card_logo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
const visaSvg = `
<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3C0 1.34315 1.34315 0 3 0H33C34.6569 0 36 1.34315 36 3V21C36 22.6569 34.6569 24 33 24H3C1.34315 24 0 22.6569 0 21V3Z"
fill="#D8E3F3" />
<path
d="M30.9827 7.52625H29.0967C28.5265 7.52625 28.0879 7.70168 27.8248 8.27186L24.2283 16.4736H26.7721C26.7721 16.4736 27.2107 15.3771 27.2984 15.114C27.5616 15.114 30.0616 15.114 30.4125 15.114C30.5002 15.421 30.7195 16.4298 30.7195 16.4298H33.0002L30.9827 7.52625ZM28.0002 13.2719C28.2195 12.7455 28.9651 10.7719 28.9651 10.7719C28.9651 10.8157 29.1844 10.2455 29.2721 9.93853L29.4476 10.728C29.4476 10.728 29.93 12.8771 30.0177 13.3157H28.0002V13.2719Z"
fill="#3362AB" />
<path
d="M24.4036 13.535C24.4036 15.3771 22.7369 16.6052 20.1492 16.6052C19.0527 16.6052 18.0001 16.3859 17.4299 16.1227L17.7808 14.1052L18.0878 14.2368C18.8773 14.5876 19.4036 14.7192 20.3685 14.7192C21.0703 14.7192 21.8159 14.4561 21.8159 13.842C21.8159 13.4473 21.5089 13.1841 20.544 12.7455C19.6229 12.3069 18.3948 11.6052 18.3948 10.3332C18.3948 8.57886 20.1054 7.39465 22.5176 7.39465C23.4387 7.39465 24.2282 7.57009 24.7106 7.78939L24.3598 9.71921L24.1843 9.54378C23.7457 9.36834 23.1755 9.1929 22.3422 9.1929C21.4212 9.23676 20.9826 9.6315 20.9826 9.98237C20.9826 10.3771 21.5089 10.6841 22.3422 11.0789C23.7457 11.7368 24.4036 12.4824 24.4036 13.535Z"
fill="#3362AB" />
<path
d="M3 7.61404L3.04386 7.4386H6.81579C7.3421 7.4386 7.73684 7.61404 7.86842 8.18421L8.70175 12.1316C7.86842 10.0263 5.9386 8.31579 3 7.61404Z"
fill="#F9B50B" />
<path
d="M14.0088 7.52628L10.1931 16.4298H7.60534L5.41235 8.97365C6.9913 9.98242 8.30709 11.5614 8.78955 12.6579L9.0527 13.5789L11.4211 7.48242H14.0088V7.52628Z"
fill="#3362AB" />
<path d="M15.0175 7.48242H17.4298L15.8947 16.4298H13.4824L15.0175 7.48242Z" fill="#3362AB" />
</svg>
`;
const mastercardSvg = `
<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3C0 1.34315 1.34315 0 3 0H33C34.6569 0 36 1.34315 36 3V21C36 22.6569 34.6569 24 33 24H3C1.34315 24 0 22.6569 0 21V3Z"
fill="#FDEACE" />
<path d="M21.7591 4.89574L14.0093 4.92273L14.241 19.1047L21.9908 19.0778L21.7591 4.89574Z" fill="#FF5F00" />
<path
d="M14.5202 12.0419C14.4729 9.15743 15.766 6.5944 17.7909 4.93184C16.263 3.73312 14.3474 3.01233 12.2706 3.01953C7.35062 3.0366 3.43636 7.08868 3.51824 12.0801C3.60011 17.0715 7.64686 21.0959 12.5669 21.0789C14.6436 21.0717 16.5354 20.3377 18.0238 19.1285C15.945 17.5052 14.5676 14.9264 14.5202 12.0419Z"
fill="#EB001B" />
<path
d="M32.4816 11.9202C32.5635 16.9116 28.6492 20.9636 23.7292 20.9807C21.6524 20.9879 19.7368 20.2671 18.2089 19.0684C20.2585 17.4058 21.5269 14.8428 21.4796 11.9583C21.4323 9.07386 20.0552 6.5201 17.976 4.87178C19.4644 3.66259 21.3562 2.92859 23.433 2.92139C28.353 2.90432 32.4001 6.95385 32.4816 11.9202Z"
fill="#F79E1B" />
</svg>
`;
const amexSvg = `
<svg width="36" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="10 50 270 195">
<g>
<path style="fill:#26A6D1;"
d="M18.235,41.025h255.294c10.066,0,18.235,8.169,18.235,18.244v173.235 c0,10.066-8.169,18.235-18.235,18.235H18.235C8.16,250.74,0,242.57,0,232.505V59.269C0,49.194,8.169,41.025,18.235,41.025z" />
<path style="fill:#FFFFFF;"
d="M47.047,113.966l-28.812,63.76h34.492l4.276-10.166h9.774l4.276,10.166h37.966v-7.759l3.383,7.759 h19.639l3.383-7.923v7.923h78.959l9.601-9.902l8.99,9.902l40.555,0.082l-28.903-31.784l28.903-32.058h-39.926l-9.346,9.719 l-8.707-9.719h-85.897l-7.376,16.457l-7.549-16.457h-34.42v7.495l-3.829-7.495C76.479,113.966,47.047,113.966,47.047,113.966z M53.721,123.02h16.813l19.111,43.236V123.02h18.418l14.761,31l13.604-31h18.326v45.752h-11.151l-0.091-35.851l-16.257,35.851 h-9.975l-16.348-35.851v35.851h-22.94l-4.349-10.257H50.147l-4.34,10.248H33.516C33.516,168.763,53.721,123.02,53.721,123.02z M164.956,123.02h45.342L224.166,138l14.315-14.98h13.868l-21.071,22.995l21.071,22.73h-14.497l-13.868-15.154l-14.388,15.154 h-44.64L164.956,123.02L164.956,123.02z M61.9,130.761l-7.741,18.272h15.473L61.9,130.761z M176.153,132.493v8.352h24.736v9.309 h-24.736v9.118h27.745l12.892-13.43l-12.345-13.357h-28.292L176.153,132.493z" />
</g>
</svg>
`;
const discoverSvg = `
<svg width="36" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="10 110 500 300">
<path style="fill:#34495E;"
d="M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717 c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z" />
<path style="opacity:0.15;fill:#202121;enable-background:new ;"
d="M21.517,402.282V109.717 c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52 C35.07,432.549,21.517,418.996,21.517,402.282z" />
<path style="fill:#F26E21;"
d="M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839 c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599 c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z" />
<g>
<path style="fill:#E7E8E3;"
d="M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573 c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631 c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805 c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01 c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z" />
<polygon style="fill:#E7E8E3;"
points="356.863,228.033 356.863,228.033 340.487,268.295 321.685,220.566 306.502,220.566 336.148,293.601 344.102,293.601 375.196,220.566 360.013,220.566 " />
<polygon style="fill:#E7E8E3;"
points="380.983,252.384 380.983,291.435 420.033,291.435 420.753,291.435 420.753,279.861 408.461,279.861 395.445,279.861 395.445,266.848 395.445,260.342 420.033,260.342 420.033,248.045 395.445,248.045 395.445,232.861 420.753,232.861 420.753,220.566 380.983,220.566 " />
<path style="fill:#E7E8E3;"
d="M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957 c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z M70.765,274.08 c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783 c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z" />
<rect x="98.97" y="220.56" style="fill:#E7E8E3;" width="13.739" height="70.867" />
<path style="fill:#E7E8E3;"
d="M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954 c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244 c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228 c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738 c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z" />
<path style="fill:#E7E8E3;"
d="M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972 v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z M448.23,253.105h-4.336v-21.691h4.336 c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z" />
</g>
</svg>
`;
const paypalSvg = `
<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3C0 1.34315 1.34315 0 3 0H33C34.6569 0 36 1.34315 36 3V21C36 22.6569 34.6569 24 33 24H3C1.34315 24 0 22.6569 0 21V3Z"
fill="#D8DDF3" />
<path
d="M24.1917 7.52405C24.1917 7.6203 24.1917 7.71656 24.0954 7.81282C23.3254 11.6631 20.8227 12.9144 17.55 12.9144H15.9136C15.5286 12.9144 15.1435 13.2032 15.1435 13.5882L14.2772 18.9786L14.0847 20.5187C14.0847 20.8075 14.2772 21 14.4697 21H17.4537C17.8387 21 18.1275 20.7112 18.1275 20.4224V20.2299L18.705 16.7647V16.5722C18.8013 16.1872 19.0901 15.9946 19.3788 15.9946H19.8601C22.7478 15.9946 24.9617 14.8396 25.5393 11.4706C25.828 10.0267 25.6355 8.87164 24.9617 8.10159C24.7692 7.90908 24.4804 7.71656 24.1917 7.52405Z"
fill="#2199D6" />
<path
d="M23.4216 7.23518C23.3254 7.23518 23.2291 7.13893 23.0366 7.13893C22.9403 7.13893 22.7478 7.04267 22.6516 7.04267C22.1703 6.94641 21.689 6.94641 21.2077 6.94641H16.7799C16.6837 6.94641 16.5874 6.94641 16.4911 7.04267C16.2986 7.13892 16.1061 7.33144 16.1061 7.52395L15.1436 13.4919V13.6844C15.2398 13.2994 15.5286 13.0106 15.9136 13.0106H17.55C20.8227 13.0106 23.3254 11.663 24.0954 7.90898C24.0954 7.81272 24.0954 7.71647 24.1917 7.62021C23.9992 7.52395 23.8066 7.4277 23.6141 7.33144C23.5179 7.23518 23.4216 7.23518 23.4216 7.23518Z"
fill="#252C5E" />
<path
d="M16.106 7.52406C16.106 7.33155 16.2985 7.13904 16.491 7.04278C16.5872 7.04278 16.6835 6.94652 16.7798 6.94652H21.2076C21.6888 6.94652 22.2664 6.94652 22.6514 7.04278C22.7477 7.04278 22.9402 7.04278 23.0364 7.13904C23.1327 7.13904 23.229 7.23529 23.4215 7.23529C23.5177 7.23529 23.5177 7.2353 23.614 7.33155C23.8065 7.42781 23.999 7.52406 24.1915 7.62032C24.384 6.17647 24.1915 5.2139 23.4215 4.34759C22.5552 3.38502 21.0151 3 19.0899 3H13.4108C13.0258 3 12.6407 3.28877 12.6407 3.67379L10.3306 18.4973C10.3306 18.7861 10.5231 19.0749 10.8118 19.0749H14.2771L15.1434 13.492L16.106 7.52406Z"
fill="#263577" />
</svg>
`;
const applePaySvg = `
<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3C0 1.34315 1.34315 0 3 0H33C34.6569 0 36 1.34315 36 3V21C36 22.6569 34.6569 24 33 24H3C1.34315 24 0 22.6569 0 21V3Z"
fill="#EEEEEE" />
<path
d="M27.9078 18.8463C29.2905 18.8463 29.9413 18.3187 30.5097 16.7195L33 9.73477H31.5582L29.8882 15.1386H29.8589L28.189 9.74209H26.7063L29.1087 16.3902L28.98 16.7945C28.8892 17.3734 28.3695 17.7863 27.7846 17.7436C27.673 17.7436 27.4565 17.732 27.3686 17.7204V18.8182C27.5474 18.8426 27.7279 18.8542 27.9078 18.8536V18.8463ZM23.1029 15.3484C22.3466 15.3484 21.8666 14.9825 21.8666 14.4287C21.8666 13.8548 22.3295 13.5205 23.2145 13.4675L24.7905 13.368V13.884C24.7558 14.7343 24.0379 15.396 23.1877 15.3612C23.159 15.36 23.131 15.3576 23.1029 15.3551V15.3484ZM22.7223 16.4323C23.5805 16.4554 24.3831 16.0084 24.8143 15.2661H24.8436V16.3639H26.1561V11.817C26.1561 10.4984 25.1016 9.64878 23.478 9.64878C21.9721 9.64878 20.8584 10.51 20.8175 11.6938H22.0953C22.2478 11.0918 22.8199 10.6948 23.4371 10.7619C24.3044 10.7619 24.7905 11.1662 24.7905 11.9103V12.4141L23.0218 12.5196C21.375 12.6191 20.4845 13.293 20.4845 14.4653C20.4833 15.654 21.4031 16.439 22.7217 16.439L22.7223 16.4323ZM15.1161 8.42224H16.7506C17.9814 8.42224 18.6847 9.0785 18.6847 10.2331C18.6847 11.3876 17.9814 12.0494 16.7451 12.0494H15.1161V8.42224ZM13.698 7.2268V16.3621H15.1161V13.2479H17.0794C18.6786 13.3339 20.0442 12.1073 20.1302 10.5081C20.1351 10.4173 20.1357 10.327 20.132 10.2361C20.2076 8.65461 18.9872 7.31158 17.4057 7.23534C17.3124 7.23107 17.2197 7.23168 17.1263 7.23595L13.698 7.2268ZM8.99128 8.93152C8.17644 8.88455 7.4793 9.39444 7.09262 9.39444C6.70593 9.39444 6.10821 8.9553 5.46353 8.9675C4.60965 8.98946 3.8314 9.46214 3.41848 10.2099C2.5396 11.7219 3.18977 13.9603 4.03938 15.1905C4.45534 15.8004 4.95425 16.4682 5.60991 16.4445C6.23081 16.4213 6.47721 16.0401 7.22741 16.0401C7.9776 16.0401 8.20022 16.4445 8.85649 16.4323C9.53594 16.4207 9.9641 15.8223 10.3813 15.2124C10.6753 14.7806 10.904 14.3079 11.0607 13.8096C10.2599 13.4595 9.74087 12.6709 9.7366 11.7969C9.7488 11.026 10.1526 10.3148 10.8088 9.91043C10.3904 9.31637 9.71891 8.95164 8.9925 8.92603L8.99128 8.93152ZM8.48261 8.1246C8.12581 8.5741 7.57994 8.8321 7.00601 8.82173C6.96941 8.26183 7.15971 7.71107 7.53359 7.29267C7.90563 6.86085 8.43016 6.59005 8.99738 6.53699C9.03764 7.11275 8.85283 7.68119 8.48139 8.12277"
fill="black" />
</svg>
`;
const googlePaySvg = `
<svg width="36" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 15 90 30">
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" d="M0 0h100v60H0z" />
<g fill-rule="nonzero">
<path fill="#5F6368"
d="M48.342 20.087v7.032H52.7c1.039 0 1.897-.347 2.576-1.041.697-.693 1.046-1.52 1.046-2.475 0-.938-.349-1.754-1.046-2.448-.679-.712-1.537-1.07-2.576-1.07h-4.358v.002zm0 9.508v8.157H45.74v-20.14h6.905c1.754 0 3.244.582 4.47 1.744 1.246 1.162 1.868 2.578 1.868 4.247 0 1.707-.622 3.132-1.867 4.275-1.208 1.144-2.7 1.715-4.471 1.715h-4.302v.002zm13.271 3.937c0 .675.288 1.238.864 1.688.575.45 1.25.675 2.023.675 1.094 0 2.07-.403 2.928-1.209.859-.806 1.287-1.753 1.287-2.84-.811-.638-1.943-.956-3.395-.956-1.058 0-1.94.254-2.646.76-.707.506-1.06 1.132-1.06 1.882m3.368-10.013c1.924 0 3.442.511 4.557 1.533 1.112 1.023 1.668 2.424 1.668 4.205v8.495h-2.49v-1.913h-.113c-1.076 1.575-2.51 2.363-4.301 2.363-1.528 0-2.808-.45-3.835-1.35-1.028-.9-1.542-2.026-1.542-3.376 0-1.426.542-2.559 1.627-3.402 1.085-.844 2.532-1.267 4.343-1.267 1.546 0 2.82.281 3.82.844v-.592c0-.9-.36-1.663-1.076-2.292a3.7 3.7 0 00-2.518-.942c-1.453 0-2.603.61-3.452 1.83l-2.293-1.436c1.264-1.8 3.132-2.7 5.605-2.7m20.515.45l-8.688 19.858h-2.688l3.226-6.948-5.716-12.91h2.83l4.131 9.901h.057l4.018-9.901z" />
<path fill="#4285F4"
d="M37.823 27.836c0-.815-.07-1.6-.2-2.353h-10.98v4.457h6.288a5.356 5.356 0 01-2.325 3.517v2.895h3.753c2.198-2.016 3.464-4.994 3.464-8.516" />
<path fill="#34A853"
d="M26.643 39.145c3.142 0 5.787-1.025 7.716-2.793l-3.753-2.895c-1.045.699-2.39 1.107-3.963 1.107-3.037 0-5.615-2.035-6.536-4.777H16.24v2.982a11.65 11.65 0 0010.403 6.376" />
<path fill="#FABB05"
d="M20.107 29.787a6.916 6.916 0 010-4.43v-2.98H16.24A11.454 11.454 0 0015 27.572c0 1.869.448 3.634 1.24 5.196l3.867-2.982z" />
<path fill="#E94235"
d="M26.643 20.58c1.715 0 3.253.587 4.466 1.737v.001l3.323-3.303C32.414 17.148 29.782 16 26.642 16a11.65 11.65 0 00-10.402 6.376l3.867 2.982c.921-2.742 3.499-4.777 6.536-4.777" />
</g>
</g>
</svg>
`;
function getCardLogo(paymentMethod) {
const paymentDetails = paymentMethod.payment_details;
const brand = paymentDetails.brand.toLowerCase();
const paymentType = paymentMethod.payment_type;
let logo = '';
if (paymentType === 'CREDIT_CARD') {
switch (brand) {
case 'visa': { logo = visaSvg; break; };
case 'mastercard': { logo = mastercardSvg; break; };
case 'amex': { logo = amexSvg; break; };
case 'discover': { logo = discoverSvg; break; };
}
} else {
switch (paymentType) {
case 'PAYPAL': { logo = paypalSvg; break; };
case 'APPLE_PAY': { logo = applePaySvg; break; };
case 'GOOGLE_PAY': { logo = googlePaySvg; break; };
}
}
return `<div class="card-logo mr-2">${logo}</div>`;
}