strapi-plugin-payone-provider 4.6.10 → 4.6.11

package/admin/src/pages/App/components/DocsPanel.jsx

@@ -1,1726 +1,1726 @@
-import React, { useEffect, useState } from "react";
-import {
-  Box,
-  Card,
-  CardBody,
-  Flex,
-  Typography,
-  Stack,
-  Accordion,
-  AccordionToggle,
-  AccordionContent,
-} from "@strapi/design-system";
-
-const CodeBlock = ({ children }) => {
-  const [isDark, setIsDark] = useState(false);
-
-  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>
-  );
-};
-
-const DocsPanel = () => {
-  const [expandedAccordions, setExpandedAccordions] = useState({
-    toc: false,
-    creditCard: false,
-    paypal: false,
-    googlePay: false,
-    applePay: false,
-    threeDSecure: false,
-    captureRefund: false,
-    testCredentials: false,
-  });
-
-  const toggleAccordion = (key) => {
-    setExpandedAccordions((prev) => ({
-      ...prev,
-      [key]: !prev[key],
-    }));
-  };
-
-  return (
-    <Box
-      className="payment-container"
-      paddingTop={8}
-      paddingBottom={8}
-      paddingLeft={8}
-      paddingRight={8}
-    >
-      <Flex direction="column" alignItems="stretch" gap={6}>
-        <Box>
-          <Typography
-            variant="beta"
-            as="h2"
-            fontWeight="bold"
-            className="payment-title"
-            style={{ fontSize: "24px", marginBottom: "12px" }}
-          >
-            Payone Provider Plugin - Frontend Integration Guide
-          </Typography>
-          <Typography
-            variant="pi"
-            textColor="neutral600"
-            marginTop={2}
-            className="payment-subtitle"
-            style={{ fontSize: "16px" }}
-          >
-            Complete documentation for integrating Payone payment methods in
-            your frontend application
-          </Typography>
-        </Box>
-
-        <Accordion
-          expanded={expandedAccordions.toc}
-          onToggle={() => toggleAccordion("toc")}
-        >
-          <AccordionToggle title="Table of Contents" />
-          <AccordionContent>
-            <Stack spacing={2} padding={4}>
-              <Typography variant="pi">
-                1. <a href="#base-url">Base URL & Authentication</a>
-              </Typography>
-              <Typography variant="pi">
-                2. <a href="#payment-methods">Supported Payment Methods</a>
-              </Typography>
-              <Typography variant="pi">
-                3. <a href="#credit-card">Credit Card Integration</a>
-              </Typography>
-              <Typography variant="pi">
-                4. <a href="#paypal">PayPal Integration</a>
-              </Typography>
-              <Typography variant="pi">
-                5. <a href="#google-pay">Google Pay Integration</a>
-              </Typography>
-              <Typography variant="pi">
-                6. <a href="#apple-pay">Apple Pay Integration</a>
-              </Typography>
-              <Typography variant="pi">
-                7. <a href="#3d-secure">3D Secure Authentication</a>
-              </Typography>
-              <Typography variant="pi">
-                8. <a href="#capture-refund">Capture & Refund Operations</a>
-              </Typography>
-              <Typography variant="pi">
-                9. <a href="#test-credentials">Test Credentials</a>
-              </Typography>
-            </Stack>
-          </AccordionContent>
-        </Accordion>
-
-        <Card className="payment-card" id="base-url">
-          <CardBody padding={6}>
-            <Stack spacing={4}>
-              <Typography
-                variant="delta"
-                as="h3"
-                fontWeight="bold"
-                style={{ marginBottom: "12px" }}
-              >
-                Base URL & Authentication
-              </Typography>
-              <Box>
-                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
-                  Content API (Frontend):
-                </Typography>
-                <CodeBlock>/api/strapi-plugin-payone-provider</CodeBlock>
-              </Box>
-              <Box>
-                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
-                  Required Headers:
-                </Typography>
-                <CodeBlock>{`{
-  "Content-Type": "application/json",
-  "Authorization": "Bearer YOUR_AUTH_TOKEN"
-}`}</CodeBlock>
-                <Typography variant="pi" textColor="neutral600" marginTop={6}>
-                  <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>
-              </Box>
-            </Stack>
-          </CardBody>
-        </Card>
-
-        <Card className="payment-card" id="payment-methods">
-          <CardBody padding={6}>
-            <Stack spacing={4}>
-              <Typography
-                variant="delta"
-                as="h3"
-                fontWeight="bold"
-                style={{ marginBottom: "12px" }}
-              >
-                Supported Payment Methods
-              </Typography>
-              <Box>
-                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
-                  Available Payment Methods:
-                </Typography>
-                <Stack spacing={2}>
-                  <Typography variant="pi">
-                    • <strong>cc</strong> - Credit Card (Visa, Mastercard, Amex)
-                  </Typography>
-                  <Typography variant="pi">
-                    • <strong>wlt</strong> - PayPal
-                  </Typography>
-                  <Typography variant="pi">
-                    • <strong>gpp</strong> - Google Pay
-                  </Typography>
-                  <Typography variant="pi">
-                    • <strong>apl</strong> - Apple Pay
-                  </Typography>
-                  <Typography variant="pi">
-                    • <strong>sb</strong> - Sofort Banking
-                  </Typography>
-                  <Typography variant="pi">
-                    • <strong>elv</strong> - SEPA Direct Debit
-                  </Typography>
-                </Stack>
-              </Box>
-              <Box>
-                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
-                  Available Card Types (for Credit Card):
-                </Typography>
-                <Stack spacing={2}>
-                  <Typography variant="pi">
-                    • <strong>V</strong> - Visa
-                  </Typography>
-                  <Typography variant="pi">
-                    • <strong>M</strong> - Mastercard
-                  </Typography>
-                  <Typography variant="pi">
-                    • <strong>A</strong> - American Express (Amex)
-                  </Typography>
-                </Stack>
-              </Box>
-            </Stack>
-          </CardBody>
-        </Card>
-
-        <Accordion
-          id="credit-card"
-          expanded={expandedAccordions.creditCard}
-          onToggle={() => toggleAccordion("creditCard")}
-        >
-          <AccordionToggle title="Credit Card Integration" />
-          <AccordionContent>
-            <Card className="payment-card">
-              <CardBody padding={6}>
-                <Stack spacing={4}>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    style={{ marginBottom: "12px" }}
-                  >
-                    Credit Card Integration
-                  </Typography>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Preauthorization Request:
-                    </Typography>
-                    <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>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Response (Success):
-                    </Typography>
-                    <CodeBlock>{`{
-  "status": "APPROVED",
-  "txid": "12345678",
-  "reference": "ORD-00123-ABCD",
-  "amount": 1000,
-  "currency": "EUR"
-}`}</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Response (3D Secure Redirect):
-                    </Typography>
-                    <CodeBlock>{`{
-  "status": "REDIRECT",
-  "redirecturl": "https://secure.pay1.de/3ds/...",
-  "requires3DSRedirect": true
-}`}</CodeBlock>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      ⚠️ When 3D Secure is enabled, you must redirect the user
-                      to the <code>redirecturl</code> for authentication.
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Credit Card Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Credit+Card"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Credit+Card
-                      </a>
-                    </Typography>
-                  </Box>
-                </Stack>
-              </CardBody>
-            </Card>
-          </AccordionContent>
-        </Accordion>
-
-        <Accordion
-          id="paypal"
-          expanded={expandedAccordions.paypal}
-          onToggle={() => toggleAccordion("paypal")}
-        >
-          <AccordionToggle title="PayPal Integration" />
-          <AccordionContent>
-            <Card className="payment-card">
-              <CardBody padding={6}>
-                <Stack spacing={4}>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    style={{ marginBottom: "12px" }}
-                  >
-                    PayPal Integration
-                  </Typography>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Required Parameters:
-                    </Typography>
-                    <Stack spacing={2}>
-                      <Typography variant="pi">
-                        • <strong>clearingtype</strong>: "wlt"
-                      </Typography>
-                      <Typography variant="pi">
-                        • <strong>wallettype</strong>: "PPE" (PayPal Express)
-                      </Typography>
-                      <Typography variant="pi">
-                        • <strong>shipping_firstname</strong>,{" "}
-                        <strong>shipping_lastname</strong>,{" "}
-                        <strong>shipping_street</strong>,{" "}
-                        <strong>shipping_zip</strong>,{" "}
-                        <strong>shipping_city</strong>,{" "}
-                        <strong>shipping_country</strong> - Shipping address
-                      </Typography>
-                    </Stack>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Preauthorization Request:
-                    </Typography>
-                    <CodeBlock>{`POST /api/strapi-plugin-payone-provider/preauthorization
-
-{
-  "amount": 1000,
-  "currency": "EUR",
-  "reference": "ORD-00123-ABCD",
-  "clearingtype": "wlt",
-  "wallettype": "PPE",
-  "firstname": "John",
-  "lastname": "Doe",
-  "email": "john.doe@example.com",
-  "street": "Main Street 123",
-  "zip": "12345",
-  "city": "Berlin",
-  "country": "DE",
-  "shipping_firstname": "John",
-  "shipping_lastname": "Doe",
-  "shipping_street": "Main Street 123",
-  "shipping_zip": "12345",
-  "shipping_city": "Berlin",
-  "shipping_country": "DE",
-  "successurl": "https://www.example.com/success",
-  "errorurl": "https://www.example.com/error",
-  "backurl": "https://www.example.com/back"
-}`}</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Response (Redirect to PayPal):
-                    </Typography>
-                    <CodeBlock>{`{
-  "status": "REDIRECT",
-  "redirecturl": "https://www.paypal.com/checkoutnow?token=..."
-}`}</CodeBlock>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      ⚠️ PayPal always redirects. You must redirect the user to{" "}
-                      <code>redirecturl</code> to complete the payment.
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      PayPal Callback Response (after redirect):
-                    </Typography>
-                    <CodeBlock>{`{
-  "status": "APPROVED",
-  "txid": "12345678",
-  "reference": "ORD-00123-ABCD"
-}`}</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone PayPal Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/PayPal"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/PayPal
-                      </a>
-                    </Typography>
-                  </Box>
-                </Stack>
-              </CardBody>
-            </Card>
-          </AccordionContent>
-        </Accordion>
-
-        <Accordion
-          id="google-pay"
-          expanded={expandedAccordions.googlePay}
-          onToggle={() => toggleAccordion("googlePay")}
-        >
-          <AccordionToggle title="Google Pay Integration" />
-          <AccordionContent>
-            <Card className="payment-card">
-              <CardBody padding={6}>
-                <Stack spacing={4}>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    style={{ marginBottom: "12px" }}
-                  >
-                    Google Pay Integration
-                  </Typography>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Step 1: Configure Strapi Middleware
-                    </Typography>
-                    <Typography variant="pi" marginBottom={2}>
-                      Add Google Pay SDK to your{" "}
-                      <code>config/middlewares.js</code>:
-                    </Typography>
-                    <CodeBlock>{`module.exports = [
-  'strapi::logger',
-  'strapi::errors',
-  {
-    name: 'strapi::security',
-    config: {
-      contentSecurityPolicy: {
-        useDefaults: true,
-        directives: {
-          'script-src': [
-            "'self'",
-            "'unsafe-inline'",
-            "'unsafe-eval'",
-            'https://pay.google.com',
-          ],
-          'connect-src': [
-            "'self'",
-            'https:',
-            'https://pay.google.com',
-          ],
-          'frame-src': [
-            "'self'",
-            'https://pay.google.com',
-          ],
-        },
-      },
-    },
-  },
-  // ... other middlewares
-];`}</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Step 2: Install Google Pay Button Library (Optional)
-                    </Typography>
-                    <CodeBlock>npm install @google-pay/button-react</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Step 3: Implement Google Pay Button (Using NPM Library)
-                    </Typography>
-                    <CodeBlock>{`import { GooglePayButton } from '@google-pay/button-react';
-
-function PaymentForm() {
-  const handleGooglePay = async (paymentData) => {
-    const token = paymentData.paymentMethodData.tokenizationData.token;
-    
-    // Send token to your 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: 'GGP',
-        'add_paydata[paymentmethod_token_data]': token,
-        'add_paydata[paymentmethod]': 'GGP',
-        'add_paydata[paymentmethod_type]': 'GOOGLEPAY',
-        'add_paydata[gatewayid]': 'payonegmbh',
-        firstname: 'John',
-        lastname: 'Doe',
-        email: 'john.doe@example.com',
-        street: 'Main Street 123',
-        zip: '12345',
-        city: 'Berlin',
-        country: 'DE',
-        shipping_firstname: 'John',
-        shipping_lastname: 'Doe',
-        shipping_street: 'Main Street 123',
-        shipping_zip: '12345',
-        shipping_city: 'Berlin',
-        shipping_country: 'DE'
-      })
-    });
-    
-    const result = await response.json();
-  };
-
-  return (
-    <GooglePayButton
-      environment="TEST"
-      paymentRequest={{
-        apiVersion: 2,
-        apiVersionMinor: 0,
-        allowedPaymentMethods: [{
-          type: 'CARD',
-          parameters: {
-            allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
-            allowedCardNetworks: ['MASTERCARD', 'VISA']
-          },
-          tokenizationSpecification: {
-            type: 'PAYMENT_GATEWAY',
-            parameters: {
-              gateway: 'payonegmbh',
-              gatewayMerchantId: 'YOUR_MERCHANT_ID'
-            }
-          }
-        }],
-        merchantInfo: {
-          merchantId: 'YOUR_MERCHANT_ID',
-          merchantName: 'Your Store Name'
-        },
-        transactionInfo: {
-          totalPriceStatus: 'FINAL',
-          totalPriceLabel: 'Total',
-          totalPrice: '10.00',
-          currencyCode: 'EUR',
-          countryCode: 'DE'
-        }
-      }}
-      onLoadPaymentData={handleGooglePay}
-    />
-  );
-}`}</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Step 4: Manual Implementation
-                    </Typography>
-                    <CodeBlock>{`// Load Google Pay SDK
-<script src="https://pay.google.com/gp/p/js/pay.js"></script>
-
-// Initialize Google Pay
-const paymentsClient = new google.payments.api.PaymentsClient({
-  environment: 'TEST' // or 'PRODUCTION'
-});
-
-// Create payment request
-const paymentRequest = {
-  apiVersion: 2,
-  apiVersionMinor: 0,
-  allowedPaymentMethods: [{
-    type: 'CARD',
-    parameters: {
-      allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
-      allowedCardNetworks: ['MASTERCARD', 'VISA']
-    },
-    tokenizationSpecification: {
-      type: 'PAYMENT_GATEWAY',
-      parameters: {
-        gateway: 'payonegmbh',
-        gatewayMerchantId: 'YOUR_MERCHANT_ID'
-      }
-    }
-  }],
-  merchantInfo: {
-    merchantId: 'YOUR_MERCHANT_ID',
-    merchantName: 'Your Store Name'
-  },
-  transactionInfo: {
-    totalPriceStatus: 'FINAL',
-    totalPrice: '10.00',
-    currencyCode: 'EUR',
-    countryCode: 'DE'
-  }
-};
-
-// Check if Google Pay is available
-paymentsClient.isReadyToPay(paymentRequest).then((response) => {
-  if (response.result) {
-    // Show Google Pay button
-    paymentsClient.loadPaymentData(paymentRequest).then((paymentData) => {
-      const token = paymentData.paymentMethodData.tokenizationData.token;
-      // Send token to backend
-      sendTokenToBackend(token);
-    });
-  }
-});`}</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Token Parameters (Backend Request):
-                    </Typography>
-                    <CodeBlock>{`{
-  "amount": 1000,
-  "currency": "EUR",
-  "reference": "ORD-00123-ABCD",
-  "clearingtype": "wlt",
-  "wallettype": "GGP",
-  "add_paydata[paymentmethod_token_data]": "TOKEN_FROM_GOOGLE_PAY",
-  "add_paydata[paymentmethod]": "GGP",
-  "add_paydata[paymentmethod_type]": "GOOGLEPAY",
-  "add_paydata[gatewayid]": "payonegmbh",
-  "add_paydata[gateway_merchantid]": "YOUR_MERCHANT_ID",
-  // ... customer and shipping info
-}`}</CodeBlock>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Google Pay Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Google+Pay
-                      </a>
-                    </Typography>
-                  </Box>
-                </Stack>
-              </CardBody>
-            </Card>
-          </AccordionContent>
-        </Accordion>
-
-        <Accordion
-          id="apple-pay"
-          expanded={expandedAccordions.applePay}
-          onToggle={() => toggleAccordion("applePay")}
-        >
-          <AccordionToggle title="Apple Pay Integration" />
-          <AccordionContent>
-            <Card className="payment-card">
-              <CardBody padding={6}>
-                <Stack spacing={4}>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    style={{ marginBottom: "12px" }}
-                  >
-                    Apple Pay Integration
-                  </Typography>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      textColor="danger600"
-                      style={{ marginBottom: "12px", marginRight: "6px" }}
-                    >
-                      ⚠️ 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>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Step 1: Configure Strapi Middleware
-                    </Typography>
-                    <Typography variant="pi" marginBottom={2}>
-                      Add Apple Pay SDK to your{" "}
-                      <code>config/middlewares.js</code>:
-                    </Typography>
-                    <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>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Step 2: Setup .well-known File
-                    </Typography>
-                    <Typography variant="pi" marginBottom={2}>
-                      Download the Apple Pay domain verification file from
-                      Payone documentation:{" "}
-                      <a
-                        href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        style={{
-                          color: "#0066ff",
-                          textDecoration: "underline",
-                        }}
-                      >
-                        https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
-                      </a>{" "}
-                      or from your Payone merchant portal and place it:
-                    </Typography>
-                    <Stack spacing={2} marginBottom={2}>
-                      <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>
-                    </Stack>
-                    <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"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Step 3: Implement Apple Pay Button
-                    </Typography>
-                    <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>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Token Parameters (Backend Request):
-                    </Typography>
-                    <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>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Apple Pay Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Apple+Pay
-                      </a>
-                    </Typography>
-                  </Box>
-                </Stack>
-              </CardBody>
-            </Card>
-          </AccordionContent>
-        </Accordion>
-
-        <Accordion
-          id="3d-secure"
-          expanded={expandedAccordions.threeDSecure}
-          onToggle={() => toggleAccordion("threeDSecure")}
-        >
-          <AccordionToggle title="3D Secure Authentication" />
-          <AccordionContent>
-            <Card className="payment-card">
-              <CardBody padding={6}>
-                <Stack spacing={4}>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    style={{ marginBottom: "12px" }}
-                  >
-                    3D Secure Authentication
-                  </Typography>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      How 3D Secure Works:
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Special 3D Secure Test Cards (from Payone Documentation):
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/3D+Secure
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Standard Credit Card Test Cards (without 3DS):
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Test Cards Documentation:</strong>{" "}
-                      <a
-                        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
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Example Flow:
-                    </Typography>
-                    <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>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/3D+Secure
-                      </a>
-                    </Typography>
-                  </Box>
-                </Stack>
-              </CardBody>
-            </Card>
-          </AccordionContent>
-        </Accordion>
-
-        <Accordion
-          id="capture-refund"
-          expanded={expandedAccordions.captureRefund}
-          onToggle={() => toggleAccordion("captureRefund")}
-        >
-          <AccordionToggle title="Capture & Refund Operations" />
-          <AccordionContent>
-            <Card className="payment-card">
-              <CardBody padding={6}>
-                <Stack spacing={4}>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    style={{ marginBottom: "12px" }}
-                  >
-                    Capture & Refund Operations
-                  </Typography>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Capture (Complete Preauthorized Transaction):
-                    </Typography>
-                    <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>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      <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"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Refund (Return Funds):
-                    </Typography>
-                    <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>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      <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"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Sequence Numbers:
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Capture Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Capture"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Capture
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Refund Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Refund"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Refund
-                      </a>
-                    </Typography>
-                  </Box>
-                </Stack>
-              </CardBody>
-            </Card>
-          </AccordionContent>
-        </Accordion>
-
-        <Accordion
-          id="test-credentials"
-          expanded={expandedAccordions.testCredentials}
-          onToggle={() => toggleAccordion("testCredentials")}
-        >
-          <AccordionToggle title="Test Credentials" />
-          <AccordionContent>
-            <Card className="payment-card">
-              <CardBody padding={6}>
-                <Stack spacing={4}>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    style={{ marginBottom: "12px" }}
-                  >
-                    Test Credentials
-                  </Typography>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Credit Card Test Cards (Standard):
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Documentation:</strong>{" "}
-                      <a
-                        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
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      3D Secure Test Cards (Special Test Data):
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/3D+Secure
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      PayPal Test Data:
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone PayPal Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/PayPal"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/PayPal
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Google Pay Test Data:
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Google Pay Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Google+Pay
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Apple Pay Test Data:
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Apple Pay Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Apple+Pay
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      Sofort Banking Test Data:
-                    </Typography>
-                    <Stack spacing={2}>
-                      <Typography variant="pi">
-                        • Use Sofort test environment
-                      </Typography>
-                      <Typography variant="pi">
-                        • Test credentials provided by Payone
-                      </Typography>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone Sofort Documentation:</strong>{" "}
-                      <a
-                        href="https://docs.payone.com/display/public/PLATFORM/Sofort"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        https://docs.payone.com/display/public/PLATFORM/Sofort
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      SEPA Direct Debit Test Data:
-                    </Typography>
-                    <Stack spacing={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>
-                    </Stack>
-                    <Typography
-                      variant="pi"
-                      textColor="neutral600"
-                      marginTop={2}
-                    >
-                      📚 <strong>Payone SEPA Documentation:</strong>{" "}
-                      <a
-                        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
-                      </a>
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography
-                      variant="pi"
-                      fontWeight="bold"
-                      marginBottom={2}
-                      style={{ marginBottom: "12px" }}
-                    >
-                      General Test Data Resources:
-                    </Typography>
-                    <Stack spacing={2}>
-                      <Typography variant="pi">
-                        📚 <strong>Payone Test Data Overview:</strong>{" "}
-                        <a
-                          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
-                        </a>
-                      </Typography>
-                      <Typography variant="pi">
-                        📚 <strong>Payone Test Cards:</strong>{" "}
-                        <a
-                          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
-                        </a>
-                      </Typography>
-                      <Typography variant="pi">
-                        📚 <strong>Payone Test Environment:</strong>{" "}
-                        <a
-                          href="https://docs.payone.com/display/public/PLATFORM/Test+Environment"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          https://docs.payone.com/display/public/PLATFORM/Test+Environment
-                        </a>
-                      </Typography>
-                    </Stack>
-                  </Box>
-                </Stack>
-              </CardBody>
-            </Card>
-          </AccordionContent>
-        </Accordion>
-
-        <Box paddingTop={4}>
-          <Typography variant="sigma" textColor="neutral600">
-            For more information, visit the Payone documentation or contact your
-            Payone account manager.
-          </Typography>
-        </Box>
-      </Flex>
-    </Box>
-  );
-};
-
-export default DocsPanel;
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  Typography,
+  Stack,
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+} from "@strapi/design-system";
+
+const CodeBlock = ({ children }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  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>
+  );
+};
+
+const DocsPanel = () => {
+  const [expandedAccordions, setExpandedAccordions] = useState({
+    toc: false,
+    creditCard: false,
+    paypal: false,
+    googlePay: false,
+    applePay: false,
+    threeDSecure: false,
+    captureRefund: false,
+    testCredentials: false,
+  });
+
+  const toggleAccordion = (key) => {
+    setExpandedAccordions((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  return (
+    <Box
+      className="payment-container"
+      paddingTop={8}
+      paddingBottom={8}
+      paddingLeft={8}
+      paddingRight={8}
+    >
+      <Flex direction="column" alignItems="stretch" gap={6}>
+        <Box>
+          <Typography
+            variant="beta"
+            as="h2"
+            fontWeight="bold"
+            className="payment-title"
+            style={{ fontSize: "24px", marginBottom: "12px" }}
+          >
+            Payone Provider Plugin - Frontend Integration Guide
+          </Typography>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            marginTop={2}
+            className="payment-subtitle"
+            style={{ fontSize: "16px" }}
+          >
+            Complete documentation for integrating Payone payment methods in
+            your frontend application
+          </Typography>
+        </Box>
+
+        <Accordion
+          expanded={expandedAccordions.toc}
+          onToggle={() => toggleAccordion("toc")}
+        >
+          <AccordionToggle title="Table of Contents" />
+          <AccordionContent>
+            <Stack spacing={2} padding={4}>
+              <Typography variant="pi">
+                1. <a href="#base-url">Base URL & Authentication</a>
+              </Typography>
+              <Typography variant="pi">
+                2. <a href="#payment-methods">Supported Payment Methods</a>
+              </Typography>
+              <Typography variant="pi">
+                3. <a href="#credit-card">Credit Card Integration</a>
+              </Typography>
+              <Typography variant="pi">
+                4. <a href="#paypal">PayPal Integration</a>
+              </Typography>
+              <Typography variant="pi">
+                5. <a href="#google-pay">Google Pay Integration</a>
+              </Typography>
+              <Typography variant="pi">
+                6. <a href="#apple-pay">Apple Pay Integration</a>
+              </Typography>
+              <Typography variant="pi">
+                7. <a href="#3d-secure">3D Secure Authentication</a>
+              </Typography>
+              <Typography variant="pi">
+                8. <a href="#capture-refund">Capture & Refund Operations</a>
+              </Typography>
+              <Typography variant="pi">
+                9. <a href="#test-credentials">Test Credentials</a>
+              </Typography>
+            </Stack>
+          </AccordionContent>
+        </Accordion>
+
+        <Card className="payment-card" id="base-url">
+          <CardBody padding={6}>
+            <Stack spacing={4}>
+              <Typography
+                variant="delta"
+                as="h3"
+                fontWeight="bold"
+                style={{ marginBottom: "12px" }}
+              >
+                Base URL & Authentication
+              </Typography>
+              <Box>
+                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
+                  Content API (Frontend):
+                </Typography>
+                <CodeBlock>/api/strapi-plugin-payone-provider</CodeBlock>
+              </Box>
+              <Box>
+                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
+                  Required Headers:
+                </Typography>
+                <CodeBlock>{`{
+  "Content-Type": "application/json",
+  "Authorization": "Bearer YOUR_AUTH_TOKEN"
+}`}</CodeBlock>
+                <Typography variant="pi" textColor="neutral600" marginTop={6}>
+                  <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>
+              </Box>
+            </Stack>
+          </CardBody>
+        </Card>
+
+        <Card className="payment-card" id="payment-methods">
+          <CardBody padding={6}>
+            <Stack spacing={4}>
+              <Typography
+                variant="delta"
+                as="h3"
+                fontWeight="bold"
+                style={{ marginBottom: "12px" }}
+              >
+                Supported Payment Methods
+              </Typography>
+              <Box>
+                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
+                  Available Payment Methods:
+                </Typography>
+                <Stack spacing={2}>
+                  <Typography variant="pi">
+                    • <strong>cc</strong> - Credit Card (Visa, Mastercard, Amex)
+                  </Typography>
+                  <Typography variant="pi">
+                    • <strong>wlt</strong> - PayPal
+                  </Typography>
+                  <Typography variant="pi">
+                    • <strong>gpp</strong> - Google Pay
+                  </Typography>
+                  <Typography variant="pi">
+                    • <strong>apl</strong> - Apple Pay
+                  </Typography>
+                  <Typography variant="pi">
+                    • <strong>sb</strong> - Sofort Banking
+                  </Typography>
+                  <Typography variant="pi">
+                    • <strong>elv</strong> - SEPA Direct Debit
+                  </Typography>
+                </Stack>
+              </Box>
+              <Box>
+                <Typography variant="pi" fontWeight="bold" marginBottom={2}>
+                  Available Card Types (for Credit Card):
+                </Typography>
+                <Stack spacing={2}>
+                  <Typography variant="pi">
+                    • <strong>V</strong> - Visa
+                  </Typography>
+                  <Typography variant="pi">
+                    • <strong>M</strong> - Mastercard
+                  </Typography>
+                  <Typography variant="pi">
+                    • <strong>A</strong> - American Express (Amex)
+                  </Typography>
+                </Stack>
+              </Box>
+            </Stack>
+          </CardBody>
+        </Card>
+
+        <Accordion
+          id="credit-card"
+          expanded={expandedAccordions.creditCard}
+          onToggle={() => toggleAccordion("creditCard")}
+        >
+          <AccordionToggle title="Credit Card Integration" />
+          <AccordionContent>
+            <Card className="payment-card">
+              <CardBody padding={6}>
+                <Stack spacing={4}>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    style={{ marginBottom: "12px" }}
+                  >
+                    Credit Card Integration
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Preauthorization Request:
+                    </Typography>
+                    <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>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Response (Success):
+                    </Typography>
+                    <CodeBlock>{`{
+  "status": "APPROVED",
+  "txid": "12345678",
+  "reference": "ORD-00123-ABCD",
+  "amount": 1000,
+  "currency": "EUR"
+}`}</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Response (3D Secure Redirect):
+                    </Typography>
+                    <CodeBlock>{`{
+  "status": "REDIRECT",
+  "redirecturl": "https://secure.pay1.de/3ds/...",
+  "requires3DSRedirect": true
+}`}</CodeBlock>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      ⚠️ When 3D Secure is enabled, you must redirect the user
+                      to the <code>redirecturl</code> for authentication.
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Credit Card Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Credit+Card"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Credit+Card
+                      </a>
+                    </Typography>
+                  </Box>
+                </Stack>
+              </CardBody>
+            </Card>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          id="paypal"
+          expanded={expandedAccordions.paypal}
+          onToggle={() => toggleAccordion("paypal")}
+        >
+          <AccordionToggle title="PayPal Integration" />
+          <AccordionContent>
+            <Card className="payment-card">
+              <CardBody padding={6}>
+                <Stack spacing={4}>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    style={{ marginBottom: "12px" }}
+                  >
+                    PayPal Integration
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Required Parameters:
+                    </Typography>
+                    <Stack spacing={2}>
+                      <Typography variant="pi">
+                        • <strong>clearingtype</strong>: "wlt"
+                      </Typography>
+                      <Typography variant="pi">
+                        • <strong>wallettype</strong>: "PPE" (PayPal Express)
+                      </Typography>
+                      <Typography variant="pi">
+                        • <strong>shipping_firstname</strong>,{" "}
+                        <strong>shipping_lastname</strong>,{" "}
+                        <strong>shipping_street</strong>,{" "}
+                        <strong>shipping_zip</strong>,{" "}
+                        <strong>shipping_city</strong>,{" "}
+                        <strong>shipping_country</strong> - Shipping address
+                      </Typography>
+                    </Stack>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Preauthorization Request:
+                    </Typography>
+                    <CodeBlock>{`POST /api/strapi-plugin-payone-provider/preauthorization
+
+{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "ORD-00123-ABCD",
+  "clearingtype": "wlt",
+  "wallettype": "PPE",
+  "firstname": "John",
+  "lastname": "Doe",
+  "email": "john.doe@example.com",
+  "street": "Main Street 123",
+  "zip": "12345",
+  "city": "Berlin",
+  "country": "DE",
+  "shipping_firstname": "John",
+  "shipping_lastname": "Doe",
+  "shipping_street": "Main Street 123",
+  "shipping_zip": "12345",
+  "shipping_city": "Berlin",
+  "shipping_country": "DE",
+  "successurl": "https://www.example.com/success",
+  "errorurl": "https://www.example.com/error",
+  "backurl": "https://www.example.com/back"
+}`}</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Response (Redirect to PayPal):
+                    </Typography>
+                    <CodeBlock>{`{
+  "status": "REDIRECT",
+  "redirecturl": "https://www.paypal.com/checkoutnow?token=..."
+}`}</CodeBlock>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      ⚠️ PayPal always redirects. You must redirect the user to{" "}
+                      <code>redirecturl</code> to complete the payment.
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      PayPal Callback Response (after redirect):
+                    </Typography>
+                    <CodeBlock>{`{
+  "status": "APPROVED",
+  "txid": "12345678",
+  "reference": "ORD-00123-ABCD"
+}`}</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone PayPal Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/PayPal"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/PayPal
+                      </a>
+                    </Typography>
+                  </Box>
+                </Stack>
+              </CardBody>
+            </Card>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          id="google-pay"
+          expanded={expandedAccordions.googlePay}
+          onToggle={() => toggleAccordion("googlePay")}
+        >
+          <AccordionToggle title="Google Pay Integration" />
+          <AccordionContent>
+            <Card className="payment-card">
+              <CardBody padding={6}>
+                <Stack spacing={4}>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    style={{ marginBottom: "12px" }}
+                  >
+                    Google Pay Integration
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Step 1: Configure Strapi Middleware
+                    </Typography>
+                    <Typography variant="pi" marginBottom={2}>
+                      Add Google Pay SDK to your{" "}
+                      <code>config/middlewares.js</code>:
+                    </Typography>
+                    <CodeBlock>{`module.exports = [
+  'strapi::logger',
+  'strapi::errors',
+  {
+    name: 'strapi::security',
+    config: {
+      contentSecurityPolicy: {
+        useDefaults: true,
+        directives: {
+          'script-src': [
+            "'self'",
+            "'unsafe-inline'",
+            "'unsafe-eval'",
+            'https://pay.google.com',
+          ],
+          'connect-src': [
+            "'self'",
+            'https:',
+            'https://pay.google.com',
+          ],
+          'frame-src': [
+            "'self'",
+            'https://pay.google.com',
+          ],
+        },
+      },
+    },
+  },
+  // ... other middlewares
+];`}</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Step 2: Install Google Pay Button Library (Optional)
+                    </Typography>
+                    <CodeBlock>npm install @google-pay/button-react</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Step 3: Implement Google Pay Button (Using NPM Library)
+                    </Typography>
+                    <CodeBlock>{`import { GooglePayButton } from '@google-pay/button-react';
+
+function PaymentForm() {
+  const handleGooglePay = async (paymentData) => {
+    const token = paymentData.paymentMethodData.tokenizationData.token;
+    
+    // Send token to your 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: 'GGP',
+        'add_paydata[paymentmethod_token_data]': token,
+        'add_paydata[paymentmethod]': 'GGP',
+        'add_paydata[paymentmethod_type]': 'GOOGLEPAY',
+        'add_paydata[gatewayid]': 'payonegmbh',
+        firstname: 'John',
+        lastname: 'Doe',
+        email: 'john.doe@example.com',
+        street: 'Main Street 123',
+        zip: '12345',
+        city: 'Berlin',
+        country: 'DE',
+        shipping_firstname: 'John',
+        shipping_lastname: 'Doe',
+        shipping_street: 'Main Street 123',
+        shipping_zip: '12345',
+        shipping_city: 'Berlin',
+        shipping_country: 'DE'
+      })
+    });
+    
+    const result = await response.json();
+  };
+
+  return (
+    <GooglePayButton
+      environment="TEST"
+      paymentRequest={{
+        apiVersion: 2,
+        apiVersionMinor: 0,
+        allowedPaymentMethods: [{
+          type: 'CARD',
+          parameters: {
+            allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+            allowedCardNetworks: ['MASTERCARD', 'VISA']
+          },
+          tokenizationSpecification: {
+            type: 'PAYMENT_GATEWAY',
+            parameters: {
+              gateway: 'payonegmbh',
+              gatewayMerchantId: 'YOUR_MERCHANT_ID'
+            }
+          }
+        }],
+        merchantInfo: {
+          merchantId: 'YOUR_MERCHANT_ID',
+          merchantName: 'Your Store Name'
+        },
+        transactionInfo: {
+          totalPriceStatus: 'FINAL',
+          totalPriceLabel: 'Total',
+          totalPrice: '10.00',
+          currencyCode: 'EUR',
+          countryCode: 'DE'
+        }
+      }}
+      onLoadPaymentData={handleGooglePay}
+    />
+  );
+}`}</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Step 4: Manual Implementation
+                    </Typography>
+                    <CodeBlock>{`// Load Google Pay SDK
+<script src="https://pay.google.com/gp/p/js/pay.js"></script>
+
+// Initialize Google Pay
+const paymentsClient = new google.payments.api.PaymentsClient({
+  environment: 'TEST' // or 'PRODUCTION'
+});
+
+// Create payment request
+const paymentRequest = {
+  apiVersion: 2,
+  apiVersionMinor: 0,
+  allowedPaymentMethods: [{
+    type: 'CARD',
+    parameters: {
+      allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+      allowedCardNetworks: ['MASTERCARD', 'VISA']
+    },
+    tokenizationSpecification: {
+      type: 'PAYMENT_GATEWAY',
+      parameters: {
+        gateway: 'payonegmbh',
+        gatewayMerchantId: 'YOUR_MERCHANT_ID'
+      }
+    }
+  }],
+  merchantInfo: {
+    merchantId: 'YOUR_MERCHANT_ID',
+    merchantName: 'Your Store Name'
+  },
+  transactionInfo: {
+    totalPriceStatus: 'FINAL',
+    totalPrice: '10.00',
+    currencyCode: 'EUR',
+    countryCode: 'DE'
+  }
+};
+
+// Check if Google Pay is available
+paymentsClient.isReadyToPay(paymentRequest).then((response) => {
+  if (response.result) {
+    // Show Google Pay button
+    paymentsClient.loadPaymentData(paymentRequest).then((paymentData) => {
+      const token = paymentData.paymentMethodData.tokenizationData.token;
+      // Send token to backend
+      sendTokenToBackend(token);
+    });
+  }
+});`}</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Token Parameters (Backend Request):
+                    </Typography>
+                    <CodeBlock>{`{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "ORD-00123-ABCD",
+  "clearingtype": "wlt",
+  "wallettype": "GGP",
+  "add_paydata[paymentmethod_token_data]": "TOKEN_FROM_GOOGLE_PAY",
+  "add_paydata[paymentmethod]": "GGP",
+  "add_paydata[paymentmethod_type]": "GOOGLEPAY",
+  "add_paydata[gatewayid]": "payonegmbh",
+  "add_paydata[gateway_merchantid]": "YOUR_MERCHANT_ID",
+  // ... customer and shipping info
+}`}</CodeBlock>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Google Pay Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Google+Pay
+                      </a>
+                    </Typography>
+                  </Box>
+                </Stack>
+              </CardBody>
+            </Card>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          id="apple-pay"
+          expanded={expandedAccordions.applePay}
+          onToggle={() => toggleAccordion("applePay")}
+        >
+          <AccordionToggle title="Apple Pay Integration" />
+          <AccordionContent>
+            <Card className="payment-card">
+              <CardBody padding={6}>
+                <Stack spacing={4}>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    style={{ marginBottom: "12px" }}
+                  >
+                    Apple Pay Integration
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      textColor="danger600"
+                      style={{ marginBottom: "12px", marginRight: "6px" }}
+                    >
+                      ⚠️ 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>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Step 1: Configure Strapi Middleware
+                    </Typography>
+                    <Typography variant="pi" marginBottom={2}>
+                      Add Apple Pay SDK to your{" "}
+                      <code>config/middlewares.js</code>:
+                    </Typography>
+                    <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>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Step 2: Setup .well-known File
+                    </Typography>
+                    <Typography variant="pi" marginBottom={2}>
+                      Download the Apple Pay domain verification file from
+                      Payone documentation:{" "}
+                      <a
+                        href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                          color: "#0066ff",
+                          textDecoration: "underline",
+                        }}
+                      >
+                        https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+                      </a>{" "}
+                      or from your Payone merchant portal and place it:
+                    </Typography>
+                    <Stack spacing={2} marginBottom={2}>
+                      <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>
+                    </Stack>
+                    <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"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Step 3: Implement Apple Pay Button
+                    </Typography>
+                    <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>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Token Parameters (Backend Request):
+                    </Typography>
+                    <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>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Apple Pay Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Apple+Pay
+                      </a>
+                    </Typography>
+                  </Box>
+                </Stack>
+              </CardBody>
+            </Card>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          id="3d-secure"
+          expanded={expandedAccordions.threeDSecure}
+          onToggle={() => toggleAccordion("threeDSecure")}
+        >
+          <AccordionToggle title="3D Secure Authentication" />
+          <AccordionContent>
+            <Card className="payment-card">
+              <CardBody padding={6}>
+                <Stack spacing={4}>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    style={{ marginBottom: "12px" }}
+                  >
+                    3D Secure Authentication
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      How 3D Secure Works:
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Special 3D Secure Test Cards (from Payone Documentation):
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/3D+Secure
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Standard Credit Card Test Cards (without 3DS):
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Test Cards Documentation:</strong>{" "}
+                      <a
+                        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
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Example Flow:
+                    </Typography>
+                    <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>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/3D+Secure
+                      </a>
+                    </Typography>
+                  </Box>
+                </Stack>
+              </CardBody>
+            </Card>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          id="capture-refund"
+          expanded={expandedAccordions.captureRefund}
+          onToggle={() => toggleAccordion("captureRefund")}
+        >
+          <AccordionToggle title="Capture & Refund Operations" />
+          <AccordionContent>
+            <Card className="payment-card">
+              <CardBody padding={6}>
+                <Stack spacing={4}>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    style={{ marginBottom: "12px" }}
+                  >
+                    Capture & Refund Operations
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Capture (Complete Preauthorized Transaction):
+                    </Typography>
+                    <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>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      <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"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Refund (Return Funds):
+                    </Typography>
+                    <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>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      <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"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Sequence Numbers:
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Capture Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Capture"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Capture
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Refund Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Refund"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Refund
+                      </a>
+                    </Typography>
+                  </Box>
+                </Stack>
+              </CardBody>
+            </Card>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          id="test-credentials"
+          expanded={expandedAccordions.testCredentials}
+          onToggle={() => toggleAccordion("testCredentials")}
+        >
+          <AccordionToggle title="Test Credentials" />
+          <AccordionContent>
+            <Card className="payment-card">
+              <CardBody padding={6}>
+                <Stack spacing={4}>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    style={{ marginBottom: "12px" }}
+                  >
+                    Test Credentials
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Credit Card Test Cards (Standard):
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Documentation:</strong>{" "}
+                      <a
+                        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
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      3D Secure Test Cards (Special Test Data):
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/3D+Secure
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      PayPal Test Data:
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone PayPal Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/PayPal"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/PayPal
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Google Pay Test Data:
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Google Pay Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Google+Pay
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Apple Pay Test Data:
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Apple Pay Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Apple+Pay
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      Sofort Banking Test Data:
+                    </Typography>
+                    <Stack spacing={2}>
+                      <Typography variant="pi">
+                        • Use Sofort test environment
+                      </Typography>
+                      <Typography variant="pi">
+                        • Test credentials provided by Payone
+                      </Typography>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone Sofort Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.payone.com/display/public/PLATFORM/Sofort"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        https://docs.payone.com/display/public/PLATFORM/Sofort
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      SEPA Direct Debit Test Data:
+                    </Typography>
+                    <Stack spacing={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>
+                    </Stack>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      📚 <strong>Payone SEPA Documentation:</strong>{" "}
+                      <a
+                        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
+                      </a>
+                    </Typography>
+                  </Box>
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      marginBottom={2}
+                      style={{ marginBottom: "12px" }}
+                    >
+                      General Test Data Resources:
+                    </Typography>
+                    <Stack spacing={2}>
+                      <Typography variant="pi">
+                        📚 <strong>Payone Test Data Overview:</strong>{" "}
+                        <a
+                          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
+                        </a>
+                      </Typography>
+                      <Typography variant="pi">
+                        📚 <strong>Payone Test Cards:</strong>{" "}
+                        <a
+                          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
+                        </a>
+                      </Typography>
+                      <Typography variant="pi">
+                        📚 <strong>Payone Test Environment:</strong>{" "}
+                        <a
+                          href="https://docs.payone.com/display/public/PLATFORM/Test+Environment"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          https://docs.payone.com/display/public/PLATFORM/Test+Environment
+                        </a>
+                      </Typography>
+                    </Stack>
+                  </Box>
+                </Stack>
+              </CardBody>
+            </Card>
+          </AccordionContent>
+        </Accordion>
+
+        <Box paddingTop={4}>
+          <Typography variant="sigma" textColor="neutral600">
+            For more information, visit the Payone documentation or contact your
+            Payone account manager.
+          </Typography>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default DocsPanel;