strapi-plugin-payone-provider 1.6.7 → 5.6.9

package/admin/src/pages/App/components/configuration/ConfigurationPanel.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Box, Flex, Typography } from "@strapi/design-system";
+import ConfigurationFields from "./ConfigurationFields";
+import TestConnection from "./TestConnection";
+
+const ConfigurationPanel = ({ settings }) => {
+  return (
+    <Flex direction="column" alignItems="stretch" gap={8} paddingTop={8}>
+      <Box>
+        <Typography
+          variant="beta"
+          as="h2"
+          fontWeight="bold"
+          className="payment-title"
+          style={{ fontSize: "20px", marginBottom: "4px" }}
+        >
+          Payone API Configuration
+        </Typography>
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          marginTop={2}
+          className="payment-subtitle"
+          style={{ fontSize: "14px" }}
+        >
+          Configure your Payone payment gateway settings
+        </Typography>
+      </Box>
+
+      <ConfigurationFields
+        settings={settings.settings}
+        onInputChange={settings.handleInputChange}
+        onPaymentMethodToggle={settings.handlePaymentMethodToggle}
+        onNavigateToConfig={settings.onNavigateToConfig}
+      />
+
+      <TestConnection
+        settings={settings.settings}
+        isTesting={settings.isTesting}
+        testResult={settings.testResult}
+        onTestConnection={settings.handleTestConnection}
+      />
+
+      <Box paddingTop={4}>
+        <Typography variant="sigma" textColor="neutral600">
+          Note: These settings are used for all Payone API requests. Make sure
+          to use the correct credentials for your selected mode.
+        </Typography>
+      </Box>
+    </Flex>
+  );
+};
+
+export default ConfigurationPanel;

package/admin/src/pages/App/components/configuration/TestConnection.jsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  Typography,
+  Alert,
+} from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+
+const TestConnection = ({
+  settings,
+  isTesting,
+  testResult,
+  onTestConnection,
+}) => {
+  const mode = (settings?.mode || "test").toLowerCase();
+
+  return (
+    <Card padding={8}>
+      <CardBody>
+        <Flex direction="column" alignItems="stretch" gap={6} paddingTop={6}>
+          <Box>
+            <Typography
+              variant="delta"
+              as="h3"
+              fontWeight="bold"
+              style={{ marginBottom: "16px" }}
+            >
+              Test Connection
+            </Typography>
+
+            {mode === "test" ? (
+              <Typography variant="pi" textColor="neutral600">
+                Verify your Payone configuration by testing the API connection
+              </Typography>
+            ) : (
+              <Typography
+                variant="pi"
+                textColor="neutral600"
+                style={{ marginTop: "8px" }}
+              >
+                Test Connection is disabled in live mode.
+              </Typography>
+            )}
+          </Box>
+
+          <Button
+            variant="default"
+            onClick={onTestConnection}
+            loading={isTesting}
+            startIcon={<Play />}
+            className="payment-button payment-button-success"
+            disabled={mode === "live"}
+            style={{ maxWidth: "200px" }}
+          >
+            {isTesting ? "Testing Connection..." : "Test Connection"}
+          </Button>
+
+          {testResult && (
+            <Flex direction={"column"} alignItems={"stretch"} gap={2}>
+              <Typography
+                variant="pi"
+                fontWeight="medium"
+                style={{ marginBottom: "16px" }}
+              >
+                {testResult.message}
+              </Typography>
+              {testResult.details && Boolean(testResult.success) ? (
+                <Box paddingTop={3}>
+                  <Card>
+                    <CardBody padding={4}>
+                      <Flex direction="column" alignItems="stretch" gap={2}>
+                        {testResult.details.mode && (
+                          <Typography variant="pi" textColor="neutral600">
+                            <strong>Mode:</strong> {testResult.details.mode}
+                          </Typography>
+                        )}
+                        {testResult.details.aid && (
+                          <Typography variant="pi" textColor="neutral600">
+                            <strong>AID:</strong> {testResult.details.aid}
+                          </Typography>
+                        )}
+                        {testResult.details.portalid && (
+                          <Typography variant="pi" textColor="neutral600">
+                            <strong>Portal ID:</strong>{" "}
+                            {testResult.details.portalid}
+                          </Typography>
+                        )}
+                      </Flex>
+                    </CardBody>
+                  </Card>
+                </Box>
+              ) : (
+                <Card>
+                  <CardBody padding={4}>
+                    <Flex direction="column" alignItems="stretch" gap={2}>
+                      {testResult.error && (
+                        <Typography variant="pi" textColor="neutral600">
+                          <strong>Error Code:</strong>{" "}
+                          {testResult.error.ErrorCode}
+                        </Typography>
+                      )}
+                      {testResult.error.ErrorMessage && (
+                        <Typography variant="pi" textColor="neutral600">
+                          <strong>Error Message:</strong>{" "}
+                          {testResult.error.ErrorMessage}
+                        </Typography>
+                      )}
+                      {testResult.error.CustomerMessage && (
+                        <Typography variant="pi" textColor="neutral600">
+                          <strong>Customer Message:</strong>{" "}
+                          {testResult.error.CustomerMessage}
+                        </Typography>
+                      )}
+                    </Flex>
+                  </CardBody>
+                </Card>
+              )}
+            </Flex>
+          )}
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default TestConnection;

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

@@ -0,0 +1,260 @@
+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 ApplePaySection = () => {
+  return (
+    <Accordion.Item value="apple-pay" id="apple-pay">
+      <Accordion.Header>
+        <Accordion.Trigger>Apple Pay Integration</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" alignItems={"stretch"} gap={4} padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Apple Pay Integration
+          </Typography>
+          <Typography variant="pi" fontWeight="bold" textColor="danger600">
+            ⚠️ Important: Apple Pay does NOT work on localhost
+          </Typography>
+
+          <Typography variant="pi" textColor="neutral600">
+            Apple Pay requires a registered domain with HTTPS. For testing, use a
+            production domain with HTTPS or test on a device with Safari
+            (iOS/macOS).
+          </Typography>
+
+          <Box>
+            <Flex direction="column" alignItems={"stretch"} gap={2}>
+              <Typography variant="pi" fontWeight="bold">
+                Step 1: Configure Strapi Middleware
+              </Typography>
+              <Typography variant="pi">
+                Add Apple Pay SDK to your <code>config/middlewares.js</code>:
+              </Typography>
+            </Flex>
+
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`module.exports = [
+  'strapi::logger',
+  'strapi::errors',
+  {
+    name: 'strapi::security',
+    config: {
+      contentSecurityPolicy: {
+        useDefaults: true,
+        directives: {
+          'script-src': [
+            "'self'",
+            "'unsafe-inline'",
+            "'unsafe-eval'",
+            'https://applepay.cdn-apple.com',
+            'https://www.apple.com',
+          ],
+          'connect-src': [
+            "'self'",
+            'https:',
+            'https://applepay.cdn-apple.com',
+            'https://www.apple.com',
+          ],
+          'frame-src': [
+            "'self'",
+            'https://applepay.cdn-apple.com',
+          ],
+        },
+      },
+    },
+  },
+  // ... other middlewares
+];`}</CodeBlock>
+            </div>
+          </Box>
+
+          <Box>
+            <Flex direction="column" alignItems={"stretch"} gap={2}>
+              <Typography variant="pi" fontWeight="bold">
+                Step 2: Setup .well-known File
+              </Typography>
+              <Typography variant="pi">
+                Download the Apple Pay domain verification file from Payone
+                documentation:{" "}
+                <Link
+                  href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+                </Link>{" "}
+                or from your Payone merchant portal and place it:
+              </Typography>
+            </Flex>
+            <Flex
+              direction="column"
+              alignItems={"stretch"}
+              gap={2}
+              style={{ marginTop: "16px" }}
+            >
+              <Typography variant="pi">
+                <strong>In Strapi:</strong>{" "}
+                <code>
+                  public/.well-known/apple-developer-merchantid-domain-association
+                </code>
+              </Typography>
+              <Typography variant="pi">
+                <strong>In Frontend:</strong>{" "}
+                <code>
+                  public/.well-known/apple-developer-merchantid-domain-association
+                </code>
+              </Typography>
+            </Flex>
+            <Typography variant="pi" textColor="neutral600" marginTop={2}>
+              The file must be accessible at:{" "}
+              <code>
+                https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
+              </code>
+            </Typography>
+            <Typography variant="pi" textColor="neutral600" marginTop={2}>
+              <strong>Alternative Download:</strong> Log into your Payone
+              Merchant Interface (PMI) → Configuration → Payment Portals → Apple
+              Pay → Download domain verification file
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Step 3: Implement Apple Pay Button
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`// Load Apple Pay SDK
+<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>
+
+// Check if Apple Pay is available
+if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
+  // Create payment request
+  const paymentRequest = {
+    countryCode: 'DE',
+    currencyCode: 'EUR',
+    supportedNetworks: ['visa', 'masterCard', 'amex'],
+    merchantCapabilities: ['supports3DS'],
+    total: {
+      label: 'Your Store',
+      amount: '10.00'
+    }
+  };
+
+  // Create session
+  const session = new ApplePaySession(3, paymentRequest);
+
+  // Handle merchant validation
+  session.onmerchantvalidation = async (event) => {
+    const validationURL = event.validationURL;
+    
+    // Call your backend to validate merchant
+    const response = await fetch('/api/strapi-plugin-payone-provider/validate-apple-pay-merchant', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer YOUR_TOKEN'
+      },
+      body: JSON.stringify({
+        validationURL: validationURL,
+        displayName: 'Your Store Name',
+        domainName: window.location.hostname
+      })
+    });
+    
+    const merchantSession = await response.json();
+    session.completeMerchantValidation(merchantSession);
+  };
+
+  // Handle payment authorization
+  session.onpaymentauthorized = async (event) => {
+    const payment = event.payment;
+    const token = payment.token;
+    
+    // Send token to backend
+    const response = await fetch('/api/strapi-plugin-payone-provider/preauthorization', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer YOUR_TOKEN'
+      },
+      body: JSON.stringify({
+        amount: 1000,
+        currency: 'EUR',
+        reference: 'ORD-00123-ABCD',
+        clearingtype: 'wlt',
+        wallettype: 'APL',
+        'add_paydata[paymentmethod_token_data]': JSON.stringify(token),
+        'add_paydata[paymentmethod]': 'APL',
+        'add_paydata[paymentmethod_type]': 'APPLEPAY',
+        'add_paydata[gatewayid]': 'payonegmbh',
+        firstname: payment.billingContact.givenName || 'John',
+        lastname: payment.billingContact.familyName || 'Doe',
+        email: payment.billingContact.emailAddress || 'john.doe@example.com',
+        street: payment.billingContact.addressLines?.[0] || 'Main Street 123',
+        zip: payment.billingContact.postalCode || '12345',
+        city: payment.billingContact.locality || 'Berlin',
+        country: payment.billingContact.countryCode || 'DE',
+        shipping_firstname: payment.shippingContact?.givenName || payment.billingContact.givenName || 'John',
+        shipping_lastname: payment.shippingContact?.familyName || payment.billingContact.familyName || 'Doe',
+        shipping_street: payment.shippingContact?.addressLines?.[0] || payment.billingContact.addressLines?.[0] || 'Main Street 123',
+        shipping_zip: payment.shippingContact?.postalCode || payment.billingContact.postalCode || '12345',
+        shipping_city: payment.shippingContact?.locality || payment.billingContact.locality || 'Berlin',
+        shipping_country: payment.shippingContact?.countryCode || payment.billingContact.countryCode || 'DE'
+      })
+    });
+    
+    const result = await response.json();
+    
+    if (result.status === 'APPROVED') {
+      session.completePayment(ApplePaySession.STATUS_SUCCESS);
+    } else {
+      session.completePayment(ApplePaySession.STATUS_FAILURE);
+    }
+  };
+
+  // Show payment sheet
+  session.begin();
+}`}</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Token Parameters (Backend Request):
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "ORD-00123-ABCD",
+  "clearingtype": "wlt",
+  "wallettype": "APL",
+  "add_paydata[paymentmethod_token_data]": "JSON_STRINGIFIED_TOKEN",
+  "add_paydata[paymentmethod]": "APL",
+  "add_paydata[paymentmethod_type]": "APPLEPAY",
+  "add_paydata[gatewayid]": "payonegmbh",
+  "add_paydata[gateway_merchantid]": "YOUR_MERCHANT_ID",
+  // ... customer and shipping info
+}`}</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <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>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default ApplePaySection;
+

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Box, Card, CardBody, Flex, Typography } from "@strapi/design-system";
+import CodeBlock from "./CodeBlock";
+
+const BaseUrlSection = () => {
+  return (
+    <Card id="base-url">
+      <CardBody padding={6}>
+        <Flex direction="column" alignItems="stretch" gap={4}>
+          <Typography
+            variant="delta"
+            as="h3"
+            fontWeight="bold"
+            style={{ marginBottom: "12px" }}
+          >
+            Base URL & Authentication
+          </Typography>
+          <Box>
+            <Typography
+              variant="pi"
+              fontWeight="bold"
+              style={{ marginBottom: "16px" }}
+            >
+              Content API (Frontend):
+            </Typography>
+            <CodeBlock>/api/strapi-plugin-payone-provider</CodeBlock>
+          </Box>
+          <Box>
+            <Typography
+              variant="pi"
+              fontWeight="bold"
+              style={{ marginBottom: "16px" }}
+            >
+              Required Headers:
+            </Typography>
+            <CodeBlock>{`{
+  "Content-Type": "application/json",
+  "Authorization": "Bearer YOUR_AUTH_TOKEN"
+}`}</CodeBlock>
+          </Box>
+          <Typography variant="pi" textColor="neutral600">
+            <strong>Note:</strong> <code>YOUR_AUTH_TOKEN</code> is your Strapi
+            authentication token (JWT), not a Payone token. You can get this
+            token by logging into Strapi admin panel or using Strapi's
+            authentication API.
+          </Typography>
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default BaseUrlSection;

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

@@ -0,0 +1,113 @@
+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 CaptureRefundSection = () => {
+  return (
+    <Accordion.Item value="capture-refund" id="capture-refund">
+      <Accordion.Header>
+        <Accordion.Trigger>Capture & Refund Operations</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" alignItems={"stretch"} gap={4} padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Capture & Refund Operations
+          </Typography>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Capture (Complete Preauthorized Transaction):
+            </Typography>
+            <div style={{ marginTop: "12px", marginBottom: "12px" }}>
+              <CodeBlock>{`POST /api/strapi-plugin-payone-provider/capture
+
+{
+  "txid": "12345678",
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "CAPTURE-00123-ABCD",
+  "sequencenumber": 1,
+  "capturemode": "full"  // For wallet payments: "full" or "partial"
+}`}</CodeBlock>
+            </div>
+            <Typography variant="pi" textColor="neutral600">
+              <strong>Note:</strong> <code>capturemode</code> is only required
+              for wallet payments (PayPal, Google Pay, Apple Pay).
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Refund (Return Funds):
+            </Typography>
+            <div style={{ marginTop: "12px", marginBottom: "12px" }}>
+              <CodeBlock>{`POST /api/strapi-plugin-payone-provider/refund
+
+{
+  "txid": "12345678",
+  "amount": -1000,  // Negative amount for refund
+  "currency": "EUR",
+  "reference": "REFUND-00123-ABCD",
+  "sequencenumber": 2
+}`}</CodeBlock>
+            </div>
+            <Typography variant="pi" textColor="neutral600">
+              <strong>Note:</strong> Refund amount must be negative.{" "}
+              <code>sequencenumber</code> should be incremented for each
+              operation on the same transaction.
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Sequence Numbers:
+            </Typography>
+            <Flex
+              direction="column"
+              marginTop={2}
+              alignItems={"stretch"}
+              gap={2}
+            >
+              <Typography variant="pi">
+                • <strong>Preauthorization:</strong> sequencenumber = 0
+                (default)
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Capture:</strong> sequencenumber = 1 (first capture)
+              </Typography>
+              <Typography variant="pi">
+                • <strong>Refund:</strong> sequencenumber = 2 (first refund), 3
+                (second refund), etc.
+              </Typography>
+            </Flex>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Capture Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Capture"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Capture
+              </Link>
+            </Typography>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Refund Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Refund"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Refund
+              </Link>
+            </Typography>
+          </Box>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default CaptureRefundSection;
+

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Box } from "@strapi/design-system";
+
+const CodeBlock = ({ children }) => {
+  const [isDark, setIsDark] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkTheme = () => {
+      if (typeof window !== "undefined") {
+        const bodyBg = window.getComputedStyle(document.body).backgroundColor;
+        const rgb = bodyBg.match(/\d+/g);
+        if (rgb && rgb.length >= 3) {
+          const brightness =
+            (parseInt(rgb[0]) * 299 +
+              parseInt(rgb[1]) * 587 +
+              parseInt(rgb[2]) * 114) /
+            1000;
+          setIsDark(brightness < 128);
+        } else {
+          const prefersDark =
+            window.matchMedia &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches;
+          setIsDark(prefersDark);
+        }
+      }
+    };
+
+    checkTheme();
+    const mediaQuery =
+      window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
+    if (mediaQuery) {
+      mediaQuery.addEventListener("change", checkTheme);
+      return () => mediaQuery.removeEventListener("change", checkTheme);
+    }
+  }, []);
+
+  return (
+    <Box
+      padding={3}
+      borderRadius="4px"
+      style={{
+        backgroundColor: isDark ? "#1e1e1e" : "#f6f6f9",
+        color: isDark ? "#d4d4d4" : "#32324d",
+        fontFamily: "monospace",
+        fontSize: "14px",
+        overflow: "auto",
+      }}
+    >
+      <pre
+        style={{ margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-word" }}
+      >
+        {children}
+      </pre>
+    </Box>
+  );
+};
+
+export default CodeBlock;
+