strapi-plugin-payone-provider 1.5.8 → 1.6.1

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

@@ -0,0 +1,205 @@
+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,
+  isLiveMode = false,
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onAuthorization(token);
+  };
+
+  const handleGooglePayError = (error) => {
+    if (onError) {
+      onError(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) => {
+    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"
+        >
+          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() || isLiveMode
+                }
+                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) ||
+            isLiveMode
+          }
+        >
+          Process Authorization
+        </Button>
+      )}
+    </Flex>
+  );
+};
+
+export default AuthorizationForm;

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

@@ -0,0 +1,65 @@
+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/CardDetailsInput.jsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useRef } from "react";
+import {
+  Box,
+  Flex,
+  Typography,
+  TextInput,
+  Select,
+  Option,
+  Link
+} from "@strapi/design-system";
+
+// 3DS Test Cards that require redirect (challenge workflow)
+const TEST_3DS_CARDS = [
+  {
+    name: "VISA - 3DS 2.0 (Challenge)",
+    cardtype: "V",
+    cardpan: "4716971940353559",
+    cardexpiredate: "2512",
+    cardcvc2: "123",
+    description: "3DS 2.0 with challenge - Password: 12345"
+  },
+  {
+    name: "Mastercard - 3DS 2.0 (Challenge)",
+    cardtype: "M",
+    cardpan: "5404127720739582",
+    cardexpiredate: "2512",
+    cardcvc2: "123",
+    description: "3DS 2.0 with challenge - Password: 12345"
+  },
+  // {
+  //   name: "AMEX - 3DS 2.0 (Challenge)",
+  //   cardtype: "A",
+  //   cardpan: "375144726036141",
+  //   cardexpiredate: "2512",
+  //   cardcvc2: "1234",
+  //   description: "3DS 2.0 with challenge - Password: 12345"
+  // }
+];
+
+const CardDetailsInput = ({
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2
+}) => {
+  const [selectedTestCard, setSelectedTestCard] = React.useState("");
+  const isUpdatingFromTestCard = useRef(false);
+
+  useEffect(() => {
+    if (isUpdatingFromTestCard.current) {
+      isUpdatingFromTestCard.current = false;
+      return;
+    }
+
+    const matchingCard = TEST_3DS_CARDS.find(
+      card => card.cardtype === cardtype && card.cardpan === cardpan
+    );
+
+    if (matchingCard) {
+      const testCardValue = `${matchingCard.cardtype}-${matchingCard.cardpan}`;
+      if (selectedTestCard !== testCardValue) {
+        setSelectedTestCard(testCardValue);
+      }
+    } else if (selectedTestCard) {
+      setSelectedTestCard("");
+    }
+  }, [cardtype, cardpan, selectedTestCard]);
+
+  const handleTestCardSelect = (value) => {
+    if (!value || value === "") {
+      setSelectedTestCard("");
+      return;
+    }
+
+    const selectedCard = TEST_3DS_CARDS.find(card =>
+      `${card.cardtype}-${card.cardpan}` === value
+    );
+
+    if (selectedCard) {
+      isUpdatingFromTestCard.current = true;
+
+      setCardtype(selectedCard.cardtype);
+      setCardpan(selectedCard.cardpan);
+      setCardexpiredate(selectedCard.cardexpiredate);
+      setCardcvc2(selectedCard.cardcvc2);
+      setSelectedTestCard(value);
+    }
+  };
+
+  return (
+    <Box>
+      <Flex direction="column" alignItems="stretch" gap={4}>
+        <Flex direction="row" gap={2} alignItems="flex-start">
+          <Select
+            label="3D Secure Test Cards"
+            name="testCard"
+            value={selectedTestCard}
+            placeholder="Select a 3DS test card to auto-fill"
+            hint="These cards will trigger 3DS authentication redirect. Password: 12345"
+            onChange={handleTestCardSelect}
+            className="payment-input"
+          >
+            <Option value="">-- Select a test card --</Option>
+            {TEST_3DS_CARDS.map((card, index) => (
+              <Option key={index} value={`${card.cardtype}-${card.cardpan}`}>
+                {card.name} - {card.description}
+              </Option>
+            ))}
+          </Select>
+        </Flex>
+
+        <Flex gap={4} wrap="wrap" alignItems="flex-start">
+          <Select
+            label="Card Type *"
+            name="cardtype"
+            value={cardtype || ""}
+            onChange={(value) => setCardtype(value)}
+            required
+            hint="Select credit card type"
+            className="payment-input"
+            style={{ flex: 1, minWidth: "200px" }}
+          >
+            <Option value="V">VISA</Option>
+            <Option value="M">Mastercard</Option>
+            <Option value="A">American Express</Option>
+            <Option value="J">JCB</Option>
+            <Option value="O">Maestro International</Option>
+            <Option value="D">Diners Club</Option>
+          </Select>
+
+          <TextInput
+            label="Card Number (PAN) *"
+            name="cardpan"
+            value={cardpan || ""}
+            onChange={(e) => setCardpan(e.target.value)}
+            placeholder="Enter card number"
+            hint="Credit card number (PAN)"
+            required
+            className="payment-input"
+            style={{ flex: 2, minWidth: "300px" }}
+          />
+        </Flex>
+
+        <Flex gap={4} wrap="wrap" alignItems="flex-start">
+          <TextInput
+            label="Expiry Date *"
+            name="cardexpiredate"
+            value={cardexpiredate || ""}
+            onChange={(e) => setCardexpiredate(e.target.value)}
+            placeholder="YYMM (e.g., 2512)"
+            hint="Format: YYMM (e.g., 2512 = December 2025)"
+            required
+            maxLength={4}
+            className="payment-input"
+            style={{ flex: 1, minWidth: "150px" }}
+          />
+
+          <TextInput
+            label="CVC/CVV *"
+            name="cardcvc2"
+            value={cardcvc2 || ""}
+            onChange={(e) => setCardcvc2(e.target.value)}
+            placeholder="123 or 1234"
+            hint={cardtype === "A" ? "4 digits for AMEX" : "3 digits for other cards"}
+            required
+            maxLength={4}
+            className="payment-input"
+            style={{ flex: 1, minWidth: "150px" }}
+          />
+        </Flex>
+
+        <Box paddingTop={2}>
+          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
+            For all test card numbers (positive, negative, frictionless 3DS), 3D Secure test data, and detailed documentation, please refer to the{" "}
+            <Link href="https://docs.payone.com/security-risk-management/3d-secure#/" target="_blank" rel="noopener noreferrer">
+              Payone 3D Secure Documentation
+            </Link>
+            .
+          </Typography>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default CardDetailsInput;
+

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

@@ -0,0 +1,236 @@
+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,
+  settings,
+}) => {
+  const mode = (settings?.mode || "test").toLowerCase();
+  const isLiveMode = mode === "live";
+
+  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().map((option) => (
+            <Option key={option.value} value={option.value}>
+              {option.label}
+            </Option>
+          ))}
+        </Select>
+        {paymentMethod === "apl" && onNavigateToConfig && (
+          <>
+            <Alert
+              closeLabel="Close"
+              title="⚠️ Important: Middleware Configuration Required"
+              variant="warning"
+            >
+              <Typography variant="pi" marginTop={2}>
+                <strong>Apple Pay requires middleware configuration</strong> to
+                work properly. You must configure Content Security Policy (CSP)
+                in <code>config/middlewares.js</code> to allow Apple Pay
+                scripts, otherwise Apple Pay will NOT work.
+              </Typography>
+              <Typography variant="pi" marginTop={2}>
+                Required CSP directives for Apple Pay:
+              </Typography>
+              <Box
+                marginTop={2}
+                padding={2}
+                background="neutral100"
+                borderRadius="4px"
+              >
+                <Typography
+                  variant="pi"
+                  style={{ fontFamily: "monospace", fontSize: "12px" }}
+                >
+                  'script-src': ['https://applepay.cdn-apple.com',
+                  'https://www.apple.com']
+                  <br />
+                  'connect-src': ['https://applepay.cdn-apple.com',
+                  'https://www.apple.com']
+                  <br />
+                  'frame-src': ['https://applepay.cdn-apple.com']
+                </Typography>
+              </Box>
+              <Typography variant="pi" marginTop={2} fontWeight="bold">
+                Without this configuration, Apple Pay will NOT work!
+              </Typography>
+            </Alert>
+            <Alert
+              closeLabel="Close"
+              title="📥 Apple Pay Domain Verification File Required"
+              variant="default"
+            >
+              <Typography variant="pi" marginTop={2}>
+                <strong>Download the Apple Pay domain verification file</strong>{" "}
+                from your Payone merchant portal and place it in:
+              </Typography>
+              <Box
+                marginTop={2}
+                padding={2}
+                background="neutral100"
+                borderRadius="4px"
+              >
+                <Typography
+                  variant="pi"
+                  style={{ fontFamily: "monospace", fontSize: "12px" }}
+                >
+                  <strong>Strapi:</strong>{" "}
+                  <code>
+                    public/.well-known/apple-developer-merchantid-domain-association
+                  </code>
+                  <br />
+                  <strong>Frontend:</strong>{" "}
+                  <code>
+                    public/.well-known/apple-developer-merchantid-domain-association
+                  </code>
+                </Typography>
+              </Box>
+              <Typography variant="pi" marginTop={2}>
+                <strong>Download URL:</strong> Download the domain verification
+                file from Payone documentation:{" "}
+                <Link
+                  href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: "#0066ff", textDecoration: "underline" }}
+                >
+                  https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+                </Link>
+              </Typography>
+              <br />
+              <Typography
+                variant="pi"
+                marginTop={2}
+                fontWeight="bold"
+                textColor="danger600"
+              >
+                Without this file, Apple Pay will NOT work on your domain!
+              </Typography>
+            </Alert>
+            <Box padding={3} background="neutral100" 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>
+          </>
+        )}
+        {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;