strapi-plugin-payone-provider 1.6.7 → 5.6.9

package/admin/src/pages/App/components/paymentActions/AuthorizationForm.jsx

@@ -1,197 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Flex,
-  Typography,
-  TextInput,
-  Button,
-} from "@strapi/design-system";
-import { Play } from "@strapi/icons";
-import GooglePayButton from "../GooglePaybutton";
-import ApplePayBtn from "../ApplePayBtn";
-import CardDetailsInput from "./CardDetailsInput";
-
-const AuthorizationForm = ({
-  paymentAmount,
-  setPaymentAmount,
-  authReference,
-  setAuthReference,
-  isProcessingPayment,
-  onAuthorization,
-  paymentMethod,
-  settings,
-  setGooglePayToken,
-  applePayToken,
-  setApplePayToken,
-  cardtype,
-  setCardtype,
-  cardpan,
-  setCardpan,
-  cardexpiredate,
-  setCardexpiredate,
-  cardcvc2,
-  setCardcvc2,
-}) => {
-  const handleGooglePayToken = (token, paymentData) => {
-    if (!token) {
-      return;
-    }
-    setGooglePayToken(token);
-    onAuthorization(token);
-  };
-
-  const handleGooglePayError = (error) => {
-    console.error("[AuthorizationForm] Google Pay error:", error);
-  };
-
-  const handleApplePayToken = async (token, paymentData) => {
-    if (!token) {
-      return Promise.reject(new Error("Token is missing"));
-    }
-
-    setApplePayToken(token);
-
-    return Promise.resolve({
-      success: true,
-      message:
-        "Token received successfully. Please click 'Process Authorization' to complete the payment.",
-    });
-  };
-
-  const handleApplePayError = (error) => {
-    console.error("[AuthorizationForm] Apple Pay error:", 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"
-        >
-          Authorization
-        </Typography>
-        <Typography
-          variant="pi"
-          textColor="neutral600"
-          className="payment-form-description"
-        >
-          Authorize and capture an amount immediately.
-        </Typography>
-      </Flex>
-
-      <Flex gap={4} wrap="wrap">
-        <TextInput
-          label="Amount (in cents) *"
-          name="authAmount"
-          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="authReference"
-          value={authReference}
-          onChange={(e) => setAuthReference(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>
-          <ApplePayBtn
-            amount={paymentAmount}
-            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
-                authorization:
-              </Typography>
-              <Button
-                variant="default"
-                onClick={() => onAuthorization(applePayToken)}
-                loading={isProcessingPayment}
-                startIcon={<Play />}
-                style={{ maxWidth: "200px" }}
-                disabled={!paymentAmount.trim() || !authReference.trim()}
-                className="payment-button payment-button-primary"
-              >
-                Process Authorization
-              </Button>
-            </Box>
-          )}
-        </Box>
-      ) : (
-        <Button
-          variant="default"
-          onClick={onAuthorization}
-          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)) ||
-            (paymentMethod === "apl" && !applePayToken)
-          }
-        >
-          Process Authorization
-        </Button>
-      )}
-    </Flex>
-  );
-};
-
-export default AuthorizationForm;

package/admin/src/pages/App/components/paymentActions/CaptureForm.jsx

@@ -1,65 +0,0 @@
-import React from "react";
-import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
-import { Play } from "@strapi/icons";
-
-const CaptureForm = ({
-  paymentAmount,
-  setPaymentAmount,
-  captureTxid,
-  setCaptureTxid,
-  isProcessingPayment,
-  onCapture
-}) => {
-  return (
-    <Flex direction="column" alignItems="stretch" gap={4}>
-      <Flex direction="row" gap={2}>
-        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
-          Capture
-        </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
-          Capture a previously authorized amount. Note: Reference parameter is
-          not supported by Payone capture.
-        </Typography>
-      </Flex>
-
-      <Flex gap={4} wrap="wrap">
-        <TextInput
-          label="Transaction ID"
-          name="captureTxid"
-          value={captureTxid}
-          onChange={(e) => setCaptureTxid(e.target.value)}
-          placeholder="Enter TxId from preauthorization"
-          hint="Transaction ID from a previous preauthorization"
-          className="payment-input"
-          style={{ flex: 1, minWidth: "250px" }}
-        />
-
-        <TextInput
-          label="Amount (in cents)"
-          name="captureAmount"
-          value={paymentAmount}
-          onChange={(e) => setPaymentAmount(e.target.value)}
-          placeholder="1000"
-          hint="Amount in cents to capture"
-          className="payment-input"
-          style={{ flex: 1, minWidth: "250px" }}
-        />
-      </Flex>
-
-      <Button
-        variant="default"
-        onClick={onCapture}
-        loading={isProcessingPayment}
-        startIcon={<Play />}
-        style={{ maxWidth: '200px' }}
-        className="payment-button payment-button-primary"
-        disabled={!captureTxid.trim() || !paymentAmount.trim()}
-      >
-        Process Capture
-      </Button>
-    </Flex>
-  );
-};
-
-export default CaptureForm;
-

package/admin/src/pages/App/components/paymentActions/PaymentMethodSelector.jsx

@@ -1,306 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Flex,
-  Select,
-  Option,
-  Typography,
-  Link,
-  Alert,
-} from "@strapi/design-system";
-import pluginId from "../../../../pluginId";
-import {
-  getPaymentMethodOptions,
-  supportsCaptureMode,
-  getCaptureModeOptions,
-  getPaymentMethodDisplayName,
-} from "../../../utils/paymentUtils";
-
-const PaymentMethodSelector = ({
-  paymentMethod,
-  setPaymentMethod,
-  captureMode,
-  setCaptureMode,
-  onNavigateToConfig,
-  isLiveMode,
-}) => {
-  return (
-    <Box>
-      <Flex direction="column" alignItems="stretch" gap={4}>
-        <Select
-          label="Select Payment Method"
-          name="paymentMethod"
-          value={paymentMethod}
-          onChange={(value) => setPaymentMethod(value)}
-          hint={`Current: ${getPaymentMethodDisplayName(paymentMethod)}`}
-        >
-          {getPaymentMethodOptions(isLiveMode).map((option) => (
-            <Option key={option.value} value={option.value}>
-              {option.label}
-            </Option>
-          ))}
-        </Select>
-        {paymentMethod === "apl" && onNavigateToConfig && (
-          <>
-            <Box
-              style={{ display: "flex", flexDirection: "column", gap: "16px" }}
-            >
-              <Box
-                style={{
-                  background: "transparent",
-                  padding: "16px",
-                  borderRadius: "4px",
-                  border: "1px solid #eaeaea",
-                }}
-              >
-                <Typography variant="pi" style={{ lineHeight: "1.6" }}>
-                  <strong>Apple Pay requires middleware configuration</strong>{" "}
-                  to work properly. You must configure Content Security Policy
-                  (CSP) in{" "}
-                  <code
-                    style={{
-                      padding: "2px 6px",
-                      borderRadius: "3px",
-                      fontSize: "13px",
-                    }}
-                  >
-                    config/middlewares.js
-                  </code>{" "}
-                  to allow Apple Pay scripts.
-                </Typography>
-
-                <Box style={{ marginTop: "16px" }}>
-                  <Typography
-                    variant="pi"
-                    style={{
-                      fontWeight: "600",
-                      marginBottom: "8px",
-                      display: "block",
-                    }}
-                  >
-                    Required CSP directives:
-                  </Typography>
-
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      style={{
-                        fontFamily: "monospace",
-                        fontSize: "12px",
-                        lineHeight: "1.8",
-                      }}
-                    >
-                      <div>
-                        'script-src': ['https://applepay.cdn-apple.com',
-                        'https://www.apple.com']
-                      </div>
-                      <div>
-                        'connect-src': ['https://applepay.cdn-apple.com',
-                        'https://www.apple.com']
-                      </div>
-                      <div>'frame-src': ['https://applepay.cdn-apple.com']</div>
-                    </Typography>
-                  </Box>
-                </Box>
-
-                <Box
-                  padding={2}
-                  background="warning100"
-                  style={{
-                    marginTop: "16px",
-                    borderRadius: "4px",
-                    borderLeft: "3px solid #f29d41",
-                  }}
-                >
-                  <Typography variant="pi" style={{ fontWeight: "600" }}>
-                    ⚠️ Without this configuration, Apple Pay will NOT work!
-                  </Typography>
-                </Box>
-              </Box>
-
-              <Box
-                style={{
-                  background: "transparent",
-                  padding: "16px",
-                  borderRadius: "4px",
-                  border: "1px solid #eaeaea",
-                }}
-              >
-                <Typography variant="pi" style={{ lineHeight: "1.6" }}>
-                  <strong>Download the domain verification file</strong> from
-                  your Payone merchant portal and place it in the following
-                  locations:
-                </Typography>
-
-                <Box>
-                  <Typography
-                    variant="pi"
-                    style={{
-                      fontFamily: "monospace",
-                      fontSize: "12px",
-                      lineHeight: "1.8",
-                    }}
-                  >
-                    <div style={{ marginBottom: "8px" }}>
-                      <strong>Strapi:</strong>{" "}
-                      <code>
-                        public/.well-known/apple-developer-merchantid-domain-association
-                      </code>
-                    </div>
-                    <div>
-                      <strong>Frontend:</strong>{" "}
-                      <code>
-                        public/.well-known/apple-developer-merchantid-domain-association
-                      </code>
-                    </div>
-                  </Typography>
-                </Box>
-
-                <Box style={{ marginTop: "16px" }}>
-                  <Typography variant="pi" style={{ lineHeight: "1.6" }}>
-                    <strong>Download URL:</strong> Get the domain verification
-                    file from Payone documentation:
-                  </Typography>
-                  <Box
-                    padding={2}
-                    background="primary100"
-                    style={{ marginTop: "8px", borderRadius: "4px" }}
-                  >
-                    <Link
-                      href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{
-                        color: "#4945ff",
-                        textDecoration: "none",
-                        fontWeight: "500",
-                        fontSize: "14px",
-                      }}
-                    >
-                      →
-                      https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
-                    </Link>
-                  </Box>
-                </Box>
-
-                <Box
-                  padding={2}
-                  background="danger100"
-                  style={{
-                    marginTop: "16px",
-                    borderRadius: "4px",
-                    borderLeft: "3px solid #d02b20",
-                  }}
-                >
-                  <Typography
-                    variant="pi"
-                    textColor="danger600"
-                    style={{ fontWeight: "600" }}
-                  >
-                    ⚠️ Without this file, Apple Pay will NOT work on your
-                    domain!
-                  </Typography>
-                </Box>
-              </Box>
-            </Box>
-
-            <Box padding={3} borderRadius="4px">
-              <Typography variant="pi" textColor="neutral600">
-                Configure Apple Pay settings:{" "}
-                <Link
-                  href={`/plugins/${pluginId}/apple-pay-config`}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    onNavigateToConfig("apple-pay");
-                  }}
-                  style={{
-                    cursor: "pointer",
-                    textDecoration: "underline",
-                    color: "#0066ff",
-                  }}
-                >
-                  /plugins/{pluginId}/apple-pay-config
-                </Link>
-              </Typography>
-            </Box>
-          </>
-        )}
-        {paymentMethod === "gpp" && onNavigateToConfig && (
-          <>
-            <Alert
-              closeLabel="Close"
-              title="⚠️ Important: Middleware Configuration Required"
-              variant="warning"
-            >
-              <Typography variant="pi" marginTop={2}>
-                <strong>Google Pay requires middleware configuration</strong> to
-                work properly. You must configure Content Security Policy (CSP)
-                in <code>config/middlewares.js</code> to allow Google Pay
-                scripts, otherwise Google Pay will NOT work.
-              </Typography>
-              <Typography variant="pi" marginTop={2}>
-                Required CSP directives for Google Pay:
-              </Typography>
-              <Box
-                marginTop={2}
-                padding={2}
-                background="neutral100"
-                borderRadius="4px"
-              >
-                <Typography
-                  variant="pi"
-                  style={{ fontFamily: "monospace", fontSize: "12px" }}
-                >
-                  'script-src': ['https://pay.google.com']
-                  <br />
-                  'connect-src': ['https://pay.google.com']
-                  <br />
-                  'frame-src': ['https://pay.google.com']
-                </Typography>
-              </Box>
-              <Typography variant="pi" marginTop={2} fontWeight="bold">
-                ⚠️ Without this configuration, Google Pay will NOT work!
-              </Typography>
-            </Alert>
-            <Box padding={3} background="neutral100" borderRadius="4px">
-              <Typography variant="pi" textColor="neutral600">
-                Configure Google Pay settings:{" "}
-                <Link
-                  href={`/plugins/${pluginId}/google-pay-config`}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    onNavigateToConfig("google-pay");
-                  }}
-                  style={{
-                    cursor: "pointer",
-                    textDecoration: "underline",
-                    color: "#0066ff",
-                  }}
-                >
-                  /plugins/{pluginId}/google-pay-config
-                </Link>
-              </Typography>
-            </Box>
-          </>
-        )}
-        {paymentMethod !== "apl" && supportsCaptureMode(paymentMethod) && (
-          <Select
-            label="Capture Mode"
-            name="captureMode"
-            value={captureMode}
-            onChange={(value) => setCaptureMode(value)}
-            hint="Select capture mode for wallet payments"
-          >
-            {getCaptureModeOptions().map((option) => (
-              <Option key={option.value} value={option.value}>
-                {option.label}
-              </Option>
-            ))}
-          </Select>
-        )}
-      </Flex>
-    </Box>
-  );
-};
-
-export default PaymentMethodSelector;