strapi-plugin-payone-provider 1.5.5 → 1.5.7
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.
|
@@ -42,7 +42,7 @@ const ApplePayButton = ({
|
|
|
42
42
|
const checkApplePayAvailability = async () => {
|
|
43
43
|
try {
|
|
44
44
|
console.log("[Apple Pay] Checking availability...");
|
|
45
|
-
|
|
45
|
+
|
|
46
46
|
// Check secure context using browser's native property
|
|
47
47
|
// This is the most reliable way to check if we're in a secure context
|
|
48
48
|
const isSecureContext = typeof window !== 'undefined' && window.isSecureContext;
|
|
@@ -57,7 +57,7 @@ const ApplePayButton = ({
|
|
|
57
57
|
// - 127.0.0.1 (even on HTTP)
|
|
58
58
|
// - file:// URLs
|
|
59
59
|
const isSecure = isSecureContext || isLocalhost;
|
|
60
|
-
|
|
60
|
+
|
|
61
61
|
console.log("[Apple Pay] Secure context check:", {
|
|
62
62
|
isSecureContext: isSecureContext,
|
|
63
63
|
protocol: protocol,
|
|
@@ -78,12 +78,12 @@ const ApplePayButton = ({
|
|
|
78
78
|
reason: !isSecureContext ? "window.isSecureContext is false" : "Unknown"
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
|
-
|
|
81
|
+
|
|
82
82
|
// First, check if Payment Request API is available
|
|
83
83
|
// Payment Request API works on HTTP too, but Apple Pay JS API requires HTTPS
|
|
84
84
|
if (typeof window === 'undefined' || !window.PaymentRequest) {
|
|
85
85
|
console.log("[Apple Pay] Payment Request API not available");
|
|
86
|
-
|
|
86
|
+
|
|
87
87
|
// Fallback: Check Apple Pay JS API (for Safari, requires HTTPS)
|
|
88
88
|
if (typeof window !== 'undefined' && window.ApplePaySession && isSecure) {
|
|
89
89
|
try {
|
|
@@ -95,11 +95,11 @@ const ApplePayButton = ({
|
|
|
95
95
|
return { available: false, method: null, error: 'insecure_context' };
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
|
-
|
|
98
|
+
|
|
99
99
|
if (!isSecure && typeof window !== 'undefined' && window.ApplePaySession) {
|
|
100
100
|
console.warn("[Apple Pay] Apple Pay JS API requires HTTPS. Using Payment Request API fallback.");
|
|
101
101
|
}
|
|
102
|
-
|
|
102
|
+
|
|
103
103
|
console.log("[Apple Pay] No Apple Pay support found");
|
|
104
104
|
return { available: false, method: null };
|
|
105
105
|
}
|
|
@@ -152,11 +152,11 @@ const ApplePayButton = ({
|
|
|
152
152
|
try {
|
|
153
153
|
const canPay = await testRequest.canMakePayment();
|
|
154
154
|
console.log("[Apple Pay] canMakePayment result:", canPay);
|
|
155
|
-
|
|
155
|
+
|
|
156
156
|
if (canPay) {
|
|
157
157
|
return { available: true, method: 'paymentRequest' };
|
|
158
158
|
}
|
|
159
|
-
|
|
159
|
+
|
|
160
160
|
// If PaymentRequest says no, try Apple Pay JS API as fallback (only on HTTPS)
|
|
161
161
|
if (typeof window !== 'undefined' && window.ApplePaySession && isSecure) {
|
|
162
162
|
try {
|
|
@@ -172,17 +172,17 @@ const ApplePayButton = ({
|
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
|
-
|
|
175
|
+
|
|
176
176
|
return { available: false, method: null };
|
|
177
177
|
} catch (e) {
|
|
178
178
|
console.error("[Apple Pay] Error checking canMakePayment:", e);
|
|
179
|
-
|
|
179
|
+
|
|
180
180
|
// If it's insecure context error, we can't use Apple Pay JS API
|
|
181
181
|
if (e.message && e.message.includes('insecure')) {
|
|
182
182
|
console.warn("[Apple Pay] Insecure context detected. Apple Pay requires HTTPS.");
|
|
183
183
|
return { available: false, method: null, error: 'insecure_context' };
|
|
184
184
|
}
|
|
185
|
-
|
|
185
|
+
|
|
186
186
|
// For other errors, try Apple Pay JS API as fallback (only on HTTPS)
|
|
187
187
|
if (typeof window !== 'undefined' && window.ApplePaySession && isSecure) {
|
|
188
188
|
try {
|
|
@@ -193,7 +193,7 @@ const ApplePayButton = ({
|
|
|
193
193
|
return { available: false, method: null };
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
|
-
|
|
196
|
+
|
|
197
197
|
return { available: false, method: null };
|
|
198
198
|
}
|
|
199
199
|
}
|
|
@@ -204,7 +204,7 @@ const ApplePayButton = ({
|
|
|
204
204
|
const hostnameFinal = typeof window !== 'undefined' ? window.location.hostname : '';
|
|
205
205
|
const isLocalhostFinal = hostnameFinal === 'localhost' || hostnameFinal === '127.0.0.1';
|
|
206
206
|
const isSecureFinal = isSecureContextFinal || isLocalhostFinal;
|
|
207
|
-
|
|
207
|
+
|
|
208
208
|
if (isSecureFinal) {
|
|
209
209
|
console.log("[Apple Pay] canMakePayment not available, assuming support (secure context)");
|
|
210
210
|
return { available: true, method: 'paymentRequest' };
|
|
@@ -219,20 +219,20 @@ const ApplePayButton = ({
|
|
|
219
219
|
}
|
|
220
220
|
} catch (error) {
|
|
221
221
|
console.error("[Apple Pay] Error checking availability:", error);
|
|
222
|
-
|
|
222
|
+
|
|
223
223
|
// Check if it's insecure context error
|
|
224
224
|
if (error.message && error.message.includes('insecure')) {
|
|
225
225
|
console.warn("[Apple Pay] Insecure context - Apple Pay requires HTTPS");
|
|
226
226
|
return { available: false, method: null, error: 'insecure_context' };
|
|
227
227
|
}
|
|
228
|
-
|
|
228
|
+
|
|
229
229
|
// Fallback: Try Apple Pay JS API (only on HTTPS)
|
|
230
230
|
// Re-check secure context
|
|
231
231
|
const isSecureContextFallback = typeof window !== 'undefined' && window.isSecureContext;
|
|
232
232
|
const hostnameFallback = typeof window !== 'undefined' ? window.location.hostname : '';
|
|
233
233
|
const isLocalhostFallback = hostnameFallback === 'localhost' || hostnameFallback === '127.0.0.1';
|
|
234
234
|
const isSecureFallback = isSecureContextFallback || isLocalhostFallback;
|
|
235
|
-
|
|
235
|
+
|
|
236
236
|
if (typeof window !== 'undefined' && window.ApplePaySession && isSecureFallback) {
|
|
237
237
|
try {
|
|
238
238
|
const canMakePayments = ApplePaySession.canMakePayments();
|
|
@@ -244,16 +244,16 @@ const ApplePayButton = ({
|
|
|
244
244
|
}
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
|
-
|
|
247
|
+
|
|
248
248
|
return { available: false, method: null };
|
|
249
249
|
}
|
|
250
250
|
};
|
|
251
251
|
|
|
252
252
|
useEffect(() => {
|
|
253
253
|
const scriptUrl = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
|
|
254
|
-
|
|
254
|
+
|
|
255
255
|
console.log("[Apple Pay] Loading Apple Pay SDK script...");
|
|
256
|
-
|
|
256
|
+
|
|
257
257
|
if (document.querySelector(`script[src="${scriptUrl}"]`)) {
|
|
258
258
|
console.log("[Apple Pay] Script already loaded");
|
|
259
259
|
// Script already loaded, check if it's ready
|
|
@@ -270,20 +270,20 @@ const ApplePayButton = ({
|
|
|
270
270
|
script.src = scriptUrl;
|
|
271
271
|
script.crossOrigin = "anonymous";
|
|
272
272
|
script.async = true;
|
|
273
|
-
|
|
273
|
+
|
|
274
274
|
script.onload = () => {
|
|
275
275
|
console.log("[Apple Pay] SDK script loaded successfully");
|
|
276
276
|
setTimeout(() => {
|
|
277
277
|
initializeButton();
|
|
278
278
|
}, 500);
|
|
279
279
|
};
|
|
280
|
-
|
|
280
|
+
|
|
281
281
|
script.onerror = (error) => {
|
|
282
282
|
console.error("[Apple Pay] Failed to load SDK script:", error);
|
|
283
283
|
setIsLoading(false);
|
|
284
284
|
setIsAvailable(false);
|
|
285
285
|
setErrorMessage("Failed to load Apple Pay SDK. Please check Content Security Policy settings.");
|
|
286
|
-
|
|
286
|
+
|
|
287
287
|
// Even if script fails, try to use Payment Request API
|
|
288
288
|
console.log("[Apple Pay] Trying Payment Request API as fallback...");
|
|
289
289
|
setTimeout(() => {
|
|
@@ -306,22 +306,22 @@ const ApplePayButton = ({
|
|
|
306
306
|
const initializeButton = async () => {
|
|
307
307
|
try {
|
|
308
308
|
console.log("[Apple Pay] Initializing button...");
|
|
309
|
-
|
|
310
|
-
const isSecure = typeof window !== 'undefined' &&
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
309
|
+
|
|
310
|
+
const isSecure = typeof window !== 'undefined' &&
|
|
311
|
+
(window.location.protocol === 'https:' ||
|
|
312
|
+
window.location.hostname === 'localhost' ||
|
|
313
|
+
window.location.hostname === '127.0.0.1');
|
|
314
|
+
|
|
315
315
|
console.log("[Apple Pay] Secure context check:", {
|
|
316
316
|
protocol: window.location?.protocol,
|
|
317
317
|
hostname: window.location?.hostname,
|
|
318
318
|
isSecure: isSecure
|
|
319
319
|
});
|
|
320
|
-
|
|
321
|
-
const isLocalhost = typeof window !== 'undefined' &&
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
320
|
+
|
|
321
|
+
const isLocalhost = typeof window !== 'undefined' &&
|
|
322
|
+
(window.location.hostname === 'localhost' ||
|
|
323
|
+
window.location.hostname === '127.0.0.1');
|
|
324
|
+
|
|
325
325
|
if (!isSecure && !isLocalhost && window.location?.protocol === 'http:') {
|
|
326
326
|
const errorMsg = "Apple Pay requires HTTPS. Please access this page via HTTPS (https://yourdomain.com) instead of HTTP. Localhost (http://localhost) is allowed for development.";
|
|
327
327
|
setErrorMessage(errorMsg);
|
|
@@ -331,7 +331,7 @@ const ApplePayButton = ({
|
|
|
331
331
|
console.warn("[Apple Pay] Current URL:", window.location.href);
|
|
332
332
|
return;
|
|
333
333
|
}
|
|
334
|
-
|
|
334
|
+
|
|
335
335
|
// Log context information
|
|
336
336
|
console.log("[Apple Pay] Context info:", {
|
|
337
337
|
protocol: window.location?.protocol,
|
|
@@ -340,16 +340,16 @@ const ApplePayButton = ({
|
|
|
340
340
|
isLocalhost: isLocalhost,
|
|
341
341
|
fullUrl: window.location?.href
|
|
342
342
|
});
|
|
343
|
-
|
|
343
|
+
|
|
344
344
|
// Check availability
|
|
345
345
|
const availability = await checkApplePayAvailability();
|
|
346
346
|
console.log("[Apple Pay] Availability check result:", availability);
|
|
347
|
-
|
|
347
|
+
|
|
348
348
|
setIsAvailable(availability.available);
|
|
349
|
-
|
|
349
|
+
|
|
350
350
|
if (!availability.available) {
|
|
351
351
|
let errorMsg = "Apple Pay is not available on this device or browser.";
|
|
352
|
-
|
|
352
|
+
|
|
353
353
|
if (isLocalhost) {
|
|
354
354
|
errorMsg = "Apple Pay is not available on localhost. Apple Pay requires a registered domain with HTTPS. " +
|
|
355
355
|
"For testing, please use a production domain with HTTPS or test on a device with Safari (iOS/macOS). " +
|
|
@@ -366,7 +366,7 @@ const ApplePayButton = ({
|
|
|
366
366
|
} else {
|
|
367
367
|
errorMsg += " Please use Safari on iOS, macOS, or iPadOS, or a browser that supports Payment Request API (Chrome, Edge, Safari).";
|
|
368
368
|
}
|
|
369
|
-
|
|
369
|
+
|
|
370
370
|
setErrorMessage(errorMsg);
|
|
371
371
|
setIsLoading(false);
|
|
372
372
|
console.warn("[Apple Pay] Not available:", errorMsg);
|
|
@@ -380,14 +380,14 @@ const ApplePayButton = ({
|
|
|
380
380
|
console.error("[Apple Pay] Initialization error:", error);
|
|
381
381
|
setIsLoading(false);
|
|
382
382
|
setIsAvailable(false);
|
|
383
|
-
|
|
383
|
+
|
|
384
384
|
// Check for insecure context error
|
|
385
385
|
if (error.message && error.message.includes('insecure')) {
|
|
386
386
|
setErrorMessage("Apple Pay requires HTTPS. Please access this page via HTTPS (https://yourdomain.com) instead of HTTP. Localhost is allowed for development.");
|
|
387
387
|
} else {
|
|
388
388
|
setErrorMessage(error.message || "Failed to initialize Apple Pay");
|
|
389
389
|
}
|
|
390
|
-
|
|
390
|
+
|
|
391
391
|
if (onError) {
|
|
392
392
|
onError(error);
|
|
393
393
|
}
|
|
@@ -406,11 +406,11 @@ const ApplePayButton = ({
|
|
|
406
406
|
});
|
|
407
407
|
|
|
408
408
|
// Check HTTPS requirement
|
|
409
|
-
const isSecure = typeof window !== 'undefined' &&
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
409
|
+
const isSecure = typeof window !== 'undefined' &&
|
|
410
|
+
(window.location.protocol === 'https:' ||
|
|
411
|
+
window.location.hostname === 'localhost' ||
|
|
412
|
+
window.location.hostname === '127.0.0.1');
|
|
413
|
+
|
|
414
414
|
if (!isSecure && window.location?.protocol === 'http:') {
|
|
415
415
|
const errorMsg = "Apple Pay requires HTTPS. Please access this page via HTTPS.";
|
|
416
416
|
console.error("[Apple Pay]", errorMsg);
|
|
@@ -520,17 +520,24 @@ const ApplePayButton = ({
|
|
|
520
520
|
|
|
521
521
|
// Complete with the merchant session promise
|
|
522
522
|
// If the promise rejects, Payment Request API will close the dialog
|
|
523
|
+
// This is expected behavior - we cannot proceed without a valid merchant session
|
|
523
524
|
event.complete(merchantSessionPromise);
|
|
524
525
|
} catch (error) {
|
|
525
|
-
console.error("[Apple Pay] Merchant validation error:",
|
|
526
|
-
|
|
526
|
+
console.error("[Apple Pay] Merchant validation error:", {
|
|
527
|
+
message: error.message,
|
|
528
|
+
stack: error.stack,
|
|
529
|
+
response: error.response
|
|
530
|
+
});
|
|
531
|
+
|
|
532
|
+
// Call onError to notify the user
|
|
527
533
|
if (typeof onError === 'function') {
|
|
528
|
-
onError(error);
|
|
534
|
+
onError(new Error(`Apple Pay merchant validation failed: ${error.message}. Please check your Payone Apple Pay configuration in PMI (CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay).`));
|
|
529
535
|
}
|
|
530
|
-
|
|
531
|
-
//
|
|
532
|
-
// Apple Pay
|
|
533
|
-
|
|
536
|
+
|
|
537
|
+
// Complete with a rejected promise
|
|
538
|
+
// This will cause Apple Pay to close the dialog, which is expected behavior
|
|
539
|
+
// We cannot proceed without a valid merchant session from Payone
|
|
540
|
+
event.complete(Promise.reject(error));
|
|
534
541
|
}
|
|
535
542
|
};
|
|
536
543
|
|
|
@@ -610,11 +617,11 @@ const ApplePayButton = ({
|
|
|
610
617
|
|
|
611
618
|
// Extract payment token
|
|
612
619
|
const paymentToken = response.details?.paymentToken || response.details?.token;
|
|
613
|
-
|
|
620
|
+
|
|
614
621
|
if (!paymentToken) {
|
|
615
622
|
console.error("[Apple Pay] Payment token is missing from response");
|
|
616
623
|
try {
|
|
617
|
-
|
|
624
|
+
await response.complete("fail");
|
|
618
625
|
} catch (completeError) {
|
|
619
626
|
console.error("[Apple Pay] Error completing payment with fail:", completeError);
|
|
620
627
|
}
|
|
@@ -656,11 +663,11 @@ const ApplePayButton = ({
|
|
|
656
663
|
// The callback should set the token in state and return success immediately
|
|
657
664
|
// It should NOT process the payment yet - that will happen when user clicks the button
|
|
658
665
|
const callbackResult = onTokenReceived(tokenString, {
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
666
|
+
paymentToken: paymentToken,
|
|
667
|
+
billingContact: response.payerName || response.details?.billingContact,
|
|
668
|
+
shippingContact: response.shippingAddress || response.details?.shippingAddress,
|
|
669
|
+
shippingOption: response.shippingOption || response.details?.shippingOption
|
|
670
|
+
});
|
|
664
671
|
|
|
665
672
|
// If callback returns a promise, wait for it to resolve or reject
|
|
666
673
|
if (callbackResult && typeof callbackResult.then === 'function') {
|
|
@@ -772,12 +779,12 @@ const ApplePayButton = ({
|
|
|
772
779
|
}
|
|
773
780
|
});
|
|
774
781
|
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
782
|
+
console.log("[Apple Pay] Merchant session received from backend:", {
|
|
783
|
+
hasData: !!merchantSession.data,
|
|
784
|
+
merchantIdentifier: merchantSession.data?.merchantIdentifier
|
|
785
|
+
});
|
|
779
786
|
|
|
780
|
-
|
|
787
|
+
return merchantSession.data || merchantSession;
|
|
781
788
|
} catch (error) {
|
|
782
789
|
console.error("[Apple Pay] Merchant validation error:", {
|
|
783
790
|
message: error.message,
|
|
@@ -796,10 +803,10 @@ const ApplePayButton = ({
|
|
|
796
803
|
console.error("[Apple Pay] Server error - Check server logs for details.");
|
|
797
804
|
}
|
|
798
805
|
|
|
799
|
-
// If validation fails,
|
|
800
|
-
//
|
|
801
|
-
|
|
802
|
-
|
|
806
|
+
// If validation fails, we cannot proceed
|
|
807
|
+
// Apple Pay requires a valid merchant session from Payone
|
|
808
|
+
console.error("[Apple Pay] Merchant validation failed - cannot proceed without valid session");
|
|
809
|
+
throw error;
|
|
803
810
|
}
|
|
804
811
|
};
|
|
805
812
|
|
|
@@ -41,16 +41,16 @@ const ApplePayConfig = ({
|
|
|
41
41
|
...config,
|
|
42
42
|
countryCode: value
|
|
43
43
|
};
|
|
44
|
-
|
|
44
|
+
|
|
45
45
|
// Auto-update currency if current currency is not supported in new country
|
|
46
46
|
const newSupportedCurrencies = getSupportedCurrenciesForCountry(value);
|
|
47
47
|
if (!newSupportedCurrencies.find(c => c.code === currencyCode)) {
|
|
48
48
|
newConfig.currencyCode = newSupportedCurrencies[0]?.code || "USD";
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
|
|
51
51
|
// Auto-update networks based on country
|
|
52
52
|
newConfig.supportedNetworks = getSupportedNetworksForCountry(value);
|
|
53
|
-
|
|
53
|
+
|
|
54
54
|
onConfigChange(newConfig);
|
|
55
55
|
};
|
|
56
56
|
|
|
@@ -66,7 +66,7 @@ const ApplePayConfig = ({
|
|
|
66
66
|
const newNetworks = currentNetworks.includes(networkCode)
|
|
67
67
|
? currentNetworks.filter(n => n !== networkCode)
|
|
68
68
|
: [...currentNetworks, networkCode];
|
|
69
|
-
|
|
69
|
+
|
|
70
70
|
onConfigChange({
|
|
71
71
|
...config,
|
|
72
72
|
supportedNetworks: newNetworks
|
|
@@ -78,7 +78,7 @@ const ApplePayConfig = ({
|
|
|
78
78
|
const newCapabilities = currentCapabilities.includes(capabilityCode)
|
|
79
79
|
? currentCapabilities.filter(c => c !== capabilityCode)
|
|
80
80
|
: [...currentCapabilities, capabilityCode];
|
|
81
|
-
|
|
81
|
+
|
|
82
82
|
onConfigChange({
|
|
83
83
|
...config,
|
|
84
84
|
merchantCapabilities: newCapabilities
|
|
@@ -100,43 +100,43 @@ const ApplePayConfig = ({
|
|
|
100
100
|
{/* Country and Currency */}
|
|
101
101
|
<Flex gap={4} wrap="wrap">
|
|
102
102
|
<Box style={{ flex: 1, minWidth: "300px" }}>
|
|
103
|
-
|
|
103
|
+
<Select
|
|
104
104
|
label="Country Code"
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
105
|
+
name="countryCode"
|
|
106
|
+
value={countryCode}
|
|
107
|
+
onChange={handleCountryChange}
|
|
108
|
+
hint="Select the country where your business operates"
|
|
109
|
+
required
|
|
110
|
+
>
|
|
111
|
+
{APPLE_PAY_SUPPORTED_COUNTRIES.map(country => (
|
|
112
|
+
<Option key={country.code} value={country.code}>
|
|
113
|
+
{country.name} ({country.code})
|
|
114
|
+
</Option>
|
|
115
|
+
))}
|
|
116
|
+
</Select>
|
|
117
|
+
</Box>
|
|
118
118
|
|
|
119
119
|
<Box style={{ flex: 1, minWidth: "300px" }}>
|
|
120
|
-
|
|
120
|
+
<Select
|
|
121
121
|
label="Currency Code"
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
122
|
+
name="currencyCode"
|
|
123
|
+
value={currencyCode}
|
|
124
|
+
onChange={handleCurrencyChange}
|
|
125
125
|
hint={`Supported currencies for ${countryCode}`}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
126
|
+
required
|
|
127
|
+
>
|
|
128
|
+
{supportedCurrencies.map(currency => (
|
|
129
|
+
<Option key={currency.code} value={currency.code}>
|
|
130
|
+
{currency.name} ({currency.code}) {currency.symbol}
|
|
131
|
+
</Option>
|
|
132
|
+
))}
|
|
133
|
+
</Select>
|
|
134
|
+
{supportedCurrencies.length === 0 && (
|
|
135
|
+
<Typography variant="pi" textColor="danger600" style={{ marginTop: "4px" }}>
|
|
136
|
+
No supported currencies for this country. Please select a different country.
|
|
137
|
+
</Typography>
|
|
138
|
+
)}
|
|
139
|
+
</Box>
|
|
140
140
|
</Flex>
|
|
141
141
|
|
|
142
142
|
{/* Button Style and Type */}
|
|
@@ -186,23 +186,23 @@ const ApplePayConfig = ({
|
|
|
186
186
|
{APPLE_PAY_SUPPORTED_NETWORKS.map(network => {
|
|
187
187
|
const isSupported = supportedNetworksForCountry.includes(network.code);
|
|
188
188
|
const isSelected = supportedNetworks?.includes(network.code);
|
|
189
|
-
|
|
189
|
+
|
|
190
190
|
return (
|
|
191
191
|
<Box key={network.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
192
|
+
<Checkbox
|
|
193
|
+
name={`network-${network.code}`}
|
|
194
|
+
checked={isSelected}
|
|
195
|
+
onChange={() => handleNetworkToggle(network.code)}
|
|
196
|
+
disabled={!isSupported}
|
|
197
|
+
hint={!isSupported ? `Not supported in ${countryCode}` : undefined}
|
|
198
|
+
>
|
|
199
|
+
{network.name} ({network.code})
|
|
200
|
+
{!isSupported && (
|
|
201
|
+
<Typography variant="sigma" textColor="neutral500" style={{ marginLeft: "8px" }}>
|
|
202
202
|
(Not available)
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
203
|
+
</Typography>
|
|
204
|
+
)}
|
|
205
|
+
</Checkbox>
|
|
206
206
|
</Box>
|
|
207
207
|
);
|
|
208
208
|
})}
|
|
@@ -225,16 +225,16 @@ const ApplePayConfig = ({
|
|
|
225
225
|
<Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
|
|
226
226
|
{APPLE_PAY_MERCHANT_CAPABILITIES.map(capability => {
|
|
227
227
|
const isSelected = merchantCapabilities?.includes(capability.code);
|
|
228
|
-
|
|
228
|
+
|
|
229
229
|
return (
|
|
230
230
|
<Box key={capability.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
231
|
+
<Checkbox
|
|
232
|
+
name={`capability-${capability.code}`}
|
|
233
|
+
checked={isSelected}
|
|
234
|
+
onChange={() => handleCapabilityToggle(capability.code)}
|
|
235
|
+
>
|
|
236
|
+
{capability.name} - {capability.description}
|
|
237
|
+
</Checkbox>
|
|
238
238
|
</Box>
|
|
239
239
|
);
|
|
240
240
|
})}
|
|
@@ -256,49 +256,49 @@ const ApplePayConfig = ({
|
|
|
256
256
|
</Typography>
|
|
257
257
|
<Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
|
|
258
258
|
<Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
259
|
+
<Checkbox
|
|
260
|
+
name="requestPayerName"
|
|
261
|
+
checked={requestPayerName}
|
|
262
|
+
onChange={(checked) => onConfigChange({ ...config, requestPayerName: checked })}
|
|
263
|
+
>
|
|
264
|
+
Request Payer Name
|
|
265
|
+
</Checkbox>
|
|
266
266
|
</Box>
|
|
267
267
|
<Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
268
|
+
<Checkbox
|
|
269
|
+
name="requestBillingAddress"
|
|
270
|
+
checked={requestBillingAddress}
|
|
271
|
+
onChange={(checked) => onConfigChange({ ...config, requestBillingAddress: checked })}
|
|
272
|
+
>
|
|
273
|
+
Request Billing Address
|
|
274
|
+
</Checkbox>
|
|
275
275
|
</Box>
|
|
276
276
|
<Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
277
|
+
<Checkbox
|
|
278
|
+
name="requestPayerEmail"
|
|
279
|
+
checked={requestPayerEmail}
|
|
280
|
+
onChange={(checked) => onConfigChange({ ...config, requestPayerEmail: checked })}
|
|
281
|
+
>
|
|
282
|
+
Request Payer Email
|
|
283
|
+
</Checkbox>
|
|
284
284
|
</Box>
|
|
285
285
|
<Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
286
|
+
<Checkbox
|
|
287
|
+
name="requestPayerPhone"
|
|
288
|
+
checked={requestPayerPhone}
|
|
289
|
+
onChange={(checked) => onConfigChange({ ...config, requestPayerPhone: checked })}
|
|
290
|
+
>
|
|
291
|
+
Request Payer Phone
|
|
292
|
+
</Checkbox>
|
|
293
293
|
</Box>
|
|
294
294
|
<Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
295
|
+
<Checkbox
|
|
296
|
+
name="requestShipping"
|
|
297
|
+
checked={requestShipping}
|
|
298
|
+
onChange={(checked) => onConfigChange({ ...config, requestShipping: checked })}
|
|
299
|
+
>
|
|
300
|
+
Request Shipping Address
|
|
301
|
+
</Checkbox>
|
|
302
302
|
</Box>
|
|
303
303
|
</Flex>
|
|
304
304
|
</Box> */}
|
|
@@ -309,7 +309,7 @@ const ApplePayConfig = ({
|
|
|
309
309
|
Merchant Identifier
|
|
310
310
|
</Typography>
|
|
311
311
|
<Typography variant="pi" textColor="neutral600">
|
|
312
|
-
{settings?.mid || settings?.portalid
|
|
312
|
+
{settings?.mid || settings?.portalid
|
|
313
313
|
? `Using: ${settings.mid || settings.portalid}`
|
|
314
314
|
: "Merchant identifier will be obtained from Payone after domain verification. See documentation for setup instructions."
|
|
315
315
|
}
|
package/package.json
CHANGED
|
@@ -126,6 +126,9 @@ const initializeApplePaySession = async (strapi, params) => {
|
|
|
126
126
|
|
|
127
127
|
strapi.log.info("[Apple Pay] Session initialization response:", JSON.stringify(responseData, null, 2));
|
|
128
128
|
strapi.log.info("[Apple Pay] Response status:", responseData.status || responseData.Status);
|
|
129
|
+
strapi.log.info("[Apple Pay] Response errorcode:", responseData.errorcode || responseData.ErrorCode || "none");
|
|
130
|
+
strapi.log.info("[Apple Pay] Response errormessage:", responseData.errormessage || responseData.ErrorMessage || responseData.errortxt || responseData.ErrorTxt || "none");
|
|
131
|
+
strapi.log.info("[Apple Pay] All response keys:", Object.keys(responseData));
|
|
129
132
|
|
|
130
133
|
if (responseData.errorcode || responseData.ErrorCode) {
|
|
131
134
|
strapi.log.warn("[Apple Pay] Response contains error:", {
|
|
@@ -205,10 +208,12 @@ const validateApplePayMerchant = async (strapi, params) => {
|
|
|
205
208
|
strapi.log.error("[Apple Pay] Failed to initialize session with Payone:", {
|
|
206
209
|
message: error.message,
|
|
207
210
|
status: error.response?.status,
|
|
208
|
-
data: error.response?.data
|
|
211
|
+
data: error.response?.data,
|
|
212
|
+
stack: error.stack
|
|
209
213
|
});
|
|
210
|
-
//
|
|
211
|
-
|
|
214
|
+
// DO NOT return empty object - throw error instead
|
|
215
|
+
// Empty object causes Apple Pay to close dialog without proper error message
|
|
216
|
+
throw new Error(`Failed to initialize Apple Pay session with Payone: ${error.message}. Please check your Payone configuration and ensure Apple Pay is properly set up in PMI.`);
|
|
212
217
|
}
|
|
213
218
|
|
|
214
219
|
strapi.log.info("[Apple Pay] Session initialization result:", {
|
|
@@ -250,10 +255,12 @@ const validateApplePayMerchant = async (strapi, params) => {
|
|
|
250
255
|
strapi.log.info("[Apple Pay] Extracted Apple Pay session data:", {
|
|
251
256
|
hasBase64Session: !!applePaySessionBase64,
|
|
252
257
|
sessionLength: applePaySessionBase64?.length,
|
|
253
|
-
workorderid: sessionResponse.workorderid
|
|
258
|
+
workorderid: sessionResponse.workorderid,
|
|
259
|
+
allResponseKeys: Object.keys(sessionResponse),
|
|
260
|
+
responseSample: JSON.stringify(sessionResponse).substring(0, 500)
|
|
254
261
|
});
|
|
255
262
|
|
|
256
|
-
if (applePaySessionBase64) {
|
|
263
|
+
if (applePaySessionBase64 && applePaySessionBase64.length > 0) {
|
|
257
264
|
try {
|
|
258
265
|
// Decode BASE64 merchant session
|
|
259
266
|
const merchantSessionJson = Buffer.from(applePaySessionBase64, 'base64').toString('utf-8');
|
|
@@ -312,10 +319,22 @@ const validateApplePayMerchant = async (strapi, params) => {
|
|
|
312
319
|
throw new Error(`Failed to decode Apple Pay merchant session: ${decodeError.message}`);
|
|
313
320
|
}
|
|
314
321
|
} else {
|
|
315
|
-
// If
|
|
316
|
-
//
|
|
317
|
-
//
|
|
318
|
-
strapi.log.
|
|
322
|
+
// CRITICAL: If Payone doesn't return merchant session, we cannot proceed
|
|
323
|
+
// Apple Pay requires the merchant session to be validated by Apple's servers
|
|
324
|
+
// Payone should return add_paydata[applepay_payment_session] after successful initialization
|
|
325
|
+
strapi.log.error("[Apple Pay] CRITICAL: No Apple Pay session data in Payone response!");
|
|
326
|
+
strapi.log.error("[Apple Pay] This means merchant validation will fail. Possible causes:");
|
|
327
|
+
strapi.log.error("[Apple Pay] 1. Apple Pay not properly configured in Payone PMI");
|
|
328
|
+
strapi.log.error("[Apple Pay] 2. Domain not verified in Payone PMI");
|
|
329
|
+
strapi.log.error("[Apple Pay] 3. Merchant identifier not configured in Payone PMI");
|
|
330
|
+
strapi.log.error("[Apple Pay] 4. Apple Pay onboarding not completed in Payone PMI");
|
|
331
|
+
strapi.log.error("[Apple Pay] Response status:", responseStatus);
|
|
332
|
+
strapi.log.error("[Apple Pay] Full response keys:", Object.keys(sessionResponse));
|
|
333
|
+
strapi.log.error("[Apple Pay] Response sample:", JSON.stringify(sessionResponse).substring(0, 1000));
|
|
334
|
+
|
|
335
|
+
// DO NOT create a fallback session - it will fail validation
|
|
336
|
+
// Instead, throw an error so the frontend knows validation failed
|
|
337
|
+
throw new Error("Payone did not return Apple Pay merchant session. Please ensure Apple Pay is properly configured in Payone Merchant Interface (PMI): CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay configuration. The merchant session must come from Payone after successful Apple Pay onboarding.");
|
|
319
338
|
|
|
320
339
|
// Get merchant identifier from settings
|
|
321
340
|
// According to Payone docs, merchant identifier should be visible in PMI after onboarding
|
|
@@ -378,18 +397,43 @@ const validateApplePayMerchant = async (strapi, params) => {
|
|
|
378
397
|
}
|
|
379
398
|
}
|
|
380
399
|
|
|
381
|
-
// If initialization failed,
|
|
382
|
-
// Payment Request API
|
|
383
|
-
strapi.log.
|
|
384
|
-
|
|
400
|
+
// If initialization failed, we cannot proceed
|
|
401
|
+
// Payment Request API requires a valid merchant session
|
|
402
|
+
strapi.log.error("[Apple Pay] Session initialization failed - status:", responseStatus);
|
|
403
|
+
strapi.log.error("[Apple Pay] Full Payone response:", JSON.stringify(sessionResponse, null, 2));
|
|
404
|
+
strapi.log.error("[Apple Pay] This means merchant validation will fail.");
|
|
405
|
+
strapi.log.error("[Apple Pay] Possible causes:");
|
|
406
|
+
strapi.log.error("[Apple Pay] 1. Payone returned ERROR status - check errorcode and errormessage in response");
|
|
407
|
+
strapi.log.error("[Apple Pay] 2. Apple Pay not configured in Payone PMI");
|
|
408
|
+
strapi.log.error("[Apple Pay] 3. Domain not verified in Payone PMI");
|
|
409
|
+
strapi.log.error("[Apple Pay] 4. Merchant identifier not configured correctly");
|
|
410
|
+
strapi.log.error("[Apple Pay] 5. Apple Pay onboarding not completed");
|
|
411
|
+
|
|
412
|
+
// Extract error details from Payone response
|
|
413
|
+
const errorCode = sessionResponse.errorcode || sessionResponse.ErrorCode;
|
|
414
|
+
const errorMessage = sessionResponse.errormessage || sessionResponse.ErrorMessage || sessionResponse.errortxt || sessionResponse.ErrorTxt;
|
|
415
|
+
|
|
416
|
+
if (errorCode || errorMessage) {
|
|
417
|
+
strapi.log.error("[Apple Pay] Payone error details:", {
|
|
418
|
+
errorCode: errorCode,
|
|
419
|
+
errorMessage: errorMessage
|
|
420
|
+
});
|
|
421
|
+
throw new Error(`Payone Apple Pay initialization failed: ${errorCode ? `Error ${errorCode}` : ''} ${errorMessage || 'Unknown error'}. Please check your Payone Apple Pay configuration in PMI (CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay).`);
|
|
422
|
+
} else {
|
|
423
|
+
throw new Error(`Apple Pay session initialization failed with status: ${responseStatus || 'UNKNOWN'}. Please check your Payone Apple Pay configuration in PMI (CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay).`);
|
|
424
|
+
}
|
|
385
425
|
} catch (error) {
|
|
386
426
|
strapi.log.error("[Apple Pay] Merchant validation error:", {
|
|
387
427
|
message: error.message,
|
|
388
428
|
stack: error.stack,
|
|
389
|
-
response: error.response?.data
|
|
429
|
+
response: error.response?.data,
|
|
430
|
+
status: error.response?.status
|
|
390
431
|
});
|
|
391
|
-
|
|
392
|
-
return
|
|
432
|
+
|
|
433
|
+
// DO NOT return empty object - this causes Apple Pay to close the dialog
|
|
434
|
+
// Instead, re-throw the error so the frontend can handle it properly
|
|
435
|
+
// The error message will help the user understand what went wrong
|
|
436
|
+
throw error;
|
|
393
437
|
}
|
|
394
438
|
};
|
|
395
439
|
|