@easypayment/medusa-paypal-ui 1.0.37 → 1.0.38

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 (6) hide show
  1. package/dist/index.cjs +246 -188
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +246 -188
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/PayPalAdvancedCard.tsx +150 -91
package/dist/index.cjs CHANGED
@@ -296,43 +296,45 @@ function PayPalSmartButtons(props) {
296
296
  var SPIN_STYLE2 = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
297
297
  var cardStyle = {
298
298
  input: {
299
- "font-size": "16px",
300
- "font-family": "Helvetica, Arial, sans-serif",
299
+ "font-size": "15px",
300
+ "font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
301
301
  "font-weight": "400",
302
- color: "#2f2f2f",
302
+ color: "#111827",
303
303
  padding: "0 14px",
304
- height: "44px",
305
- "border-radius": "4px",
306
- border: "1px solid #c7c7c7",
304
+ height: "42px",
305
+ "border-radius": "8px",
306
+ border: "1px solid #d1d5db",
307
307
  background: "#ffffff",
308
- "box-shadow": "none"
308
+ "box-shadow": "none",
309
+ transition: "border-color 0.15s ease"
309
310
  },
310
311
  "::placeholder": {
311
- color: "#a0aec0"
312
+ color: "#9ca3af"
312
313
  },
313
314
  ".invalid": {
314
- color: "#b42318",
315
- border: "1px solid #d92d20",
315
+ color: "#dc2626",
316
+ border: "1px solid #fca5a5",
317
+ background: "#fff7f7",
316
318
  "box-shadow": "none"
317
319
  },
318
320
  ".valid": {
319
- color: "#2f2f2f",
320
- border: "1px solid #c7c7c7",
321
+ color: "#111827",
322
+ border: "1px solid #d1d5db",
321
323
  "box-shadow": "none"
322
324
  },
323
325
  "input:focus": {
324
326
  outline: "none",
325
- border: "1px solid #c7c7c7",
326
- "box-shadow": "none"
327
+ border: "1px solid #2563eb",
328
+ "box-shadow": "0 0 0 3px rgba(37,99,235,0.12)"
327
329
  }
328
330
  };
329
331
  var labelStyle = {
330
332
  display: "block",
331
- fontSize: 15,
332
- lineHeight: "22px",
333
- fontWeight: 700,
334
- color: "#4a4a4a",
335
- marginBottom: 10
333
+ fontSize: 13,
334
+ fontWeight: 500,
335
+ color: "#374151",
336
+ marginBottom: 6,
337
+ letterSpacing: "0.01em"
336
338
  };
337
339
  function SubmitButton({
338
340
  disabled,
@@ -340,29 +342,43 @@ function SubmitButton({
340
342
  onSubmit
341
343
  }) {
342
344
  const { cardFieldsForm } = reactPaypalJs.usePayPalCardFields();
345
+ const isDisabled = disabled || !cardFieldsForm;
343
346
  return /* @__PURE__ */ jsxRuntime.jsx(
344
347
  "button",
345
348
  {
346
349
  type: "button",
347
- disabled: disabled || !cardFieldsForm,
350
+ disabled: isDisabled,
348
351
  onClick: () => {
349
352
  onSubmit();
350
353
  cardFieldsForm?.submit();
351
354
  },
352
355
  style: {
353
356
  width: "100%",
354
- height: 52,
355
- padding: "0 16px",
356
- borderRadius: 4,
357
- border: "1px solid #c7c7c7",
358
- background: "#f5f5f5",
359
- color: "#2f363d",
360
- fontSize: 16,
361
- fontWeight: 700,
362
- fontFamily: "Helvetica, Arial, sans-serif",
363
- cursor: disabled ? "not-allowed" : "pointer",
364
- opacity: disabled ? 0.7 : 1,
365
- boxShadow: "none"
357
+ height: 48,
358
+ padding: "0 20px",
359
+ borderRadius: 8,
360
+ border: "none",
361
+ background: isDisabled ? "#e5e7eb" : "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)",
362
+ color: isDisabled ? "#9ca3af" : "#ffffff",
363
+ fontSize: 15,
364
+ fontWeight: 600,
365
+ fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
366
+ cursor: isDisabled ? "not-allowed" : "pointer",
367
+ letterSpacing: "0.01em",
368
+ boxShadow: isDisabled ? "none" : "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)",
369
+ transition: "all 0.15s ease"
370
+ },
371
+ onMouseEnter: (e) => {
372
+ if (!isDisabled) {
373
+ e.target.style.background = "linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%)";
374
+ e.target.style.boxShadow = "0 4px 6px rgba(37,99,235,0.35), 0 2px 4px rgba(0,0,0,0.06)";
375
+ }
376
+ },
377
+ onMouseLeave: (e) => {
378
+ if (!isDisabled) {
379
+ e.target.style.background = "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)";
380
+ e.target.style.boxShadow = "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)";
381
+ }
366
382
  },
367
383
  children: label
368
384
  }
@@ -382,174 +398,216 @@ function PayPalAdvancedCard(props) {
382
398
  "div",
383
399
  {
384
400
  style: {
385
- padding: 12,
386
- border: "1px solid #ddd",
387
- borderRadius: 4,
401
+ padding: "12px 16px",
402
+ background: "#fefce8",
403
+ border: "1px solid #fde68a",
404
+ borderRadius: 8,
388
405
  fontSize: 13,
389
- color: "#3c434a"
406
+ color: "#92400e"
390
407
  },
391
- children: "CardFields unavailable: missing client_token from backend."
408
+ children: "Card fields unavailable \u2014 missing client token from backend."
392
409
  }
393
410
  );
394
411
  }
395
412
  const isSandbox = config.environment === "sandbox";
396
- return (
397
- // ── ADDED: wrapper div with position relative so overlay works ────────────
398
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
399
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: SPIN_STYLE2 }),
400
- submitting && /* @__PURE__ */ jsxRuntime.jsxs(
401
- "div",
402
- {
403
- style: {
404
- position: "absolute",
405
- inset: 0,
406
- zIndex: 20,
407
- background: "rgba(255,255,255,0.90)",
408
- borderRadius: 8,
409
- display: "flex",
410
- flexDirection: "column",
411
- alignItems: "center",
412
- justifyContent: "center",
413
- gap: 12,
414
- minHeight: 120
415
- },
416
- children: [
417
- /* @__PURE__ */ jsxRuntime.jsx(
418
- "div",
419
- {
420
- style: {
421
- width: 32,
422
- height: 32,
423
- borderRadius: "50%",
424
- border: "2.5px solid #e5e7eb",
425
- borderTopColor: "#1877f2",
426
- animation: "_pp_spin .7s linear infinite"
427
- }
413
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
414
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: SPIN_STYLE2 }),
415
+ submitting && /* @__PURE__ */ jsxRuntime.jsxs(
416
+ "div",
417
+ {
418
+ style: {
419
+ position: "absolute",
420
+ inset: 0,
421
+ zIndex: 20,
422
+ background: "rgba(255,255,255,0.92)",
423
+ borderRadius: 12,
424
+ display: "flex",
425
+ flexDirection: "column",
426
+ alignItems: "center",
427
+ justifyContent: "center",
428
+ gap: 14,
429
+ minHeight: 180
430
+ },
431
+ children: [
432
+ /* @__PURE__ */ jsxRuntime.jsx(
433
+ "div",
434
+ {
435
+ style: {
436
+ width: 36,
437
+ height: 36,
438
+ borderRadius: "50%",
439
+ border: "3px solid #dbeafe",
440
+ borderTopColor: "#2563eb",
441
+ animation: "_pp_spin .75s linear infinite"
428
442
  }
429
- ),
430
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
431
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, fontWeight: 500, color: "#111827" }, children: "Processing your payment\u2026" }),
432
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
433
- ] })
434
- ]
435
- }
436
- ),
437
- /* @__PURE__ */ jsxRuntime.jsx(
438
- reactPaypalJs.PayPalCardFieldsProvider,
439
- {
440
- style: cardStyle,
441
- createOrder: async () => {
442
- setError(null);
443
- const r = await api.createOrder(cartId);
444
- return r.id;
445
- },
446
- onApprove: async (data) => {
447
- try {
448
- setError(null);
449
- const orderId = String(data?.orderID || "");
450
- const result = await api.captureOrder(cartId, orderId);
451
- onPaid?.(result);
452
- } catch (e) {
453
- const msg = e instanceof Error ? e.message : "Card payment failed";
454
- setError(msg);
455
- onError?.(msg);
456
- setSubmitting(false);
457
443
  }
458
- },
459
- onCancel: () => {
460
- setSubmitting(false);
461
- },
462
- onError: (e) => {
463
- const msg = e instanceof Error ? e.message : e?.message || "CardFields error";
444
+ ),
445
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
446
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 15, fontWeight: 600, color: "#111827" }, children: "Processing your payment\u2026" }),
447
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
448
+ ] })
449
+ ]
450
+ }
451
+ ),
452
+ /* @__PURE__ */ jsxRuntime.jsx(
453
+ reactPaypalJs.PayPalCardFieldsProvider,
454
+ {
455
+ style: cardStyle,
456
+ createOrder: async () => {
457
+ setError(null);
458
+ const r = await api.createOrder(cartId);
459
+ return r.id;
460
+ },
461
+ onApprove: async (data) => {
462
+ try {
463
+ setError(null);
464
+ const orderId = String(data?.orderID || "");
465
+ const result = await api.captureOrder(cartId, orderId);
466
+ onPaid?.(result);
467
+ } catch (e) {
468
+ const msg = e instanceof Error ? e.message : "Card payment failed";
464
469
  setError(msg);
465
470
  onError?.(msg);
466
471
  setSubmitting(false);
467
- },
468
- children: /* @__PURE__ */ jsxRuntime.jsxs(
469
- "div",
470
- {
471
- style: {
472
- display: "grid",
473
- gap: 18,
474
- width: "100%",
475
- maxWidth: 516
476
- },
477
- children: [
478
- isSandbox && /* @__PURE__ */ jsxRuntime.jsxs(
479
- "div",
480
- {
481
- style: {
482
- fontSize: 15,
483
- lineHeight: 1.5,
484
- color: "#4a4a4a",
485
- marginBottom: 2
486
- },
487
- children: [
488
- "Sandbox Mode Enabled.",
489
- /* @__PURE__ */ jsxRuntime.jsx("br", {}),
490
- "Use test card ",
491
- /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "4111 1111 1111 1111" }),
492
- " with any future expiration date and any CVV."
493
- ]
494
- }
495
- ),
496
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%" }, children: [
497
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Card number" }),
498
- /* @__PURE__ */ jsxRuntime.jsx(reactPaypalJs.PayPalNumberField, {})
499
- ] }),
500
- /* @__PURE__ */ jsxRuntime.jsxs(
501
- "div",
502
- {
503
- style: {
504
- display: "grid",
505
- gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
506
- columnGap: 18,
507
- alignItems: "start"
508
- },
509
- children: [
510
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
511
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Expiration date" }),
512
- /* @__PURE__ */ jsxRuntime.jsx(reactPaypalJs.PayPalExpiryField, {})
513
- ] }),
514
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
515
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Security code" }),
516
- /* @__PURE__ */ jsxRuntime.jsx(reactPaypalJs.PayPalCVVField, {})
517
- ] })
518
- ]
519
- }
520
- ),
521
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
522
- SubmitButton,
523
- {
524
- disabled: submitting,
525
- label: submitting ? "Processing..." : "Pay by Card",
526
- onSubmit: () => {
527
- setError(null);
528
- setSubmitting(true);
529
- }
530
- }
531
- ) }),
532
- error ? /* @__PURE__ */ jsxRuntime.jsx(
533
- "div",
534
- {
535
- style: {
536
- padding: "8px 12px",
537
- background: "#fef2f2",
538
- border: "1px solid #fecaca",
539
- borderRadius: 6,
540
- fontSize: 13,
541
- color: "#b91c1c"
542
- },
543
- children: error
472
+ }
473
+ },
474
+ onCancel: () => {
475
+ setSubmitting(false);
476
+ },
477
+ onError: (e) => {
478
+ const msg = e instanceof Error ? e.message : e?.message || "CardFields error";
479
+ setError(msg);
480
+ onError?.(msg);
481
+ setSubmitting(false);
482
+ },
483
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
484
+ "div",
485
+ {
486
+ style: {
487
+ display: "flex",
488
+ flexDirection: "column",
489
+ gap: 16,
490
+ width: "100%"
491
+ },
492
+ children: [
493
+ isSandbox && /* @__PURE__ */ jsxRuntime.jsxs(
494
+ "div",
495
+ {
496
+ style: {
497
+ display: "flex",
498
+ alignItems: "flex-start",
499
+ gap: 10,
500
+ padding: "10px 14px",
501
+ background: "#eff6ff",
502
+ border: "1px solid #bfdbfe",
503
+ borderRadius: 8,
504
+ fontSize: 13,
505
+ color: "#1e40af",
506
+ lineHeight: 1.55
507
+ },
508
+ children: [
509
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 15, flexShrink: 0, marginTop: 1 }, children: "\u{1F9EA}" }),
510
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
511
+ "Sandbox mode \u2014 use test card",
512
+ " ",
513
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontFamily: "monospace", letterSpacing: "0.05em" }, children: "4111 1111 1111 1111" }),
514
+ " ",
515
+ "with any future date and any CVV."
516
+ ] })
517
+ ]
518
+ }
519
+ ),
520
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
521
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Card number" }),
522
+ /* @__PURE__ */ jsxRuntime.jsx(reactPaypalJs.PayPalNumberField, {})
523
+ ] }),
524
+ /* @__PURE__ */ jsxRuntime.jsxs(
525
+ "div",
526
+ {
527
+ style: {
528
+ display: "grid",
529
+ gridTemplateColumns: "1fr 1fr",
530
+ gap: 16
531
+ },
532
+ children: [
533
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
534
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Expiration date" }),
535
+ /* @__PURE__ */ jsxRuntime.jsx(reactPaypalJs.PayPalExpiryField, {})
536
+ ] }),
537
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
538
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Security code" }),
539
+ /* @__PURE__ */ jsxRuntime.jsx(reactPaypalJs.PayPalCVVField, {})
540
+ ] })
541
+ ]
542
+ }
543
+ ),
544
+ /* @__PURE__ */ jsxRuntime.jsxs(
545
+ "div",
546
+ {
547
+ style: {
548
+ display: "flex",
549
+ alignItems: "center",
550
+ gap: 6,
551
+ fontSize: 12,
552
+ color: "#6b7280"
553
+ },
554
+ children: [
555
+ /* @__PURE__ */ jsxRuntime.jsx(
556
+ "svg",
557
+ {
558
+ width: "14",
559
+ height: "14",
560
+ viewBox: "0 0 24 24",
561
+ fill: "none",
562
+ stroke: "#10b981",
563
+ strokeWidth: "2.5",
564
+ strokeLinecap: "round",
565
+ strokeLinejoin: "round",
566
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
567
+ }
568
+ ),
569
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Your payment is secured with 256-bit SSL encryption" })
570
+ ]
571
+ }
572
+ ),
573
+ /* @__PURE__ */ jsxRuntime.jsx(
574
+ SubmitButton,
575
+ {
576
+ disabled: submitting,
577
+ label: submitting ? "Processing\u2026" : "Pay by Card",
578
+ onSubmit: () => {
579
+ setError(null);
580
+ setSubmitting(true);
544
581
  }
545
- ) : null
546
- ]
547
- }
548
- )
549
- }
550
- )
551
- ] })
552
- );
582
+ }
583
+ ),
584
+ error && /* @__PURE__ */ jsxRuntime.jsxs(
585
+ "div",
586
+ {
587
+ style: {
588
+ display: "flex",
589
+ alignItems: "flex-start",
590
+ gap: 10,
591
+ padding: "10px 14px",
592
+ background: "#fef2f2",
593
+ border: "1px solid #fecaca",
594
+ borderRadius: 8,
595
+ fontSize: 13,
596
+ color: "#b91c1c",
597
+ lineHeight: 1.5
598
+ },
599
+ children: [
600
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flexShrink: 0, marginTop: 1 }, children: "\u26A0\uFE0F" }),
601
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
602
+ ]
603
+ }
604
+ )
605
+ ]
606
+ }
607
+ )
608
+ }
609
+ )
610
+ ] });
553
611
  }
554
612
  var DEFAULT_PAYPAL_PROVIDER_ID = "pp_paypal_paypal";
555
613
  var DEFAULT_PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";