@easypayment/medusa-paypal-ui 1.0.44 → 1.0.46
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/README.md +134 -192
- package/dist/index.cjs +227 -167
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -136
- package/dist/index.d.ts +10 -136
- package/dist/index.mjs +183 -143
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -2
- package/src/adapters/MedusaNextPayPalAdapter.tsx +3 -3
- package/src/client/http.ts +10 -6
- package/src/client/paypal.ts +20 -0
- package/src/client/types.ts +1 -1
- package/src/components/PayPalAdvancedCard.tsx +3 -22
- package/src/components/PayPalCurrencyNotice.tsx +19 -19
- package/src/components/PayPalProvider.tsx +0 -1
- package/src/components/PayPalSmartButtons.tsx +2 -21
- package/src/hooks/usePayPalConfig.ts +2 -0
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
|
|
2
|
-
import { PayPalScriptProvider, PayPalButtons, PayPalCardFieldsProvider, PayPalNumberField, PayPalExpiryField, PayPalCVVField, usePayPalCardFields } from '@paypal/react-paypal-js';
|
|
3
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
1
|
// src/client/http.ts
|
|
6
2
|
function toHeaderRecord(headers) {
|
|
7
3
|
if (!headers) {
|
|
@@ -39,25 +35,44 @@ function createHttpClient(opts) {
|
|
|
39
35
|
"[PayPal] Forbidden (403) \u2014 this request is not allowed. Check your CORS and API key settings."
|
|
40
36
|
);
|
|
41
37
|
}
|
|
42
|
-
throw new Error(
|
|
38
|
+
throw new Error(
|
|
39
|
+
text.slice(0, 500).replace(/<[^>]*>/g, "") || `Request failed (${res.status})`
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
if (!text) {
|
|
43
|
+
throw new Error(`[PayPal] Empty response body from ${path} (${res.status})`);
|
|
43
44
|
}
|
|
44
|
-
if (!text) return {};
|
|
45
45
|
const contentType = res.headers.get("content-type") || "";
|
|
46
46
|
if (!contentType.includes("application/json")) {
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
throw new Error(
|
|
48
|
+
`[PayPal] Unexpected non-JSON response (${contentType}) from ${path}`
|
|
49
|
+
);
|
|
49
50
|
}
|
|
50
51
|
try {
|
|
51
52
|
return JSON.parse(text);
|
|
52
53
|
} catch {
|
|
53
|
-
|
|
54
|
-
return {};
|
|
54
|
+
throw new Error(`[PayPal] Failed to parse JSON response from ${path}`);
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
return { request };
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
// src/client/paypal.ts
|
|
61
|
+
async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
|
|
62
|
+
try {
|
|
63
|
+
await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
|
|
64
|
+
method: "POST",
|
|
65
|
+
headers: {
|
|
66
|
+
"Content-Type": "application/json",
|
|
67
|
+
...publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}
|
|
68
|
+
},
|
|
69
|
+
body: JSON.stringify({ cart_id: cartId }),
|
|
70
|
+
credentials: "include"
|
|
71
|
+
});
|
|
72
|
+
} catch (e) {
|
|
73
|
+
console.warn("[PayPal] paypal-complete call failed:", e);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
61
76
|
function createPayPalStoreApi(opts) {
|
|
62
77
|
const http = createHttpClient(opts);
|
|
63
78
|
return {
|
|
@@ -84,6 +99,9 @@ function createPayPalStoreApi(opts) {
|
|
|
84
99
|
}
|
|
85
100
|
};
|
|
86
101
|
}
|
|
102
|
+
|
|
103
|
+
// src/hooks/usePayPalConfig.ts
|
|
104
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
87
105
|
var _cache = /* @__PURE__ */ new Map();
|
|
88
106
|
var CACHE_TTL = 5 * 60 * 1e3;
|
|
89
107
|
function cacheKey(baseUrl, cartId) {
|
|
@@ -146,13 +164,17 @@ function usePayPalConfig({
|
|
|
146
164
|
}, [api, baseUrl, cartId, enabled]);
|
|
147
165
|
return { config, loading, error };
|
|
148
166
|
}
|
|
167
|
+
|
|
168
|
+
// src/components/PayPalProvider.tsx
|
|
169
|
+
import { useMemo as useMemo2 } from "react";
|
|
170
|
+
import { PayPalScriptProvider } from "@paypal/react-paypal-js";
|
|
171
|
+
import { jsx } from "react/jsx-runtime";
|
|
149
172
|
var BN_CODE = "MBJTechnolabs_SI_SPB";
|
|
150
173
|
function PayPalProvider(props) {
|
|
151
174
|
const { config, intent = "capture", disableFunding, children } = props;
|
|
152
|
-
const options =
|
|
175
|
+
const options = useMemo2(() => {
|
|
153
176
|
return {
|
|
154
177
|
clientId: config.client_id,
|
|
155
|
-
"client-id": config.client_id,
|
|
156
178
|
currency: config.currency,
|
|
157
179
|
intent,
|
|
158
180
|
components: config.client_token ? "buttons,card-fields" : "buttons",
|
|
@@ -170,13 +192,21 @@ function PayPalProvider(props) {
|
|
|
170
192
|
`${options.clientId}-${options["data-client-token"] ?? "no-token"}`
|
|
171
193
|
);
|
|
172
194
|
}
|
|
195
|
+
|
|
196
|
+
// src/components/PayPalCurrencyNotice.tsx
|
|
197
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
173
198
|
function PayPalCurrencyNotice({ config }) {
|
|
174
199
|
if (config.currency_supported) return null;
|
|
175
200
|
return /* @__PURE__ */ jsxs("div", { style: { padding: 12, border: "1px solid #ddd", borderRadius: 10 }, children: [
|
|
176
|
-
/* @__PURE__ */
|
|
177
|
-
/* @__PURE__ */
|
|
201
|
+
/* @__PURE__ */ jsx2("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "PayPal currency issue" }),
|
|
202
|
+
/* @__PURE__ */ jsx2("ul", { style: { margin: 0, paddingLeft: 18 }, children: (config.currency_errors || []).map((e) => /* @__PURE__ */ jsx2("li", { children: e }, e)) })
|
|
178
203
|
] });
|
|
179
204
|
}
|
|
205
|
+
|
|
206
|
+
// src/components/PayPalSmartButtons.tsx
|
|
207
|
+
import { useMemo as useMemo3, useState as useState2 } from "react";
|
|
208
|
+
import { PayPalButtons } from "@paypal/react-paypal-js";
|
|
209
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
180
210
|
var SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
|
|
181
211
|
var BUTTON_WIDTH_MAP = {
|
|
182
212
|
small: "300px",
|
|
@@ -184,34 +214,19 @@ var BUTTON_WIDTH_MAP = {
|
|
|
184
214
|
large: "500px",
|
|
185
215
|
responsive: "100%"
|
|
186
216
|
};
|
|
187
|
-
async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
|
|
188
|
-
try {
|
|
189
|
-
await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
|
|
190
|
-
method: "POST",
|
|
191
|
-
headers: {
|
|
192
|
-
"Content-Type": "application/json",
|
|
193
|
-
...publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}
|
|
194
|
-
},
|
|
195
|
-
body: JSON.stringify({ cart_id: cartId }),
|
|
196
|
-
credentials: "include"
|
|
197
|
-
});
|
|
198
|
-
} catch (e) {
|
|
199
|
-
console.warn("[PayPal] paypal-complete call failed:", e);
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
217
|
function PayPalSmartButtons(props) {
|
|
203
218
|
const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props;
|
|
204
|
-
const api =
|
|
219
|
+
const api = useMemo3(
|
|
205
220
|
() => createPayPalStoreApi({ baseUrl, publishableApiKey }),
|
|
206
221
|
[baseUrl, publishableApiKey]
|
|
207
222
|
);
|
|
208
|
-
const [error, setError] =
|
|
209
|
-
const [processing, setProcessing] =
|
|
223
|
+
const [error, setError] = useState2(null);
|
|
224
|
+
const [processing, setProcessing] = useState2(false);
|
|
210
225
|
if (!config.currency_supported) return null;
|
|
211
226
|
const containerWidth = BUTTON_WIDTH_MAP[config.button_width ?? "responsive"] ?? "100%";
|
|
212
|
-
return /* @__PURE__ */
|
|
213
|
-
/* @__PURE__ */
|
|
214
|
-
processing && /* @__PURE__ */
|
|
227
|
+
return /* @__PURE__ */ jsxs2("div", { style: { width: containerWidth, position: "relative" }, children: [
|
|
228
|
+
/* @__PURE__ */ jsx3("style", { children: SPIN_STYLE }),
|
|
229
|
+
processing && /* @__PURE__ */ jsxs2(
|
|
215
230
|
"div",
|
|
216
231
|
{
|
|
217
232
|
style: {
|
|
@@ -228,7 +243,7 @@ function PayPalSmartButtons(props) {
|
|
|
228
243
|
minHeight: 60
|
|
229
244
|
},
|
|
230
245
|
children: [
|
|
231
|
-
/* @__PURE__ */
|
|
246
|
+
/* @__PURE__ */ jsx3(
|
|
232
247
|
"div",
|
|
233
248
|
{
|
|
234
249
|
style: {
|
|
@@ -241,14 +256,14 @@ function PayPalSmartButtons(props) {
|
|
|
241
256
|
}
|
|
242
257
|
}
|
|
243
258
|
),
|
|
244
|
-
/* @__PURE__ */
|
|
245
|
-
/* @__PURE__ */
|
|
246
|
-
/* @__PURE__ */
|
|
259
|
+
/* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
|
|
260
|
+
/* @__PURE__ */ jsx3("div", { style: { fontSize: 13, color: "#374151", fontWeight: 500 }, children: "Processing your payment\u2026" }),
|
|
261
|
+
/* @__PURE__ */ jsx3("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
|
|
247
262
|
] })
|
|
248
263
|
]
|
|
249
264
|
}
|
|
250
265
|
),
|
|
251
|
-
config.environment === "sandbox" && /* @__PURE__ */
|
|
266
|
+
config.environment === "sandbox" && /* @__PURE__ */ jsxs2(
|
|
252
267
|
"div",
|
|
253
268
|
{
|
|
254
269
|
style: {
|
|
@@ -265,7 +280,7 @@ function PayPalSmartButtons(props) {
|
|
|
265
280
|
marginBottom: 10
|
|
266
281
|
},
|
|
267
282
|
children: [
|
|
268
|
-
/* @__PURE__ */
|
|
283
|
+
/* @__PURE__ */ jsxs2(
|
|
269
284
|
"svg",
|
|
270
285
|
{
|
|
271
286
|
width: "16",
|
|
@@ -277,16 +292,16 @@ function PayPalSmartButtons(props) {
|
|
|
277
292
|
strokeLinecap: "round",
|
|
278
293
|
style: { flexShrink: 0, marginTop: 1 },
|
|
279
294
|
children: [
|
|
280
|
-
/* @__PURE__ */
|
|
281
|
-
/* @__PURE__ */
|
|
295
|
+
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
|
|
296
|
+
/* @__PURE__ */ jsx3("path", { d: "M12 8v4M12 16h.01" })
|
|
282
297
|
]
|
|
283
298
|
}
|
|
284
299
|
),
|
|
285
|
-
/* @__PURE__ */
|
|
300
|
+
/* @__PURE__ */ jsx3("span", { children: "Sandbox mode \u2014 you will not be charged. Use your PayPal sandbox account to complete the payment." })
|
|
286
301
|
]
|
|
287
302
|
}
|
|
288
303
|
),
|
|
289
|
-
/* @__PURE__ */
|
|
304
|
+
/* @__PURE__ */ jsx3(
|
|
290
305
|
PayPalButtons,
|
|
291
306
|
{
|
|
292
307
|
style: {
|
|
@@ -313,6 +328,7 @@ function PayPalSmartButtons(props) {
|
|
|
313
328
|
const msg = e instanceof Error ? e.message : "Payment capture failed";
|
|
314
329
|
setError(msg);
|
|
315
330
|
onError?.(msg);
|
|
331
|
+
} finally {
|
|
316
332
|
setProcessing(false);
|
|
317
333
|
}
|
|
318
334
|
},
|
|
@@ -327,7 +343,7 @@ function PayPalSmartButtons(props) {
|
|
|
327
343
|
}
|
|
328
344
|
}
|
|
329
345
|
),
|
|
330
|
-
error ? /* @__PURE__ */
|
|
346
|
+
error ? /* @__PURE__ */ jsxs2(
|
|
331
347
|
"div",
|
|
332
348
|
{
|
|
333
349
|
style: {
|
|
@@ -344,13 +360,24 @@ function PayPalSmartButtons(props) {
|
|
|
344
360
|
lineHeight: 1.5
|
|
345
361
|
},
|
|
346
362
|
children: [
|
|
347
|
-
/* @__PURE__ */
|
|
348
|
-
/* @__PURE__ */
|
|
363
|
+
/* @__PURE__ */ jsx3("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
|
|
364
|
+
/* @__PURE__ */ jsx3("span", { children: error })
|
|
349
365
|
]
|
|
350
366
|
}
|
|
351
367
|
) : null
|
|
352
368
|
] });
|
|
353
369
|
}
|
|
370
|
+
|
|
371
|
+
// src/components/PayPalAdvancedCard.tsx
|
|
372
|
+
import { useMemo as useMemo4, useState as useState3 } from "react";
|
|
373
|
+
import {
|
|
374
|
+
PayPalCardFieldsProvider,
|
|
375
|
+
PayPalNumberField,
|
|
376
|
+
PayPalExpiryField,
|
|
377
|
+
PayPalCVVField,
|
|
378
|
+
usePayPalCardFields
|
|
379
|
+
} from "@paypal/react-paypal-js";
|
|
380
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
354
381
|
var SPIN_STYLE2 = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
|
|
355
382
|
var cardStyle = {
|
|
356
383
|
input: {
|
|
@@ -394,21 +421,6 @@ var labelStyle = {
|
|
|
394
421
|
marginBottom: 6,
|
|
395
422
|
letterSpacing: "0.01em"
|
|
396
423
|
};
|
|
397
|
-
async function markPaymentComplete2(baseUrl, cartId, publishableApiKey) {
|
|
398
|
-
try {
|
|
399
|
-
await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
|
|
400
|
-
method: "POST",
|
|
401
|
-
headers: {
|
|
402
|
-
"Content-Type": "application/json",
|
|
403
|
-
...publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}
|
|
404
|
-
},
|
|
405
|
-
body: JSON.stringify({ cart_id: cartId }),
|
|
406
|
-
credentials: "include"
|
|
407
|
-
});
|
|
408
|
-
} catch (e) {
|
|
409
|
-
console.warn("[PayPal Card] paypal-complete call failed:", e);
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
424
|
function SubmitButton({
|
|
413
425
|
disabled,
|
|
414
426
|
label,
|
|
@@ -416,7 +428,7 @@ function SubmitButton({
|
|
|
416
428
|
}) {
|
|
417
429
|
const { cardFieldsForm } = usePayPalCardFields();
|
|
418
430
|
const isDisabled = disabled || !cardFieldsForm;
|
|
419
|
-
return /* @__PURE__ */
|
|
431
|
+
return /* @__PURE__ */ jsx4(
|
|
420
432
|
"button",
|
|
421
433
|
{
|
|
422
434
|
type: "button",
|
|
@@ -443,12 +455,14 @@ function SubmitButton({
|
|
|
443
455
|
},
|
|
444
456
|
onMouseEnter: (e) => {
|
|
445
457
|
if (!isDisabled) {
|
|
458
|
+
;
|
|
446
459
|
e.target.style.background = "linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%)";
|
|
447
460
|
e.target.style.boxShadow = "0 4px 6px rgba(37,99,235,0.35), 0 2px 4px rgba(0,0,0,0.06)";
|
|
448
461
|
}
|
|
449
462
|
},
|
|
450
463
|
onMouseLeave: (e) => {
|
|
451
464
|
if (!isDisabled) {
|
|
465
|
+
;
|
|
452
466
|
e.target.style.background = "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)";
|
|
453
467
|
e.target.style.boxShadow = "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)";
|
|
454
468
|
}
|
|
@@ -459,15 +473,15 @@ function SubmitButton({
|
|
|
459
473
|
}
|
|
460
474
|
function PayPalAdvancedCard(props) {
|
|
461
475
|
const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props;
|
|
462
|
-
const api =
|
|
476
|
+
const api = useMemo4(
|
|
463
477
|
() => createPayPalStoreApi({ baseUrl, publishableApiKey }),
|
|
464
478
|
[baseUrl, publishableApiKey]
|
|
465
479
|
);
|
|
466
|
-
const [error, setError] =
|
|
467
|
-
const [submitting, setSubmitting] =
|
|
480
|
+
const [error, setError] = useState3(null);
|
|
481
|
+
const [submitting, setSubmitting] = useState3(false);
|
|
468
482
|
if (!config.currency_supported) return null;
|
|
469
483
|
if (!config.client_token) {
|
|
470
|
-
return /* @__PURE__ */
|
|
484
|
+
return /* @__PURE__ */ jsx4(
|
|
471
485
|
"div",
|
|
472
486
|
{
|
|
473
487
|
style: {
|
|
@@ -483,9 +497,9 @@ function PayPalAdvancedCard(props) {
|
|
|
483
497
|
);
|
|
484
498
|
}
|
|
485
499
|
const isSandbox = config.environment === "sandbox";
|
|
486
|
-
return /* @__PURE__ */
|
|
487
|
-
/* @__PURE__ */
|
|
488
|
-
submitting && /* @__PURE__ */
|
|
500
|
+
return /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
|
|
501
|
+
/* @__PURE__ */ jsx4("style", { children: SPIN_STYLE2 }),
|
|
502
|
+
submitting && /* @__PURE__ */ jsxs3(
|
|
489
503
|
"div",
|
|
490
504
|
{
|
|
491
505
|
style: {
|
|
@@ -502,7 +516,7 @@ function PayPalAdvancedCard(props) {
|
|
|
502
516
|
minHeight: 180
|
|
503
517
|
},
|
|
504
518
|
children: [
|
|
505
|
-
/* @__PURE__ */
|
|
519
|
+
/* @__PURE__ */ jsx4(
|
|
506
520
|
"div",
|
|
507
521
|
{
|
|
508
522
|
style: {
|
|
@@ -515,20 +529,20 @@ function PayPalAdvancedCard(props) {
|
|
|
515
529
|
}
|
|
516
530
|
}
|
|
517
531
|
),
|
|
518
|
-
/* @__PURE__ */
|
|
519
|
-
/* @__PURE__ */
|
|
520
|
-
/* @__PURE__ */
|
|
532
|
+
/* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
|
|
533
|
+
/* @__PURE__ */ jsx4("div", { style: { fontSize: 15, fontWeight: 600, color: "#111827" }, children: "Processing your payment\u2026" }),
|
|
534
|
+
/* @__PURE__ */ jsx4("div", { style: { fontSize: 13, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
|
|
521
535
|
] })
|
|
522
536
|
]
|
|
523
537
|
}
|
|
524
538
|
),
|
|
525
|
-
/* @__PURE__ */
|
|
539
|
+
/* @__PURE__ */ jsx4(
|
|
526
540
|
PayPalCardFieldsProvider,
|
|
527
541
|
{
|
|
528
542
|
style: cardStyle,
|
|
529
543
|
createOrder: async () => {
|
|
530
544
|
setError(null);
|
|
531
|
-
const r = await api.createOrder(cartId);
|
|
545
|
+
const r = await api.createOrder(cartId, true);
|
|
532
546
|
return r.id;
|
|
533
547
|
},
|
|
534
548
|
onApprove: async (data) => {
|
|
@@ -536,12 +550,13 @@ function PayPalAdvancedCard(props) {
|
|
|
536
550
|
setError(null);
|
|
537
551
|
const orderId = String(data?.orderID || "");
|
|
538
552
|
const result = await api.captureOrder(cartId, orderId);
|
|
539
|
-
await
|
|
553
|
+
await markPaymentComplete(baseUrl, cartId, publishableApiKey);
|
|
540
554
|
onPaid?.(result);
|
|
541
555
|
} catch (e) {
|
|
542
556
|
const msg = e instanceof Error ? e.message : "Card payment failed";
|
|
543
557
|
setError(msg);
|
|
544
558
|
onError?.(msg);
|
|
559
|
+
} finally {
|
|
545
560
|
setSubmitting(false);
|
|
546
561
|
}
|
|
547
562
|
},
|
|
@@ -554,7 +569,7 @@ function PayPalAdvancedCard(props) {
|
|
|
554
569
|
onError?.(msg);
|
|
555
570
|
setSubmitting(false);
|
|
556
571
|
},
|
|
557
|
-
children: /* @__PURE__ */
|
|
572
|
+
children: /* @__PURE__ */ jsxs3(
|
|
558
573
|
"div",
|
|
559
574
|
{
|
|
560
575
|
style: {
|
|
@@ -564,7 +579,7 @@ function PayPalAdvancedCard(props) {
|
|
|
564
579
|
width: "100%"
|
|
565
580
|
},
|
|
566
581
|
children: [
|
|
567
|
-
isSandbox && /* @__PURE__ */
|
|
582
|
+
isSandbox && /* @__PURE__ */ jsxs3(
|
|
568
583
|
"div",
|
|
569
584
|
{
|
|
570
585
|
style: {
|
|
@@ -580,22 +595,22 @@ function PayPalAdvancedCard(props) {
|
|
|
580
595
|
lineHeight: 1.55
|
|
581
596
|
},
|
|
582
597
|
children: [
|
|
583
|
-
/* @__PURE__ */
|
|
584
|
-
/* @__PURE__ */
|
|
598
|
+
/* @__PURE__ */ jsx4("span", { style: { fontSize: 15, flexShrink: 0, marginTop: 1 }, children: "\u{1F9EA}" }),
|
|
599
|
+
/* @__PURE__ */ jsxs3("span", { children: [
|
|
585
600
|
"Sandbox mode \u2014 use test card",
|
|
586
601
|
" ",
|
|
587
|
-
/* @__PURE__ */
|
|
602
|
+
/* @__PURE__ */ jsx4("strong", { style: { fontFamily: "monospace", letterSpacing: "0.05em" }, children: "4111 1111 1111 1111" }),
|
|
588
603
|
" ",
|
|
589
604
|
"with any future date and any CVV."
|
|
590
605
|
] })
|
|
591
606
|
]
|
|
592
607
|
}
|
|
593
608
|
),
|
|
594
|
-
/* @__PURE__ */
|
|
595
|
-
/* @__PURE__ */
|
|
596
|
-
/* @__PURE__ */
|
|
609
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
610
|
+
/* @__PURE__ */ jsx4("label", { style: labelStyle, children: "Card number" }),
|
|
611
|
+
/* @__PURE__ */ jsx4(PayPalNumberField, {})
|
|
597
612
|
] }),
|
|
598
|
-
/* @__PURE__ */
|
|
613
|
+
/* @__PURE__ */ jsxs3(
|
|
599
614
|
"div",
|
|
600
615
|
{
|
|
601
616
|
style: {
|
|
@@ -604,18 +619,18 @@ function PayPalAdvancedCard(props) {
|
|
|
604
619
|
gap: 16
|
|
605
620
|
},
|
|
606
621
|
children: [
|
|
607
|
-
/* @__PURE__ */
|
|
608
|
-
/* @__PURE__ */
|
|
609
|
-
/* @__PURE__ */
|
|
622
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
623
|
+
/* @__PURE__ */ jsx4("label", { style: labelStyle, children: "Expiration date" }),
|
|
624
|
+
/* @__PURE__ */ jsx4(PayPalExpiryField, {})
|
|
610
625
|
] }),
|
|
611
|
-
/* @__PURE__ */
|
|
612
|
-
/* @__PURE__ */
|
|
613
|
-
/* @__PURE__ */
|
|
626
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
627
|
+
/* @__PURE__ */ jsx4("label", { style: labelStyle, children: "Security code" }),
|
|
628
|
+
/* @__PURE__ */ jsx4(PayPalCVVField, {})
|
|
614
629
|
] })
|
|
615
630
|
]
|
|
616
631
|
}
|
|
617
632
|
),
|
|
618
|
-
/* @__PURE__ */
|
|
633
|
+
/* @__PURE__ */ jsxs3(
|
|
619
634
|
"div",
|
|
620
635
|
{
|
|
621
636
|
style: {
|
|
@@ -626,7 +641,7 @@ function PayPalAdvancedCard(props) {
|
|
|
626
641
|
color: "#6b7280"
|
|
627
642
|
},
|
|
628
643
|
children: [
|
|
629
|
-
/* @__PURE__ */
|
|
644
|
+
/* @__PURE__ */ jsx4(
|
|
630
645
|
"svg",
|
|
631
646
|
{
|
|
632
647
|
width: "14",
|
|
@@ -637,14 +652,14 @@ function PayPalAdvancedCard(props) {
|
|
|
637
652
|
strokeWidth: "2.5",
|
|
638
653
|
strokeLinecap: "round",
|
|
639
654
|
strokeLinejoin: "round",
|
|
640
|
-
children: /* @__PURE__ */
|
|
655
|
+
children: /* @__PURE__ */ jsx4("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
|
|
641
656
|
}
|
|
642
657
|
),
|
|
643
|
-
/* @__PURE__ */
|
|
658
|
+
/* @__PURE__ */ jsx4("span", { children: "Your payment is secured with 256-bit SSL encryption" })
|
|
644
659
|
]
|
|
645
660
|
}
|
|
646
661
|
),
|
|
647
|
-
/* @__PURE__ */
|
|
662
|
+
/* @__PURE__ */ jsx4(
|
|
648
663
|
SubmitButton,
|
|
649
664
|
{
|
|
650
665
|
disabled: submitting,
|
|
@@ -655,7 +670,7 @@ function PayPalAdvancedCard(props) {
|
|
|
655
670
|
}
|
|
656
671
|
}
|
|
657
672
|
),
|
|
658
|
-
error && /* @__PURE__ */
|
|
673
|
+
error && /* @__PURE__ */ jsxs3(
|
|
659
674
|
"div",
|
|
660
675
|
{
|
|
661
676
|
style: {
|
|
@@ -671,8 +686,8 @@ function PayPalAdvancedCard(props) {
|
|
|
671
686
|
lineHeight: 1.5
|
|
672
687
|
},
|
|
673
688
|
children: [
|
|
674
|
-
/* @__PURE__ */
|
|
675
|
-
/* @__PURE__ */
|
|
689
|
+
/* @__PURE__ */ jsx4("span", { style: { flexShrink: 0, marginTop: 1 }, children: "\u26A0\uFE0F" }),
|
|
690
|
+
/* @__PURE__ */ jsx4("span", { children: error })
|
|
676
691
|
]
|
|
677
692
|
}
|
|
678
693
|
)
|
|
@@ -683,11 +698,15 @@ function PayPalAdvancedCard(props) {
|
|
|
683
698
|
)
|
|
684
699
|
] });
|
|
685
700
|
}
|
|
701
|
+
|
|
702
|
+
// src/adapters/MedusaNextPayPalAdapter.tsx
|
|
703
|
+
import { useCallback } from "react";
|
|
704
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
686
705
|
var DEFAULT_PAYPAL_PROVIDER_ID = "pp_paypal_paypal";
|
|
687
706
|
var DEFAULT_PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
|
|
688
707
|
var SPIN_STYLE3 = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
|
|
689
708
|
function PayPalLoadingCard() {
|
|
690
|
-
return /* @__PURE__ */
|
|
709
|
+
return /* @__PURE__ */ jsxs4(
|
|
691
710
|
"div",
|
|
692
711
|
{
|
|
693
712
|
style: {
|
|
@@ -700,8 +719,8 @@ function PayPalLoadingCard() {
|
|
|
700
719
|
borderRadius: 10
|
|
701
720
|
},
|
|
702
721
|
children: [
|
|
703
|
-
/* @__PURE__ */
|
|
704
|
-
/* @__PURE__ */
|
|
722
|
+
/* @__PURE__ */ jsx5("style", { children: SPIN_STYLE3 }),
|
|
723
|
+
/* @__PURE__ */ jsx5(
|
|
705
724
|
"div",
|
|
706
725
|
{
|
|
707
726
|
style: {
|
|
@@ -715,16 +734,16 @@ function PayPalLoadingCard() {
|
|
|
715
734
|
}
|
|
716
735
|
}
|
|
717
736
|
),
|
|
718
|
-
/* @__PURE__ */
|
|
719
|
-
/* @__PURE__ */
|
|
720
|
-
/* @__PURE__ */
|
|
737
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
738
|
+
/* @__PURE__ */ jsx5("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Connecting to PayPal\u2026" }),
|
|
739
|
+
/* @__PURE__ */ jsx5("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: "Setting up secure payment" })
|
|
721
740
|
] })
|
|
722
741
|
]
|
|
723
742
|
}
|
|
724
743
|
);
|
|
725
744
|
}
|
|
726
745
|
function PayPalErrorCard({ message }) {
|
|
727
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ jsx5(
|
|
728
747
|
"div",
|
|
729
748
|
{
|
|
730
749
|
style: {
|
|
@@ -767,21 +786,22 @@ function MedusaNextPayPalAdapter(props) {
|
|
|
767
786
|
[cartId, onPaid, onSuccess]
|
|
768
787
|
);
|
|
769
788
|
if (!shouldRender) return null;
|
|
770
|
-
if (loading) return /* @__PURE__ */
|
|
771
|
-
if (error) return /* @__PURE__ */
|
|
789
|
+
if (loading) return /* @__PURE__ */ jsx5(PayPalLoadingCard, {});
|
|
790
|
+
if (error) return /* @__PURE__ */ jsx5(PayPalErrorCard, { message: error });
|
|
772
791
|
if (!config) return null;
|
|
773
|
-
|
|
774
|
-
if (
|
|
792
|
+
const isCardProvider = selectedProviderId === paypalCardProviderId;
|
|
793
|
+
if (config.paypal_enabled === false && !isCardProvider) return null;
|
|
794
|
+
if (isCardProvider && config.card_enabled === false) return null;
|
|
775
795
|
const disableFunding = Array.isArray(config.disable_buttons) ? config.disable_buttons.join(",") : void 0;
|
|
776
|
-
return /* @__PURE__ */
|
|
777
|
-
/* @__PURE__ */
|
|
778
|
-
/* @__PURE__ */
|
|
796
|
+
return /* @__PURE__ */ jsxs4("div", { style: { display: "grid", gap: 12 }, children: [
|
|
797
|
+
/* @__PURE__ */ jsx5(PayPalCurrencyNotice, { config }),
|
|
798
|
+
/* @__PURE__ */ jsx5(
|
|
779
799
|
PayPalProvider,
|
|
780
800
|
{
|
|
781
801
|
config,
|
|
782
802
|
intent: config.intent === "authorize" ? "authorize" : "capture",
|
|
783
803
|
disableFunding,
|
|
784
|
-
children:
|
|
804
|
+
children: isCardProvider ? /* @__PURE__ */ jsx5(
|
|
785
805
|
PayPalAdvancedCard,
|
|
786
806
|
{
|
|
787
807
|
baseUrl,
|
|
@@ -791,7 +811,7 @@ function MedusaNextPayPalAdapter(props) {
|
|
|
791
811
|
onPaid: handlePaid,
|
|
792
812
|
onError
|
|
793
813
|
}
|
|
794
|
-
) : /* @__PURE__ */
|
|
814
|
+
) : /* @__PURE__ */ jsx5(
|
|
795
815
|
PayPalSmartButtons,
|
|
796
816
|
{
|
|
797
817
|
baseUrl,
|
|
@@ -806,6 +826,10 @@ function MedusaNextPayPalAdapter(props) {
|
|
|
806
826
|
)
|
|
807
827
|
] }, selectedProviderId);
|
|
808
828
|
}
|
|
829
|
+
|
|
830
|
+
// src/components/PayPalPaymentSection.tsx
|
|
831
|
+
import { useCallback as useCallback2 } from "react";
|
|
832
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
809
833
|
var PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal";
|
|
810
834
|
var PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
|
|
811
835
|
var PAYPAL_PROVIDER_IDS = [
|
|
@@ -818,7 +842,7 @@ function isPayPalProviderId(id) {
|
|
|
818
842
|
}
|
|
819
843
|
var SPIN_STYLE4 = `@keyframes _pp_section_spin { to { transform: rotate(360deg) } }`;
|
|
820
844
|
function SessionInitCard() {
|
|
821
|
-
return /* @__PURE__ */
|
|
845
|
+
return /* @__PURE__ */ jsxs5(
|
|
822
846
|
"div",
|
|
823
847
|
{
|
|
824
848
|
style: {
|
|
@@ -832,8 +856,8 @@ function SessionInitCard() {
|
|
|
832
856
|
borderRadius: 10
|
|
833
857
|
},
|
|
834
858
|
children: [
|
|
835
|
-
/* @__PURE__ */
|
|
836
|
-
/* @__PURE__ */
|
|
859
|
+
/* @__PURE__ */ jsx6("style", { children: SPIN_STYLE4 }),
|
|
860
|
+
/* @__PURE__ */ jsx6(
|
|
837
861
|
"div",
|
|
838
862
|
{
|
|
839
863
|
style: {
|
|
@@ -847,13 +871,13 @@ function SessionInitCard() {
|
|
|
847
871
|
}
|
|
848
872
|
}
|
|
849
873
|
),
|
|
850
|
-
/* @__PURE__ */
|
|
874
|
+
/* @__PURE__ */ jsx6("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Setting up payment\u2026" })
|
|
851
875
|
]
|
|
852
876
|
}
|
|
853
877
|
);
|
|
854
878
|
}
|
|
855
879
|
function ConfigLoadingCard() {
|
|
856
|
-
return /* @__PURE__ */
|
|
880
|
+
return /* @__PURE__ */ jsxs5(
|
|
857
881
|
"div",
|
|
858
882
|
{
|
|
859
883
|
style: {
|
|
@@ -866,8 +890,8 @@ function ConfigLoadingCard() {
|
|
|
866
890
|
borderRadius: 10
|
|
867
891
|
},
|
|
868
892
|
children: [
|
|
869
|
-
/* @__PURE__ */
|
|
870
|
-
/* @__PURE__ */
|
|
893
|
+
/* @__PURE__ */ jsx6("style", { children: SPIN_STYLE4 }),
|
|
894
|
+
/* @__PURE__ */ jsx6(
|
|
871
895
|
"div",
|
|
872
896
|
{
|
|
873
897
|
style: {
|
|
@@ -881,16 +905,16 @@ function ConfigLoadingCard() {
|
|
|
881
905
|
}
|
|
882
906
|
}
|
|
883
907
|
),
|
|
884
|
-
/* @__PURE__ */
|
|
885
|
-
/* @__PURE__ */
|
|
886
|
-
/* @__PURE__ */
|
|
908
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
909
|
+
/* @__PURE__ */ jsx6("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Connecting to PayPal\u2026" }),
|
|
910
|
+
/* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: "Setting up secure payment" })
|
|
887
911
|
] })
|
|
888
912
|
]
|
|
889
913
|
}
|
|
890
914
|
);
|
|
891
915
|
}
|
|
892
916
|
function ErrorCard({ message }) {
|
|
893
|
-
return /* @__PURE__ */
|
|
917
|
+
return /* @__PURE__ */ jsx6(
|
|
894
918
|
"div",
|
|
895
919
|
{
|
|
896
920
|
style: {
|
|
@@ -922,7 +946,7 @@ function PayPalPaymentSection({
|
|
|
922
946
|
cartId,
|
|
923
947
|
enabled: shouldRender
|
|
924
948
|
});
|
|
925
|
-
const handlePaid =
|
|
949
|
+
const handlePaid = useCallback2(
|
|
926
950
|
(captureResult) => {
|
|
927
951
|
onPaid?.(captureResult);
|
|
928
952
|
onSuccess?.(cartId);
|
|
@@ -930,9 +954,9 @@ function PayPalPaymentSection({
|
|
|
930
954
|
[cartId, onPaid, onSuccess]
|
|
931
955
|
);
|
|
932
956
|
if (!shouldRender) return null;
|
|
933
|
-
if (sessionLoading) return /* @__PURE__ */
|
|
934
|
-
if (loading) return /* @__PURE__ */
|
|
935
|
-
if (error) return /* @__PURE__ */
|
|
957
|
+
if (sessionLoading) return /* @__PURE__ */ jsx6(SessionInitCard, {});
|
|
958
|
+
if (loading) return /* @__PURE__ */ jsx6(ConfigLoadingCard, {});
|
|
959
|
+
if (error) return /* @__PURE__ */ jsx6(ErrorCard, { message: error });
|
|
936
960
|
if (!config) return null;
|
|
937
961
|
if (config.paypal_enabled === false && selectedProviderId === PAYPAL_WALLET_PROVIDER_ID) {
|
|
938
962
|
return null;
|
|
@@ -940,15 +964,15 @@ function PayPalPaymentSection({
|
|
|
940
964
|
const isCardProvider = selectedProviderId === PAYPAL_CARD_PROVIDER_ID;
|
|
941
965
|
if (isCardProvider && config.card_enabled === false) return null;
|
|
942
966
|
const disableFunding = Array.isArray(config.disable_buttons) ? config.disable_buttons.join(",") : void 0;
|
|
943
|
-
return /* @__PURE__ */
|
|
944
|
-
/* @__PURE__ */
|
|
945
|
-
/* @__PURE__ */
|
|
967
|
+
return /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: 12 }, children: [
|
|
968
|
+
/* @__PURE__ */ jsx6(PayPalCurrencyNotice, { config }),
|
|
969
|
+
/* @__PURE__ */ jsx6(
|
|
946
970
|
PayPalProvider,
|
|
947
971
|
{
|
|
948
972
|
config,
|
|
949
973
|
intent: config.intent === "authorize" ? "authorize" : "capture",
|
|
950
974
|
disableFunding,
|
|
951
|
-
children: isCardProvider ? /* @__PURE__ */
|
|
975
|
+
children: isCardProvider ? /* @__PURE__ */ jsx6(
|
|
952
976
|
PayPalAdvancedCard,
|
|
953
977
|
{
|
|
954
978
|
baseUrl,
|
|
@@ -958,7 +982,7 @@ function PayPalPaymentSection({
|
|
|
958
982
|
onPaid: handlePaid,
|
|
959
983
|
onError
|
|
960
984
|
}
|
|
961
|
-
) : /* @__PURE__ */
|
|
985
|
+
) : /* @__PURE__ */ jsx6(
|
|
962
986
|
PayPalSmartButtons,
|
|
963
987
|
{
|
|
964
988
|
baseUrl,
|
|
@@ -973,6 +997,9 @@ function PayPalPaymentSection({
|
|
|
973
997
|
)
|
|
974
998
|
] }, selectedProviderId);
|
|
975
999
|
}
|
|
1000
|
+
|
|
1001
|
+
// src/hooks/usePayPalPaymentMethods.ts
|
|
1002
|
+
import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
|
|
976
1003
|
var _cache2 = /* @__PURE__ */ new Map();
|
|
977
1004
|
var CACHE_TTL2 = 5 * 60 * 1e3;
|
|
978
1005
|
function cacheKey2(baseUrl, cartId) {
|
|
@@ -991,16 +1018,16 @@ function usePayPalPaymentMethods({
|
|
|
991
1018
|
cartId,
|
|
992
1019
|
enabled = true
|
|
993
1020
|
}) {
|
|
994
|
-
const api =
|
|
1021
|
+
const api = useMemo5(
|
|
995
1022
|
() => createPayPalStoreApi({ baseUrl, publishableApiKey }),
|
|
996
1023
|
[baseUrl, publishableApiKey]
|
|
997
1024
|
);
|
|
998
1025
|
const key = cacheKey2(baseUrl, cartId);
|
|
999
1026
|
const hit = _cache2.get(key);
|
|
1000
1027
|
const seed = hit && Date.now() - hit.at < CACHE_TTL2 ? hit.result : null;
|
|
1001
|
-
const [result, setResult] =
|
|
1002
|
-
const fetchIdRef =
|
|
1003
|
-
|
|
1028
|
+
const [result, setResult] = useState4(seed ?? { ...DEFAULT_RESULT, loading: enabled });
|
|
1029
|
+
const fetchIdRef = useRef2(0);
|
|
1030
|
+
useEffect2(() => {
|
|
1004
1031
|
if (!enabled) {
|
|
1005
1032
|
setResult((prev) => ({ ...prev, loading: false }));
|
|
1006
1033
|
return;
|
|
@@ -1051,6 +1078,19 @@ function usePayPalPaymentMethods({
|
|
|
1051
1078
|
}, [api, baseUrl, cartId, enabled]);
|
|
1052
1079
|
return result;
|
|
1053
1080
|
}
|
|
1054
|
-
|
|
1055
|
-
|
|
1081
|
+
export {
|
|
1082
|
+
MedusaNextPayPalAdapter,
|
|
1083
|
+
PAYPAL_CARD_PROVIDER_ID,
|
|
1084
|
+
PAYPAL_WALLET_PROVIDER_ID,
|
|
1085
|
+
PayPalAdvancedCard,
|
|
1086
|
+
PayPalCurrencyNotice,
|
|
1087
|
+
PayPalPaymentSection,
|
|
1088
|
+
PayPalProvider,
|
|
1089
|
+
PayPalSmartButtons,
|
|
1090
|
+
createPayPalStoreApi,
|
|
1091
|
+
isPayPalProviderId,
|
|
1092
|
+
markPaymentComplete,
|
|
1093
|
+
usePayPalConfig,
|
|
1094
|
+
usePayPalPaymentMethods
|
|
1095
|
+
};
|
|
1056
1096
|
//# sourceMappingURL=index.mjs.map
|