strapi-plugin-payone-provider 1.2.4 → 1.3.0

package/README.md

@@ -10,6 +10,7 @@ A comprehensive Strapi plugin that integrates the Payone payment gateway into yo
 - [Configuration](#configuration)
 - [Getting Started](#getting-started)
 - [Usage](#usage)
+- [3D Secure (3DS) Authentication](#-3d-secure-3ds-authentication)
 - [Payment Methods & Operations](#-payment-methods--operations)
 - [Supported Payment Methods](#supported-payment-methods)
 
@@ -136,6 +137,117 @@ All responses include:
 
 ---
 
+## 🔐 3D Secure (3DS) Authentication
+
+3D Secure (3DS) is a security protocol that adds an extra layer of authentication for credit card payments, ensuring compliance with Strong Customer Authentication (SCA) requirements.
+
+### Enabling 3D Secure
+
+1. Navigate to **Payone Provider** in the Strapi admin panel
+2. Go to the **Configuration** tab
+3. Find the **"Enable 3D Secure"** dropdown
+4. Select **"Enabled"** to activate 3DS for credit card payments
+5. Click **"Save Configuration"**
+
+> ⚠️ **Note**: When 3DS is enabled, it only applies to **credit card** payments (`clearingtype: "cc"`). Other payment methods are not affected.
+
+### Supported Operations
+
+3D Secure works with the following operations:
+
+- ✅ **Preauthorization** (`POST /api/strapi-plugin-payone-provider/preauthorization`)
+- ✅ **Authorization** (`POST /api/strapi-plugin-payone-provider/authorization`)
+- ❌ **Capture** - Not applicable (uses preauthorized transaction)
+- ❌ **Refund** - Not applicable (uses existing transaction)
+
+### Required Parameters for Preauthorization/Authorization with 3DS
+
+When 3DS is enabled and you're making a credit card payment, the following parameters are required:
+
+**Credit Card Details** (required when 3DS is enabled):
+
+- `cardtype`: Card type (`"V"` for VISA, `"M"` for Mastercard, `"A"` for AMEX, etc.)
+- `cardpan`: Card number (PAN)
+- `cardexpiredate`: Expiry date in format `YYMM` (e.g., `"2512"` for December 2025)
+- `cardcvc2`: CVC/CVV code (3 digits for most cards, 4 digits for AMEX)
+
+**Redirect URLs** (required for 3DS authentication flow):
+
+- `successurl`: URL to redirect after successful 3DS authentication
+- `errorurl`: URL to redirect after 3DS authentication error
+- `backurl`: URL to redirect if user cancels 3DS authentication
+
+**Example Request**:
+
+```json
+{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "PAY1234567890ABCDEF",
+  "clearingtype": "cc",
+  "cardtype": "V",
+  "cardpan": "4111111111111111",
+  "cardexpiredate": "2512",
+  "cardcvc2": "123",
+  "firstname": "John",
+  "lastname": "Doe",
+  "email": "john.doe@example.com",
+  "street": "Main Street 123",
+  "zip": "12345",
+  "city": "Berlin",
+  "country": "DE",
+  "successurl": "https://www.example.com/success",
+  "errorurl": "https://www.example.com/error",
+  "backurl": "https://www.example.com/back"
+}
+```
+
+### 3DS Response Handling
+
+When 3DS is required, the API response will include:
+
+```json
+{
+  "data": {
+    "status": "REDIRECT",
+    "redirecturl": "https://secure.pay1.de/3ds/...",
+    "requires3DSRedirect": true,
+    "txid": "123456789"
+  }
+}
+```
+
+**Response Fields**:
+
+- `status`: `"REDIRECT"` when 3DS authentication is required
+- `redirecturl`: URL to redirect the customer for 3DS authentication
+- `requires3DSRedirect`: Boolean indicating if redirect is needed
+- `txid`: Transaction ID (if available)
+
+### 3DS Callback Endpoint
+
+After the customer completes 3DS authentication, Payone will send a callback to:
+
+**URL**: `POST /api/strapi-plugin-payone-provider/3ds-callback`
+
+This endpoint processes the 3DS authentication result and updates the transaction status.
+
+> ℹ️ **Note**: The callback endpoint is automatically handled by the plugin. You don't need to manually process it unless you're implementing custom callback handling.
+
+### How It Works
+
+1. **Request**: Send a preauthorization or authorization request with credit card details and redirect URLs
+2. **Response**: If 3DS is required, you'll receive a `REDIRECT` status with a `redirecturl`
+3. **Redirect**: Redirect the customer to the `redirecturl` for 3DS authentication
+4. **Callback**: After authentication, Payone redirects back to your `successurl`, `errorurl`, or `backurl` with transaction data
+5. **Completion**: The transaction is completed based on the authentication result
+
+### Testing 3DS
+
+For testing 3DS authentication, use test cards that trigger 3DS challenges. Refer to the [Payone 3D Secure Documentation](https://docs.payone.com/security-risk-management/3d-secure#/) for test card numbers and scenarios.
+
+---
+
 ## 💳 Payment Methods & Operations
 
 ### Credit Card

package/admin/src/pages/App/components/AppTabs.js

@@ -115,6 +115,14 @@ const AppTabs = ({
             settings={settings}
             googlePayToken={paymentActions.googlePayToken}
             setGooglePayToken={paymentActions.setGooglePayToken}
+            cardtype={paymentActions.cardtype}
+            setCardtype={paymentActions.setCardtype}
+            cardpan={paymentActions.cardpan}
+            setCardpan={paymentActions.setCardpan}
+            cardexpiredate={paymentActions.cardexpiredate}
+            setCardexpiredate={paymentActions.setCardexpiredate}
+            cardcvc2={paymentActions.cardcvc2}
+            setCardcvc2={paymentActions.setCardcvc2}
           />
         </TabPanel>
       </TabPanels>

package/admin/src/pages/App/components/GooglePaybutton.js

@@ -269,29 +269,29 @@ const GooglePayButton = ({
   };
 
   return (
-    <Box padding={4}>
-      <Flex direction="column" gap={3}>
+    <Box width="100%">
+      <Flex direction="column" gap={3} alignItems="stretch">
         {isLoading && (
-          <Typography variant="pi" textColor="neutral600">
+          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
             Loading Google Pay...
           </Typography>
         )}
         {!isLoading && !isReady && (
-          <Typography variant="pi" textColor="neutral600">
+          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
             Google Pay is not available
           </Typography>
         )}
         {!isLoading && isReady && (
           <>
-            <Typography variant="sigma" textColor="neutral700" fontWeight="semiBold">
+            <Typography variant="sigma" textColor="neutral700" fontWeight="semiBold" style={{ textAlign: "left" }}>
               Google Pay Payment
             </Typography>
-            <Typography variant="pi" textColor="neutral600">
+            <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
               Click the button below to pay with Google Pay. The token will be automatically sent to Payone.
             </Typography>
           </>
         )}
-        <Box ref={buttonContainerRef} style={{ minHeight: "40px" }} />
+        <Box ref={buttonContainerRef} style={{ minHeight: "40px", width: "100%", display: "flex", justifyContent: "flex-start" }} />
       </Flex>
     </Box>
   );

package/admin/src/pages/App/components/PaymentActionsPanel.js

@@ -35,7 +35,15 @@ const PaymentActionsPanel = ({
   onRefund,
   settings,
   googlePayToken,
-  setGooglePayToken
+  setGooglePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2
 }) => {
   return (
     <Box
@@ -76,6 +84,14 @@ const PaymentActionsPanel = ({
             settings={settings}
             googlePayToken={googlePayToken}
             setGooglePayToken={setGooglePayToken}
+            cardtype={cardtype}
+            setCardtype={setCardtype}
+            cardpan={cardpan}
+            setCardpan={setCardpan}
+            cardexpiredate={cardexpiredate}
+            setCardexpiredate={setCardexpiredate}
+            cardcvc2={cardcvc2}
+            setCardcvc2={setCardcvc2}
           />
         </Box>
 
@@ -93,6 +109,14 @@ const PaymentActionsPanel = ({
             settings={settings}
             googlePayToken={googlePayToken}
             setGooglePayToken={setGooglePayToken}
+            cardtype={cardtype}
+            setCardtype={setCardtype}
+            cardpan={cardpan}
+            setCardpan={setCardpan}
+            cardexpiredate={cardexpiredate}
+            setCardexpiredate={setCardexpiredate}
+            cardcvc2={cardcvc2}
+            setCardcvc2={setCardcvc2}
           />
         </Box>
 

package/admin/src/pages/App/components/StatusBadge.js

@@ -6,7 +6,9 @@ const StatusBadge = ({ status }) => {
     APPROVED: "success",
     PENDING: "warning",
     ERROR: "danger",
-    FAILED: "danger"
+    FAILED: "danger",
+    INVALID: "danger",
+    REDIRECT: "secondary"
   };
 
   return (

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

@@ -2,6 +2,7 @@ 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,
@@ -13,7 +14,15 @@ const AuthorizationForm = ({
   paymentMethod,
   settings,
   googlePayToken,
-  setGooglePayToken
+  setGooglePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -57,14 +66,29 @@ const AuthorizationForm = ({
           name="authReference"
           value={authReference}
           onChange={(e) => setAuthReference(e.target.value)}
-          placeholder="Enter reference"
-          hint="Reference for this transaction"
-          required
+          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}
@@ -80,7 +104,12 @@ const AuthorizationForm = ({
           loading={isProcessingPayment}
           startIcon={<Play />}
           className="payment-button payment-button-primary"
-          disabled={!paymentAmount.trim() || !authReference.trim()}
+          disabled={
+            !paymentAmount.trim() ||
+            (paymentMethod === "cc" &&
+              settings?.enable3DSecure !== false &&
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2))
+          }
         >
           Process Authorization
         </Button>

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/PaymentResult.js

@@ -17,11 +17,17 @@ const PaymentResult = ({ 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" 
+        <Alert
+          variant="danger"
           title="Error"
           className="payment-alert"
         >
@@ -37,14 +43,40 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
                 <Typography variant="delta" as="h3" className="payment-section-title">
                   Payment Result
                 </Typography>
-                {paymentResult.Status && (
-                  <StatusBadge status={paymentResult.Status} />
+                {(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
@@ -65,7 +97,14 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
                       </Typography>
                       <Typography
                         variant="pi"
-                        style={{ flex: 1, textAlign: "right", fontWeight: '400' }}
+                        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>
@@ -73,6 +112,30 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
                   ))}
                 </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>

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

@@ -2,6 +2,7 @@ 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,
@@ -13,7 +14,15 @@ const PreauthorizationForm = ({
   paymentMethod,
   settings,
   googlePayToken,
-  setGooglePayToken
+  setGooglePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -57,14 +66,29 @@ const PreauthorizationForm = ({
           name="preauthReference"
           value={preauthReference}
           onChange={(e) => setPreauthReference(e.target.value)}
-          placeholder="Enter reference"
-          hint="Reference for this transaction"
-          required
+          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}
@@ -80,7 +104,12 @@ const PreauthorizationForm = ({
           loading={isProcessingPayment}
           startIcon={<Play />}
           className="payment-button payment-button-primary"
-          disabled={!paymentAmount.trim() || !preauthReference.trim()}
+          disabled={
+            !paymentAmount.trim() ||
+            (paymentMethod === "cc" &&
+              settings?.enable3DSecure !== false &&
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2))
+          }
         >
           Process Preauthorization
         </Button>

package/admin/src/pages/hooks/usePaymentActions.js

@@ -31,8 +31,16 @@ const usePaymentActions = () => {
 
   // Payment form state
   const [paymentAmount, setPaymentAmount] = useState("1000");
-  const [preauthReference, setPreauthReference] = useState("");
-  const [authReference, setAuthReference] = useState("");
+
+  // Generate reference automatically
+  const generateReference = (prefix = "REF") => {
+    const timestamp = Date.now().toString(36).toUpperCase();
+    const random = Math.random().toString(36).substring(2, 6).toUpperCase();
+    return `${prefix}-${timestamp}${random}`.slice(0, 20);
+  };
+
+  const [preauthReference, setPreauthReference] = useState(generateReference("PRE"));
+  const [authReference, setAuthReference] = useState(generateReference("AUTH"));
   const [captureTxid, setCaptureTxid] = useState("");
   const [refundTxid, setRefundTxid] = useState("");
   const [refundSequenceNumber, setRefundSequenceNumber] = useState("2");
@@ -41,6 +49,12 @@ const usePaymentActions = () => {
   const [captureMode, setCaptureMode] = useState("full");
   const [googlePayToken, setGooglePayToken] = useState(null);
 
+  // Card details for 3DS testing
+  const [cardtype, setCardtype] = useState("");
+  const [cardpan, setCardpan] = useState("");
+  const [cardexpiredate, setCardexpiredate] = useState("");
+  const [cardcvc2, setCardcvc2] = useState("");
+
   // Payment processing state
   const [isProcessingPayment, setIsProcessingPayment] = useState(false);
   const [paymentResult, setPaymentResult] = useState(null);
@@ -70,14 +84,32 @@ const usePaymentActions = () => {
     setPaymentError(null);
     setPaymentResult(null);
     try {
+      // Auto-generate reference if empty
+      const finalPreauthReference = preauthReference.trim() || generateReference("PRE");
+      if (!preauthReference.trim()) {
+        setPreauthReference(finalPreauthReference);
+      }
+
+      // Determine currency based on card type
+      // American Express typically requires USD, other cards use EUR
+      const currency = (paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR";
+
       const baseParams = {
         amount: parseInt(paymentAmount),
-        currency: "EUR",
-        reference: preauthReference || `PREAUTH-${Date.now()}`,
+        currency: currency,
+        reference: finalPreauthReference,
         enable3DSecure: settings.enable3DSecure !== false,
         ...DEFAULT_PAYMENT_DATA
       };
 
+      // Add card details if credit card payment and 3DS enabled
+      if (paymentMethod === "cc" && settings.enable3DSecure !== false) {
+        if (cardtype) baseParams.cardtype = cardtype;
+        if (cardpan) baseParams.cardpan = cardpan;
+        if (cardexpiredate) baseParams.cardexpiredate = cardexpiredate;
+        if (cardcvc2) baseParams.cardcvc2 = cardcvc2;
+      }
+
       const needsRedirectUrls =
         (paymentMethod === "cc" && settings.enable3DSecure !== false) ||
         ["wlt", "gpp", "apl", "sb"].includes(paymentMethod);
@@ -100,19 +132,81 @@ const usePaymentActions = () => {
       const result = await payoneRequests.preauthorization(params);
       const responseData = result?.data || result;
 
+      // Log full response
+      console.log("Preauthorization Response:", responseData);
+      console.log("Response Status:", responseData.status || responseData.Status);
+      console.log("Response Error Code:", responseData.errorcode || responseData.errorCode || responseData.ErrorCode);
+      console.log("Response Error Message:", responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage);
+      console.log("All redirect URL fields:", {
+        redirectUrl: responseData.redirectUrl,
+        redirecturl: responseData.redirecturl,
+        RedirectUrl: responseData.RedirectUrl,
+        redirect_url: responseData.redirect_url,
+        url: responseData.url,
+        Url: responseData.Url
+      });
+
+      const status = (responseData.status || responseData.Status || "").toUpperCase();
+      const errorCode = responseData.errorcode || responseData.errorCode || responseData.ErrorCode;
+      const errorMessage = responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage;
+
+      // Check for 3DS required error (4219)
+      const requires3DSErrorCodes = ["4219", 4219];
+      const is3DSRequiredError = requires3DSErrorCodes.includes(errorCode);
+
+      // Check all possible redirect URL fields
+      const redirectUrl =
+        responseData.redirectUrl ||
+        responseData.redirecturl ||
+        responseData.RedirectUrl ||
+        responseData.redirect_url ||
+        responseData.url ||
+        responseData.Url ||
+        null;
+
+      // If 3DS required but no redirect URL, show helpful message
+      if (is3DSRequiredError && !redirectUrl) {
+        console.warn("3DS authentication required (Error 4219) but no redirect URL found in response");
+        console.log("Full response:", JSON.stringify(responseData, null, 2));
+        setPaymentError(
+          "3D Secure authentication required. Please check Payone configuration and ensure redirect URLs are properly set. Error: " +
+          (errorMessage || `Error code: ${errorCode}`)
+        );
+        setPaymentResult(responseData);
+        return;
+      }
+
+      // Check for other errors (but not 3DS required)
+      if ((status === "ERROR" || status === "INVALID" || errorCode) && !is3DSRequiredError) {
+        setPaymentError(
+          errorMessage ||
+          `Payment failed with error code: ${errorCode || "Unknown"}` ||
+          "Preauthorization failed"
+        );
+        setPaymentResult(responseData);
+        return;
+      }
 
-      const redirectUrl = responseData.redirectUrl || responseData.redirecturl || responseData.RedirectUrl;
       const needsRedirect = responseData.requires3DSRedirect ||
-        (responseData.status === "REDIRECT" && redirectUrl) ||
-        (responseData.Status === "REDIRECT" && redirectUrl);
+        (status === "REDIRECT" && redirectUrl) ||
+        (is3DSRequiredError && redirectUrl);
 
       if (needsRedirect && redirectUrl) {
+        console.log("Redirecting to 3DS:", redirectUrl);
         window.location.href = redirectUrl;
         return;
       }
 
       setPaymentResult(responseData);
-      handlePaymentSuccess("Preauthorization completed successfully");
+
+      if (status === "APPROVED") {
+        handlePaymentSuccess("Preauthorization completed successfully");
+      } else {
+        handlePaymentError(
+          { message: `Unexpected status: ${status}` },
+          `Preauthorization completed with status: ${status}`
+        );
+      }
     } catch (error) {
       handlePaymentError(error, "Preauthorization failed");
     } finally {
@@ -126,14 +220,32 @@ const usePaymentActions = () => {
     setPaymentResult(null);
 
     try {
+      // Auto-generate reference if empty
+      const finalAuthReference = authReference.trim() || generateReference("AUTH");
+      if (!authReference.trim()) {
+        setAuthReference(finalAuthReference);
+      }
+
+      // Determine currency based on card type
+      // American Express typically requires USD, other cards use EUR
+      const currency = (paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR";
+
       const baseParams = {
         amount: parseInt(paymentAmount),
-        currency: "EUR",
-        reference: authReference || `AUTH-${Date.now()}`,
+        currency: currency,
+        reference: finalAuthReference,
         enable3DSecure: settings.enable3DSecure !== false,
         ...DEFAULT_PAYMENT_DATA
       };
 
+      // Add card details if credit card payment and 3DS enabled
+      if (paymentMethod === "cc" && settings.enable3DSecure !== false) {
+        if (cardtype) baseParams.cardtype = cardtype;
+        if (cardpan) baseParams.cardpan = cardpan;
+        if (cardexpiredate) baseParams.cardexpiredate = cardexpiredate;
+        if (cardcvc2) baseParams.cardcvc2 = cardcvc2;
+      }
+
       const needsRedirectUrls =
         (paymentMethod === "cc" && settings.enable3DSecure !== false) ||
         ["wlt", "gpp", "apl", "sb"].includes(paymentMethod);
@@ -156,18 +268,81 @@ const usePaymentActions = () => {
       const result = await payoneRequests.authorization(params);
       const responseData = result?.data || result;
 
-      const redirectUrl = responseData.redirectUrl || responseData.redirecturl || responseData.RedirectUrl;
+      // Log full response
+      console.log("Authorization Response:", responseData);
+      console.log("Response Status:", responseData.status || responseData.Status);
+      console.log("Response Error Code:", responseData.errorcode || responseData.errorCode || responseData.ErrorCode);
+      console.log("Response Error Message:", responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage);
+      console.log("All redirect URL fields:", {
+        redirectUrl: responseData.redirectUrl,
+        redirecturl: responseData.redirecturl,
+        RedirectUrl: responseData.RedirectUrl,
+        redirect_url: responseData.redirect_url,
+        url: responseData.url,
+        Url: responseData.Url
+      });
+
+      const status = (responseData.status || responseData.Status || "").toUpperCase();
+      const errorCode = responseData.errorcode || responseData.errorCode || responseData.ErrorCode;
+      const errorMessage = responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage;
+
+      // Check for 3DS required error (4219)
+      const requires3DSErrorCodes = ["4219", 4219];
+      const is3DSRequiredError = requires3DSErrorCodes.includes(errorCode);
+
+      // Check all possible redirect URL fields
+      const redirectUrl =
+        responseData.redirectUrl ||
+        responseData.redirecturl ||
+        responseData.RedirectUrl ||
+        responseData.redirect_url ||
+        responseData.url ||
+        responseData.Url ||
+        null;
+
+      // If 3DS required but no redirect URL, show helpful message
+      if (is3DSRequiredError && !redirectUrl) {
+        console.warn("3DS authentication required (Error 4219) but no redirect URL found in response");
+        console.log("Full response:", JSON.stringify(responseData, null, 2));
+        setPaymentError(
+          "3D Secure authentication required. Please check Payone configuration and ensure redirect URLs are properly set. Error: " +
+          (errorMessage || `Error code: ${errorCode}`)
+        );
+        setPaymentResult(responseData);
+        return;
+      }
+
+      // Check for other errors (but not 3DS required)
+      if ((status === "ERROR" || status === "INVALID" || errorCode) && !is3DSRequiredError) {
+        setPaymentError(
+          errorMessage ||
+          `Payment failed with error code: ${errorCode || "Unknown"}` ||
+          "Authorization failed"
+        );
+        setPaymentResult(responseData);
+        return;
+      }
+
       const needsRedirect = responseData.requires3DSRedirect ||
-        (responseData.status === "REDIRECT" && redirectUrl) ||
-        (responseData.Status === "REDIRECT" && redirectUrl);
+        (status === "REDIRECT" && redirectUrl) ||
+        (is3DSRequiredError && redirectUrl);
 
       if (needsRedirect && redirectUrl) {
+        console.log("Redirecting to 3DS:", redirectUrl);
         window.location.href = redirectUrl;
         return;
       }
 
       setPaymentResult(responseData);
-      handlePaymentSuccess("Authorization completed successfully");
+
+      if (status === "APPROVED") {
+        handlePaymentSuccess("Authorization completed successfully");
+      } else {
+        handlePaymentError(
+          { message: `Unexpected status: ${status}` },
+          `Authorization completed with status: ${status}`
+        );
+      }
     } catch (error) {
       handlePaymentError(error, "Authorization failed");
     } finally {
@@ -263,7 +438,17 @@ const usePaymentActions = () => {
 
     // Google Pay
     googlePayToken,
-    setGooglePayToken
+    setGooglePayToken,
+
+    // Card details for 3DS
+    cardtype,
+    setCardtype,
+    cardpan,
+    setCardpan,
+    cardexpiredate,
+    setCardexpiredate,
+    cardcvc2,
+    setCardcvc2
   };
 };
 

package/admin/src/pages/utils/paymentUtils.js

@@ -100,7 +100,8 @@ export const getBaseParams = (options = {}) => {
  */
 export const getPaymentMethodParams = (paymentMethod, options = {}) => {
   const {
-    cardType = "V",
+    cardType,
+    cardtype,
     captureMode = "full",
     cardpan,
     cardexpiredate,
@@ -124,6 +125,9 @@ export const getPaymentMethodParams = (paymentMethod, options = {}) => {
     country
   } = options;
 
+  // Use cardtype if provided, otherwise fall back to cardType, otherwise default to "V"
+  const finalCardType = cardtype || cardType || "V";
+
   // Helper to get shipping params for wallet payments
   const getShippingParams = () => ({
     shipping_firstname: shipping_firstname || firstname || "John",
@@ -138,7 +142,7 @@ export const getPaymentMethodParams = (paymentMethod, options = {}) => {
     case "cc": // Credit Card (Visa, Mastercard, Amex)
       return {
         clearingtype: "cc",
-        cardtype: cardType, // V = Visa, M = Mastercard, A = Amex
+        cardtype: finalCardType, // V = Visa, M = Mastercard, A = Amex
         cardpan: cardpan || "4111111111111111", // Test Visa card
         cardexpiredate: cardexpiredate || "2512", // MMYY format
         cardcvc2: cardcvc2 || "123" // 3-digit security code

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-payone-provider",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Strapi plugin for Payone payment gateway integration",
   "license": "MIT",
   "maintainers": [

package/server/services/paymentService.js

@@ -41,27 +41,84 @@ const sendRequest = async (strapi, params) => {
 
     const responseData = parseResponse(response.data, strapi.log);
 
-    if (requires3DSRedirect(responseData)) {
+    // Log full response for debugging
+    strapi.log.info("Payone API Response:", JSON.stringify(responseData, null, 2));
+    strapi.log.info("Response Status:", responseData.status || responseData.Status);
+    strapi.log.info("Response Error Code:", responseData.errorcode || responseData.ErrorCode || responseData.Error?.ErrorCode);
+    strapi.log.info("Response Error Message:", responseData.errormessage || responseData.ErrorMessage || responseData.Error?.ErrorMessage);
+
+    // Log all possible redirect URL fields
+    strapi.log.info("Redirect URL fields:", {
+      redirecturl: responseData.redirecturl,
+      RedirectUrl: responseData.RedirectUrl,
+      redirect_url: responseData.redirect_url,
+      redirectUrl: responseData.redirectUrl,
+      url: responseData.url,
+      Url: responseData.Url
+    });
+
+    // Extract error information from various possible fields
+    const errorCode =
+      responseData.errorcode ||
+      responseData.ErrorCode ||
+      responseData.Error?.ErrorCode ||
+      responseData.error_code ||
+      null;
+
+    // Check for 3DS redirect
+    const requires3DSErrorCodes = ["4219", 4219];
+    const is3DSRequiredError = requires3DSErrorCodes.includes(errorCode);
+
+    if (requires3DSRedirect(responseData) || is3DSRequiredError) {
       const redirectUrl = get3DSRedirectUrl(responseData);
       responseData.requires3DSRedirect = true;
       responseData.redirectUrl = redirectUrl;
+      responseData.is3DSRequired = is3DSRequiredError;
+
+      // If 3DS required but no redirect URL, log for debugging
+      if (is3DSRequiredError && !redirectUrl) {
+        strapi.log.warn("3DS authentication required (Error 4219) but no redirect URL found. May need 3dscheck request.");
+        strapi.log.info("Full response data:", JSON.stringify(responseData, null, 2));
+      }
     }
 
+    const errorMessage =
+      responseData.errormessage ||
+      responseData.ErrorMessage ||
+      responseData.Error?.ErrorMessage ||
+      responseData.error_message ||
+      null;
+
+    const customerMessage =
+      responseData.customermessage ||
+      responseData.CustomerMessage ||
+      responseData.Error?.CustomerMessage ||
+      responseData.customer_message ||
+      null;
+
+    const status = (responseData.status || responseData.Status || "unknown").toUpperCase();
+
     // Log transaction
     await logTransaction(strapi, {
       txid: extractTxId(responseData) || params.txid || null,
       reference: params.reference || null,
-      status: responseData.status || responseData.Status || "unknown",
+      status: status,
       request_type: params.request,
       amount: params.amount || null,
       currency: params.currency || "EUR",
       raw_request: requestParams,
       raw_response: responseData,
-      error_code: responseData.Error?.ErrorCode || null,
-      error_message: responseData.Error?.ErrorMessage || null,
-      customer_message: responseData.Error?.CustomerMessage || null
+      error_code: errorCode,
+      error_message: errorMessage,
+      customer_message: customerMessage
     });
 
+    // Add normalized error fields to response
+    responseData.errorCode = errorCode;
+    responseData.errorMessage = errorMessage;
+    responseData.customerMessage = customerMessage;
+    responseData.status = status;
+
     return responseData;
   } catch (error) {
     strapi.log.error("Payone sendRequest error:", error);

package/server/utils/requestBuilder.js

@@ -42,6 +42,8 @@ const buildClientRequestParams = (settings, params, logger = null) => {
     requestParams["3dsecure"] = "yes";
     requestParams.ecommercemode = params.ecommercemode || "internet";
 
+    // Ensure redirect URLs are always provided for 3DS
+    // These are required for 3DS authentication flow
     if (!requestParams.successurl) {
       requestParams.successurl = params.successurl || "https://www.example.com/success";
     }
@@ -51,6 +53,15 @@ const buildClientRequestParams = (settings, params, logger = null) => {
     if (!requestParams.backurl) {
       requestParams.backurl = params.backurl || "https://www.example.com/back";
     }
+
+    // Log redirect URLs for debugging
+    if (logger) {
+      logger.info("3DS Redirect URLs:", {
+        successurl: requestParams.successurl,
+        errorurl: requestParams.errorurl,
+        backurl: requestParams.backurl
+      });
+    }
   } else if (isCreditCard && !enable3DSecure) {
     requestParams["3dsecure"] = "no";
   }

package/server/utils/responseParser.js

@@ -54,9 +54,38 @@ const extractTxId = (data) => {
  */
 const requires3DSRedirect = (data) => {
   const status = (data.status || data.Status || "").toUpperCase();
-  const redirecturl = data.redirecturl || data.RedirectUrl || data.redirect_url;
+  const errorCode = data.errorcode || data.ErrorCode || data.Error?.ErrorCode;
+  
+  // Check for redirect URL in various possible fields
+  const redirecturl = 
+    data.redirecturl || 
+    data.RedirectUrl || 
+    data.redirect_url ||
+    data.redirectUrl ||
+    data.RedirectURL ||
+    data.redirectURL ||
+    data.url ||
+    data.Url ||
+    data.URL ||
+    null;
 
-  return status === "REDIRECT" && !!redirecturl;
+  // 3DS required error codes (4219, etc.)
+  const requires3DSErrorCodes = ["4219", 4219];
+  const is3DSRequiredError = requires3DSErrorCodes.includes(errorCode);
+
+  return (status === "REDIRECT" && !!redirecturl) || is3DSRequiredError;
+};
+
+/**
+ * Check if response indicates an error
+ * @param {Object} data - Response data
+ * @returns {boolean} True if response indicates error
+ */
+const isErrorResponse = (data) => {
+  const status = (data.status || data.Status || "").toUpperCase();
+  const errorCode = data.errorcode || data.ErrorCode || data.Error?.ErrorCode;
+  
+  return status === "ERROR" || status === "INVALID" || !!errorCode;
 };
 
 /**
@@ -65,9 +94,33 @@ const requires3DSRedirect = (data) => {
  * @returns {string|null} Redirect URL
  */
 const get3DSRedirectUrl = (data) => {
-  if (requires3DSRedirect(data)) {
-    return data.redirecturl || data.RedirectUrl || data.redirect_url || null;
+  // Check all possible redirect URL fields
+  const redirecturl = 
+    data.redirecturl || 
+    data.RedirectUrl || 
+    data.redirect_url ||
+    data.redirectUrl ||
+    data.RedirectURL ||
+    data.redirectURL ||
+    data.url ||
+    data.Url ||
+    data.URL ||
+    data.redirect ||
+    data.Redirect ||
+    null;
+
+  if (redirecturl) {
+    return redirecturl;
   }
+
+  // If 3DS required but no redirect URL, might need 3dscheck
+  const errorCode = data.errorcode || data.ErrorCode || data.Error?.ErrorCode;
+  const requires3DSErrorCodes = ["4219", 4219];
+  if (requires3DSErrorCodes.includes(errorCode)) {
+    // Return null - will need to handle 3dscheck separately
+    return null;
+  }
+
   return null;
 };
 
@@ -75,6 +128,7 @@ module.exports = {
   parseResponse,
   extractTxId,
   requires3DSRedirect,
-  get3DSRedirectUrl
+  get3DSRedirectUrl,
+  isErrorResponse
 };