strapi-plugin-payone-provider 1.6.0 → 1.6.1

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

@@ -0,0 +1,148 @@
+import React from "react";
+import {
+  Box,
+  Card,
+  CardBody,
+  Divider,
+  Flex,
+  Stack,
+  Typography,
+  Alert
+} from "@strapi/design-system";
+import StatusBadge from "../StatusBadge";
+import { formatTransactionData } from "../../../utils/formatTransactionData";
+
+const PaymentResult = ({ paymentError, paymentResult }) => {
+  if (!paymentError && !paymentResult) {
+    return null;
+  }
+
+  const status = paymentResult?.status || paymentResult?.Status || "";
+  const errorCode = paymentResult?.errorcode || paymentResult?.errorCode || paymentResult?.ErrorCode;
+  const errorMessage = paymentResult?.errormessage || paymentResult?.errorMessage || paymentResult?.ErrorMessage;
+  const customerMessage = paymentResult?.customermessage || paymentResult?.customerMessage || paymentResult?.CustomerMessage;
+  const isError = status === "ERROR" || status === "INVALID" || errorCode;
+
+  return (
+    <>
+      {paymentError && (
+        <Alert
+          variant="danger"
+          title="Error"
+          className="payment-alert"
+        >
+          {paymentError}
+        </Alert>
+      )}
+
+      {paymentResult && (
+        <Card className="payment-result-card">
+          <CardBody>
+            <Stack spacing={4}>
+              <Flex justifyContent="space-between" alignItems="center">
+                <Typography variant="delta" as="h3" className="payment-section-title">
+                  Payment Result
+                </Typography>
+                {(status || paymentResult.Status) && (
+                  <StatusBadge status={status || paymentResult.Status} />
+                )}
+              </Flex>
+
+              <hr className="payment-divider" style={{ margin: '16px 0' }} />
+
+              {/* Show error information prominently if error */}
+              {isError && (
+                <Alert variant="danger" title="Transaction Failed">
+                  <Stack spacing={2}>
+                    {errorCode && (
+                      <Typography variant="pi">
+                        <strong>Error Code:</strong> {errorCode}
+                      </Typography>
+                    )}
+                    {errorMessage && (
+                      <Typography variant="pi">
+                        <strong>Error Message:</strong> {errorMessage}
+                      </Typography>
+                    )}
+                    {customerMessage && (
+                      <Typography variant="pi">
+                        <strong>Customer Message:</strong> {customerMessage}
+                      </Typography>
+                    )}
+                  </Stack>
+                </Alert>
+              )}
+
+              <Box>
+                <Typography variant="omega" fontWeight="semiBold" marginBottom={2}>
+                  Full Response Details:
+                </Typography>
+                <Stack spacing={3}>
+                  {formatTransactionData(paymentResult).map((item, index) => (
+                    <Flex
+                      key={index}
+                      justifyContent="space-between"
+                      alignItems="start"
+                      style={{
+                        padding: '8px 0',
+                        borderBottom: index < formatTransactionData(paymentResult).length - 1 ? '1px solid #e8e8ea' : 'none'
+                      }}
+                    >
+                      <Typography
+                        variant="pi"
+                        textColor="neutral600"
+                        style={{ minWidth: "200px", fontWeight: '500' }}
+                      >
+                        {item.key}:
+                      </Typography>
+                      <Typography
+                        variant="pi"
+                        style={{
+                          flex: 1,
+                          textAlign: "right",
+                          fontWeight: '400',
+                          wordBreak: 'break-word',
+                          fontFamily: item.key.toLowerCase().includes('raw') ? 'monospace' : 'inherit',
+                          fontSize: item.key.toLowerCase().includes('raw') ? '11px' : 'inherit'
+                        }}
+                      >
+                        {item.value}
+                      </Typography>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+
+              {/* 3DS Required Warning */}
+              {paymentResult?.is3DSRequired && !paymentResult?.redirectUrl && (
+                <Alert variant="warning" title="3D Secure Authentication Required">
+                  <Stack spacing={2}>
+                    <Typography variant="pi">
+                      Payone requires 3D Secure authentication, but no redirect URL was provided in the response.
+                    </Typography>
+                    <Typography variant="pi" fontWeight="semiBold">
+                      Possible solutions:
+                    </Typography>
+                    <Typography variant="pi" component="ul" style={{ marginLeft: '20px' }}>
+                      <li>Check Payone portal configuration for 3DS settings</li>
+                      <li>Verify that redirect URLs (successurl, errorurl, backurl) are properly configured</li>
+                      <li>Ensure you're using test mode with proper test credentials</li>
+                      <li>Check if 3dscheck request is needed before authorization</li>
+                    </Typography>
+                    <Typography variant="pi" textColor="neutral600" marginTop={2}>
+                      <strong>Error Code:</strong> {paymentResult?.errorCode || paymentResult?.ErrorCode || "4219"}
+                    </Typography>
+                  </Stack>
+                </Alert>
+              )}
+
+            </Stack>
+          </CardBody>
+        </Card>
+      )}
+    </>
+  );
+};
+
+export default PaymentResult;
+

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

@@ -0,0 +1,199 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../GooglePaybutton";
+import ApplePayButton from "../ApplePayButton";
+import CardDetailsInput from "./CardDetailsInput";
+
+const PreauthorizationForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  preauthReference,
+  setPreauthReference,
+  isProcessingPayment,
+  onPreauthorization,
+  paymentMethod,
+  settings,
+  googlePayToken,
+  setGooglePayToken,
+  applePayToken,
+  setApplePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2,
+  isLiveMode = false
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onPreauthorization(token);
+  };
+
+  const handleGooglePayError = (error) => {
+    if (onError) {
+      onError(error);
+    }
+  };
+
+  const handleApplePayToken = async (token, paymentData) => {
+    if (!token) {
+      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);
+
+    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) => {
+    if (onError) {
+      onError(error);
+    }
+  };
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <Flex direction="row" gap={2}>
+        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+          Preauthorization
+        </Typography>
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          Reserve an amount on a credit card without capturing it immediately.
+        </Typography>
+      </Flex>
+
+      <Flex gap={4} wrap="wrap">
+        <TextInput
+          label="Amount (in cents) *"
+          name="paymentAmount"
+          value={paymentAmount}
+          onChange={(e) => setPaymentAmount(e.target.value)}
+          placeholder="Enter amount (e.g., 1000 for €10.00)"
+          hint="Amount in cents (e.g., 1000 = €10.00)"
+          required
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+
+        <TextInput
+          label="Reference *"
+          name="preauthReference"
+          value={preauthReference}
+          onChange={(e) => setPreauthReference(e.target.value)}
+          placeholder="Auto-generated if empty"
+          hint="Reference will be auto-generated if left empty"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+      </Flex>
+
+      {paymentMethod === "cc" && settings?.enable3DSecure && (
+        <Box marginTop={4}>
+          <CardDetailsInput
+            cardtype={cardtype}
+            setCardtype={setCardtype}
+            cardpan={cardpan}
+            setCardpan={setCardpan}
+            cardexpiredate={cardexpiredate}
+            setCardexpiredate={setCardexpiredate}
+            cardcvc2={cardcvc2}
+            setCardcvc2={setCardcvc2}
+          />
+        </Box>
+      )}
+
+      {paymentMethod === "gpp" ? (
+        <GooglePayButton
+          amount={paymentAmount}
+          currency="EUR"
+          onTokenReceived={handleGooglePayToken}
+          onError={handleGooglePayError}
+          settings={settings}
+        />
+      ) : paymentMethod === "apl" ? (
+        <Box>
+          <ApplePayButton
+            amount={paymentAmount}
+            currency="EUR"
+            onTokenReceived={handleApplePayToken}
+            onError={handleApplePayError}
+            settings={settings}
+          />
+          {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
+          variant="default"
+          onClick={onPreauthorization}
+          loading={isProcessingPayment}
+          startIcon={<Play />}
+          style={{ maxWidth: '200px' }}
+          className="payment-button payment-button-primary"
+          disabled={
+            !paymentAmount.trim() ||
+            (paymentMethod === "cc" &&
+              settings?.enable3DSecure !== false &&
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2)) ||
+            isLiveMode
+          }
+        >
+          Process Preauthorization
+        </Button>
+      )}
+    </Flex>
+  );
+};
+
+export default PreauthorizationForm;
+

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+
+const RefundForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  refundTxid,
+  setRefundTxid,
+  refundSequenceNumber,
+  setRefundSequenceNumber,
+  refundReference,
+  setRefundReference,
+  isProcessingPayment,
+  onRefund
+}) => {
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <Flex direction="row" gap={2}>
+        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+          Refund
+        </Typography>
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          Refund a previously captured amount.
+        </Typography>
+      </Flex>
+
+      <Flex gap={4} wrap="wrap">
+        <TextInput
+          label="Transaction ID"
+          name="refundTxid"
+          value={refundTxid}
+          onChange={(e) => setRefundTxid(e.target.value)}
+          placeholder="Enter TxId from capture"
+          hint="Transaction ID from a previous capture"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+
+        <TextInput
+          label="Sequence Number"
+          name="refundSequenceNumber"
+          value={refundSequenceNumber}
+          onChange={(e) => setRefundSequenceNumber(e.target.value)}
+          placeholder="2"
+          hint="Sequence number for this refund (1-127) and by default for first 2"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+
+        <TextInput
+          label="Amount (in cents)"
+          name="refundAmount"
+          value={paymentAmount}
+          onChange={(e) => setPaymentAmount(e.target.value)}
+          placeholder="1000"
+          hint="Amount in cents to refund (will be negative)"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+
+        <TextInput
+          label="Reference"
+          name="refundReference"
+          value={refundReference}
+          onChange={(e) => setRefundReference(e.target.value)}
+          placeholder="Optional reference"
+          hint="Optional reference for this refund"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+      </Flex>
+
+      <Button
+        variant="default"
+        onClick={onRefund}
+        loading={isProcessingPayment}
+        startIcon={<Play />}
+        style={{ maxWidth: '200px' }}
+        className="payment-button payment-button-primary"
+        disabled={!refundTxid.trim() || !paymentAmount.trim()}
+      >
+        Process Refund
+      </Button>
+    </Flex>
+  );
+};
+
+export default RefundForm;
+

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

@@ -0,0 +1,127 @@
+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
+  const settings = useSettings();
+  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
+        activeTab={activeTab}
+        isSaving={settings.isSaving}
+        onSave={settings.handleSave}
+      />
+      <ContentLayout>
+        <Box padding={6}>
+          <AppTabs
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            settings={settings.settings}
+            isSaving={settings.isSaving}
+            isTesting={settings.isTesting}
+            testResult={settings.testResult}
+            onSave={settings.handleSave}
+            onTestConnection={settings.handleTestConnection}
+            onInputChange={settings.handleInputChange}
+            filters={transactionHistory.filters}
+            onFilterChange={transactionHistory.handleFilterChange}
+            onFilterApply={transactionHistory.handleFilterApply}
+            isLoadingHistory={transactionHistory.isLoadingHistory}
+            transactionHistory={transactionHistory.transactionHistory}
+            paginatedTransactions={transactionHistory.paginatedTransactions}
+            currentPage={transactionHistory.currentPage}
+            totalPages={transactionHistory.totalPages}
+            pageSize={transactionHistory.pageSize}
+            onRefresh={transactionHistory.loadTransactionHistory}
+            onPageChange={transactionHistory.handlePageChange}
+            selectedTransaction={transactionHistory.selectedTransaction}
+            onTransactionSelect={transactionHistory.handleTransactionSelect}
+            paymentActions={paymentActions}
+            history={history}
+          />
+        </Box>
+      </ContentLayout>
+    </Layout>
+  );
+};
+
+export default App;