strapi-plugin-payone-provider 4.6.9 → 5.6.10

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;
+

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

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Accordion, Box, Flex, Link, Typography } from "@strapi/design-system";
+import CodeBlock from "./CodeBlock";
+
+const CreditCardSection = () => {
+  return (
+    <Accordion.Item value="credit-card" id="credit-card">
+      <Accordion.Header>
+        <Accordion.Trigger>Credit Card Integration</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" gap={4} alignItems="stretch" padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Credit Card Integration
+          </Typography>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Preauthorization Request:
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`POST /api/strapi-plugin-payone-provider/preauthorization
+
+{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "ORD-00123-ABCD",
+  "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"
+}`}</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Response (Success):
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`{
+  "status": "APPROVED",
+  "txid": "12345678",
+  "reference": "ORD-00123-ABCD",
+  "amount": 1000,
+  "currency": "EUR"
+}`}</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Response (3D Secure Redirect):
+            </Typography>
+            <div style={{ marginTop: "12px", marginBottom: "12px" }}>
+              <CodeBlock>{`{
+  "status": "REDIRECT",
+  "redirecturl": "https://secure.pay1.de/3ds/...",
+  "requires3DSRedirect": true
+}`}</CodeBlock>
+            </div>
+            <Typography variant="pi" textColor="neutral600">
+              ⚠️ When 3D Secure is enabled, you must redirect the user to the{" "}
+              <code>redirecturl</code> for authentication.
+            </Typography>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Credit Card Documentation:</strong>
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Credit+Card"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Credit+Card
+              </Link>
+            </Typography>
+          </Box>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default CreditCardSection;