@henrylabs-interview/payment-processor 0.2.4 → 0.2.5
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/dist/resources/embedded.js +31 -6
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
|
|
|
13
13
|
console.warn(`Expired checkout ID: "${checkoutId}".`);
|
|
14
14
|
return false;
|
|
15
15
|
}
|
|
16
|
-
const container = document.getElementById(containerElementId);
|
|
16
|
+
const container = document.getElementById(containerElementId.startsWith('#') ? containerElementId.slice(1) : containerElementId);
|
|
17
17
|
if (!container) {
|
|
18
18
|
console.warn(`Container element "${containerElementId}" not found.`);
|
|
19
19
|
return false;
|
|
@@ -35,7 +35,7 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
|
|
|
35
35
|
font-weight: 600;
|
|
36
36
|
color: #111827;
|
|
37
37
|
">
|
|
38
|
-
Secure Checkout
|
|
38
|
+
Henry Labs — "Secure" Checkout
|
|
39
39
|
</h3>
|
|
40
40
|
|
|
41
41
|
<div style="display:flex; flex-direction:column; gap:14px;">
|
|
@@ -44,7 +44,13 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
|
|
|
44
44
|
<label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
|
|
45
45
|
Card Number
|
|
46
46
|
</label>
|
|
47
|
-
<input
|
|
47
|
+
<input
|
|
48
|
+
id="card-number"
|
|
49
|
+
type="text"
|
|
50
|
+
placeholder="4242 4242 4242 4242"
|
|
51
|
+
maxlength="19"
|
|
52
|
+
inputmode="numeric"
|
|
53
|
+
pattern="[0-9 ]*"
|
|
48
54
|
style="
|
|
49
55
|
padding: 10px 12px;
|
|
50
56
|
border-radius: 10px;
|
|
@@ -62,7 +68,15 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
|
|
|
62
68
|
<label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
|
|
63
69
|
Exp. Month
|
|
64
70
|
</label>
|
|
65
|
-
<input
|
|
71
|
+
<input
|
|
72
|
+
id="exp-month"
|
|
73
|
+
type="number"
|
|
74
|
+
placeholder="12"
|
|
75
|
+
min="1"
|
|
76
|
+
max="12"
|
|
77
|
+
maxlength="2"
|
|
78
|
+
inputmode="numeric"
|
|
79
|
+
pattern="[0-9]*"
|
|
66
80
|
style="
|
|
67
81
|
padding: 10px 12px;
|
|
68
82
|
border-radius: 10px;
|
|
@@ -78,7 +92,13 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
|
|
|
78
92
|
<label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
|
|
79
93
|
Exp. Year
|
|
80
94
|
</label>
|
|
81
|
-
<input
|
|
95
|
+
<input
|
|
96
|
+
id="exp-year"
|
|
97
|
+
type="number"
|
|
98
|
+
placeholder="2030"
|
|
99
|
+
maxlength="4"
|
|
100
|
+
inputmode="numeric"
|
|
101
|
+
pattern="[0-9]*"
|
|
82
102
|
style="
|
|
83
103
|
padding: 10px 12px;
|
|
84
104
|
border-radius: 10px;
|
|
@@ -96,7 +116,12 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
|
|
|
96
116
|
<label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
|
|
97
117
|
CVC
|
|
98
118
|
</label>
|
|
99
|
-
<input id="cvc"
|
|
119
|
+
<input id="cvc"
|
|
120
|
+
type="text"
|
|
121
|
+
placeholder="123"
|
|
122
|
+
maxlength="4"
|
|
123
|
+
inputmode="numeric"
|
|
124
|
+
pattern="[0-9]*"
|
|
100
125
|
style="
|
|
101
126
|
padding: 10px 12px;
|
|
102
127
|
border-radius: 10px;
|