@easypayment/medusa-paypal-ui 1.0.37 → 1.0.39

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