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