strapi-plugin-payone-provider 1.6.1 → 1.6.3

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

@@ -1,195 +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 ApplePayButton from "../ApplePayButton";
-import CardDetailsInput from "./CardDetailsInput";
-
-const AuthorizationForm = ({
-  paymentAmount,
-  setPaymentAmount,
-  authReference,
-  setAuthReference,
-  isProcessingPayment,
-  onAuthorization,
-  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);
-    onAuthorization(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 onAuthorization 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 Authorization" 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 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>
-          <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 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.js

@@ -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/CardDetailsInput.js

@@ -1,191 +0,0 @@
-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.js

@@ -1,156 +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
-}) => {
-  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>
-              <Typography variant="pi" marginTop={2}>
-                <strong>Alternative:</strong> Log into your Payone Merchant Interface (PMI) → Configuration → Payment Portals → Apple Pay → Download domain verification file
-              </Typography>
-              <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;