strapi-plugin-payone-provider 1.1.3 → 1.2.4

package/admin/src/index.js

@@ -2,6 +2,7 @@ import pluginPkg from "../../package.json";
 import pluginId from "./pluginId";
 import Initializer from "./components/Initializer";
 import PluginIcon from "./components/PluginIcon";
+import { injectGooglePayScript } from "./pages/utils/injectGooglePayScript";
 
 const name = pluginPkg.strapi.name;
 
@@ -29,7 +30,9 @@ export default {
     });
   },
 
-  bootstrap(app) {},
+  bootstrap(app) {
+    injectGooglePayScript();
+  },
 
   async registerTrads() {
     return Promise.resolve([]);

package/admin/src/pages/App/components/AppHeader.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { HeaderLayout, Box, Typography, Button } from "@strapi/design-system";
+import { Check } from "@strapi/icons";
+
+const AppHeader = ({ activeTab, isSaving, onSave }) => {
+  return (
+    <HeaderLayout
+      title={
+        <Box>
+          <Typography variant="alpha" as="h1" fontWeight="bold" className="payment-title">
+            Payone Provider
+          </Typography>
+          <Typography variant="pi" marginTop={2} className="payment-subtitle">
+            Configure your Payone integration and manage payment transactions
+          </Typography>
+        </Box>
+      }
+      primaryAction={
+        activeTab === 0 ? (
+          <Button
+            loading={isSaving}
+            onClick={onSave}
+            startIcon={<Check />}
+            size="L"
+            variant="default"
+            className="payment-button payment-button-success"
+          >
+            Save Configuration
+          </Button>
+        ) : null
+      }
+    />
+  );
+};
+
+export default AppHeader;
+

package/admin/src/pages/App/components/AppTabs.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from "@strapi/design-system";
+import ConfigurationPanel from "./ConfigurationPanel";
+import HistoryPanel from "./HistoryPanel";
+import PaymentActionsPanel from "./PaymentActionsPanel";
+
+const AppTabs = ({
+  activeTab,
+  setActiveTab,
+  // Settings props
+  settings,
+  isSaving,
+  isTesting,
+  testResult,
+  onSave,
+  onTestConnection,
+  onInputChange,
+  // Transaction history props
+  filters,
+  onFilterChange,
+  onFilterApply,
+  isLoadingHistory,
+  transactionHistory,
+  paginatedTransactions,
+  currentPage,
+  totalPages,
+  pageSize,
+  onRefresh,
+  onPageChange,
+  selectedTransaction,
+  onTransactionSelect,
+  // Payment actions props
+  paymentActions
+}) => {
+  return (
+    <TabGroup
+      label="Payone Provider Tabs"
+      onTabChange={(index) => setActiveTab(index)}
+    >
+      <Tabs style={{ borderBottom: "2px solid #e8e8ea" }}>
+        <Tab
+          className={`payment-tab ${activeTab === 0 ? 'payment-tab-active' : ''}`}
+        >
+          Configuration
+        </Tab>
+        <Tab
+          className={`payment-tab ${activeTab === 1 ? 'payment-tab-active' : ''}`}
+        >
+          Transaction History
+        </Tab>
+        <Tab
+          className={`payment-tab ${activeTab === 2 ? 'payment-tab-active' : ''}`}
+        >
+          Payment Actions
+        </Tab>
+      </Tabs>
+      <TabPanels>
+        <TabPanel>
+          <ConfigurationPanel
+            settings={settings}
+            isSaving={isSaving}
+            isTesting={isTesting}
+            testResult={testResult}
+            onSave={onSave}
+            onTestConnection={onTestConnection}
+            onInputChange={onInputChange}
+          />
+        </TabPanel>
+
+        <TabPanel>
+          <HistoryPanel
+            filters={filters}
+            onFilterChange={onFilterChange}
+            onFilterApply={onFilterApply}
+            isLoadingHistory={isLoadingHistory}
+            transactionHistory={transactionHistory}
+            paginatedTransactions={paginatedTransactions}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            pageSize={pageSize}
+            onRefresh={onRefresh}
+            onPageChange={onPageChange}
+            selectedTransaction={selectedTransaction}
+            onTransactionSelect={onTransactionSelect}
+          />
+        </TabPanel>
+
+        <TabPanel>
+          <PaymentActionsPanel
+            paymentAmount={paymentActions.paymentAmount}
+            setPaymentAmount={paymentActions.setPaymentAmount}
+            preauthReference={paymentActions.preauthReference}
+            setPreauthReference={paymentActions.setPreauthReference}
+            authReference={paymentActions.authReference}
+            setAuthReference={paymentActions.setAuthReference}
+            captureTxid={paymentActions.captureTxid}
+            setCaptureTxid={paymentActions.setCaptureTxid}
+            refundTxid={paymentActions.refundTxid}
+            setRefundTxid={paymentActions.setRefundTxid}
+            refundSequenceNumber={paymentActions.refundSequenceNumber}
+            setRefundSequenceNumber={paymentActions.setRefundSequenceNumber}
+            refundReference={paymentActions.refundReference}
+            setRefundReference={paymentActions.setRefundReference}
+            paymentMethod={paymentActions.paymentMethod}
+            setPaymentMethod={paymentActions.setPaymentMethod}
+            captureMode={paymentActions.captureMode}
+            setCaptureMode={paymentActions.setCaptureMode}
+            isProcessingPayment={paymentActions.isProcessingPayment}
+            paymentError={paymentActions.paymentError}
+            paymentResult={paymentActions.paymentResult}
+            onPreauthorization={paymentActions.handlePreauthorization}
+            onAuthorization={paymentActions.handleAuthorization}
+            onCapture={paymentActions.handleCapture}
+            onRefund={paymentActions.handleRefund}
+            settings={settings}
+            googlePayToken={paymentActions.googlePayToken}
+            setGooglePayToken={paymentActions.setGooglePayToken}
+          />
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
+  );
+};
+
+export default AppTabs;
+

package/admin/src/pages/App/components/ConfigurationPanel.js

@@ -25,30 +25,24 @@ const ConfigurationPanel = ({
 }) => {
   return (
     <Box
-      hasRadius
-      shadow="filterShadow"
+      className="payment-container"
       paddingTop={8}
       paddingBottom={8}
       paddingLeft={8}
       paddingRight={8}
-      style={{
-        borderRadius: "12px",
-        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.08)",
-        border: "1px solid #f6f6f9"
-      }}
     >
       <Flex direction="column" alignItems="stretch" gap={8}>
         <Box>
-          <Typography variant="beta" as="h2" fontWeight="bold">
+          <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
             Payone API Configuration
           </Typography>
-          <Typography variant="pi" marginTop={2}>
+          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '14px' }}>
             Configure your Payone payment gateway settings
           </Typography>
         </Box>
 
         <Box>
-          <Card style={{ borderRadius: "8px", border: "1px solid #e4e2e7" }}>
+          <Card className="payment-card">
             <CardBody padding={6}>
               <Stack spacing={6}>
                 <Flex gap={4} wrap="wrap">
@@ -59,6 +53,7 @@ const ConfigurationPanel = ({
                     onChange={(e) => onInputChange("aid", e.target.value)}
                     required
                     hint="Your Payone account ID"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "300px" }}
                   />
 
@@ -69,6 +64,7 @@ const ConfigurationPanel = ({
                     onChange={(e) => onInputChange("portalid", e.target.value)}
                     required
                     hint="Your Payone portal ID"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "300px" }}
                   />
                 </Flex>
@@ -81,6 +77,7 @@ const ConfigurationPanel = ({
                     onChange={(e) => onInputChange("mid", e.target.value)}
                     required
                     hint="Your Payone merchant ID"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "300px" }}
                   />
 
@@ -92,6 +89,7 @@ const ConfigurationPanel = ({
                     onChange={(e) => onInputChange("key", e.target.value)}
                     required
                     hint="Your Payone portal key (will be encrypted)"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "300px" }}
                   />
                 </Flex>
@@ -103,6 +101,7 @@ const ConfigurationPanel = ({
                     value={settings.mode || "test"}
                     onChange={(value) => onInputChange("mode", value)}
                     hint="Select the API mode"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "300px" }}
                   >
                     <Option value="test">Test Environment</Option>
@@ -117,16 +116,36 @@ const ConfigurationPanel = ({
                       onInputChange("api_version", e.target.value)
                     }
                     hint="Payone API version"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "300px" }}
                   />
                 </Flex>
+
+                <Flex direction="column" wrap="wrap" gap={1} alignItems="flex-start">
+                  <Select
+                    label="Enable 3D Secure"
+                    name="enable3DSecure"
+                    value={settings.enable3DSecure ? "yes" : "no"}
+                    onChange={(value) =>
+                      onInputChange("enable3DSecure", value === "yes")
+                    }
+                    hint="Enable 3D Secure authentication for credit card payments"
+                    className="payment-input"
+                  >
+                    <Option value="yes">Enabled</Option>
+                    <Option value="no">Disabled</Option>
+                  </Select>
+                  <Typography variant="pi" textColor="neutral600" marginTop={1}>
+                    When enabled, credit card payments will require 3D Secure authentication (SCA compliance)
+                  </Typography>
+                </Flex>
               </Stack>
             </CardBody>
           </Card>
         </Box>
 
         <Box paddingTop={6}>
-          <Card style={{ borderRadius: "8px", border: "1px solid #e4e2e7" }}>
+          <Card className="payment-card">
             <CardBody padding={6}>
               <Stack spacing={6}>
                 <Box>
@@ -149,13 +168,7 @@ const ConfigurationPanel = ({
                   onClick={onTestConnection}
                   loading={isTesting}
                   startIcon={<Play />}
-                  style={{
-                    background: "#28a745",
-                    border: "none",
-                    color: "white",
-                    fontWeight: "600",
-                    borderRadius: "8px"
-                  }}
+                  className="payment-button payment-button-success"
                 >
                   {isTesting ? "Testing Connection..." : "Test Connection"}
                 </Button>
@@ -168,12 +181,7 @@ const ConfigurationPanel = ({
                         ? "Connection Successful"
                         : "Connection Failed"
                     }
-                    style={{
-                      borderRadius: "8px",
-                      border: Boolean(testResult.success)
-                        ? "1px solid #d4edda"
-                        : "1px solid #f8d7da"
-                    }}
+                    className="payment-alert"
                   >
                     <Typography
                       variant="pi"
@@ -185,11 +193,7 @@ const ConfigurationPanel = ({
                     {testResult.details && (
                       <Box paddingTop={3}>
                         {Boolean(testResult.success) ? (
-                          <Card
-                            style={{
-                              border: "1px solid #e9ecef"
-                            }}
-                          >
+                          <Card className="payment-card">
                             <CardBody padding={4}>
                               <Typography variant="pi">
                                 <strong>Mode:</strong> {testResult.details.mode}{" "}
@@ -202,12 +206,7 @@ const ConfigurationPanel = ({
                             </CardBody>
                           </Card>
                         ) : (
-                          <Card
-                            style={{
-                              background: "#fff5f5",
-                              border: "1px solid #fed7d7"
-                            }}
-                          >
+                          <Card className="payment-card" style={{ background: "#fff5f5" }}>
                             <CardBody padding={4}>
                               <Stack spacing={2}>
                                 {testResult.errorcode && (

package/admin/src/pages/App/components/GooglePaybutton.js

@@ -0,0 +1,300 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Flex, Typography } from "@strapi/design-system";
+import { injectGooglePayScript } from "../../utils/injectGooglePayScript";
+
+const GooglePayButton = ({
+  amount,
+  currency = "EUR",
+  onTokenReceived,
+  onError,
+  settings
+}) => {
+  const [isReady, setIsReady] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const buttonContainerRef = useRef(null);
+  const paymentsClientRef = useRef(null);
+
+  const baseRequest = {
+    apiVersion: 2,
+    apiVersionMinor: 0
+  };
+
+  const getGooglePayConfig = (settings) => {
+    const gatewayMerchantId = settings?.mid || settings?.portalid || '';
+
+    const allowedCardNetworks = ["MASTERCARD", "VISA"];
+    const allowedAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
+
+    const tokenizationSpecification = {
+      type: 'PAYMENT_GATEWAY',
+      parameters: {
+        'gateway': 'payonegmbh',
+        'gatewayMerchantId': gatewayMerchantId
+      }
+    };
+
+    const baseCardPaymentMethod = {
+      type: "CARD",
+      parameters: {
+        allowedCardNetworks,
+        allowedAuthMethods
+      }
+    };
+
+    const cardPaymentMethod = {
+      ...baseCardPaymentMethod,
+      tokenizationSpecification
+    };
+    return {
+      baseCardPaymentMethod,
+      cardPaymentMethod,
+    };
+  };
+
+  useEffect(() => {
+    injectGooglePayScript();
+
+    const checkGooglePay = () => {
+      try {
+        return typeof window !== 'undefined' &&
+          typeof window.google !== 'undefined' &&
+          window.google.payments?.api?.PaymentsClient;
+      } catch (e) {
+        return false;
+      }
+    };
+
+    if (checkGooglePay()) {
+      initializeGooglePay();
+      return;
+    }
+
+    const handleScriptLoaded = () => {
+      setTimeout(() => {
+        if (checkGooglePay()) {
+          initializeGooglePay();
+        }
+      }, 500);
+    };
+
+    const handleScriptError = () => {
+      setIsLoading(false);
+      if (onError) {
+        onError(new Error("Failed to load Google Pay script. Please check CSP settings."));
+      }
+    };
+
+    window.addEventListener("googlePayScriptLoaded", handleScriptLoaded);
+    window.addEventListener("googlePayScriptError", handleScriptError);
+
+    const checkInterval = setInterval(() => {
+      if (checkGooglePay()) {
+        clearInterval(checkInterval);
+        initializeGooglePay();
+      }
+    }, 200);
+
+    const timeout = setTimeout(() => {
+      clearInterval(checkInterval);
+      if (!checkGooglePay()) {
+        setIsLoading(false);
+        if (onError) {
+          onError(new Error("Google Pay API is not available. Please check if the script is loaded and CSP allows pay.google.com"));
+        }
+      }
+    }, 15000);
+
+    return () => {
+      window.removeEventListener("googlePayScriptLoaded", handleScriptLoaded);
+      window.removeEventListener("googlePayScriptError", handleScriptError);
+      clearInterval(checkInterval);
+      clearTimeout(timeout);
+    };
+  }, [settings, amount, currency]);
+
+  const initializeGooglePay = () => {
+    if (!settings || (!settings.mid && !settings.portalid)) {
+      setIsLoading(false);
+      if (onError) {
+        onError(new Error("Google Pay settings missing. Please configure mid or portalid in settings."));
+      }
+      return;
+    }
+
+    try {
+      if (typeof window === 'undefined' || typeof window.google === 'undefined' || !window.google.payments?.api?.PaymentsClient) {
+        setIsLoading(false);
+        if (onError) {
+          onError(new Error("Google Pay API is not loaded. Please check browser console for CSP errors."));
+        }
+        return;
+      }
+
+
+      const environment = settings?.mode === "live" ? "PRODUCTION" : "TEST";
+      paymentsClientRef.current = new window.google.payments.api.PaymentsClient({
+        environment: environment
+      });
+
+      const config = getGooglePayConfig(settings);
+
+      const isReadyToPayRequest = Object.assign({}, baseRequest);
+      isReadyToPayRequest.allowedPaymentMethods = [config.baseCardPaymentMethod];
+
+      paymentsClientRef.current.isReadyToPay(isReadyToPayRequest)
+        .then((response) => {
+          if (response.result) {
+            setIsReady(true);
+            const tryAddButton = () => {
+              if (buttonContainerRef.current) {
+                addGooglePayButton(config);
+              } else {
+                setTimeout(tryAddButton, 100);
+              }
+            };
+            setTimeout(tryAddButton, 100);
+          } else {
+            setIsLoading(false);
+            if (onError) {
+              onError(new Error("Google Pay is not available on this device"));
+            }
+          }
+        })
+        .catch((err) => {
+          setIsLoading(false);
+          if (onError) {
+            onError(err);
+          }
+        });
+    } catch (error) {
+      setIsLoading(false);
+      if (onError) {
+        onError(error);
+      }
+    }
+  };
+
+  const addGooglePayButton = (config) => {
+    if (!buttonContainerRef.current) {
+      setTimeout(() => {
+        if (buttonContainerRef.current) {
+          addGooglePayButton(config);
+        } else {
+          setIsLoading(false);
+        }
+      }, 500);
+      return;
+    }
+
+    if (!paymentsClientRef.current) {
+      setIsLoading(false);
+      return;
+    }
+
+    buttonContainerRef.current.innerHTML = "";
+
+    const gatewayMerchantId = settings?.mid || settings?.portalid || '';
+    const paymentDataRequest = Object.assign({}, baseRequest);
+    paymentDataRequest.allowedPaymentMethods = [config.cardPaymentMethod];
+    paymentDataRequest.transactionInfo = {
+      totalPriceStatus: "FINAL",
+      totalPrice: (parseFloat(amount) / 100).toFixed(2),
+      currencyCode: currency
+    };
+    paymentDataRequest.merchantInfo = {
+      merchantId: gatewayMerchantId,
+      merchantName: settings?.merchantName || 'Demo Shop'
+    };
+
+    try {
+      const button = paymentsClientRef.current.createButton({
+        onClick: () => handleGooglePayClick(paymentDataRequest),
+        buttonColor: "black",
+        buttonType: "pay",
+        buttonSizeMode: "fill"
+      });
+
+      if (buttonContainerRef.current) {
+        buttonContainerRef.current.appendChild(button);
+        setIsLoading(false);
+        setIsReady(true);
+      } else {
+        setIsLoading(false);
+      }
+    } catch (error) {
+      setIsLoading(false);
+      if (onError) {
+        onError(error);
+      }
+    }
+  };
+
+  const handleGooglePayClick = async (paymentDataRequest) => {
+    try {
+      if (!paymentsClientRef.current) {
+        throw new Error("Google Pay client not initialized");
+      }
+
+      const paymentData = await paymentsClientRef.current.loadPaymentData(paymentDataRequest);
+      const rawToken = paymentData.paymentMethodData?.tokenizationData?.token;
+
+      if (!rawToken) {
+        throw new Error("Google Pay token is missing from payment data");
+      }
+
+      let token = rawToken;
+
+      try {
+        const tokenObj = JSON.parse(token);
+        if (!tokenObj.signature || !tokenObj.protocolVersion || !tokenObj.signedMessage) {
+          throw new Error("Google Pay token is missing required fields");
+        }
+        token = btoa(unescape(encodeURIComponent(rawToken)));
+      } catch (e) {
+        if (typeof token === 'string') {
+          token = btoa(unescape(encodeURIComponent(token)));
+        } else {
+          throw new Error(`Invalid Google Pay token format: ${e.message}`);
+        }
+      }
+
+      if (onTokenReceived) {
+        onTokenReceived(token, paymentData);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error);
+      }
+    }
+  };
+
+  return (
+    <Box padding={4}>
+      <Flex direction="column" gap={3}>
+        {isLoading && (
+          <Typography variant="pi" textColor="neutral600">
+            Loading Google Pay...
+          </Typography>
+        )}
+        {!isLoading && !isReady && (
+          <Typography variant="pi" textColor="neutral600">
+            Google Pay is not available
+          </Typography>
+        )}
+        {!isLoading && isReady && (
+          <>
+            <Typography variant="sigma" textColor="neutral700" fontWeight="semiBold">
+              Google Pay Payment
+            </Typography>
+            <Typography variant="pi" textColor="neutral600">
+              Click the button below to pay with Google Pay. The token will be automatically sent to Payone.
+            </Typography>
+          </>
+        )}
+        <Box ref={buttonContainerRef} style={{ minHeight: "40px" }} />
+      </Flex>
+    </Box>
+  );
+};
+
+export default GooglePayButton;