strapi-plugin-payone-provider 4.6.9 → 5.6.10

package/admin/src/pages/App/components/docs/TestCredentialsSection.jsx

@@ -0,0 +1,304 @@
+import * as React from "react";
+import { Accordion, Box, Flex, Typography } from "@strapi/design-system";
+import { Link } from "@strapi/design-system";
+
+const TestCredentialsSection = () => {
+  return (
+    <Accordion.Item value="test-credentials" id="test-credentials">
+      <Accordion.Header>
+        <Accordion.Trigger>Test Credentials</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" alignItems={"stretch"} gap={4} padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Test Credentials
+          </Typography>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Credit Card Test Cards (Standard):
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • <strong>Visa:</strong> 4111111111111111
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Mastercard:</strong> 5555555555554444
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Amex:</strong> 378282246310005
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Expiry:</strong> Any future date (e.g., 12/25 =
+                "2512")
+              </Typography>
+              <Typography variant="pi">
+                • <strong>CVC:</strong> Any 3 digits (4 digits for Amex)
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              3D Secure Test Cards (Special Test Data):
+            </Typography>
+            <Flex
+              direction="column"
+              marginBottom={2}
+              marginTop={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • <strong>Visa 3DS Test Card:</strong> 4000000000000002
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Mastercard 3DS Test Card:</strong>{" "}
+                5453010000059543
+              </Typography>
+              <Typography variant="pi">
+                • <strong>3DS Password:</strong> Usually "123456" or as
+                provided by Payone
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Expiry:</strong> Any future date (e.g., 12/25 =
+                "2512")
+              </Typography>
+              <Typography variant="pi">
+                • <strong>CVC:</strong> Any 3 digits
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/3D+Secure
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              PayPal Test Data:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • Use PayPal Sandbox test accounts
+              </Typography>
+              <Typography variant="pi">
+                • Create test accounts in PayPal Developer Dashboard
+              </Typography>
+              <Typography variant="pi">
+                • Test with both buyer and merchant sandbox accounts
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone PayPal Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/PayPal"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/PayPal
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Google Pay Test Data:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • Use Google Pay test environment
+              </Typography>
+              <Typography variant="pi">
+                • Test cards are automatically provided by Google Pay SDK
+              </Typography>
+              <Typography variant="pi">
+                • Set <code>environment: 'TEST'</code> in Google Pay
+                configuration
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Google Pay Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Google+Pay
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Apple Pay Test Data:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • Use Apple Pay test environment
+              </Typography>
+              <Typography variant="pi">
+                • Test cards are available in Wallet app on test devices
+              </Typography>
+              <Typography variant="pi">
+                • Requires registered domain with HTTPS (not localhost)
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Apple Pay Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Apple+Pay
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Sofort Banking Test Data:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • Use Sofort test environment
+              </Typography>
+              <Typography variant="pi">
+                • Test credentials provided by Payone
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Sofort Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Sofort"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Sofort
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              SEPA Direct Debit Test Data:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • <strong>Test IBAN:</strong> DE89370400440532013000
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Test BIC:</strong> COBADEFFXXX
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Account Holder:</strong> Any test name
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone SEPA Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/SEPA+Direct+Debit"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/SEPA+Direct+Debit
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              General Test Data Resources:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                📚 <strong>Payone Test Data Overview:</strong>{" "}
+                <Link
+                  href="https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data
+                </Link>
+              </Typography>
+              <Typography variant="pi">
+                📚 <strong>Payone Test Cards:</strong>{" "}
+                <Link
+                  href="https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards
+                </Link>
+              </Typography>
+              <Typography variant="pi">
+                📚 <strong>Payone Test Environment:</strong>{" "}
+                <Link
+                  href="https://docs.payone.com/display/public/PLATFORM/Test+Environment"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  https://docs.payone.com/display/public/PLATFORM/Test+Environment
+                </Link>
+              </Typography>
+            </Flex>
+          </Box>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default TestCredentialsSection;
+

package/admin/src/pages/App/components/docs/ThreeDSecureSection.jsx

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { Accordion, Box, Flex, Typography } from "@strapi/design-system";
+import { Link } from "@strapi/design-system";
+import CodeBlock from "./CodeBlock";
+
+const ThreeDSecureSection = () => {
+  return (
+    <Accordion.Item value="3d-secure" id="3d-secure">
+      <Accordion.Header>
+        <Accordion.Trigger>3D Secure Authentication</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" alignItems={"stretch"} gap={4} padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            3D Secure Authentication
+          </Typography>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              How 3D Secure Works:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                1. Enable 3D Secure in Strapi admin panel (Configuration tab)
+              </Typography>
+              <Typography variant="pi">
+                2. Make a credit card payment request
+              </Typography>
+              <Typography variant="pi">
+                3. If 3DS is required, you'll receive a{" "}
+                <code>redirecturl</code> in the response
+              </Typography>
+              <Typography variant="pi">
+                4. Redirect the user to the <code>redirecturl</code> for
+                authentication
+              </Typography>
+              <Typography variant="pi">
+                5. User enters password/confirms with bank
+              </Typography>
+              <Typography variant="pi">
+                6. User is redirected back to your <code>successurl</code>,{" "}
+                <code>errorurl</code>, or <code>backurl</code>
+              </Typography>
+              <Typography variant="pi">
+                7. Handle the callback and check transaction status
+              </Typography>
+            </Flex>
+          </Box>
+
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Special 3D Secure Test Cards (from Payone Documentation):
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • <strong>Visa 3DS Test Card:</strong> 4000000000000002
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Mastercard 3DS Test Card:</strong>{" "}
+                5453010000059543
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Expiry:</strong> Any future date (e.g., 12/25 =
+                "2512")
+              </Typography>
+              <Typography variant="pi">
+                • <strong>CVC:</strong> Any 3 digits (e.g., 123)
+              </Typography>
+              <Typography variant="pi">
+                • <strong>3DS Password:</strong> Usually "123456" or as provided
+                by Payone (check your Payone test documentation)
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/3D+Secure
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Standard Credit Card Test Cards (without 3DS):
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              marginBottom={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • <strong>Visa:</strong> 4111111111111111
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Mastercard:</strong> 5555555555554444
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Amex:</strong> 378282246310005
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Expiry:</strong> Any future date (e.g., 12/25 =
+                "2512")
+              </Typography>
+              <Typography variant="pi">
+                • <strong>CVC:</strong> Any 3 digits (4 digits for Amex)
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Test Cards Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards
+              </Link>
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Example Flow:
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`// 1. Make payment request
+const response = await fetch('/api/strapi-plugin-payone-provider/preauthorization', {
+  method: 'POST',
+  body: JSON.stringify({
+    amount: 1000,
+    currency: 'EUR',
+    clearingtype: 'cc',
+    cardtype: 'V',
+    cardpan: '4111111111111111',
+    cardexpiredate: '2512',
+    cardcvc2: '123',
+    successurl: 'https://yoursite.com/payment/success',
+    errorurl: 'https://yoursite.com/payment/error',
+    backurl: 'https://yoursite.com/payment/back',
+    // ... other params
+  })
+});
+
+const result = await response.json();
+
+// 2. Check if 3DS redirect is required
+if (result.status === 'REDIRECT' && result.redirecturl) {
+  // 3. Redirect user to 3DS authentication page
+  window.location.href = result.redirecturl;
+}
+
+// 4. Handle callback (in your success/error/back URL handler)
+// The callback will include transaction status and txid`}</CodeBlock>
+            </div>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/3D+Secure
+              </Link>
+            </Typography>
+          </Box>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default ThreeDSecureSection;
+

package/admin/src/pages/App/components/icons/BankIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const BankIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/ChevronDownIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/ChevronUpIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/CreditCardIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/ErrorIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/InfoIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/MarkCircle.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const MarkCircle = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12.5}
+    height={12.5}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#212134"
+      d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0Zm1.154 18.456h-2.308V16.15h2.308v2.307Zm-.23-3.687h-1.847l-.346-9.23h2.538l-.346 9.23Z"
+    />
+  </svg>
+);
+
+export default MarkCircle;

package/admin/src/pages/App/components/icons/PaymentIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/PendingIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/PersonIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const PersonIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/SuccessIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const SuccessIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/icons/WalletIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from '@strapi/strapi/admin';
 
 const WalletIcon = ({ size = 16, color = 'currentColor' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/admin/src/pages/App/components/payment-actions/ApplePayPanel.jsx

@@ -0,0 +1,51 @@
+import * as React from "@strapi/strapi/admin";
+import { Box, Typography } from "@strapi/design-system";
+import PaymentMethodSelector from "./PaymentMethodSelector";
+import AuthorizationForm from "./AuthorizationForm";
+
+const ApplePayOnlyPanel = ({
+  onNavigateToConfig,
+  isLiveMode,
+  paymentActions,
+  settings,
+}) => {
+  return (
+    <Box
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "16px",
+        marginTop: "24px",
+        width: "100%",
+      }}
+    >
+      <Typography
+        variant="pi"
+        textColor="warning600"
+        style={{
+          fontSize: "14px",
+          marginTop: "12px",
+          marginBottom: "12px",
+          fontWeight: "bold",
+        }}
+      >
+        ⚠️ Apple Pay can only be tested on a production domain with HTTPS and
+        Live mode. Testing in Strapi admin panel is not supported. Please test
+        Apple Pay on your production website.
+      </Typography>
+
+      <PaymentMethodSelector
+        paymentActions={paymentActions}
+        onNavigateToConfig={onNavigateToConfig}
+        isLiveMode={isLiveMode}
+      />
+
+      <hr className="payment-divider" />
+
+      <AuthorizationForm paymentActions={paymentActions} settings={settings} />
+    </Box>
+  );
+};
+
+export default ApplePayOnlyPanel;