strapi-plugin-payone-provider 4.6.9 → 5.6.10

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;

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

@@ -1,192 +0,0 @@
-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;