@beworke/pixel-bemony 0.1.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +157 -0
- package/README.md +176 -0
- package/RELEASE_CANDIDATE.md +37 -0
- package/dist/browser/index.cjs.js +2598 -0
- package/dist/browser/index.cjs.js.map +1 -0
- package/dist/browser/index.d.mts +184 -0
- package/dist/browser/index.d.ts +184 -0
- package/dist/browser/index.esm.js +2557 -0
- package/dist/browser/index.esm.js.map +1 -0
- package/dist/browser/pixel-bemony.global.js +9848 -0
- package/dist/browser/pixel-bemony.global.js.map +1 -0
- package/dist/createBemonyPixel-BGRD66p-.d.mts +474 -0
- package/dist/createBemonyPixel-BGRD66p-.d.ts +474 -0
- package/dist/index.cjs.js +2154 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.mts +320 -0
- package/dist/index.d.ts +320 -0
- package/dist/index.esm.js +2081 -0
- package/dist/index.esm.js.map +1 -0
- package/docs/BACKEND_PURCHASE_AND_REDIRECTS.md +125 -0
- package/docs/BROWSER_EVENT_ENRICHMENT.md +116 -0
- package/docs/SCENARIOS.md +92 -0
- package/docs/SECURITY_LIMITATIONS.md +45 -0
- package/docs/TEST_MATRIX.md +39 -0
- package/docs/TROUBLESHOOTING.md +81 -0
- package/examples/README.md +73 -0
- package/examples/browser-bootstrap.html +47 -0
- package/examples/checkout-price-code.html +37 -0
- package/examples/funnel/donsell/downsell_1.html +130 -0
- package/examples/funnel/donsell/downsell_2.html +130 -0
- package/examples/funnel/donsell/downsell_3.html +130 -0
- package/examples/funnel/offer-page.html +105 -0
- package/examples/funnel/upsell/upsell_1.html +130 -0
- package/examples/funnel/upsell/upsell_2.html +130 -0
- package/examples/funnel/upsell/upsell_3.html +139 -0
- package/examples/offer-page-price-code.html +22 -0
- package/examples/one-click-price-code.html +38 -0
- package/examples/security/checkout-sim.css +408 -0
- package/examples/security/checkout-sim.js +414 -0
- package/examples/security/one-click/pri_downsell_1.html +85 -0
- package/examples/security/one-click/pri_downsell_1a.html +85 -0
- package/examples/security/one-click/pri_downsell_1b.html +78 -0
- package/examples/security/one-click/pri_downsell_2.html +78 -0
- package/examples/security/one-click/pri_downsell_2a.html +78 -0
- package/examples/security/one-click/pri_downsell_2b.html +78 -0
- package/examples/security/one-click/pri_downsell_3.html +78 -0
- package/examples/security/one-click/pri_downsell_3a.html +78 -0
- package/examples/security/one-click/pri_downsell_3b.html +78 -0
- package/examples/security/one-click/pri_upsell_1.html +78 -0
- package/examples/security/one-click/pri_upsell_1a.html +78 -0
- package/examples/security/one-click/pri_upsell_1b.html +78 -0
- package/examples/security/one-click/pri_upsell_2.html +78 -0
- package/examples/security/one-click/pri_upsell_2a.html +78 -0
- package/examples/security/one-click/pri_upsell_2b.html +78 -0
- package/examples/security/one-click/pri_upsell_3.html +78 -0
- package/examples/security/one-click/pri_upsell_3a.html +78 -0
- package/examples/security/one-click/pri_upsell_3b.html +78 -0
- package/examples/security/one-click/pri_upsell_3c.html +78 -0
- package/examples/security/pri1766322.html +333 -0
- package/examples/security/pri5529930.html +333 -0
- package/examples/security/pri6670988.html +334 -0
- package/examples/security/thank-you.html +65 -0
- package/examples/sim/funnel-flow.js +258 -0
- package/examples/sim/one-click-sim.js +167 -0
- package/examples/upsell-price-code.html +41 -0
- package/examples/url-context-navigation.html +96 -0
- package/package.json +63 -0
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Oferta pri1766322 — Checkout sim</title>
|
|
7
|
+
<link rel="stylesheet" href="checkout-sim.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="wrap">
|
|
11
|
+
<div class="main">
|
|
12
|
+
<header>
|
|
13
|
+
<h1 class="page-title">Checkout</h1>
|
|
14
|
+
<p class="page-sub">
|
|
15
|
+
Oferta pri1766322 (R$ 47) · lead → bump ADD/REMOVE · Complete
|
|
16
|
+
order → payment. Continuação do <code>sid</code>/<code>afid</code>
|
|
17
|
+
da VSL.
|
|
18
|
+
</p>
|
|
19
|
+
</header>
|
|
20
|
+
|
|
21
|
+
<form id="checkout-form">
|
|
22
|
+
<section class="card">
|
|
23
|
+
<h2>Customer Information</h2>
|
|
24
|
+
<div class="field">
|
|
25
|
+
<label for="email">Email</label>
|
|
26
|
+
<input
|
|
27
|
+
id="email"
|
|
28
|
+
name="email"
|
|
29
|
+
type="email"
|
|
30
|
+
autocomplete="email"
|
|
31
|
+
placeholder="user@example.com"
|
|
32
|
+
/>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="field">
|
|
35
|
+
<label for="phone">Phone number</label>
|
|
36
|
+
<input
|
|
37
|
+
id="phone"
|
|
38
|
+
name="phone"
|
|
39
|
+
type="tel"
|
|
40
|
+
autocomplete="tel"
|
|
41
|
+
placeholder="(11) 99999-9999"
|
|
42
|
+
/>
|
|
43
|
+
<p class="hint">In case we need to call about the order.</p>
|
|
44
|
+
</div>
|
|
45
|
+
<label class="check">
|
|
46
|
+
<input type="checkbox" name="smsAlerts" checked />
|
|
47
|
+
<span>
|
|
48
|
+
<div class="check-label">
|
|
49
|
+
Get SMS alerts for order and shipping confirmations.
|
|
50
|
+
</div>
|
|
51
|
+
<div class="check-desc">
|
|
52
|
+
Consent is not required for purchase.
|
|
53
|
+
</div>
|
|
54
|
+
</span>
|
|
55
|
+
</label>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<section class="card">
|
|
59
|
+
<h2>Shipping Information</h2>
|
|
60
|
+
<div class="field">
|
|
61
|
+
<label for="address">Street Address</label>
|
|
62
|
+
<input
|
|
63
|
+
id="address"
|
|
64
|
+
name="address"
|
|
65
|
+
type="text"
|
|
66
|
+
autocomplete="street-address"
|
|
67
|
+
placeholder="Rua Exemplo, 123"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
<button type="button" class="linkish" id="addr2-toggle">
|
|
71
|
+
+ Add additional address line
|
|
72
|
+
</button>
|
|
73
|
+
<div class="field" id="addr2-field" hidden>
|
|
74
|
+
<label for="address2">Address line 2</label>
|
|
75
|
+
<input
|
|
76
|
+
id="address2"
|
|
77
|
+
name="address2"
|
|
78
|
+
type="text"
|
|
79
|
+
placeholder="Apto, bloco, etc."
|
|
80
|
+
/>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="row-3">
|
|
83
|
+
<div class="field">
|
|
84
|
+
<label for="state">State / Region</label>
|
|
85
|
+
<select id="state" name="state">
|
|
86
|
+
<option value="">Select…</option>
|
|
87
|
+
<option value="SP">São Paulo</option>
|
|
88
|
+
<option value="RJ">Rio de Janeiro</option>
|
|
89
|
+
<option value="MG">Minas Gerais</option>
|
|
90
|
+
<option value="PR">Paraná</option>
|
|
91
|
+
</select>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="field">
|
|
94
|
+
<label for="city">City</label>
|
|
95
|
+
<input
|
|
96
|
+
id="city"
|
|
97
|
+
name="city"
|
|
98
|
+
type="text"
|
|
99
|
+
placeholder="São Paulo"
|
|
100
|
+
/>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="field">
|
|
103
|
+
<label for="postal">Postal Code</label>
|
|
104
|
+
<input
|
|
105
|
+
id="postal"
|
|
106
|
+
name="postal"
|
|
107
|
+
type="text"
|
|
108
|
+
autocomplete="postal-code"
|
|
109
|
+
placeholder="01310-100"
|
|
110
|
+
/>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<label class="check">
|
|
114
|
+
<input type="checkbox" name="billingSame" checked />
|
|
115
|
+
<span>
|
|
116
|
+
<div class="check-label">Billing same as Shipping</div>
|
|
117
|
+
<div class="check-desc">
|
|
118
|
+
Uncheck to enter a different billing address.
|
|
119
|
+
</div>
|
|
120
|
+
</span>
|
|
121
|
+
</label>
|
|
122
|
+
</section>
|
|
123
|
+
|
|
124
|
+
<section class="card">
|
|
125
|
+
<h2>Payment Information</h2>
|
|
126
|
+
<p class="card-desc">All transactions are secure and encrypted.</p>
|
|
127
|
+
<p class="secure">We only accept Visa and MasterCard.</p>
|
|
128
|
+
<div class="pay-tabs" role="tablist" aria-label="Payment methods">
|
|
129
|
+
<button
|
|
130
|
+
type="button"
|
|
131
|
+
class="pay-tab"
|
|
132
|
+
data-method="CREDIT_CARD"
|
|
133
|
+
aria-selected="true"
|
|
134
|
+
>
|
|
135
|
+
Credit Card
|
|
136
|
+
</button>
|
|
137
|
+
<button
|
|
138
|
+
type="button"
|
|
139
|
+
class="pay-tab"
|
|
140
|
+
data-method="PAYPAL"
|
|
141
|
+
aria-selected="false"
|
|
142
|
+
>
|
|
143
|
+
PayPal
|
|
144
|
+
</button>
|
|
145
|
+
<button type="button" class="pay-tab" disabled>Apple Pay</button>
|
|
146
|
+
<button type="button" class="pay-tab" disabled>Google Pay</button>
|
|
147
|
+
</div>
|
|
148
|
+
<div id="card-fields">
|
|
149
|
+
<div class="field">
|
|
150
|
+
<label for="cardNumber">Card Number</label>
|
|
151
|
+
<input
|
|
152
|
+
id="cardNumber"
|
|
153
|
+
name="cardNumber"
|
|
154
|
+
type="text"
|
|
155
|
+
inputmode="numeric"
|
|
156
|
+
autocomplete="cc-number"
|
|
157
|
+
placeholder="1234 5678 9012 3456"
|
|
158
|
+
/>
|
|
159
|
+
<p class="hint">Só UI — o Pixel nunca envia PAN/CVV.</p>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="row-2">
|
|
162
|
+
<div class="field">
|
|
163
|
+
<label for="expiration">Expiration Date</label>
|
|
164
|
+
<input
|
|
165
|
+
id="expiration"
|
|
166
|
+
name="expiration"
|
|
167
|
+
type="text"
|
|
168
|
+
autocomplete="cc-exp"
|
|
169
|
+
placeholder="MM / YY"
|
|
170
|
+
/>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="field">
|
|
173
|
+
<label for="cvc">Security Code</label>
|
|
174
|
+
<input
|
|
175
|
+
id="cvc"
|
|
176
|
+
name="cvc"
|
|
177
|
+
type="text"
|
|
178
|
+
autocomplete="cc-csc"
|
|
179
|
+
placeholder="123"
|
|
180
|
+
/>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</section>
|
|
185
|
+
|
|
186
|
+
<button class="btn-primary" type="submit">Complete order</button>
|
|
187
|
+
</form>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<aside class="aside">
|
|
191
|
+
<section class="card">
|
|
192
|
+
<h2>Order Summary</h2>
|
|
193
|
+
<p class="card-desc">
|
|
194
|
+
Estado do cart (commerce.cart.initialItems + bumps).
|
|
195
|
+
</p>
|
|
196
|
+
<div class="meta-row">
|
|
197
|
+
<span class="muted">Pixel</span>
|
|
198
|
+
<span id="pixel-status" class="pill">Init…</span>
|
|
199
|
+
</div>
|
|
200
|
+
<p id="cart-empty" class="empty-cart" hidden>Carrinho vazio.</p>
|
|
201
|
+
<ul id="cart-lines" class="lines"></ul>
|
|
202
|
+
<div class="total-row">
|
|
203
|
+
<strong>Total do pedido</strong>
|
|
204
|
+
<span id="cart-total" class="amount">—</span>
|
|
205
|
+
</div>
|
|
206
|
+
</section>
|
|
207
|
+
|
|
208
|
+
<section class="card">
|
|
209
|
+
<div class="bump-head">
|
|
210
|
+
<span class="pill bump">Order bump</span>
|
|
211
|
+
<h2>Entrega expressa</h2>
|
|
212
|
+
</div>
|
|
213
|
+
<p class="card-desc">
|
|
214
|
+
Marque para adicionar ao cart — dispara ADD_TO_CART via
|
|
215
|
+
<code>data-track</code>. Desmarcar dispara REMOVE_FROM_CART.
|
|
216
|
+
</p>
|
|
217
|
+
<label class="check" for="bump-check">
|
|
218
|
+
<input id="bump-check" type="checkbox" />
|
|
219
|
+
<span>
|
|
220
|
+
<div class="check-label">Order Bump Especial</div>
|
|
221
|
+
<div class="check-desc">
|
|
222
|
+
+R$ 47,00 · <code>order_bump_01</code>
|
|
223
|
+
</div>
|
|
224
|
+
</span>
|
|
225
|
+
</label>
|
|
226
|
+
<button
|
|
227
|
+
id="bump-add"
|
|
228
|
+
class="sr-trigger"
|
|
229
|
+
type="button"
|
|
230
|
+
data-track="add_to_cart"
|
|
231
|
+
data-product-id="order_bump_01"
|
|
232
|
+
data-product-name="Order Bump Especial"
|
|
233
|
+
data-price="47"
|
|
234
|
+
data-currency="BRL"
|
|
235
|
+
data-quantity="1"
|
|
236
|
+
tabindex="-1"
|
|
237
|
+
aria-hidden="true"
|
|
238
|
+
>
|
|
239
|
+
add bump
|
|
240
|
+
</button>
|
|
241
|
+
<button
|
|
242
|
+
id="bump-remove"
|
|
243
|
+
class="sr-trigger"
|
|
244
|
+
type="button"
|
|
245
|
+
data-track="remove_from_cart"
|
|
246
|
+
data-product-id="order_bump_01"
|
|
247
|
+
tabindex="-1"
|
|
248
|
+
aria-hidden="true"
|
|
249
|
+
>
|
|
250
|
+
remove bump
|
|
251
|
+
</button>
|
|
252
|
+
</section>
|
|
253
|
+
|
|
254
|
+
<section class="card debug">
|
|
255
|
+
<h2>Debug · eventos</h2>
|
|
256
|
+
<div class="kv">
|
|
257
|
+
<span class="muted">Transport sent</span>
|
|
258
|
+
<span id="dbg-transport" class="mono">—</span>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="kv">
|
|
261
|
+
<span class="muted">sid</span>
|
|
262
|
+
<span id="dbg-sid" class="mono">—</span>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="kv">
|
|
265
|
+
<span class="muted">afid</span>
|
|
266
|
+
<span id="dbg-afid" class="mono">—</span>
|
|
267
|
+
</div>
|
|
268
|
+
<p class="label">Cart runtime</p>
|
|
269
|
+
<p id="dbg-cart" class="mono">—</p>
|
|
270
|
+
<p class="label">Detectors ativos</p>
|
|
271
|
+
<p id="dbg-detectors" class="mono">—</p>
|
|
272
|
+
<p class="label">Dedupe key count</p>
|
|
273
|
+
<p id="dbg-dedupe" class="mono">—</p>
|
|
274
|
+
</section>
|
|
275
|
+
</aside>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<script src="../sim/funnel-flow.js"></script>
|
|
279
|
+
<script>
|
|
280
|
+
window.__CHECKOUT_SIM__ = {
|
|
281
|
+
currency: 'BRL',
|
|
282
|
+
nextHref: '../funnel/upsell/upsell_1.html',
|
|
283
|
+
main: {
|
|
284
|
+
id: 'pri1766322',
|
|
285
|
+
offerId: 'pri1766322',
|
|
286
|
+
name: 'Oferta Principal',
|
|
287
|
+
price: 47,
|
|
288
|
+
},
|
|
289
|
+
bump: {
|
|
290
|
+
id: 'order_bump_01',
|
|
291
|
+
offerId: 'offer_bump',
|
|
292
|
+
name: 'Order Bump Especial',
|
|
293
|
+
price: 47,
|
|
294
|
+
},
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
window.BemonyPixelConfig = {
|
|
298
|
+
scenario: 'checkout',
|
|
299
|
+
page: {
|
|
300
|
+
public: {
|
|
301
|
+
offerId: 'pri1766322',
|
|
302
|
+
productId: 'pri1766322',
|
|
303
|
+
},
|
|
304
|
+
},
|
|
305
|
+
commerce: {
|
|
306
|
+
currency: 'BRL',
|
|
307
|
+
products: [
|
|
308
|
+
{
|
|
309
|
+
id: 'pri1766322',
|
|
310
|
+
name: 'Oferta Principal',
|
|
311
|
+
type: 'main',
|
|
312
|
+
price: 47,
|
|
313
|
+
currency: 'BRL',
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
id: 'order_bump_01',
|
|
317
|
+
name: 'Order Bump Especial',
|
|
318
|
+
type: 'order_bump',
|
|
319
|
+
price: 47,
|
|
320
|
+
currency: 'BRL',
|
|
321
|
+
},
|
|
322
|
+
],
|
|
323
|
+
},
|
|
324
|
+
};
|
|
325
|
+
</script>
|
|
326
|
+
<script
|
|
327
|
+
src="../../dist/browser/pixel-bemony.global.js"
|
|
328
|
+
data-scenario="checkout"
|
|
329
|
+
data-debug="true"
|
|
330
|
+
></script>
|
|
331
|
+
<script src="checkout-sim.js"></script>
|
|
332
|
+
</body>
|
|
333
|
+
</html>
|
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Oferta pri5529930 — Checkout sim</title>
|
|
7
|
+
<link rel="stylesheet" href="checkout-sim.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="wrap">
|
|
11
|
+
<div class="main">
|
|
12
|
+
<header>
|
|
13
|
+
<h1 class="page-title">Checkout</h1>
|
|
14
|
+
<p class="page-sub">
|
|
15
|
+
Oferta pri5529930 (R$ 197) · lead → bump ADD/REMOVE · Complete
|
|
16
|
+
order → payment. Continuação do <code>sid</code>/<code>afid</code>
|
|
17
|
+
da VSL.
|
|
18
|
+
</p>
|
|
19
|
+
</header>
|
|
20
|
+
|
|
21
|
+
<form id="checkout-form">
|
|
22
|
+
<section class="card">
|
|
23
|
+
<h2>Customer Information</h2>
|
|
24
|
+
<div class="field">
|
|
25
|
+
<label for="email">Email</label>
|
|
26
|
+
<input
|
|
27
|
+
id="email"
|
|
28
|
+
name="email"
|
|
29
|
+
type="email"
|
|
30
|
+
autocomplete="email"
|
|
31
|
+
placeholder="user@example.com"
|
|
32
|
+
/>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="field">
|
|
35
|
+
<label for="phone">Phone number</label>
|
|
36
|
+
<input
|
|
37
|
+
id="phone"
|
|
38
|
+
name="phone"
|
|
39
|
+
type="tel"
|
|
40
|
+
autocomplete="tel"
|
|
41
|
+
placeholder="(11) 99999-9999"
|
|
42
|
+
/>
|
|
43
|
+
<p class="hint">In case we need to call about the order.</p>
|
|
44
|
+
</div>
|
|
45
|
+
<label class="check">
|
|
46
|
+
<input type="checkbox" name="smsAlerts" checked />
|
|
47
|
+
<span>
|
|
48
|
+
<div class="check-label">
|
|
49
|
+
Get SMS alerts for order and shipping confirmations.
|
|
50
|
+
</div>
|
|
51
|
+
<div class="check-desc">
|
|
52
|
+
Consent is not required for purchase.
|
|
53
|
+
</div>
|
|
54
|
+
</span>
|
|
55
|
+
</label>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<section class="card">
|
|
59
|
+
<h2>Shipping Information</h2>
|
|
60
|
+
<div class="field">
|
|
61
|
+
<label for="address">Street Address</label>
|
|
62
|
+
<input
|
|
63
|
+
id="address"
|
|
64
|
+
name="address"
|
|
65
|
+
type="text"
|
|
66
|
+
autocomplete="street-address"
|
|
67
|
+
placeholder="Rua Exemplo, 123"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
<button type="button" class="linkish" id="addr2-toggle">
|
|
71
|
+
+ Add additional address line
|
|
72
|
+
</button>
|
|
73
|
+
<div class="field" id="addr2-field" hidden>
|
|
74
|
+
<label for="address2">Address line 2</label>
|
|
75
|
+
<input
|
|
76
|
+
id="address2"
|
|
77
|
+
name="address2"
|
|
78
|
+
type="text"
|
|
79
|
+
placeholder="Apto, bloco, etc."
|
|
80
|
+
/>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="row-3">
|
|
83
|
+
<div class="field">
|
|
84
|
+
<label for="state">State / Region</label>
|
|
85
|
+
<select id="state" name="state">
|
|
86
|
+
<option value="">Select…</option>
|
|
87
|
+
<option value="SP">São Paulo</option>
|
|
88
|
+
<option value="RJ">Rio de Janeiro</option>
|
|
89
|
+
<option value="MG">Minas Gerais</option>
|
|
90
|
+
<option value="PR">Paraná</option>
|
|
91
|
+
</select>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="field">
|
|
94
|
+
<label for="city">City</label>
|
|
95
|
+
<input
|
|
96
|
+
id="city"
|
|
97
|
+
name="city"
|
|
98
|
+
type="text"
|
|
99
|
+
placeholder="São Paulo"
|
|
100
|
+
/>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="field">
|
|
103
|
+
<label for="postal">Postal Code</label>
|
|
104
|
+
<input
|
|
105
|
+
id="postal"
|
|
106
|
+
name="postal"
|
|
107
|
+
type="text"
|
|
108
|
+
autocomplete="postal-code"
|
|
109
|
+
placeholder="01310-100"
|
|
110
|
+
/>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<label class="check">
|
|
114
|
+
<input type="checkbox" name="billingSame" checked />
|
|
115
|
+
<span>
|
|
116
|
+
<div class="check-label">Billing same as Shipping</div>
|
|
117
|
+
<div class="check-desc">
|
|
118
|
+
Uncheck to enter a different billing address.
|
|
119
|
+
</div>
|
|
120
|
+
</span>
|
|
121
|
+
</label>
|
|
122
|
+
</section>
|
|
123
|
+
|
|
124
|
+
<section class="card">
|
|
125
|
+
<h2>Payment Information</h2>
|
|
126
|
+
<p class="card-desc">All transactions are secure and encrypted.</p>
|
|
127
|
+
<p class="secure">We only accept Visa and MasterCard.</p>
|
|
128
|
+
<div class="pay-tabs" role="tablist" aria-label="Payment methods">
|
|
129
|
+
<button
|
|
130
|
+
type="button"
|
|
131
|
+
class="pay-tab"
|
|
132
|
+
data-method="CREDIT_CARD"
|
|
133
|
+
aria-selected="true"
|
|
134
|
+
>
|
|
135
|
+
Credit Card
|
|
136
|
+
</button>
|
|
137
|
+
<button
|
|
138
|
+
type="button"
|
|
139
|
+
class="pay-tab"
|
|
140
|
+
data-method="PAYPAL"
|
|
141
|
+
aria-selected="false"
|
|
142
|
+
>
|
|
143
|
+
PayPal
|
|
144
|
+
</button>
|
|
145
|
+
<button type="button" class="pay-tab" disabled>Apple Pay</button>
|
|
146
|
+
<button type="button" class="pay-tab" disabled>Google Pay</button>
|
|
147
|
+
</div>
|
|
148
|
+
<div id="card-fields">
|
|
149
|
+
<div class="field">
|
|
150
|
+
<label for="cardNumber">Card Number</label>
|
|
151
|
+
<input
|
|
152
|
+
id="cardNumber"
|
|
153
|
+
name="cardNumber"
|
|
154
|
+
type="text"
|
|
155
|
+
inputmode="numeric"
|
|
156
|
+
autocomplete="cc-number"
|
|
157
|
+
placeholder="1234 5678 9012 3456"
|
|
158
|
+
/>
|
|
159
|
+
<p class="hint">Só UI — o Pixel nunca envia PAN/CVV.</p>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="row-2">
|
|
162
|
+
<div class="field">
|
|
163
|
+
<label for="expiration">Expiration Date</label>
|
|
164
|
+
<input
|
|
165
|
+
id="expiration"
|
|
166
|
+
name="expiration"
|
|
167
|
+
type="text"
|
|
168
|
+
autocomplete="cc-exp"
|
|
169
|
+
placeholder="MM / YY"
|
|
170
|
+
/>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="field">
|
|
173
|
+
<label for="cvc">Security Code</label>
|
|
174
|
+
<input
|
|
175
|
+
id="cvc"
|
|
176
|
+
name="cvc"
|
|
177
|
+
type="text"
|
|
178
|
+
autocomplete="cc-csc"
|
|
179
|
+
placeholder="123"
|
|
180
|
+
/>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</section>
|
|
185
|
+
|
|
186
|
+
<button class="btn-primary" type="submit">Complete order</button>
|
|
187
|
+
</form>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<aside class="aside">
|
|
191
|
+
<section class="card">
|
|
192
|
+
<h2>Order Summary</h2>
|
|
193
|
+
<p class="card-desc">
|
|
194
|
+
Estado do cart (commerce.cart.initialItems + bumps).
|
|
195
|
+
</p>
|
|
196
|
+
<div class="meta-row">
|
|
197
|
+
<span class="muted">Pixel</span>
|
|
198
|
+
<span id="pixel-status" class="pill">Init…</span>
|
|
199
|
+
</div>
|
|
200
|
+
<p id="cart-empty" class="empty-cart" hidden>Carrinho vazio.</p>
|
|
201
|
+
<ul id="cart-lines" class="lines"></ul>
|
|
202
|
+
<div class="total-row">
|
|
203
|
+
<strong>Total do pedido</strong>
|
|
204
|
+
<span id="cart-total" class="amount">—</span>
|
|
205
|
+
</div>
|
|
206
|
+
</section>
|
|
207
|
+
|
|
208
|
+
<section class="card">
|
|
209
|
+
<div class="bump-head">
|
|
210
|
+
<span class="pill bump">Order bump</span>
|
|
211
|
+
<h2>Entrega expressa</h2>
|
|
212
|
+
</div>
|
|
213
|
+
<p class="card-desc">
|
|
214
|
+
Marque para adicionar ao cart — dispara ADD_TO_CART via
|
|
215
|
+
<code>data-track</code>. Desmarcar dispara REMOVE_FROM_CART.
|
|
216
|
+
</p>
|
|
217
|
+
<label class="check" for="bump-check">
|
|
218
|
+
<input id="bump-check" type="checkbox" />
|
|
219
|
+
<span>
|
|
220
|
+
<div class="check-label">Order Bump Especial</div>
|
|
221
|
+
<div class="check-desc">
|
|
222
|
+
+R$ 47,00 · <code>order_bump_01</code>
|
|
223
|
+
</div>
|
|
224
|
+
</span>
|
|
225
|
+
</label>
|
|
226
|
+
<button
|
|
227
|
+
id="bump-add"
|
|
228
|
+
class="sr-trigger"
|
|
229
|
+
type="button"
|
|
230
|
+
data-track="add_to_cart"
|
|
231
|
+
data-product-id="order_bump_01"
|
|
232
|
+
data-product-name="Order Bump Especial"
|
|
233
|
+
data-price="47"
|
|
234
|
+
data-currency="BRL"
|
|
235
|
+
data-quantity="1"
|
|
236
|
+
tabindex="-1"
|
|
237
|
+
aria-hidden="true"
|
|
238
|
+
>
|
|
239
|
+
add bump
|
|
240
|
+
</button>
|
|
241
|
+
<button
|
|
242
|
+
id="bump-remove"
|
|
243
|
+
class="sr-trigger"
|
|
244
|
+
type="button"
|
|
245
|
+
data-track="remove_from_cart"
|
|
246
|
+
data-product-id="order_bump_01"
|
|
247
|
+
tabindex="-1"
|
|
248
|
+
aria-hidden="true"
|
|
249
|
+
>
|
|
250
|
+
remove bump
|
|
251
|
+
</button>
|
|
252
|
+
</section>
|
|
253
|
+
|
|
254
|
+
<section class="card debug">
|
|
255
|
+
<h2>Debug · eventos</h2>
|
|
256
|
+
<div class="kv">
|
|
257
|
+
<span class="muted">Transport sent</span>
|
|
258
|
+
<span id="dbg-transport" class="mono">—</span>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="kv">
|
|
261
|
+
<span class="muted">sid</span>
|
|
262
|
+
<span id="dbg-sid" class="mono">—</span>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="kv">
|
|
265
|
+
<span class="muted">afid</span>
|
|
266
|
+
<span id="dbg-afid" class="mono">—</span>
|
|
267
|
+
</div>
|
|
268
|
+
<p class="label">Cart runtime</p>
|
|
269
|
+
<p id="dbg-cart" class="mono">—</p>
|
|
270
|
+
<p class="label">Detectors ativos</p>
|
|
271
|
+
<p id="dbg-detectors" class="mono">—</p>
|
|
272
|
+
<p class="label">Dedupe key count</p>
|
|
273
|
+
<p id="dbg-dedupe" class="mono">—</p>
|
|
274
|
+
</section>
|
|
275
|
+
</aside>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<script src="../sim/funnel-flow.js"></script>
|
|
279
|
+
<script>
|
|
280
|
+
window.__CHECKOUT_SIM__ = {
|
|
281
|
+
currency: 'BRL',
|
|
282
|
+
nextHref: '../funnel/upsell/upsell_1.html',
|
|
283
|
+
main: {
|
|
284
|
+
id: 'pri5529930',
|
|
285
|
+
offerId: 'pri5529930',
|
|
286
|
+
name: 'Oferta Principal',
|
|
287
|
+
price: 197,
|
|
288
|
+
},
|
|
289
|
+
bump: {
|
|
290
|
+
id: 'order_bump_01',
|
|
291
|
+
offerId: 'offer_bump',
|
|
292
|
+
name: 'Order Bump Especial',
|
|
293
|
+
price: 47,
|
|
294
|
+
},
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
window.BemonyPixelConfig = {
|
|
298
|
+
scenario: 'checkout',
|
|
299
|
+
page: {
|
|
300
|
+
public: {
|
|
301
|
+
offerId: 'pri5529930',
|
|
302
|
+
productId: 'pri5529930',
|
|
303
|
+
},
|
|
304
|
+
},
|
|
305
|
+
commerce: {
|
|
306
|
+
currency: 'BRL',
|
|
307
|
+
products: [
|
|
308
|
+
{
|
|
309
|
+
id: 'pri5529930',
|
|
310
|
+
name: 'Oferta Principal',
|
|
311
|
+
type: 'main',
|
|
312
|
+
price: 197,
|
|
313
|
+
currency: 'BRL',
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
id: 'order_bump_01',
|
|
317
|
+
name: 'Order Bump Especial',
|
|
318
|
+
type: 'order_bump',
|
|
319
|
+
price: 47,
|
|
320
|
+
currency: 'BRL',
|
|
321
|
+
},
|
|
322
|
+
],
|
|
323
|
+
},
|
|
324
|
+
};
|
|
325
|
+
</script>
|
|
326
|
+
<script
|
|
327
|
+
src="../../dist/browser/pixel-bemony.global.js"
|
|
328
|
+
data-scenario="checkout"
|
|
329
|
+
data-debug="true"
|
|
330
|
+
></script>
|
|
331
|
+
<script src="checkout-sim.js"></script>
|
|
332
|
+
</body>
|
|
333
|
+
</html>
|