logix-payment-shift4 1.0.0 → 1.0.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/dist/index.cjs.js +447 -0
- package/dist/index.esm.js +445 -0
- package/package.json +1 -1
|
@@ -0,0 +1,447 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function _arrayLikeToArray(r, a) {
|
|
6
|
+
(null == a || a > r.length) && (a = r.length);
|
|
7
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
8
|
+
return n;
|
|
9
|
+
}
|
|
10
|
+
function _arrayWithHoles(r) {
|
|
11
|
+
if (Array.isArray(r)) return r;
|
|
12
|
+
}
|
|
13
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
14
|
+
try {
|
|
15
|
+
var i = n[a](c),
|
|
16
|
+
u = i.value;
|
|
17
|
+
} catch (n) {
|
|
18
|
+
return void e(n);
|
|
19
|
+
}
|
|
20
|
+
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
21
|
+
}
|
|
22
|
+
function _asyncToGenerator(n) {
|
|
23
|
+
return function () {
|
|
24
|
+
var t = this,
|
|
25
|
+
e = arguments;
|
|
26
|
+
return new Promise(function (r, o) {
|
|
27
|
+
var a = n.apply(t, e);
|
|
28
|
+
function _next(n) {
|
|
29
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
30
|
+
}
|
|
31
|
+
function _throw(n) {
|
|
32
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
33
|
+
}
|
|
34
|
+
_next(void 0);
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
function _iterableToArrayLimit(r, l) {
|
|
39
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
40
|
+
if (null != t) {
|
|
41
|
+
var e,
|
|
42
|
+
n,
|
|
43
|
+
i,
|
|
44
|
+
u,
|
|
45
|
+
a = [],
|
|
46
|
+
f = true,
|
|
47
|
+
o = false;
|
|
48
|
+
try {
|
|
49
|
+
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
50
|
+
} catch (r) {
|
|
51
|
+
o = true, n = r;
|
|
52
|
+
} finally {
|
|
53
|
+
try {
|
|
54
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
55
|
+
} finally {
|
|
56
|
+
if (o) throw n;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return a;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
function _nonIterableRest() {
|
|
63
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
64
|
+
}
|
|
65
|
+
function _regenerator() {
|
|
66
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
67
|
+
var e,
|
|
68
|
+
t,
|
|
69
|
+
r = "function" == typeof Symbol ? Symbol : {},
|
|
70
|
+
n = r.iterator || "@@iterator",
|
|
71
|
+
o = r.toStringTag || "@@toStringTag";
|
|
72
|
+
function i(r, n, o, i) {
|
|
73
|
+
var c = n && n.prototype instanceof Generator ? n : Generator,
|
|
74
|
+
u = Object.create(c.prototype);
|
|
75
|
+
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
|
|
76
|
+
var i,
|
|
77
|
+
c,
|
|
78
|
+
u,
|
|
79
|
+
f = 0,
|
|
80
|
+
p = o || [],
|
|
81
|
+
y = false,
|
|
82
|
+
G = {
|
|
83
|
+
p: 0,
|
|
84
|
+
n: 0,
|
|
85
|
+
v: e,
|
|
86
|
+
a: d,
|
|
87
|
+
f: d.bind(e, 4),
|
|
88
|
+
d: function (t, r) {
|
|
89
|
+
return i = t, c = 0, u = e, G.n = r, a;
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
function d(r, n) {
|
|
93
|
+
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
|
|
94
|
+
var o,
|
|
95
|
+
i = p[t],
|
|
96
|
+
d = G.p,
|
|
97
|
+
l = i[2];
|
|
98
|
+
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
|
|
99
|
+
}
|
|
100
|
+
if (o || r > 1) return a;
|
|
101
|
+
throw y = true, n;
|
|
102
|
+
}
|
|
103
|
+
return function (o, p, l) {
|
|
104
|
+
if (f > 1) throw TypeError("Generator is already running");
|
|
105
|
+
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
|
|
106
|
+
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
|
|
107
|
+
try {
|
|
108
|
+
if (f = 2, i) {
|
|
109
|
+
if (c || (o = "next"), t = i[o]) {
|
|
110
|
+
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
111
|
+
if (!t.done) return t;
|
|
112
|
+
u = t.value, c < 2 && (c = 0);
|
|
113
|
+
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
114
|
+
i = e;
|
|
115
|
+
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
116
|
+
} catch (t) {
|
|
117
|
+
i = e, c = 1, u = t;
|
|
118
|
+
} finally {
|
|
119
|
+
f = 1;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
return {
|
|
123
|
+
value: t,
|
|
124
|
+
done: y
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
}(r, o, i), true), u;
|
|
128
|
+
}
|
|
129
|
+
var a = {};
|
|
130
|
+
function Generator() {}
|
|
131
|
+
function GeneratorFunction() {}
|
|
132
|
+
function GeneratorFunctionPrototype() {}
|
|
133
|
+
t = Object.getPrototypeOf;
|
|
134
|
+
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
|
|
135
|
+
return this;
|
|
136
|
+
}), t),
|
|
137
|
+
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
|
|
138
|
+
function f(e) {
|
|
139
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
|
|
140
|
+
}
|
|
141
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
|
|
142
|
+
return this;
|
|
143
|
+
}), _regeneratorDefine(u, "toString", function () {
|
|
144
|
+
return "[object Generator]";
|
|
145
|
+
}), (_regenerator = function () {
|
|
146
|
+
return {
|
|
147
|
+
w: i,
|
|
148
|
+
m: f
|
|
149
|
+
};
|
|
150
|
+
})();
|
|
151
|
+
}
|
|
152
|
+
function _regeneratorDefine(e, r, n, t) {
|
|
153
|
+
var i = Object.defineProperty;
|
|
154
|
+
try {
|
|
155
|
+
i({}, "", {});
|
|
156
|
+
} catch (e) {
|
|
157
|
+
i = 0;
|
|
158
|
+
}
|
|
159
|
+
_regeneratorDefine = function (e, r, n, t) {
|
|
160
|
+
function o(r, n) {
|
|
161
|
+
_regeneratorDefine(e, r, function (e) {
|
|
162
|
+
return this._invoke(r, n, e);
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
r ? i ? i(e, r, {
|
|
166
|
+
value: n,
|
|
167
|
+
enumerable: !t,
|
|
168
|
+
configurable: !t,
|
|
169
|
+
writable: !t
|
|
170
|
+
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
|
|
171
|
+
}, _regeneratorDefine(e, r, n, t);
|
|
172
|
+
}
|
|
173
|
+
function _slicedToArray(r, e) {
|
|
174
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
175
|
+
}
|
|
176
|
+
function _unsupportedIterableToArray(r, a) {
|
|
177
|
+
if (r) {
|
|
178
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
179
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
180
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
function PaymentForm() {
|
|
185
|
+
var formRef = React.useRef();
|
|
186
|
+
var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
|
|
187
|
+
var shift4Ref = React.useRef(null);
|
|
188
|
+
var componentsRef = React.useRef(null);
|
|
189
|
+
var _useState = React.useState(""),
|
|
190
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
191
|
+
error = _useState2[0],
|
|
192
|
+
setError = _useState2[1];
|
|
193
|
+
var _useState3 = React.useState(""),
|
|
194
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
195
|
+
success = _useState4[0],
|
|
196
|
+
setSuccess = _useState4[1];
|
|
197
|
+
var _useState5 = React.useState(false),
|
|
198
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
199
|
+
isSubmitting = _useState6[0],
|
|
200
|
+
setIsSubmitting = _useState6[1];
|
|
201
|
+
var _useState7 = React.useState(false),
|
|
202
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
203
|
+
isReady = _useState8[0],
|
|
204
|
+
setIsReady = _useState8[1];
|
|
205
|
+
React.useEffect(function () {
|
|
206
|
+
if (initializedRef.current) return;
|
|
207
|
+
initializedRef.current = true;
|
|
208
|
+
var script = document.createElement("script");
|
|
209
|
+
script.src = "https://js.dev.shift4.com/shift4.js";
|
|
210
|
+
script.async = true;
|
|
211
|
+
script.onload = function () {
|
|
212
|
+
if (!window.Shift4) return;
|
|
213
|
+
shift4Ref.current = window.Shift4("pk_test_SeDEbtFlcz4LqVe1zxMYZxQO");
|
|
214
|
+
componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
|
|
215
|
+
setIsReady(true);
|
|
216
|
+
};
|
|
217
|
+
script.onerror = function () {
|
|
218
|
+
setError("Payment provider script failed to load. Please refresh and try again.");
|
|
219
|
+
};
|
|
220
|
+
document.body.appendChild(script);
|
|
221
|
+
}, []);
|
|
222
|
+
var handleSubmit = /*#__PURE__*/function () {
|
|
223
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
|
|
224
|
+
var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t;
|
|
225
|
+
return _regenerator().w(function (_context) {
|
|
226
|
+
while (1) switch (_context.p = _context.n) {
|
|
227
|
+
case 0:
|
|
228
|
+
e.preventDefault();
|
|
229
|
+
if (!isSubmitting) {
|
|
230
|
+
_context.n = 1;
|
|
231
|
+
break;
|
|
232
|
+
}
|
|
233
|
+
return _context.a(2);
|
|
234
|
+
case 1:
|
|
235
|
+
if (formRef.current) {
|
|
236
|
+
_context.n = 2;
|
|
237
|
+
break;
|
|
238
|
+
}
|
|
239
|
+
return _context.a(2);
|
|
240
|
+
case 2:
|
|
241
|
+
if (!(!shift4Ref.current || !componentsRef.current)) {
|
|
242
|
+
_context.n = 3;
|
|
243
|
+
break;
|
|
244
|
+
}
|
|
245
|
+
setError("Payment form is not ready yet. Please try again.");
|
|
246
|
+
return _context.a(2);
|
|
247
|
+
case 3:
|
|
248
|
+
setError("");
|
|
249
|
+
setSuccess("");
|
|
250
|
+
setIsSubmitting(true);
|
|
251
|
+
_context.p = 4;
|
|
252
|
+
_context.n = 5;
|
|
253
|
+
return shift4Ref.current.createToken(componentsRef.current);
|
|
254
|
+
case 5:
|
|
255
|
+
token = _context.v;
|
|
256
|
+
if (token !== null && token !== void 0 && token.id) {
|
|
257
|
+
_context.n = 6;
|
|
258
|
+
break;
|
|
259
|
+
}
|
|
260
|
+
throw new Error("Card tokenization failed. Please check your details and try again.");
|
|
261
|
+
case 6:
|
|
262
|
+
request = {
|
|
263
|
+
amount: 2499,
|
|
264
|
+
currency: "USD",
|
|
265
|
+
card: token.id
|
|
266
|
+
};
|
|
267
|
+
_context.n = 7;
|
|
268
|
+
return shift4Ref.current.verifyThreeDSecure(request);
|
|
269
|
+
case 7:
|
|
270
|
+
threeDSecureToken = _context.v;
|
|
271
|
+
if (threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id) {
|
|
272
|
+
_context.n = 8;
|
|
273
|
+
break;
|
|
274
|
+
}
|
|
275
|
+
throw new Error("3D Secure verification failed. Please try again.");
|
|
276
|
+
case 8:
|
|
277
|
+
apiBase = process.env.REACT_APP_API_BASE || "http://localhost:4242";
|
|
278
|
+
_context.n = 9;
|
|
279
|
+
return fetch("".concat(apiBase, "/charge"), {
|
|
280
|
+
method: "POST",
|
|
281
|
+
headers: {
|
|
282
|
+
"Content-Type": "application/json"
|
|
283
|
+
},
|
|
284
|
+
body: JSON.stringify({
|
|
285
|
+
tokenId: threeDSecureToken.id,
|
|
286
|
+
amount: request.amount,
|
|
287
|
+
currency: request.currency
|
|
288
|
+
})
|
|
289
|
+
});
|
|
290
|
+
case 9:
|
|
291
|
+
response = _context.v;
|
|
292
|
+
_context.n = 10;
|
|
293
|
+
return response.json();
|
|
294
|
+
case 10:
|
|
295
|
+
result = _context.v;
|
|
296
|
+
if (response.ok) {
|
|
297
|
+
_context.n = 11;
|
|
298
|
+
break;
|
|
299
|
+
}
|
|
300
|
+
throw new Error((result === null || result === void 0 ? void 0 : result.error) || "Payment failed. Please try again.");
|
|
301
|
+
case 11:
|
|
302
|
+
setSuccess("Payment approved. Charge ID: ".concat((result === null || result === void 0 || (_result$charge = result.charge) === null || _result$charge === void 0 ? void 0 : _result$charge.id) || "unknown"));
|
|
303
|
+
_context.n = 13;
|
|
304
|
+
break;
|
|
305
|
+
case 12:
|
|
306
|
+
_context.p = 12;
|
|
307
|
+
_t = _context.v;
|
|
308
|
+
setError((_t === null || _t === void 0 ? void 0 : _t.message) || "Payment failed. Please try again.");
|
|
309
|
+
case 13:
|
|
310
|
+
_context.p = 13;
|
|
311
|
+
setIsSubmitting(false);
|
|
312
|
+
return _context.f(13);
|
|
313
|
+
case 14:
|
|
314
|
+
return _context.a(2);
|
|
315
|
+
}
|
|
316
|
+
}, _callee, null, [[4, 12, 13, 14]]);
|
|
317
|
+
}));
|
|
318
|
+
return function handleSubmit(_x) {
|
|
319
|
+
return _ref.apply(this, arguments);
|
|
320
|
+
};
|
|
321
|
+
}();
|
|
322
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
323
|
+
style: {
|
|
324
|
+
display: "flex",
|
|
325
|
+
justifyContent: "center",
|
|
326
|
+
alignItems: "center",
|
|
327
|
+
minHeight: "100vh",
|
|
328
|
+
backgroundColor: "#f0f2f5",
|
|
329
|
+
// yumşaq fon
|
|
330
|
+
padding: "20px"
|
|
331
|
+
}
|
|
332
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
333
|
+
style: {
|
|
334
|
+
width: "100%",
|
|
335
|
+
maxWidth: "420px",
|
|
336
|
+
// mobil üçün də uyğun
|
|
337
|
+
padding: "30px",
|
|
338
|
+
backgroundColor: "#ffffff",
|
|
339
|
+
borderRadius: "12px",
|
|
340
|
+
boxShadow: "0 6px 20px rgba(0,0,0,0.1)"
|
|
341
|
+
}
|
|
342
|
+
}, /*#__PURE__*/React.createElement("h2", {
|
|
343
|
+
style: {
|
|
344
|
+
textAlign: "center",
|
|
345
|
+
marginBottom: "20px",
|
|
346
|
+
color: "#333",
|
|
347
|
+
fontWeight: "600"
|
|
348
|
+
}
|
|
349
|
+
}, "Secure Payment"), /*#__PURE__*/React.createElement("div", {
|
|
350
|
+
id: "payment-error",
|
|
351
|
+
className: "alert alert-danger",
|
|
352
|
+
style: {
|
|
353
|
+
marginBottom: "15px",
|
|
354
|
+
padding: "10px",
|
|
355
|
+
backgroundColor: "#ffe5e5",
|
|
356
|
+
color: "#a00",
|
|
357
|
+
borderRadius: "6px",
|
|
358
|
+
display: error ? "block" : "none"
|
|
359
|
+
},
|
|
360
|
+
role: "alert",
|
|
361
|
+
"aria-live": "polite"
|
|
362
|
+
}, error), /*#__PURE__*/React.createElement("div", {
|
|
363
|
+
id: "payment-success",
|
|
364
|
+
className: "alert alert-success",
|
|
365
|
+
style: {
|
|
366
|
+
marginBottom: "15px",
|
|
367
|
+
padding: "10px",
|
|
368
|
+
backgroundColor: "#e7f6eb",
|
|
369
|
+
color: "#1c7c3a",
|
|
370
|
+
borderRadius: "6px",
|
|
371
|
+
display: success ? "block" : "none"
|
|
372
|
+
},
|
|
373
|
+
role: "status",
|
|
374
|
+
"aria-live": "polite"
|
|
375
|
+
}, success), /*#__PURE__*/React.createElement("form", {
|
|
376
|
+
ref: formRef,
|
|
377
|
+
id: "payment-form",
|
|
378
|
+
className: "grid gap-5",
|
|
379
|
+
onSubmit: handleSubmit,
|
|
380
|
+
method: "post"
|
|
381
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
382
|
+
className: "grid gap-2"
|
|
383
|
+
}, /*#__PURE__*/React.createElement("label", {
|
|
384
|
+
style: {
|
|
385
|
+
fontWeight: "500",
|
|
386
|
+
color: "#555"
|
|
387
|
+
}
|
|
388
|
+
}, "Card number"), /*#__PURE__*/React.createElement("div", {
|
|
389
|
+
"data-shift4": "number",
|
|
390
|
+
className: "form-control",
|
|
391
|
+
style: {
|
|
392
|
+
padding: "12px",
|
|
393
|
+
borderRadius: "6px",
|
|
394
|
+
border: "1px solid #ccc"
|
|
395
|
+
}
|
|
396
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
397
|
+
className: "grid gap-2",
|
|
398
|
+
style: {
|
|
399
|
+
gridTemplateColumns: "1fr 1fr",
|
|
400
|
+
display: "grid",
|
|
401
|
+
gap: "10px"
|
|
402
|
+
}
|
|
403
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
404
|
+
style: {
|
|
405
|
+
fontWeight: "500",
|
|
406
|
+
color: "#555"
|
|
407
|
+
}
|
|
408
|
+
}, "Expiration"), /*#__PURE__*/React.createElement("div", {
|
|
409
|
+
"data-shift4": "expiry",
|
|
410
|
+
className: "form-control",
|
|
411
|
+
style: {
|
|
412
|
+
padding: "12px",
|
|
413
|
+
borderRadius: "6px",
|
|
414
|
+
border: "1px solid #ccc"
|
|
415
|
+
}
|
|
416
|
+
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
417
|
+
style: {
|
|
418
|
+
fontWeight: "500",
|
|
419
|
+
color: "#555"
|
|
420
|
+
}
|
|
421
|
+
}, "CVC"), /*#__PURE__*/React.createElement("div", {
|
|
422
|
+
"data-shift4": "cvc",
|
|
423
|
+
className: "form-control",
|
|
424
|
+
style: {
|
|
425
|
+
padding: "12px",
|
|
426
|
+
borderRadius: "6px",
|
|
427
|
+
border: "1px solid #ccc"
|
|
428
|
+
}
|
|
429
|
+
}))), /*#__PURE__*/React.createElement("button", {
|
|
430
|
+
type: "submit",
|
|
431
|
+
disabled: !isReady || isSubmitting,
|
|
432
|
+
style: {
|
|
433
|
+
width: "100%",
|
|
434
|
+
padding: "14px",
|
|
435
|
+
backgroundColor: "#4f46e5",
|
|
436
|
+
color: "white",
|
|
437
|
+
border: "none",
|
|
438
|
+
borderRadius: "8px",
|
|
439
|
+
fontWeight: "600",
|
|
440
|
+
cursor: "pointer",
|
|
441
|
+
opacity: !isReady || isSubmitting ? 0.7 : 1,
|
|
442
|
+
marginTop: "10px"
|
|
443
|
+
}
|
|
444
|
+
}, isSubmitting ? "Processing..." : "Buy now"))));
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
exports.PaymentForm = PaymentForm;
|
|
@@ -0,0 +1,445 @@
|
|
|
1
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
function _arrayLikeToArray(r, a) {
|
|
4
|
+
(null == a || a > r.length) && (a = r.length);
|
|
5
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
6
|
+
return n;
|
|
7
|
+
}
|
|
8
|
+
function _arrayWithHoles(r) {
|
|
9
|
+
if (Array.isArray(r)) return r;
|
|
10
|
+
}
|
|
11
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
12
|
+
try {
|
|
13
|
+
var i = n[a](c),
|
|
14
|
+
u = i.value;
|
|
15
|
+
} catch (n) {
|
|
16
|
+
return void e(n);
|
|
17
|
+
}
|
|
18
|
+
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
19
|
+
}
|
|
20
|
+
function _asyncToGenerator(n) {
|
|
21
|
+
return function () {
|
|
22
|
+
var t = this,
|
|
23
|
+
e = arguments;
|
|
24
|
+
return new Promise(function (r, o) {
|
|
25
|
+
var a = n.apply(t, e);
|
|
26
|
+
function _next(n) {
|
|
27
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
28
|
+
}
|
|
29
|
+
function _throw(n) {
|
|
30
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
31
|
+
}
|
|
32
|
+
_next(void 0);
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
function _iterableToArrayLimit(r, l) {
|
|
37
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
38
|
+
if (null != t) {
|
|
39
|
+
var e,
|
|
40
|
+
n,
|
|
41
|
+
i,
|
|
42
|
+
u,
|
|
43
|
+
a = [],
|
|
44
|
+
f = true,
|
|
45
|
+
o = false;
|
|
46
|
+
try {
|
|
47
|
+
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
48
|
+
} catch (r) {
|
|
49
|
+
o = true, n = r;
|
|
50
|
+
} finally {
|
|
51
|
+
try {
|
|
52
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
53
|
+
} finally {
|
|
54
|
+
if (o) throw n;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return a;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
function _nonIterableRest() {
|
|
61
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
62
|
+
}
|
|
63
|
+
function _regenerator() {
|
|
64
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
65
|
+
var e,
|
|
66
|
+
t,
|
|
67
|
+
r = "function" == typeof Symbol ? Symbol : {},
|
|
68
|
+
n = r.iterator || "@@iterator",
|
|
69
|
+
o = r.toStringTag || "@@toStringTag";
|
|
70
|
+
function i(r, n, o, i) {
|
|
71
|
+
var c = n && n.prototype instanceof Generator ? n : Generator,
|
|
72
|
+
u = Object.create(c.prototype);
|
|
73
|
+
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
|
|
74
|
+
var i,
|
|
75
|
+
c,
|
|
76
|
+
u,
|
|
77
|
+
f = 0,
|
|
78
|
+
p = o || [],
|
|
79
|
+
y = false,
|
|
80
|
+
G = {
|
|
81
|
+
p: 0,
|
|
82
|
+
n: 0,
|
|
83
|
+
v: e,
|
|
84
|
+
a: d,
|
|
85
|
+
f: d.bind(e, 4),
|
|
86
|
+
d: function (t, r) {
|
|
87
|
+
return i = t, c = 0, u = e, G.n = r, a;
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
function d(r, n) {
|
|
91
|
+
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
|
|
92
|
+
var o,
|
|
93
|
+
i = p[t],
|
|
94
|
+
d = G.p,
|
|
95
|
+
l = i[2];
|
|
96
|
+
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
|
|
97
|
+
}
|
|
98
|
+
if (o || r > 1) return a;
|
|
99
|
+
throw y = true, n;
|
|
100
|
+
}
|
|
101
|
+
return function (o, p, l) {
|
|
102
|
+
if (f > 1) throw TypeError("Generator is already running");
|
|
103
|
+
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
|
|
104
|
+
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
|
|
105
|
+
try {
|
|
106
|
+
if (f = 2, i) {
|
|
107
|
+
if (c || (o = "next"), t = i[o]) {
|
|
108
|
+
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
109
|
+
if (!t.done) return t;
|
|
110
|
+
u = t.value, c < 2 && (c = 0);
|
|
111
|
+
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
112
|
+
i = e;
|
|
113
|
+
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
114
|
+
} catch (t) {
|
|
115
|
+
i = e, c = 1, u = t;
|
|
116
|
+
} finally {
|
|
117
|
+
f = 1;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
return {
|
|
121
|
+
value: t,
|
|
122
|
+
done: y
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
}(r, o, i), true), u;
|
|
126
|
+
}
|
|
127
|
+
var a = {};
|
|
128
|
+
function Generator() {}
|
|
129
|
+
function GeneratorFunction() {}
|
|
130
|
+
function GeneratorFunctionPrototype() {}
|
|
131
|
+
t = Object.getPrototypeOf;
|
|
132
|
+
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
|
|
133
|
+
return this;
|
|
134
|
+
}), t),
|
|
135
|
+
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
|
|
136
|
+
function f(e) {
|
|
137
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
|
|
138
|
+
}
|
|
139
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
|
|
140
|
+
return this;
|
|
141
|
+
}), _regeneratorDefine(u, "toString", function () {
|
|
142
|
+
return "[object Generator]";
|
|
143
|
+
}), (_regenerator = function () {
|
|
144
|
+
return {
|
|
145
|
+
w: i,
|
|
146
|
+
m: f
|
|
147
|
+
};
|
|
148
|
+
})();
|
|
149
|
+
}
|
|
150
|
+
function _regeneratorDefine(e, r, n, t) {
|
|
151
|
+
var i = Object.defineProperty;
|
|
152
|
+
try {
|
|
153
|
+
i({}, "", {});
|
|
154
|
+
} catch (e) {
|
|
155
|
+
i = 0;
|
|
156
|
+
}
|
|
157
|
+
_regeneratorDefine = function (e, r, n, t) {
|
|
158
|
+
function o(r, n) {
|
|
159
|
+
_regeneratorDefine(e, r, function (e) {
|
|
160
|
+
return this._invoke(r, n, e);
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
r ? i ? i(e, r, {
|
|
164
|
+
value: n,
|
|
165
|
+
enumerable: !t,
|
|
166
|
+
configurable: !t,
|
|
167
|
+
writable: !t
|
|
168
|
+
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
|
|
169
|
+
}, _regeneratorDefine(e, r, n, t);
|
|
170
|
+
}
|
|
171
|
+
function _slicedToArray(r, e) {
|
|
172
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
173
|
+
}
|
|
174
|
+
function _unsupportedIterableToArray(r, a) {
|
|
175
|
+
if (r) {
|
|
176
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
177
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
178
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
function PaymentForm() {
|
|
183
|
+
var formRef = useRef();
|
|
184
|
+
var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
|
|
185
|
+
var shift4Ref = useRef(null);
|
|
186
|
+
var componentsRef = useRef(null);
|
|
187
|
+
var _useState = useState(""),
|
|
188
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
189
|
+
error = _useState2[0],
|
|
190
|
+
setError = _useState2[1];
|
|
191
|
+
var _useState3 = useState(""),
|
|
192
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
193
|
+
success = _useState4[0],
|
|
194
|
+
setSuccess = _useState4[1];
|
|
195
|
+
var _useState5 = useState(false),
|
|
196
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
197
|
+
isSubmitting = _useState6[0],
|
|
198
|
+
setIsSubmitting = _useState6[1];
|
|
199
|
+
var _useState7 = useState(false),
|
|
200
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
201
|
+
isReady = _useState8[0],
|
|
202
|
+
setIsReady = _useState8[1];
|
|
203
|
+
useEffect(function () {
|
|
204
|
+
if (initializedRef.current) return;
|
|
205
|
+
initializedRef.current = true;
|
|
206
|
+
var script = document.createElement("script");
|
|
207
|
+
script.src = "https://js.dev.shift4.com/shift4.js";
|
|
208
|
+
script.async = true;
|
|
209
|
+
script.onload = function () {
|
|
210
|
+
if (!window.Shift4) return;
|
|
211
|
+
shift4Ref.current = window.Shift4("pk_test_SeDEbtFlcz4LqVe1zxMYZxQO");
|
|
212
|
+
componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
|
|
213
|
+
setIsReady(true);
|
|
214
|
+
};
|
|
215
|
+
script.onerror = function () {
|
|
216
|
+
setError("Payment provider script failed to load. Please refresh and try again.");
|
|
217
|
+
};
|
|
218
|
+
document.body.appendChild(script);
|
|
219
|
+
}, []);
|
|
220
|
+
var handleSubmit = /*#__PURE__*/function () {
|
|
221
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
|
|
222
|
+
var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t;
|
|
223
|
+
return _regenerator().w(function (_context) {
|
|
224
|
+
while (1) switch (_context.p = _context.n) {
|
|
225
|
+
case 0:
|
|
226
|
+
e.preventDefault();
|
|
227
|
+
if (!isSubmitting) {
|
|
228
|
+
_context.n = 1;
|
|
229
|
+
break;
|
|
230
|
+
}
|
|
231
|
+
return _context.a(2);
|
|
232
|
+
case 1:
|
|
233
|
+
if (formRef.current) {
|
|
234
|
+
_context.n = 2;
|
|
235
|
+
break;
|
|
236
|
+
}
|
|
237
|
+
return _context.a(2);
|
|
238
|
+
case 2:
|
|
239
|
+
if (!(!shift4Ref.current || !componentsRef.current)) {
|
|
240
|
+
_context.n = 3;
|
|
241
|
+
break;
|
|
242
|
+
}
|
|
243
|
+
setError("Payment form is not ready yet. Please try again.");
|
|
244
|
+
return _context.a(2);
|
|
245
|
+
case 3:
|
|
246
|
+
setError("");
|
|
247
|
+
setSuccess("");
|
|
248
|
+
setIsSubmitting(true);
|
|
249
|
+
_context.p = 4;
|
|
250
|
+
_context.n = 5;
|
|
251
|
+
return shift4Ref.current.createToken(componentsRef.current);
|
|
252
|
+
case 5:
|
|
253
|
+
token = _context.v;
|
|
254
|
+
if (token !== null && token !== void 0 && token.id) {
|
|
255
|
+
_context.n = 6;
|
|
256
|
+
break;
|
|
257
|
+
}
|
|
258
|
+
throw new Error("Card tokenization failed. Please check your details and try again.");
|
|
259
|
+
case 6:
|
|
260
|
+
request = {
|
|
261
|
+
amount: 2499,
|
|
262
|
+
currency: "USD",
|
|
263
|
+
card: token.id
|
|
264
|
+
};
|
|
265
|
+
_context.n = 7;
|
|
266
|
+
return shift4Ref.current.verifyThreeDSecure(request);
|
|
267
|
+
case 7:
|
|
268
|
+
threeDSecureToken = _context.v;
|
|
269
|
+
if (threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id) {
|
|
270
|
+
_context.n = 8;
|
|
271
|
+
break;
|
|
272
|
+
}
|
|
273
|
+
throw new Error("3D Secure verification failed. Please try again.");
|
|
274
|
+
case 8:
|
|
275
|
+
apiBase = process.env.REACT_APP_API_BASE || "http://localhost:4242";
|
|
276
|
+
_context.n = 9;
|
|
277
|
+
return fetch("".concat(apiBase, "/charge"), {
|
|
278
|
+
method: "POST",
|
|
279
|
+
headers: {
|
|
280
|
+
"Content-Type": "application/json"
|
|
281
|
+
},
|
|
282
|
+
body: JSON.stringify({
|
|
283
|
+
tokenId: threeDSecureToken.id,
|
|
284
|
+
amount: request.amount,
|
|
285
|
+
currency: request.currency
|
|
286
|
+
})
|
|
287
|
+
});
|
|
288
|
+
case 9:
|
|
289
|
+
response = _context.v;
|
|
290
|
+
_context.n = 10;
|
|
291
|
+
return response.json();
|
|
292
|
+
case 10:
|
|
293
|
+
result = _context.v;
|
|
294
|
+
if (response.ok) {
|
|
295
|
+
_context.n = 11;
|
|
296
|
+
break;
|
|
297
|
+
}
|
|
298
|
+
throw new Error((result === null || result === void 0 ? void 0 : result.error) || "Payment failed. Please try again.");
|
|
299
|
+
case 11:
|
|
300
|
+
setSuccess("Payment approved. Charge ID: ".concat((result === null || result === void 0 || (_result$charge = result.charge) === null || _result$charge === void 0 ? void 0 : _result$charge.id) || "unknown"));
|
|
301
|
+
_context.n = 13;
|
|
302
|
+
break;
|
|
303
|
+
case 12:
|
|
304
|
+
_context.p = 12;
|
|
305
|
+
_t = _context.v;
|
|
306
|
+
setError((_t === null || _t === void 0 ? void 0 : _t.message) || "Payment failed. Please try again.");
|
|
307
|
+
case 13:
|
|
308
|
+
_context.p = 13;
|
|
309
|
+
setIsSubmitting(false);
|
|
310
|
+
return _context.f(13);
|
|
311
|
+
case 14:
|
|
312
|
+
return _context.a(2);
|
|
313
|
+
}
|
|
314
|
+
}, _callee, null, [[4, 12, 13, 14]]);
|
|
315
|
+
}));
|
|
316
|
+
return function handleSubmit(_x) {
|
|
317
|
+
return _ref.apply(this, arguments);
|
|
318
|
+
};
|
|
319
|
+
}();
|
|
320
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
321
|
+
style: {
|
|
322
|
+
display: "flex",
|
|
323
|
+
justifyContent: "center",
|
|
324
|
+
alignItems: "center",
|
|
325
|
+
minHeight: "100vh",
|
|
326
|
+
backgroundColor: "#f0f2f5",
|
|
327
|
+
// yumşaq fon
|
|
328
|
+
padding: "20px"
|
|
329
|
+
}
|
|
330
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
331
|
+
style: {
|
|
332
|
+
width: "100%",
|
|
333
|
+
maxWidth: "420px",
|
|
334
|
+
// mobil üçün də uyğun
|
|
335
|
+
padding: "30px",
|
|
336
|
+
backgroundColor: "#ffffff",
|
|
337
|
+
borderRadius: "12px",
|
|
338
|
+
boxShadow: "0 6px 20px rgba(0,0,0,0.1)"
|
|
339
|
+
}
|
|
340
|
+
}, /*#__PURE__*/React.createElement("h2", {
|
|
341
|
+
style: {
|
|
342
|
+
textAlign: "center",
|
|
343
|
+
marginBottom: "20px",
|
|
344
|
+
color: "#333",
|
|
345
|
+
fontWeight: "600"
|
|
346
|
+
}
|
|
347
|
+
}, "Secure Payment"), /*#__PURE__*/React.createElement("div", {
|
|
348
|
+
id: "payment-error",
|
|
349
|
+
className: "alert alert-danger",
|
|
350
|
+
style: {
|
|
351
|
+
marginBottom: "15px",
|
|
352
|
+
padding: "10px",
|
|
353
|
+
backgroundColor: "#ffe5e5",
|
|
354
|
+
color: "#a00",
|
|
355
|
+
borderRadius: "6px",
|
|
356
|
+
display: error ? "block" : "none"
|
|
357
|
+
},
|
|
358
|
+
role: "alert",
|
|
359
|
+
"aria-live": "polite"
|
|
360
|
+
}, error), /*#__PURE__*/React.createElement("div", {
|
|
361
|
+
id: "payment-success",
|
|
362
|
+
className: "alert alert-success",
|
|
363
|
+
style: {
|
|
364
|
+
marginBottom: "15px",
|
|
365
|
+
padding: "10px",
|
|
366
|
+
backgroundColor: "#e7f6eb",
|
|
367
|
+
color: "#1c7c3a",
|
|
368
|
+
borderRadius: "6px",
|
|
369
|
+
display: success ? "block" : "none"
|
|
370
|
+
},
|
|
371
|
+
role: "status",
|
|
372
|
+
"aria-live": "polite"
|
|
373
|
+
}, success), /*#__PURE__*/React.createElement("form", {
|
|
374
|
+
ref: formRef,
|
|
375
|
+
id: "payment-form",
|
|
376
|
+
className: "grid gap-5",
|
|
377
|
+
onSubmit: handleSubmit,
|
|
378
|
+
method: "post"
|
|
379
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
380
|
+
className: "grid gap-2"
|
|
381
|
+
}, /*#__PURE__*/React.createElement("label", {
|
|
382
|
+
style: {
|
|
383
|
+
fontWeight: "500",
|
|
384
|
+
color: "#555"
|
|
385
|
+
}
|
|
386
|
+
}, "Card number"), /*#__PURE__*/React.createElement("div", {
|
|
387
|
+
"data-shift4": "number",
|
|
388
|
+
className: "form-control",
|
|
389
|
+
style: {
|
|
390
|
+
padding: "12px",
|
|
391
|
+
borderRadius: "6px",
|
|
392
|
+
border: "1px solid #ccc"
|
|
393
|
+
}
|
|
394
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
395
|
+
className: "grid gap-2",
|
|
396
|
+
style: {
|
|
397
|
+
gridTemplateColumns: "1fr 1fr",
|
|
398
|
+
display: "grid",
|
|
399
|
+
gap: "10px"
|
|
400
|
+
}
|
|
401
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
402
|
+
style: {
|
|
403
|
+
fontWeight: "500",
|
|
404
|
+
color: "#555"
|
|
405
|
+
}
|
|
406
|
+
}, "Expiration"), /*#__PURE__*/React.createElement("div", {
|
|
407
|
+
"data-shift4": "expiry",
|
|
408
|
+
className: "form-control",
|
|
409
|
+
style: {
|
|
410
|
+
padding: "12px",
|
|
411
|
+
borderRadius: "6px",
|
|
412
|
+
border: "1px solid #ccc"
|
|
413
|
+
}
|
|
414
|
+
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
415
|
+
style: {
|
|
416
|
+
fontWeight: "500",
|
|
417
|
+
color: "#555"
|
|
418
|
+
}
|
|
419
|
+
}, "CVC"), /*#__PURE__*/React.createElement("div", {
|
|
420
|
+
"data-shift4": "cvc",
|
|
421
|
+
className: "form-control",
|
|
422
|
+
style: {
|
|
423
|
+
padding: "12px",
|
|
424
|
+
borderRadius: "6px",
|
|
425
|
+
border: "1px solid #ccc"
|
|
426
|
+
}
|
|
427
|
+
}))), /*#__PURE__*/React.createElement("button", {
|
|
428
|
+
type: "submit",
|
|
429
|
+
disabled: !isReady || isSubmitting,
|
|
430
|
+
style: {
|
|
431
|
+
width: "100%",
|
|
432
|
+
padding: "14px",
|
|
433
|
+
backgroundColor: "#4f46e5",
|
|
434
|
+
color: "white",
|
|
435
|
+
border: "none",
|
|
436
|
+
borderRadius: "8px",
|
|
437
|
+
fontWeight: "600",
|
|
438
|
+
cursor: "pointer",
|
|
439
|
+
opacity: !isReady || isSubmitting ? 0.7 : 1,
|
|
440
|
+
marginTop: "10px"
|
|
441
|
+
}
|
|
442
|
+
}, isSubmitting ? "Processing..." : "Buy now"))));
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
export { PaymentForm };
|
package/package.json
CHANGED