strapi-plugin-payone-provider 1.5.0 → 1.5.3

package/admin/src/pages/App/components/paymentActions/PreauthorizationForm.js

@@ -25,7 +25,8 @@ const PreauthorizationForm = ({
   cardexpiredate,
   setCardexpiredate,
   cardcvc2,
-  setCardcvc2
+  setCardcvc2,
+  isLiveMode = false
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -41,12 +42,35 @@ const PreauthorizationForm = ({
     }
   };
 
-  const handleApplePayToken = (token, paymentData) => {
+  const handleApplePayToken = async (token, paymentData) => {
     if (!token) {
-      return;
+      console.error("[Apple Pay] Token is missing in handleApplePayToken");
+      return Promise.reject(new Error("Token is missing"));
     }
+
+    console.log("[Apple Pay] handleApplePayToken called with token:", {
+      hasToken: !!token,
+      tokenLength: token?.length,
+      paymentData: !!paymentData
+    });
+
+    // IMPORTANT: Set token in state immediately (synchronously)
+    // This ensures the token is saved before the dialog closes
     setApplePayToken(token);
-    onPreauthorization(token);
+
+    console.log("[Apple Pay] Token saved to state successfully");
+
+    // Don't call onPreauthorization immediately
+    // Let the user manually trigger the payment using the button
+    // This prevents the dialog from closing prematurely if there's an error
+    // The dialog will close with success, and the user will see the "Process Preauthorization" button
+
+    // Return success immediately so the dialog closes properly
+    // The actual payment processing will happen when the user clicks the button
+    return Promise.resolve({
+      success: true,
+      message: "Token received successfully. Please click 'Process Preauthorization' to complete the payment."
+    });
   };
 
   const handleApplePayError = (error) => {
@@ -122,21 +146,31 @@ const PreauthorizationForm = ({
             onError={handleApplePayError}
             settings={settings}
           />
-          <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
-            <Typography variant="pi" textColor="neutral600" style={{ marginBottom: "8px" }}>
-              Apple Pay is not available on localhost. You can test the payment flow without Apple Pay token:
-            </Typography>
-            <Button
-              variant="secondary"
-              onClick={() => onPreauthorization(null)}
-              loading={isProcessingPayment}
-              startIcon={<Play />}
-              style={{ maxWidth: '200px' }}
-              disabled={!paymentAmount.trim() || !preauthReference.trim()}
-            >
-              Process Preauthorization
-            </Button>
-          </Box>
+          {applePayToken && (
+            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
+              <Typography variant="pi" textColor="success600" style={{ marginBottom: "8px", fontWeight: "bold" }}>
+                ✓ Apple Pay token received. You can now process the preauthorization:
+              </Typography>
+              <Button
+                variant="default"
+                onClick={() => onPreauthorization(applePayToken)}
+                loading={isProcessingPayment}
+                startIcon={<Play />}
+                style={{ maxWidth: '200px' }}
+                disabled={!paymentAmount.trim() || !preauthReference.trim() || isLiveMode}
+                className="payment-button payment-button-primary"
+              >
+                Process Preauthorization
+              </Button>
+            </Box>
+          )}
+          {!applePayToken && (
+            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
+              <Typography variant="pi" textColor="neutral600" style={{ marginBottom: "8px" }}>
+                Apple Pay is not available on localhost. You can test the payment flow without Apple Pay token:
+              </Typography>
+            </Box>
+          )}
         </Box>
       ) : (
         <Button
@@ -150,7 +184,8 @@ const PreauthorizationForm = ({
             !paymentAmount.trim() ||
             (paymentMethod === "cc" &&
               settings?.enable3DSecure !== false &&
-              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2))
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2)) ||
+            isLiveMode
           }
         >
           Process Preauthorization

package/admin/src/pages/App/index.js

@@ -1,13 +1,19 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useLocation, useHistory } from "react-router-dom";
 import { Layout, ContentLayout, Box } from "@strapi/design-system";
 import useSettings from "../hooks/useSettings";
 import useTransactionHistory from "../hooks/useTransactionHistory";
 import usePaymentActions from "../hooks/usePaymentActions";
 import AppHeader from "./components/AppHeader";
 import AppTabs from "./components/AppTabs";
+import ApplePayConfigPanel from "./components/ApplePayConfigPanel";
+import GooglePayConfigPanel from "./components/GooglePayConfigPanel";
 import "./styles.css";
+import pluginId from "../../pluginId";
 
 const App = () => {
+  const location = useLocation();
+  const history = useHistory();
   const [activeTab, setActiveTab] = useState(0);
 
   // Custom hooks
@@ -15,6 +21,68 @@ const App = () => {
   const transactionHistory = useTransactionHistory();
   const paymentActions = usePaymentActions();
 
+  useEffect(() => {
+    if (location.pathname.includes('/apple-pay-config') || location.pathname.includes('/google-pay-config')) {
+    } else {
+      const tabFromPath = location.pathname.includes('/history') ? 1 :
+        location.pathname.includes('/payment-actions') ? 2 :
+          location.pathname.includes('/documentation') ? 3 : 0;
+      setActiveTab(tabFromPath);
+    }
+  }, [location.pathname]);
+
+  const isApplePayConfigPage = location.pathname.includes('/apple-pay-config');
+  const isGooglePayConfigPage = location.pathname.includes('/google-pay-config');
+
+  if (isApplePayConfigPage) {
+    return (
+      <Layout>
+        <AppHeader
+          title="Apple Pay Configuration"
+          activeTab={null}
+          isSaving={settings.isSaving}
+          onSave={settings.handleSave}
+          onBack={() => history.push(`/plugins/${pluginId}`)}
+        />
+        <ContentLayout>
+          <Box padding={6}>
+            <ApplePayConfigPanel
+              settings={settings.settings}
+              onInputChange={settings.handleInputChange}
+              isSaving={settings.isSaving}
+              onSave={settings.handleSave}
+            />
+          </Box>
+        </ContentLayout>
+      </Layout>
+    );
+  }
+
+  if (isGooglePayConfigPage) {
+    return (
+      <Layout>
+        <AppHeader
+          title="Google Pay Configuration"
+          activeTab={null}
+          isSaving={settings.isSaving}
+          onSave={settings.handleSave}
+          onBack={() => history.push(`/plugins/${pluginId}`)}
+        />
+        <ContentLayout>
+          <Box padding={6}>
+            <GooglePayConfigPanel
+              settings={settings.settings}
+              onInputChange={settings.handleInputChange}
+              isSaving={settings.isSaving}
+              onSave={settings.handleSave}
+              onBack={() => history.push(`/plugins/${pluginId}`)}
+            />
+          </Box>
+        </ContentLayout>
+      </Layout>
+    );
+  }
+
   return (
     <Layout>
       <AppHeader
@@ -48,6 +116,7 @@ const App = () => {
             selectedTransaction={transactionHistory.selectedTransaction}
             onTransactionSelect={transactionHistory.handleTransactionSelect}
             paymentActions={paymentActions}
+            history={history}
           />
         </Box>
       </ContentLayout>

package/admin/src/pages/hooks/usePaymentActions.js

@@ -83,6 +83,12 @@ const usePaymentActions = () => {
   };
 
   const handlePreauthorization = async (tokenParam = null) => {
+    console.log("[Payment] handlePreauthorization called", {
+      hasToken: !!tokenParam,
+      paymentMethod,
+      amount: paymentAmount
+    });
+    
     setIsProcessingPayment(true);
     setPaymentError(null);
     setPaymentResult(null);
@@ -211,16 +217,31 @@ const usePaymentActions = () => {
 
       setPaymentResult(responseData);
 
+      console.log("[Payment] Preauthorization result:", {
+        status,
+        hasError: !!errorCode,
+        errorCode,
+        errorMessage
+      });
+
       if (status === "APPROVED") {
         handlePaymentSuccess("Preauthorization completed successfully");
+        // Return success result for Apple Pay callback
+        return { success: true, data: responseData };
       } else {
+        const errorMsg = errorMessage || `Unexpected status: ${status}`;
         handlePaymentError(
-          { message: `Unexpected status: ${status}` },
+          { message: errorMsg },
           `Preauthorization completed with status: ${status}`
         );
+        // Return error result for Apple Pay callback
+        throw new Error(errorMsg);
       }
     } catch (error) {
+      console.error("[Payment] Preauthorization error:", error);
       handlePaymentError(error, "Preauthorization failed");
+      // Re-throw error so Apple Pay callback knows it failed
+      throw error;
     } finally {
       setIsProcessingPayment(false);
     }
@@ -356,16 +377,31 @@ const usePaymentActions = () => {
 
       setPaymentResult(responseData);
 
+      console.log("[Payment] Authorization result:", {
+        status,
+        hasError: !!errorCode,
+        errorCode,
+        errorMessage
+      });
+
       if (status === "APPROVED") {
         handlePaymentSuccess("Authorization completed successfully");
+        // Return success result for Apple Pay callback
+        return { success: true, data: responseData };
       } else {
+        const errorMsg = errorMessage || `Unexpected status: ${status}`;
         handlePaymentError(
-          { message: `Unexpected status: ${status}` },
+          { message: errorMsg },
           `Authorization completed with status: ${status}`
         );
+        // Return error result for Apple Pay callback
+        throw new Error(errorMsg);
       }
     } catch (error) {
+      console.error("[Payment] Authorization error:", error);
       handlePaymentError(error, "Authorization failed");
+      // Re-throw error so Apple Pay callback knows it failed
+      throw error;
     } finally {
       setIsProcessingPayment(false);
     }

package/admin/src/pages/hooks/useSettings.js

@@ -49,6 +49,8 @@ const useSettings = () => {
         type: "success",
         message: "Settings saved successfully"
       });
+      // Reload settings after save to ensure consistency
+      await loadSettings();
     } catch (error) {
       toggleNotification({
         type: "warning",

package/admin/src/pages/utils/googlePayConstants.js

@@ -0,0 +1,79 @@
+/**
+ * Google Pay Constants
+ * Based on Google Pay documentation and Payone requirements
+ * https://developers.google.com/pay/api/web/overview
+ * https://docs.payone.com/display/public/PLATFORM/Google+Pay
+ */
+
+// Google Pay supported card networks
+export const GOOGLE_PAY_SUPPORTED_NETWORKS = [
+  { code: "MASTERCARD", name: "Mastercard" },
+  { code: "VISA", name: "Visa" },
+  { code: "AMEX", name: "American Express" },
+  { code: "DISCOVER", name: "Discover" },
+  { code: "JCB", name: "JCB" }
+];
+
+// Google Pay supported authentication methods
+export const GOOGLE_PAY_AUTH_METHODS = [
+  { code: "PAN_ONLY", name: "PAN Only", description: "Basic card authentication" },
+  { code: "CRYPTOGRAM_3DS", name: "3D Secure", description: "3D Secure authentication" }
+];
+
+// Google Pay supported countries
+export const GOOGLE_PAY_SUPPORTED_COUNTRIES = [
+  { code: "US", name: "United States" },
+  { code: "GB", name: "United Kingdom" },
+  { code: "CA", name: "Canada" },
+  { code: "AU", name: "Australia" },
+  { code: "DE", name: "Germany" },
+  { code: "FR", name: "France" },
+  { code: "IT", name: "Italy" },
+  { code: "ES", name: "Spain" },
+  { code: "NL", name: "Netherlands" },
+  { code: "BE", name: "Belgium" },
+  { code: "CH", name: "Switzerland" },
+  { code: "AT", name: "Austria" },
+  { code: "IE", name: "Ireland" },
+  { code: "SE", name: "Sweden" },
+  { code: "NO", name: "Norway" },
+  { code: "DK", name: "Denmark" },
+  { code: "FI", name: "Finland" },
+  { code: "PL", name: "Poland" },
+  { code: "BR", name: "Brazil" },
+  { code: "MX", name: "Mexico" },
+  { code: "JP", name: "Japan" },
+  { code: "SG", name: "Singapore" },
+  { code: "NZ", name: "New Zealand" },
+  { code: "IN", name: "India" }
+];
+
+// Google Pay supported currencies
+export const GOOGLE_PAY_SUPPORTED_CURRENCIES = [
+  { code: "USD", name: "US Dollar", symbol: "$" },
+  { code: "EUR", name: "Euro", symbol: "€" },
+  { code: "GBP", name: "British Pound", symbol: "£" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "C$" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr" },
+  { code: "PLN", name: "Polish Zloty", symbol: "zł" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$" },
+  { code: "MXN", name: "Mexican Peso", symbol: "$" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹" }
+];
+
+// Default Google Pay configuration
+export const DEFAULT_GOOGLE_PAY_CONFIG = {
+  countryCode: "US",
+  currencyCode: "USD",
+  allowedCardNetworks: ["MASTERCARD", "VISA"],
+  allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
+  merchantName: "Your Store Name"
+};
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-payone-provider",
-  "version": "1.5.0",
+  "version": "1.5.3",
   "description": "Strapi plugin for Payone payment gateway integration",
   "license": "MIT",
   "maintainers": [