logix-payment-shift4 1.0.1 → 1.0.4

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.
Files changed (4) hide show
  1. package/dist/index.cjs.js +100 -74
  2. package/dist/index.esm.js +100 -74
  3. package/package.json +1 -1
  4. package/src/PaymentForm.jsx +98 -86
package/dist/index.cjs.js CHANGED
@@ -181,19 +181,30 @@ function _unsupportedIterableToArray(r, a) {
181
181
  }
182
182
  }
183
183
 
184
- function PaymentForm() {
184
+ function PaymentForm(_ref) {
185
+ var amount = _ref.amount,
186
+ currency = _ref.currency,
187
+ currencyIcon = _ref.currencyIcon,
188
+ color = _ref.color,
189
+ _ref$formwidth = _ref.formwidth,
190
+ formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
191
+ _ref$formborderRadius = _ref.formborderRadius,
192
+ formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
193
+ _ref$formbackgroundCo = _ref.formbackgroundColor,
194
+ formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
195
+ companyLogo = _ref.companyLogo;
185
196
  var formRef = React.useRef();
186
197
  var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
187
198
  var shift4Ref = React.useRef(null);
188
199
  var componentsRef = React.useRef(null);
189
200
  var _useState = React.useState(""),
190
- _useState2 = _slicedToArray(_useState, 2),
191
- error = _useState2[0],
192
- setError = _useState2[1];
201
+ _useState2 = _slicedToArray(_useState, 2);
202
+ _useState2[0];
203
+ var setError = _useState2[1];
193
204
  var _useState3 = React.useState(""),
194
- _useState4 = _slicedToArray(_useState3, 2),
195
- success = _useState4[0],
196
- setSuccess = _useState4[1];
205
+ _useState4 = _slicedToArray(_useState3, 2);
206
+ _useState4[0];
207
+ var setSuccess = _useState4[1];
197
208
  var _useState5 = React.useState(false),
198
209
  _useState6 = _slicedToArray(_useState5, 2),
199
210
  isSubmitting = _useState6[0],
@@ -220,7 +231,7 @@ function PaymentForm() {
220
231
  document.body.appendChild(script);
221
232
  }, []);
222
233
  var handleSubmit = /*#__PURE__*/function () {
223
- var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
234
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
224
235
  var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t;
225
236
  return _regenerator().w(function (_context) {
226
237
  while (1) switch (_context.p = _context.n) {
@@ -260,8 +271,8 @@ function PaymentForm() {
260
271
  throw new Error("Card tokenization failed. Please check your details and try again.");
261
272
  case 6:
262
273
  request = {
263
- amount: 2499,
264
- currency: "USD",
274
+ amount: amount,
275
+ currency: currency,
265
276
  card: token.id
266
277
  };
267
278
  _context.n = 7;
@@ -316,70 +327,82 @@ function PaymentForm() {
316
327
  }, _callee, null, [[4, 12, 13, 14]]);
317
328
  }));
318
329
  return function handleSubmit(_x) {
319
- return _ref.apply(this, arguments);
330
+ return _ref2.apply(this, arguments);
320
331
  };
321
332
  }();
322
333
  return /*#__PURE__*/React.createElement("div", {
323
334
  style: {
324
335
  display: "flex",
325
336
  justifyContent: "center",
326
- alignItems: "center",
327
- minHeight: "100vh",
328
- backgroundColor: "#f0f2f5",
329
- // yumşaq fon
330
- padding: "20px"
337
+ width: "100%",
338
+ padding: "20px",
339
+ boxSizing: "border-box"
331
340
  }
332
- }, /*#__PURE__*/React.createElement("div", {
341
+ }, /*#__PURE__*/React.createElement("form", {
342
+ ref: formRef,
343
+ id: "payment-form",
344
+ onSubmit: handleSubmit,
345
+ method: "post",
333
346
  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)"
347
+ display: "grid",
348
+ gap: "12px",
349
+ padding: "24px",
350
+ backgroundColor: formbackgroundColor,
351
+ borderRadius: formborderRadius,
352
+ width: formwidth,
353
+ // səhifənin 1/4-ü
354
+ boxSizing: "border-box"
341
355
  }
342
- }, /*#__PURE__*/React.createElement("h2", {
356
+ }, /*#__PURE__*/React.createElement("div", {
343
357
  style: {
344
358
  textAlign: "center",
345
- marginBottom: "20px",
346
- color: "#333",
347
- fontWeight: "600"
359
+ marginBottom: 20
348
360
  }
349
- }, "Secure Payment"), /*#__PURE__*/React.createElement("div", {
350
- id: "payment-error",
351
- className: "alert alert-danger",
361
+ }, /*#__PURE__*/React.createElement("img", {
362
+ src: companyLogo,
363
+ alt: "Logo",
352
364
  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
+ height: "40px",
366
+ width: "auto",
367
+ marginBottom: 10
368
+ }
369
+ }), /*#__PURE__*/React.createElement("div", {
365
370
  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"
371
+ display: "flex",
372
+ alignItems: "center",
373
+ gap: "12px",
374
+ marginTop: 10
375
+ }
381
376
  }, /*#__PURE__*/React.createElement("div", {
382
- className: "grid gap-2"
377
+ style: {
378
+ flex: 1,
379
+ height: "1px",
380
+ backgroundColor: "#e5e7eb"
381
+ }
382
+ }), /*#__PURE__*/React.createElement("div", {
383
+ style: {
384
+ fontSize: "22px",
385
+ fontWeight: "700",
386
+ color: "#1f2937",
387
+ margin: "0 12px"
388
+ }
389
+ }, "Total Amount:"), /*#__PURE__*/React.createElement("div", {
390
+ style: {
391
+ fontSize: "22px",
392
+ fontWeight: "700",
393
+ color: "#16a34a"
394
+ }
395
+ }, currencyIcon, " ", Math.round(amount * 100)), /*#__PURE__*/React.createElement("div", {
396
+ style: {
397
+ flex: 1,
398
+ height: "1px",
399
+ backgroundColor: "#e5e7eb"
400
+ }
401
+ }))), /*#__PURE__*/React.createElement("div", {
402
+ style: {
403
+ display: "grid",
404
+ gap: "8px"
405
+ }
383
406
  }, /*#__PURE__*/React.createElement("label", {
384
407
  style: {
385
408
  fontWeight: "500",
@@ -390,15 +413,16 @@ function PaymentForm() {
390
413
  className: "form-control",
391
414
  style: {
392
415
  padding: "12px",
393
- borderRadius: "6px",
394
- border: "1px solid #ccc"
416
+ borderRadius: "10px",
417
+ border: "1px solid #ccc",
418
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
395
419
  }
396
420
  })), /*#__PURE__*/React.createElement("div", {
397
- className: "grid gap-2",
398
421
  style: {
399
- gridTemplateColumns: "1fr 1fr",
400
422
  display: "grid",
401
- gap: "10px"
423
+ gridTemplateColumns: "1fr 1fr",
424
+ gap: "10px",
425
+ marginTop: "12px"
402
426
  }
403
427
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
404
428
  style: {
@@ -410,8 +434,9 @@ function PaymentForm() {
410
434
  className: "form-control",
411
435
  style: {
412
436
  padding: "12px",
413
- borderRadius: "6px",
414
- border: "1px solid #ccc"
437
+ borderRadius: "10px",
438
+ border: "1px solid #ccc",
439
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
415
440
  }
416
441
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
417
442
  style: {
@@ -423,25 +448,26 @@ function PaymentForm() {
423
448
  className: "form-control",
424
449
  style: {
425
450
  padding: "12px",
426
- borderRadius: "6px",
427
- border: "1px solid #ccc"
451
+ borderRadius: "10px",
452
+ border: "1px solid #ccc",
453
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
428
454
  }
429
455
  }))), /*#__PURE__*/React.createElement("button", {
430
456
  type: "submit",
431
457
  disabled: !isReady || isSubmitting,
432
458
  style: {
459
+ marginTop: "16px",
433
460
  width: "100%",
434
461
  padding: "14px",
435
- backgroundColor: "#4f46e5",
462
+ backgroundColor: color,
436
463
  color: "white",
437
464
  border: "none",
438
- borderRadius: "8px",
465
+ borderRadius: "12px",
439
466
  fontWeight: "600",
440
- cursor: "pointer",
441
- opacity: !isReady || isSubmitting ? 0.7 : 1,
442
- marginTop: "10px"
467
+ cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
468
+ opacity: !isReady || isSubmitting ? 0.7 : 1
443
469
  }
444
- }, isSubmitting ? "Processing..." : "Buy now"))));
470
+ }, isSubmitting ? "Processing..." : "Buy now")));
445
471
  }
446
472
 
447
473
  exports.PaymentForm = PaymentForm;
package/dist/index.esm.js CHANGED
@@ -179,19 +179,30 @@ function _unsupportedIterableToArray(r, a) {
179
179
  }
180
180
  }
181
181
 
182
- function PaymentForm() {
182
+ function PaymentForm(_ref) {
183
+ var amount = _ref.amount,
184
+ currency = _ref.currency,
185
+ currencyIcon = _ref.currencyIcon,
186
+ color = _ref.color,
187
+ _ref$formwidth = _ref.formwidth,
188
+ formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
189
+ _ref$formborderRadius = _ref.formborderRadius,
190
+ formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
191
+ _ref$formbackgroundCo = _ref.formbackgroundColor,
192
+ formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
193
+ companyLogo = _ref.companyLogo;
183
194
  var formRef = useRef();
184
195
  var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
185
196
  var shift4Ref = useRef(null);
186
197
  var componentsRef = useRef(null);
187
198
  var _useState = useState(""),
188
- _useState2 = _slicedToArray(_useState, 2),
189
- error = _useState2[0],
190
- setError = _useState2[1];
199
+ _useState2 = _slicedToArray(_useState, 2);
200
+ _useState2[0];
201
+ var setError = _useState2[1];
191
202
  var _useState3 = useState(""),
192
- _useState4 = _slicedToArray(_useState3, 2),
193
- success = _useState4[0],
194
- setSuccess = _useState4[1];
203
+ _useState4 = _slicedToArray(_useState3, 2);
204
+ _useState4[0];
205
+ var setSuccess = _useState4[1];
195
206
  var _useState5 = useState(false),
196
207
  _useState6 = _slicedToArray(_useState5, 2),
197
208
  isSubmitting = _useState6[0],
@@ -218,7 +229,7 @@ function PaymentForm() {
218
229
  document.body.appendChild(script);
219
230
  }, []);
220
231
  var handleSubmit = /*#__PURE__*/function () {
221
- var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
232
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
222
233
  var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t;
223
234
  return _regenerator().w(function (_context) {
224
235
  while (1) switch (_context.p = _context.n) {
@@ -258,8 +269,8 @@ function PaymentForm() {
258
269
  throw new Error("Card tokenization failed. Please check your details and try again.");
259
270
  case 6:
260
271
  request = {
261
- amount: 2499,
262
- currency: "USD",
272
+ amount: amount,
273
+ currency: currency,
263
274
  card: token.id
264
275
  };
265
276
  _context.n = 7;
@@ -314,70 +325,82 @@ function PaymentForm() {
314
325
  }, _callee, null, [[4, 12, 13, 14]]);
315
326
  }));
316
327
  return function handleSubmit(_x) {
317
- return _ref.apply(this, arguments);
328
+ return _ref2.apply(this, arguments);
318
329
  };
319
330
  }();
320
331
  return /*#__PURE__*/React.createElement("div", {
321
332
  style: {
322
333
  display: "flex",
323
334
  justifyContent: "center",
324
- alignItems: "center",
325
- minHeight: "100vh",
326
- backgroundColor: "#f0f2f5",
327
- // yumşaq fon
328
- padding: "20px"
335
+ width: "100%",
336
+ padding: "20px",
337
+ boxSizing: "border-box"
329
338
  }
330
- }, /*#__PURE__*/React.createElement("div", {
339
+ }, /*#__PURE__*/React.createElement("form", {
340
+ ref: formRef,
341
+ id: "payment-form",
342
+ onSubmit: handleSubmit,
343
+ method: "post",
331
344
  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)"
345
+ display: "grid",
346
+ gap: "12px",
347
+ padding: "24px",
348
+ backgroundColor: formbackgroundColor,
349
+ borderRadius: formborderRadius,
350
+ width: formwidth,
351
+ // səhifənin 1/4-ü
352
+ boxSizing: "border-box"
339
353
  }
340
- }, /*#__PURE__*/React.createElement("h2", {
354
+ }, /*#__PURE__*/React.createElement("div", {
341
355
  style: {
342
356
  textAlign: "center",
343
- marginBottom: "20px",
344
- color: "#333",
345
- fontWeight: "600"
357
+ marginBottom: 20
346
358
  }
347
- }, "Secure Payment"), /*#__PURE__*/React.createElement("div", {
348
- id: "payment-error",
349
- className: "alert alert-danger",
359
+ }, /*#__PURE__*/React.createElement("img", {
360
+ src: companyLogo,
361
+ alt: "Logo",
350
362
  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
+ height: "40px",
364
+ width: "auto",
365
+ marginBottom: 10
366
+ }
367
+ }), /*#__PURE__*/React.createElement("div", {
363
368
  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"
369
+ display: "flex",
370
+ alignItems: "center",
371
+ gap: "12px",
372
+ marginTop: 10
373
+ }
379
374
  }, /*#__PURE__*/React.createElement("div", {
380
- className: "grid gap-2"
375
+ style: {
376
+ flex: 1,
377
+ height: "1px",
378
+ backgroundColor: "#e5e7eb"
379
+ }
380
+ }), /*#__PURE__*/React.createElement("div", {
381
+ style: {
382
+ fontSize: "22px",
383
+ fontWeight: "700",
384
+ color: "#1f2937",
385
+ margin: "0 12px"
386
+ }
387
+ }, "Total Amount:"), /*#__PURE__*/React.createElement("div", {
388
+ style: {
389
+ fontSize: "22px",
390
+ fontWeight: "700",
391
+ color: "#16a34a"
392
+ }
393
+ }, currencyIcon, " ", Math.round(amount * 100)), /*#__PURE__*/React.createElement("div", {
394
+ style: {
395
+ flex: 1,
396
+ height: "1px",
397
+ backgroundColor: "#e5e7eb"
398
+ }
399
+ }))), /*#__PURE__*/React.createElement("div", {
400
+ style: {
401
+ display: "grid",
402
+ gap: "8px"
403
+ }
381
404
  }, /*#__PURE__*/React.createElement("label", {
382
405
  style: {
383
406
  fontWeight: "500",
@@ -388,15 +411,16 @@ function PaymentForm() {
388
411
  className: "form-control",
389
412
  style: {
390
413
  padding: "12px",
391
- borderRadius: "6px",
392
- border: "1px solid #ccc"
414
+ borderRadius: "10px",
415
+ border: "1px solid #ccc",
416
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
393
417
  }
394
418
  })), /*#__PURE__*/React.createElement("div", {
395
- className: "grid gap-2",
396
419
  style: {
397
- gridTemplateColumns: "1fr 1fr",
398
420
  display: "grid",
399
- gap: "10px"
421
+ gridTemplateColumns: "1fr 1fr",
422
+ gap: "10px",
423
+ marginTop: "12px"
400
424
  }
401
425
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
402
426
  style: {
@@ -408,8 +432,9 @@ function PaymentForm() {
408
432
  className: "form-control",
409
433
  style: {
410
434
  padding: "12px",
411
- borderRadius: "6px",
412
- border: "1px solid #ccc"
435
+ borderRadius: "10px",
436
+ border: "1px solid #ccc",
437
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
413
438
  }
414
439
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
415
440
  style: {
@@ -421,25 +446,26 @@ function PaymentForm() {
421
446
  className: "form-control",
422
447
  style: {
423
448
  padding: "12px",
424
- borderRadius: "6px",
425
- border: "1px solid #ccc"
449
+ borderRadius: "10px",
450
+ border: "1px solid #ccc",
451
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
426
452
  }
427
453
  }))), /*#__PURE__*/React.createElement("button", {
428
454
  type: "submit",
429
455
  disabled: !isReady || isSubmitting,
430
456
  style: {
457
+ marginTop: "16px",
431
458
  width: "100%",
432
459
  padding: "14px",
433
- backgroundColor: "#4f46e5",
460
+ backgroundColor: color,
434
461
  color: "white",
435
462
  border: "none",
436
- borderRadius: "8px",
463
+ borderRadius: "12px",
437
464
  fontWeight: "600",
438
- cursor: "pointer",
439
- opacity: !isReady || isSubmitting ? 0.7 : 1,
440
- marginTop: "10px"
465
+ cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
466
+ opacity: !isReady || isSubmitting ? 0.7 : 1
441
467
  }
442
- }, isSubmitting ? "Processing..." : "Buy now"))));
468
+ }, isSubmitting ? "Processing..." : "Buy now")));
443
469
  }
444
470
 
445
471
  export { PaymentForm };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "logix-payment-shift4",
3
- "version": "1.0.1",
3
+ "version": "1.0.4",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "description": "A React component library for integrating Shift4 payments with Logix applications.",
package/src/PaymentForm.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useRef, useState } from "react";
2
2
 
3
- export default function PaymentForm() {
3
+ export default function PaymentForm({amount,currency,currencyIcon,color,formwidth=400,formborderRadius=20,formbackgroundColor="#fff",companyLogo}) {
4
4
  const formRef = useRef();
5
5
  const initializedRef = useRef(false); // yalnız bir dəfə mount üçün
6
6
  const shift4Ref = useRef(null);
@@ -53,8 +53,8 @@ export default function PaymentForm() {
53
53
  }
54
54
 
55
55
  const request = {
56
- amount: 2499,
57
- currency: "USD",
56
+ amount: amount,
57
+ currency: currency,
58
58
  card: token.id,
59
59
  };
60
60
 
@@ -90,105 +90,117 @@ export default function PaymentForm() {
90
90
  };
91
91
 
92
92
  return (
93
- <div
93
+ <div
94
94
  style={{
95
95
  display: "flex",
96
96
  justifyContent: "center",
97
- alignItems: "center",
98
- minHeight: "100vh",
99
- backgroundColor: "#f0f2f5", // yumşaq fon
97
+ width: "100%",
100
98
  padding: "20px",
99
+ boxSizing: "border-box"
101
100
  }}
102
101
  >
103
- <div
102
+ <form
103
+ ref={formRef}
104
+ id="payment-form"
105
+ onSubmit={handleSubmit}
106
+ method="post"
104
107
  style={{
105
- width: "100%",
106
- maxWidth: "420px", // mobil üçün də uyğun
107
- padding: "30px",
108
- backgroundColor: "#ffffff",
109
- borderRadius: "12px",
110
- boxShadow: "0 6px 20px rgba(0,0,0,0.1)",
108
+ display: "grid",
109
+ gap: "12px",
110
+ padding: "24px",
111
+ backgroundColor: formbackgroundColor,
112
+ borderRadius: formborderRadius,
113
+ width: formwidth, // səhifənin 1/4-ü
114
+ boxSizing: "border-box"
111
115
  }}
112
116
  >
113
- <h2 style={{ textAlign: "center", marginBottom: "20px", color: "#333", fontWeight: "600" }}>
114
- Secure Payment
115
- </h2>
116
-
117
- <div
118
- id="payment-error"
119
- className="alert alert-danger"
120
- style={{
121
- marginBottom: "15px",
122
- padding: "10px",
123
- backgroundColor: "#ffe5e5",
124
- color: "#a00",
125
- borderRadius: "6px",
126
- display: error ? "block" : "none",
127
- }}
128
- role="alert"
129
- aria-live="polite"
130
- >
131
- {error}
117
+ {/* Logo + Total */}
118
+ <div style={{ textAlign: "center", marginBottom: 20 }}>
119
+ <img
120
+ src={companyLogo}
121
+ alt="Logo"
122
+ style={{ height: "40px", width: "auto", marginBottom: 10 }}
123
+ />
124
+
125
+ {/* Product Name + Price inline with line */}
126
+ <div style={{ display: "flex", alignItems: "center", gap: "12px", marginTop: 10 }}>
127
+ <div style={{ flex: 1, height: "1px", backgroundColor: "#e5e7eb" }} />
128
+ <div style={{ fontSize: "22px", fontWeight: "700", color: "#1f2937", margin: "0 12px" }}>
129
+ Total Amount:
130
+ </div>
131
+ <div style={{ fontSize: "22px", fontWeight: "700", color: "#16a34a" }}>
132
+ {currencyIcon} {Math.round(amount * 100)}
133
+ </div>
134
+ <div style={{ flex: 1, height: "1px", backgroundColor: "#e5e7eb" }} />
135
+ </div>
132
136
  </div>
133
137
 
134
- <div
135
- id="payment-success"
136
- className="alert alert-success"
137
- style={{
138
- marginBottom: "15px",
139
- padding: "10px",
140
- backgroundColor: "#e7f6eb",
141
- color: "#1c7c3a",
142
- borderRadius: "6px",
143
- display: success ? "block" : "none",
144
- }}
145
- role="status"
146
- aria-live="polite"
147
- >
148
- {success}
138
+ {/* Card Number */}
139
+ <div style={{ display: "grid", gap: "8px" }}>
140
+ <label style={{ fontWeight: "500", color: "#555" }}>Card number</label>
141
+ <div
142
+ data-shift4="number"
143
+ className="form-control"
144
+ style={{
145
+ padding: "12px",
146
+ borderRadius: "10px",
147
+ border: "1px solid #ccc",
148
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
149
+ }}
150
+ />
149
151
  </div>
150
152
 
151
- <form ref={formRef} id="payment-form" className="grid gap-5" onSubmit={handleSubmit} method="post">
152
- {/* Card Number */}
153
- <div className="grid gap-2">
154
- <label style={{ fontWeight: "500", color: "#555" }}>Card number</label>
155
- <div data-shift4="number" className="form-control" style={{ padding: "12px", borderRadius: "6px", border: "1px solid #ccc" }}></div>
153
+ {/* Expiration + CVC */}
154
+ <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px", marginTop: "12px" }}>
155
+ <div>
156
+ <label style={{ fontWeight: "500", color: "#555" }}>Expiration</label>
157
+ <div
158
+ data-shift4="expiry"
159
+ className="form-control"
160
+ style={{
161
+ padding: "12px",
162
+ borderRadius: "10px",
163
+ border: "1px solid #ccc",
164
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
165
+ }}
166
+ />
156
167
  </div>
157
-
158
- {/* Expiration + CVC */}
159
- <div className="grid gap-2" style={{ gridTemplateColumns: "1fr 1fr", display: "grid", gap: "10px" }}>
160
- <div>
161
- <label style={{ fontWeight: "500", color: "#555" }}>Expiration</label>
162
- <div data-shift4="expiry" className="form-control" style={{ padding: "12px", borderRadius: "6px", border: "1px solid #ccc" }}></div>
163
- </div>
164
-
165
- <div>
166
- <label style={{ fontWeight: "500", color: "#555" }}>CVC</label>
167
- <div data-shift4="cvc" className="form-control" style={{ padding: "12px", borderRadius: "6px", border: "1px solid #ccc" }}></div>
168
- </div>
168
+ <div>
169
+ <label style={{ fontWeight: "500", color: "#555" }}>CVC</label>
170
+ <div
171
+ data-shift4="cvc"
172
+ className="form-control"
173
+ style={{
174
+ padding: "12px",
175
+ borderRadius: "10px",
176
+ border: "1px solid #ccc",
177
+ boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
178
+ }}
179
+ />
169
180
  </div>
181
+ </div>
170
182
 
171
- {/* Submit Button */}
172
- <button
173
- type="submit"
174
- disabled={!isReady || isSubmitting}
175
- style={{
176
- width: "100%",
177
- padding: "14px",
178
- backgroundColor: "#4f46e5",
179
- color: "white",
180
- border: "none",
181
- borderRadius: "8px",
182
- fontWeight: "600",
183
- cursor: "pointer",
184
- opacity: !isReady || isSubmitting ? 0.7 : 1,
185
- marginTop: "10px",
186
- }}
187
- >
188
- {isSubmitting ? "Processing..." : "Buy now"}
189
- </button>
190
- </form>
191
- </div>
183
+ {/* Submit Button */}
184
+ <button
185
+ type="submit"
186
+ disabled={!isReady || isSubmitting}
187
+ style={{
188
+ marginTop: "16px",
189
+ width: "100%",
190
+ padding: "14px",
191
+ backgroundColor: color,
192
+ color: "white",
193
+ border: "none",
194
+ borderRadius: "12px",
195
+ fontWeight: "600",
196
+ cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
197
+ opacity: !isReady || isSubmitting ? 0.7 : 1
198
+ }}
199
+ >
200
+ {isSubmitting ? "Processing..." : "Buy now"}
201
+ </button>
202
+ </form>
192
203
  </div>
204
+
193
205
  );
194
206
  }