-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathelemen_stripe.html
More file actions
228 lines (228 loc) · 10.6 KB
/
elemen_stripe.html
File metadata and controls
228 lines (228 loc) · 10.6 KB
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<div class="FormFieldGroup" data-qa="FormFieldGroup-cardForm">
<div
class="FormFieldGroup-labelContainer flex-container justify-content-space-between"
>
<label for="cardForm-fieldset"
><span
class="Text Text-color--gray600 Text-fontSize--13 Text-fontWeight--500"
>Card information</span
></label
>
</div>
<fieldset class="FormFieldGroup-Fieldset" id="cardForm-fieldset">
<div class="FormFieldGroup-container">
<div
class="FormFieldGroup-child FormFieldGroup-child--width-12 FormFieldGroup-childLeft FormFieldGroup-childRight FormFieldGroup-childTop"
>
<div class="FormFieldInput padding-right-120">
<div class="CheckoutInputContainer">
<span class="InputContainer"
><input
class="CheckoutInput CheckoutInput--tabularnums Input Input--empty"
autocomplete="cc-number"
autocorrect="off"
spellcheck="false"
id="cardNumber"
name="cardNumber"
type="text"
inputmode="numeric"
aria-label="Card number"
placeholder="1234 1234 1234 1234"
aria-invalid="false"
aria-describedby=""
data-1p-ignore="false"
data-lp-ignore="false"
value=""
/></span>
</div>
<div class="FormFieldInput-Icons" style="opacity: 1">
<div style="transform: none">
<span class="FormFieldInput-IconsIcon is-visible"
><img
src="https://js.stripe.com/v3/fingerprinted/img/visa-729c05c240c4bdb47b03ac81d9945bfe.svg"
alt="Visa"
class="BrandIcon"
loading="lazy"
fetchpriority="low"
/></span>
</div>
<div style="transform: none">
<span class="FormFieldInput-IconsIcon is-visible"
><img
src="https://js.stripe.com/v3/fingerprinted/img/mastercard-4d8844094130711885b5e41b28c9848f.svg"
alt="MasterCard"
class="BrandIcon"
loading="lazy"
fetchpriority="low"
/></span>
</div>
<div style="transform: none">
<span class="FormFieldInput-IconsIcon is-visible"
><img
src="https://js.stripe.com/v3/fingerprinted/img/amex-a49b82f46c5cd6a96a6e418a6ca1717c.svg"
alt="American Express"
class="BrandIcon"
loading="lazy"
fetchpriority="low"
/></span>
</div>
<div class="CardFormFieldGroupIconOverflow">
<span
class="CardFormFieldGroupIconOverflow-Item CardFormFieldGroupIconOverflow-Item--visible"
role="presentation"
><span class="FormFieldInput-IconsIcon" role="presentation"
><img
src="https://js.stripe.com/v3/fingerprinted/img/unionpay-8a10aefc7295216c338ba4e1224627a1.svg"
alt="UnionPay"
class="BrandIcon"
loading="lazy"
fetchpriority="low" /></span></span
><span
class="CardFormFieldGroupIconOverflow-Item CardFormFieldGroupIconOverflow-Item--invisible"
role="presentation"
><span class="FormFieldInput-IconsIcon" role="presentation"
><img
src="https://js.stripe.com/v3/fingerprinted/img/jcb-271fd06e6e7a2c52692ffa91a95fb64f.svg"
alt="JCB"
class="BrandIcon"
loading="lazy"
fetchpriority="low" /></span></span
><span
class="CardFormFieldGroupIconOverflow-Item CardFormFieldGroupIconOverflow-Item--invisible"
role="presentation"
><span class="FormFieldInput-IconsIcon" role="presentation"
><img
src="https://js.stripe.com/v3/fingerprinted/img/discover-ac52cd46f89fa40a29a0bfb954e33173.svg"
alt="Discover"
class="BrandIcon"
loading="lazy"
fetchpriority="low" /></span></span
><span
class="CardFormFieldGroupIconOverflow-Item CardFormFieldGroupIconOverflow-Item--invisible"
role="presentation"
><span class="FormFieldInput-IconsIcon" role="presentation"
><img
src="https://js.stripe.com/v3/fingerprinted/img/diners-fbcbd3360f8e3f629cdaa80e93abdb8b.svg"
alt="Diners Club"
class="BrandIcon"
loading="lazy"
fetchpriority="low" /></span
></span>
</div>
</div>
</div>
</div>
<div
class="FormFieldGroup-child FormFieldGroup-child--width-6 FormFieldGroup-childLeft FormFieldGroup-childBottom"
>
<div class="FormFieldInput">
<div class="CheckoutInputContainer">
<span class="InputContainer"
><input
class="CheckoutInput CheckoutInput--tabularnums Input Input--empty"
autocomplete="cc-exp"
autocorrect="off"
spellcheck="false"
id="cardExpiry"
name="cardExpiry"
type="text"
inputmode="numeric"
aria-label="Expiration"
placeholder="MM / YY"
aria-invalid="false"
aria-describedby=""
data-1p-ignore="false"
data-lp-ignore="false"
value=""
/></span>
</div>
</div>
</div>
<div
class="FormFieldGroup-child FormFieldGroup-child--width-6 FormFieldGroup-childRight FormFieldGroup-childBottom"
>
<div class="FormFieldInput has-icon padding-right-32">
<div class="CheckoutInputContainer">
<span class="InputContainer"
><input
class="CheckoutInput CheckoutInput--tabularnums Input Input--empty"
autocomplete="cc-csc"
autocorrect="off"
spellcheck="false"
id="cardCvc"
name="cardCvc"
type="text"
inputmode="numeric"
aria-label="CVC"
placeholder="CVC"
aria-invalid="false"
aria-describedby=""
data-1p-ignore="false"
data-lp-ignore="false"
value=""
/></span>
</div>
<div
class="FormFieldInput-Icon is-loaded"
data-testid="FormFieldInput-Icon"
>
<div class="Icon Icon--md">
<svg
class="Icon Icon--md"
width="30"
height="20"
viewBox="0 0 30 20"
xmlns="http://www.w3.org/2000/svg"
fill="var(--colorIconCardCvc)"
role="img"
aria-labelledby="cvcDesc"
>
<g opacity="0.74">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.2061 0.00488281C27.3194 0.112115 29 1.85996 29 4V11.3291C28.5428 11.0304 28.0336 10.8304 27.5 10.7188V8H1.5V16C1.5 17.3807 2.61929 18.5 4 18.5H10.1104V20H4L3.79395 19.9951C1.7488 19.8913 0.108652 18.2512 0.00488281 16.2061L0 16V4C0 1.85996 1.68056 0.112115 3.79395 0.00488281L4 0H25L25.2061 0.00488281ZM4 1.5C2.61929 1.5 1.5 2.61929 1.5 4V5H27.5V4C27.5 2.61929 26.3807 1.5 25 1.5H4Z"
></path>
<path
d="M27.5 12.7988C28.3058 13.1128 28.7725 13.7946 28.7725 14.6406C28.7722 15.4002 28.2721 15.9399 27.6523 16.1699C28.1601 16.3319 28.6072 16.6732 28.8086 17.2207C28.3597 18.6222 27.1605 19.6862 25.6826 19.9404C24.8389 19.7707 24.1662 19.2842 23.834 18.5H25C25.0914 18.5 25.1816 18.4939 25.2705 18.4844C25.5434 18.7862 25.9284 18.9501 26.3623 18.9502C27.142 18.9501 27.6922 18.5297 27.6924 17.79C27.6923 17.4212 27.5473 17.1544 27.2998 16.9795C27.4281 16.6786 27.5 16.3478 27.5 16V15.0527C27.5397 14.9481 27.5625 14.8309 27.5625 14.7002C27.5625 14.5657 27.5399 14.4422 27.5 14.3311V12.7988Z"
></path>
<path
d="M15.2207 18.5V18.8301H16.8799V19.9004H12.1104V18.8301H13.9902V18.5H15.2207Z"
></path>
<path
d="M19.9307 18.5L19.5762 18.7803H22.8369V19.9004H17.8164V18.8604L18.2549 18.5H19.9307Z"
></path>
</g>
<path
d="M26.3822 20.01C24.9722 20.01 23.8522 19.25 23.6422 17.81L24.8722 17.58C24.9922 18.45 25.6022 18.95 26.3622 18.95C27.1422 18.95 27.6922 18.53 27.6922 17.79C27.6922 17.05 27.1122 16.72 26.2822 16.72H25.5722V15.67H26.3022C27.0622 15.67 27.5622 15.34 27.5622 14.7C27.5622 14.07 27.1022 13.68 26.3922 13.68C25.6422 13.68 25.1322 14.18 24.9822 14.92L23.8122 14.76C24.0022 13.55 24.9822 12.61 26.4322 12.61C27.8822 12.61 28.7722 13.47 28.7722 14.64C28.7722 15.4 28.2722 15.94 27.6522 16.17C28.3422 16.39 28.9222 16.94 28.9222 17.89C28.9222 19.04 27.9522 20.01 26.3822 20.01Z"
></path>
<path
d="M17.8161 18.86L19.6161 17.38C20.5961 16.58 21.4761 15.87 21.4761 14.97C21.4761 14.23 21.0161 13.7 20.2561 13.7C19.5061 13.7 19.0161 14.29 19.0161 15C19.0161 15.23 19.0561 15.46 19.1361 15.68H17.9461C17.8461 15.39 17.8161 15.2 17.8161 14.93C17.8161 13.58 18.9261 12.61 20.2861 12.61C21.7861 12.61 22.7461 13.54 22.7461 14.89C22.7461 16.16 21.7861 17.03 20.7761 17.83L19.5761 18.78H22.8361V19.9H17.8161V18.86Z"
></path>
<path
d="M14.25 12.67H15.22V18.83H16.88V19.9H12.11V18.83H13.99V14.92H12.15V13.99L12.88 13.93C13.78 13.86 14.18 13.58 14.25 12.67Z"
></path>
</svg>
</div>
</div>
</div>
</div>
<div
class="FieldError-container"
style="opacity: 0; height: 0px; margin-top: 0px"
>
<span class="FieldError Text Text-color--red Text-fontSize--13"
><span aria-hidden="true"></span
></span>
</div>
</div>
<div
class="FieldError-container"
style="opacity: 0; height: 0px; margin-top: 0px"
>
<span class="FieldError Text Text-color--red Text-fontSize--13"
><span aria-hidden="true"></span
></span>
</div>
</fieldset>
</div>