strapi-plugin-payone-provider 1.6.7 → 5.6.9

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

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Accordion, Box, Flex, Link, Typography } from "@strapi/design-system";
+import CodeBlock from "./CodeBlock";
+
+const CreditCardSection = () => {
+  return (
+    <Accordion.Item value="credit-card" id="credit-card">
+      <Accordion.Header>
+        <Accordion.Trigger>Credit Card Integration</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" gap={4} alignItems="stretch" padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Credit Card Integration
+          </Typography>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Preauthorization Request:
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`POST /api/strapi-plugin-payone-provider/preauthorization
+
+{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "ORD-00123-ABCD",
+  "clearingtype": "cc",
+  "cardtype": "V",
+  "cardpan": "4111111111111111",
+  "cardexpiredate": "2512",
+  "cardcvc2": "123",
+  "firstname": "John",
+  "lastname": "Doe",
+  "email": "john.doe@example.com",
+  "street": "Main Street 123",
+  "zip": "12345",
+  "city": "Berlin",
+  "country": "DE",
+  "successurl": "https://www.example.com/success",
+  "errorurl": "https://www.example.com/error",
+  "backurl": "https://www.example.com/back"
+}`}</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Response (Success):
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`{
+  "status": "APPROVED",
+  "txid": "12345678",
+  "reference": "ORD-00123-ABCD",
+  "amount": 1000,
+  "currency": "EUR"
+}`}</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Response (3D Secure Redirect):
+            </Typography>
+            <div style={{ marginTop: "12px", marginBottom: "12px" }}>
+              <CodeBlock>{`{
+  "status": "REDIRECT",
+  "redirecturl": "https://secure.pay1.de/3ds/...",
+  "requires3DSRedirect": true
+}`}</CodeBlock>
+            </div>
+            <Typography variant="pi" textColor="neutral600">
+              ⚠️ When 3D Secure is enabled, you must redirect the user to the{" "}
+              <code>redirecturl</code> for authentication.
+            </Typography>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Credit Card Documentation:</strong>
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Credit+Card"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Credit+Card
+              </Link>
+            </Typography>
+          </Box>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default CreditCardSection;

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

@@ -0,0 +1,248 @@
+import * as React from "react";
+import { Accordion, Box, Flex, Typography } from "@strapi/design-system";
+import { Link } from "@strapi/design-system";
+import CodeBlock from "./CodeBlock";
+
+const GooglePaySection = () => {
+  return (
+    <Accordion.Item value="google-pay" id="google-pay">
+      <Accordion.Header>
+        <Accordion.Trigger>Google Pay Integration</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" alignItems={"stretch"} gap={4} padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Google Pay Integration
+          </Typography>
+          <Box>
+            <Flex direction="column" alignItems={"stretch"} gap={2}>
+              <Typography variant="pi" fontWeight="bold">
+                Step 1: Configure Strapi Middleware
+              </Typography>
+              <Typography variant="pi">
+                Add Google Pay SDK to your{" "}
+                <code>config/middlewares.js</code>:
+              </Typography>
+            </Flex>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`module.exports = [
+  'strapi::logger',
+  'strapi::errors',
+  {
+    name: 'strapi::security',
+    config: {
+      contentSecurityPolicy: {
+        useDefaults: true,
+        directives: {
+          'script-src': [
+            "'self'",
+            "'unsafe-inline'",
+            "'unsafe-eval'",
+            'https://pay.google.com',
+          ],
+          'connect-src': [
+            "'self'",
+            'https:',
+            'https://pay.google.com',
+          ],
+          'frame-src': [
+            "'self'",
+            'https://pay.google.com',
+          ],
+        },
+      },
+    },
+  },
+  // ... other middlewares
+];`}</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Step 2: Install Google Pay Button Library (Optional)
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>npm install @google-pay/button-react</CodeBlock>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Step 3: Implement Google Pay Button (Using NPM Library)
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <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>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Step 4: Manual Implementation
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <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>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Token Parameters (Backend Request):
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "ORD-00123-ABCD",
+  "clearingtype": "wlt",
+  "wallettype": "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>
+            </div>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone Google Pay Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/Google+Pay
+              </Link>
+            </Typography>
+          </Box>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default GooglePaySection;
+

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

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { Accordion, Box, Flex, Typography } from "@strapi/design-system";
+import { Link } from "@strapi/design-system";
+import CodeBlock from "./CodeBlock";
+
+const PayPalSection = () => {
+  return (
+    <Accordion.Item value="paypal" id="paypal">
+      <Accordion.Header>
+        <Accordion.Trigger>PayPal Integration</Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content>
+        <Flex direction="column" alignItems={"stretch"} gap={4} padding={4}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            PayPal Integration
+          </Typography>
+          <Flex direction="column" alignItems={"stretch"} gap={2}>
+            <Typography variant="pi" fontWeight="bold">
+              Required Parameters:
+            </Typography>
+            <Flex direction="column" alignItems={"stretch"} gap={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>
+            </Flex>
+          </Flex>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Preauthorization Request:
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`POST /api/strapi-plugin-payone-provider/preauthorization
+
+{
+  "amount": 1000,
+  "currency": "EUR",
+  "reference": "ORD-00123-ABCD",
+  "clearingtype": "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>
+            </div>
+          </Box>
+          <Box>
+            <Typography variant="pi" fontWeight="bold">
+              Response (Redirect to PayPal):
+            </Typography>
+            <div style={{ marginTop: "12px", marginBottom: "12px" }}>
+              <CodeBlock>{`{
+  "status": "REDIRECT",
+  "redirecturl": "https://www.paypal.com/checkoutnow?token=..."
+}`}</CodeBlock>
+            </div>
+            <Typography variant="pi" textColor="neutral600">
+              ⚠️ PayPal always redirects. You must redirect the user to{" "}
+              <code>redirecturl</code> to complete the payment.
+            </Typography>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" fontWeight="bold">
+              PayPal Callback Response (after redirect):
+            </Typography>
+            <div style={{ marginTop: "12px" }}>
+              <CodeBlock>{`{
+  "status": "APPROVED",
+  "txid": "12345678",
+  "reference": "ORD-00123-ABCD"
+}`}</CodeBlock>
+            </div>
+          </Box>
+          <Box marginTop={2}>
+            <Typography variant="pi" textColor="neutral600">
+              📚 <strong>Payone PayPal Documentation:</strong>{" "}
+              <Link
+                href="https://docs.payone.com/display/public/PLATFORM/PayPal"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://docs.payone.com/display/public/PLATFORM/PayPal
+              </Link>
+            </Typography>
+          </Box>
+        </Flex>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
+export default PayPalSection;
+

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Box, Card, CardBody, Flex, Typography } from "@strapi/design-system";
+
+const PaymentMethodsSection = () => {
+  return (
+    <Card className="payment-card" id="payment-methods">
+      <CardBody padding={6}>
+        <Flex direction="column" alignItems="stretch" gap={4} width={"100%"}>
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Supported Payment Methods
+          </Typography>
+
+          <Flex direction="column" gap={2} alignItems="stretch" marginTop={4}>
+            <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>
+          </Flex>
+
+          <Typography variant="delta" as="h3" fontWeight="bold">
+            Available Card Types (for Credit Card):
+          </Typography>
+
+          <Flex direction="column" gap={2} alignItems="stretch" marginTop={4}>
+            <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>
+          </Flex>
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default PaymentMethodsSection;

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Accordion, Flex, Typography, Link } from "@strapi/design-system";
+
+const TableOfContents = () => {
+  return (
+    <Accordion.Root>
+      <Accordion.Item value="toc">
+        <Accordion.Header>
+          <Accordion.Trigger>Table of Contents</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Flex direction="column" alignItems={"stretch"} gap={2} padding={4}>
+            <Typography variant="pi">
+              1. <Link href="#base-url">Base URL & Authentication</Link>
+            </Typography>
+            <Typography variant="pi">
+              2. <Link href="#payment-methods">Supported Payment Methods</Link>
+            </Typography>
+            <Typography variant="pi">
+              3. <Link href="#credit-card">Credit Card Integration</Link>
+            </Typography>
+            <Typography variant="pi">
+              4. <Link href="#paypal">PayPal Integration</Link>
+            </Typography>
+            <Typography variant="pi">
+              5. <Link href="#google-pay">Google Pay Integration</Link>
+            </Typography>
+            <Typography variant="pi">
+              6. <Link href="#apple-pay">Apple Pay Integration</Link>
+            </Typography>
+            <Typography variant="pi">
+              7. <Link href="#3d-secure">3D Secure Authentication</Link>
+            </Typography>
+            <Typography variant="pi">
+              8. <Link href="#capture-refund">Capture & Refund Operations</Link>
+            </Typography>
+            <Typography variant="pi">
+              9. <Link href="#test-credentials">Test Credentials</Link>
+            </Typography>
+          </Flex>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+};
+
+export default TableOfContents;