strapi-plugin-payone-provider 1.1.3 → 1.3.0

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

@@ -0,0 +1,122 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../GooglePaybutton";
+import CardDetailsInput from "./CardDetailsInput";
+
+const AuthorizationForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  authReference,
+  setAuthReference,
+  isProcessingPayment,
+  onAuthorization,
+  paymentMethod,
+  settings,
+  googlePayToken,
+  setGooglePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onAuthorization(token);
+  };
+
+  const handleGooglePayError = (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>
+
+      {/* Show card details input if 3DS is enabled and payment method is credit card */}
+      {paymentMethod === "cc" && settings?.enable3DSecure !== false && (
+        <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}
+        />
+      ) : (
+        <Button
+          variant="default"
+          onClick={onAuthorization}
+          loading={isProcessingPayment}
+          startIcon={<Play />}
+          className="payment-button payment-button-primary"
+          disabled={
+            !paymentAmount.trim() ||
+            (paymentMethod === "cc" &&
+              settings?.enable3DSecure !== false &&
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2))
+          }
+        >
+          Process Authorization
+        </Button>
+      )}
+    </Flex>
+  );
+};
+
+export default AuthorizationForm;
+

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

@@ -0,0 +1,64 @@
+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 />}
+        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

@@ -0,0 +1,189 @@
+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}>
+        <Select
+          label="3D Secure Test Cards (Requires Redirect)"
+          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 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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, Flex, Select, Option } from "@strapi/design-system";
+import {
+  getPaymentMethodOptions,
+  supportsCaptureMode,
+  getCaptureModeOptions,
+  getPaymentMethodDisplayName
+} from "../../../utils/paymentUtils";
+
+const PaymentMethodSelector = ({
+  paymentMethod,
+  setPaymentMethod,
+  captureMode,
+  setCaptureMode
+}) => {
+  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>
+        {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.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,122 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../GooglePaybutton";
+import CardDetailsInput from "./CardDetailsInput";
+
+const PreauthorizationForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  preauthReference,
+  setPreauthReference,
+  isProcessingPayment,
+  onPreauthorization,
+  paymentMethod,
+  settings,
+  googlePayToken,
+  setGooglePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onPreauthorization(token);
+  };
+
+  const handleGooglePayError = (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>
+
+      {/* Show card details input if 3DS is enabled and payment method is credit card */}
+      {paymentMethod === "cc" && settings?.enable3DSecure !== false && (
+        <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}
+        />
+      ) : (
+        <Button
+          variant="default"
+          onClick={onPreauthorization}
+          loading={isProcessingPayment}
+          startIcon={<Play />}
+          className="payment-button payment-button-primary"
+          disabled={
+            !paymentAmount.trim() ||
+            (paymentMethod === "cc" &&
+              settings?.enable3DSecure !== false &&
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2))
+          }
+        >
+          Process Preauthorization
+        </Button>
+      )}
+    </Flex>
+  );
+};
+
+export default PreauthorizationForm;
+