strapi-plugin-payone-provider 1.5.0 → 1.5.3

package/README.md

@@ -85,6 +85,159 @@ After installation, you need to configure your Payone credentials:
 5. Click **"Test Connection"** to verify your credentials
 6. Click **"Save Configuration"** to store your settings
 
+### Apple Pay Configuration
+
+To configure Apple Pay settings:
+
+1. Navigate to **Payone Provider** in the sidebar menu
+2. Go to **Payment Actions** tab
+3. Select **Apple Pay** as the payment method
+4. Click on the Apple Pay configuration link: `/plugins/strapi-plugin-payone-provider/apple-pay-config`
+5. Configure the following settings:
+   - **Country Code**: Select the country where your business operates
+   - **Currency Code**: Select the currency for transactions
+   - **Supported Networks**: Select payment card networks (Visa, Mastercard, Amex, etc.)
+   - **Merchant Capabilities**: Select payment capabilities (3D Secure is recommended)
+   - **Button Style & Type**: Customize the Apple Pay button appearance
+6. Click **"Save Apple Pay Configuration"** to store your settings
+
+> ⚠️ **Important**: Apple Pay requires a registered domain with HTTPS. It does NOT work on localhost. For testing, use a production domain with HTTPS or test on a device with Safari (iOS/macOS).
+
+#### Apple Pay Domain Verification File (.well-known)
+
+Apple Pay requires a domain verification file to be placed on your server. This file must be accessible at:
+
+```
+https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
+```
+
+**Steps to set up the domain verification file:**
+
+1. **Download the file from Payone:**
+
+   - Download the domain verification file from Payone documentation: [https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev](https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev)
+   - Alternatively, log into your Payone Merchant Interface (PMI)
+   - Navigate to **Configuration** → **Payment Portals** → **Apple Pay**
+   - Download the `apple-developer-merchantid-domain-association` file
+
+2. **Place the file in Strapi:**
+
+   - Create the directory: `public/.well-known/` (if it doesn't exist)
+   - Place the file at: `public/.well-known/apple-developer-merchantid-domain-association`
+
+3. **Place the file in your Frontend (if separate):**
+
+   - Create the directory: `public/.well-known/` (if it doesn't exist)
+   - Place the file at: `public/.well-known/apple-developer-merchantid-domain-association`
+
+4. **Verify accessibility:**
+   - The file must be accessible via HTTPS at: `https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association`
+   - Test by visiting the URL in your browser - you should see the file content
+
+> ⚠️ **Critical**: Without this file, Apple Pay will NOT work on your domain. The file must be accessible via HTTPS and must match exactly what Payone provides.
+
+#### Middleware Configuration for Apple Pay
+
+Apple Pay requires Content Security Policy (CSP) configuration in `config/middlewares.js` to allow Apple Pay scripts. Without this configuration, Apple Pay will NOT work.
+
+**Required CSP directives:**
+
+```javascript
+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", // Apple Pay SDK
+            "https://www.apple.com", // Apple Pay manifest
+          ],
+          "connect-src": [
+            "'self'",
+            "https:",
+            "https://applepay.cdn-apple.com", // Apple Pay API
+            "https://www.apple.com", // Apple Pay manifest
+          ],
+          "frame-src": [
+            "'self'",
+            "https://applepay.cdn-apple.com", // Apple Pay iframe
+          ],
+        },
+      },
+    },
+  },
+  // ... other middlewares
+];
+```
+
+> ⚠️ **Important**: Without this middleware configuration, Apple Pay scripts will be blocked and Apple Pay will NOT work!
+
+### Google Pay Configuration
+
+To configure Google Pay settings:
+
+1. Navigate to **Payone Provider** in the sidebar menu
+2. Go to **Payment Actions** tab
+3. Select **Google Pay** as the payment method
+4. Click on the Google Pay configuration link: `/plugins/strapi-plugin-payone-provider/google-pay-config`
+5. Configure the following settings:
+   - **Country Code**: Select the country where your business operates
+   - **Currency Code**: Select the currency for transactions
+   - **Merchant Name**: Enter your business name as it will appear in Google Pay
+   - **Allowed Card Networks**: Select payment card networks (Mastercard, Visa, Amex, etc.)
+   - **Allowed Authentication Methods**: Select authentication methods (PAN Only, 3D Secure)
+6. Click **"Save Google Pay Configuration"** to store your settings
+
+> ℹ️ **Note**: The Gateway Merchant ID will be automatically obtained from your Payone Merchant ID (MID) or Portal ID configured in the main Configuration tab.
+
+#### Middleware Configuration for Google Pay
+
+Google Pay requires Content Security Policy (CSP) configuration in `config/middlewares.js` to allow Google Pay scripts. Without this configuration, Google Pay will NOT work.
+
+**Required CSP directives:**
+
+```javascript
+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", // Google Pay SDK
+          ],
+          "connect-src": [
+            "'self'",
+            "https:",
+            "https://pay.google.com", // Google Pay API
+          ],
+          "frame-src": [
+            "'self'",
+            "https://pay.google.com", // Google Pay iframe
+          ],
+        },
+      },
+    },
+  },
+  // ... other middlewares
+];
+```
+
+> ⚠️ **Important**: Without this middleware configuration, Google Pay scripts will be blocked and Google Pay will NOT work!
+
 ## 🚀 Getting Started
 
 ### 1. Test Your Connection
@@ -590,7 +743,7 @@ Google Pay integration requires obtaining an encrypted payment token from Google
 
 ```javascript
 const paymentsClient = new google.payments.api.PaymentsClient({
-  environment: 'TEST', // or "PRODUCTION" for live
+  environment: "TEST", // or "PRODUCTION" for live
 });
 
 const baseRequest = {
@@ -598,19 +751,19 @@ const baseRequest = {
   apiVersionMinor: 0,
 };
 
-const allowedCardNetworks = ['MASTERCARD', 'VISA'];
-const allowedAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS'];
+const allowedCardNetworks = ["MASTERCARD", "VISA"];
+const allowedAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
 
 const tokenizationSpecification = {
-  type: 'PAYMENT_GATEWAY',
+  type: "PAYMENT_GATEWAY",
   parameters: {
-    gateway: 'payonegmbh',
-    gatewayMerchantId: 'YOUR_PAYONE_MERCHANT_ID', // Use your Payone MID or Portal ID
+    gateway: "payonegmbh",
+    gatewayMerchantId: "YOUR_PAYONE_MERCHANT_ID", // Use your Payone MID or Portal ID
   },
 };
 
 const cardPaymentMethod = {
-  type: 'CARD',
+  type: "CARD",
   parameters: {
     allowedCardNetworks,
     allowedAuthMethods,
@@ -634,45 +787,47 @@ paymentsClient.isReadyToPay(isReadyToPayRequest).then(function (response) {
 const paymentDataRequest = Object.assign({}, baseRequest);
 paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
 paymentDataRequest.transactionInfo = {
-  totalPriceStatus: 'FINAL',
-  totalPrice: '10.00',
-  currencyCode: 'EUR',
+  totalPriceStatus: "FINAL",
+  totalPrice: "10.00",
+  currencyCode: "EUR",
 };
 paymentDataRequest.merchantInfo = {
-  merchantId: 'YOUR_GOOGLE_MERCHANT_ID', // Optional: from Google Console
-  merchantName: 'Your Merchant Name',
+  merchantId: "YOUR_GOOGLE_MERCHANT_ID", // Optional: from Google Console
+  merchantName: "Your Merchant Name",
 };
 
 const button = paymentsClient.createButton({
   onClick: async () => {
     try {
-      const paymentData = await paymentsClient.loadPaymentData(paymentDataRequest);
+      const paymentData = await paymentsClient.loadPaymentData(
+        paymentDataRequest
+      );
       const token = paymentData.paymentMethodData.tokenizationData.token;
 
       // Token is a JSON string, encode it to Base64 for Payone
       const base64Token = btoa(unescape(encodeURIComponent(token)));
 
       // Send to your backend
-      await fetch('/api/strapi-plugin-payone-provider/preauthorization', {
-        method: 'POST',
+      await fetch("/api/strapi-plugin-payone-provider/preauthorization", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
-          Authorization: 'Bearer YOUR_TOKEN',
+          "Content-Type": "application/json",
+          Authorization: "Bearer YOUR_TOKEN",
         },
         body: JSON.stringify({
           amount: 1000,
-          currency: 'EUR',
-          reference: 'PAY1234567890ABCDEF',
+          currency: "EUR",
+          reference: "PAY1234567890ABCDEF",
           googlePayToken: base64Token,
         }),
       });
     } catch (error) {
-      console.error('Google Pay error:', error);
+      console.error("Google Pay error:", error);
     }
   },
 });
 
-document.getElementById('google-pay-button').appendChild(button);
+document.getElementById("google-pay-button").appendChild(button);
 ```
 
 **Token Format**
@@ -684,7 +839,9 @@ The token from Google Pay is a JSON string with the following structure:
   "signature": "MEUCIFr4ETGzv0uLZX3sR+i1ScARXnRBrncyYFDX/TI/VSLCAiEAvC/Q4dqXMQhwcSdg/ZvXj8+up0wXsfHja3V/6z48/vk=",
   "intermediateSigningKey": {
     "signedKey": "{\"keyValue\":\"MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE7PWUi+e6WPUhNmTSQ2WN006oWlcWy0FtBWizw9sph1wvX9XcXUNRLcfcsmCBfI5IsKQkjAmYxpCSB+L5sIudLw\\u003d\\u003d\",\"keyExpiration\":\"1722393105282\"}",
-    "signatures": ["MEUCIQCpU30A3g2pP93IBE5NxgO9ZcJlGF9YPzCZS7H4/IR1CQIgF6+I5t8olT8YsRDUcj7w3R1bvX4ZCcyFXE2+YXa+3H0="]
+    "signatures": [
+      "MEUCIQCpU30A3g2pP93IBE5NxgO9ZcJlGF9YPzCZS7H4/IR1CQIgF6+I5t8olT8YsRDUcj7w3R1bvX4ZCcyFXE2+YXa+3H0="
+    ]
   },
   "protocolVersion": "ECv2",
   "signedMessage": "{\"encryptedMessage\":\"...\",\"ephemeralPublicKey\":\"...\",\"tag\":\"...\"}"

package/admin/src/pages/App/components/AppHeader.js

@@ -1,22 +1,40 @@
 import React from "react";
 import { HeaderLayout, Box, Typography, Button } from "@strapi/design-system";
-import { Check } from "@strapi/icons";
+import { Check, ArrowLeft } from "@strapi/icons";
+import { useHistory, useLocation } from "react-router-dom";
+import pluginId from "../../../pluginId";
 
 const AppHeader = ({ activeTab, isSaving, onSave }) => {
+  const history = useHistory();
+  const location = useLocation();
+  const isApplePayConfigPage = location.pathname.includes('/apple-pay-config');
+
   return (
     <HeaderLayout
       title={
         <Box>
           <Typography variant="alpha" as="h1" fontWeight="bold" className="payment-title">
-            Payone Provider
+            {isApplePayConfigPage ? "Apple Pay Configuration" : "Payone Provider"}
           </Typography>
           <Typography variant="pi" marginTop={2} className="payment-subtitle">
-            Configure your Payone integration and manage payment transactions
+            {isApplePayConfigPage 
+              ? "Configure Apple Pay settings for your payment gateway"
+              : "Configure your Payone integration and manage payment transactions"
+            }
           </Typography>
         </Box>
       }
       primaryAction={
-        activeTab === 0 ? (
+        isApplePayConfigPage ? (
+          <Button
+            onClick={() => history.push(`/plugins/${pluginId}`)}
+            startIcon={<ArrowLeft />}
+            size="L"
+            variant="secondary"
+          >
+            Back to Main
+          </Button>
+        ) : activeTab === 0 ? (
           <Button
             loading={isSaving}
             onClick={onSave}

package/admin/src/pages/App/components/AppTabs.js

@@ -1,8 +1,10 @@
 import React from "react";
 import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from "@strapi/design-system";
+import pluginId from "../../../pluginId";
 import ConfigurationPanel from "./ConfigurationPanel";
 import HistoryPanel from "./HistoryPanel";
 import PaymentActionsPanel from "./PaymentActionsPanel";
+import DocsPanel from "./DocsPanel";
 
 const AppTabs = ({
   activeTab,
@@ -30,8 +32,18 @@ const AppTabs = ({
   selectedTransaction,
   onTransactionSelect,
   // Payment actions props
-  paymentActions
+  paymentActions,
+  history
 }) => {
+      const handleNavigateToConfig = (configType = "apple-pay") => {
+        if (history) {
+          if (configType === "google-pay") {
+            history.push(`/plugins/${pluginId}/google-pay-config`);
+          } else {
+            history.push(`/plugins/${pluginId}/apple-pay-config`);
+          }
+        }
+      };
   return (
     <TabGroup
       label="Payone Provider Tabs"
@@ -53,6 +65,11 @@ const AppTabs = ({
         >
           Payment Actions
         </Tab>
+        <Tab
+          className={`payment-tab ${activeTab === 3 ? 'payment-tab-active' : ''}`}
+        >
+          Documentation
+        </Tab>
       </Tabs>
       <TabPanels>
         <TabPanel>
@@ -125,8 +142,13 @@ const AppTabs = ({
             setCardexpiredate={paymentActions.setCardexpiredate}
             cardcvc2={paymentActions.cardcvc2}
             setCardcvc2={paymentActions.setCardcvc2}
+            onNavigateToConfig={handleNavigateToConfig}
           />
         </TabPanel>
+
+        <TabPanel>
+          <DocsPanel />
+        </TabPanel>
       </TabPanels>
     </TabGroup>
   );

package/admin/src/pages/App/components/ApplePayButton.js

@@ -499,7 +499,16 @@ const ApplePayButton = ({
 
       // Show payment sheet and get response
       console.log("[Apple Pay] Showing payment sheet...");
-      const response = await request.show();
+      let response;
+      try {
+        response = await request.show();
+      } catch (error) {
+        console.error("[Apple Pay] Error showing payment sheet:", error);
+        if (onError) {
+          onError(error);
+        }
+        return;
+      }
 
       console.log("[Apple Pay] Payment response received:", {
         hasDetails: !!response.details,
@@ -512,7 +521,11 @@ const ApplePayButton = ({
 
       if (!paymentToken) {
         console.error("[Apple Pay] Payment token is missing from response");
-        await response.complete("fail");
+        try {
+          await response.complete("fail");
+        } catch (completeError) {
+          console.error("[Apple Pay] Error completing payment with fail:", completeError);
+        }
         if (onError) {
           onError(new Error("Apple Pay token is missing"));
         }
@@ -539,21 +552,88 @@ const ApplePayButton = ({
         tokenString = btoa(unescape(encodeURIComponent(JSON.stringify(paymentToken))));
       }
 
-      // Call the callback with the token
+      // Call the callback with the token BEFORE completing payment
+      // This ensures the token is saved before the dialog closes
       console.log("[Apple Pay] Sending token to callback");
+      let callbackSuccess = true;
+      let callbackError = null;
+
       if (onTokenReceived) {
-        onTokenReceived(tokenString, {
-          paymentToken: paymentToken,
-          billingContact: response.payerName || response.details?.billingContact,
-          shippingContact: response.shippingAddress || response.details?.shippingAddress,
-          shippingOption: response.shippingOption || response.details?.shippingOption
-        });
+        try {
+          // Call the callback to save the token
+          // The callback should set the token in state and return success immediately
+          // It should NOT process the payment yet - that will happen when user clicks the button
+          const callbackResult = onTokenReceived(tokenString, {
+            paymentToken: paymentToken,
+            billingContact: response.payerName || response.details?.billingContact,
+            shippingContact: response.shippingAddress || response.details?.shippingAddress,
+            shippingOption: response.shippingOption || response.details?.shippingOption
+          });
+
+          // If callback returns a promise, wait for it to resolve or reject
+          if (callbackResult && typeof callbackResult.then === 'function') {
+            try {
+              const result = await callbackResult;
+              console.log("[Apple Pay] Token callback completed successfully:", result);
+              // Check if result indicates success
+              if (result && result.success === false) {
+                callbackSuccess = false;
+                callbackError = new Error(result.message || "Token callback returned failure");
+              }
+            } catch (error) {
+              console.error("[Apple Pay] Token callback promise rejected:", error);
+              callbackSuccess = false;
+              callbackError = error;
+            }
+          } else if (callbackResult === false) {
+            // If callback explicitly returns false, treat as failure
+            callbackSuccess = false;
+            console.warn("[Apple Pay] Token callback returned false");
+          } else {
+            // If callback returns a value (not a promise), assume success
+            console.log("[Apple Pay] Token callback returned synchronously");
+          }
+        } catch (error) {
+          console.error("[Apple Pay] Error in token callback:", error);
+          callbackSuccess = false;
+          callbackError = error;
+        }
+      } else {
+        console.warn("[Apple Pay] No onTokenReceived callback provided");
+        // If no callback, we should still complete the payment
+        // But mark as success since we can't determine the result
+        callbackSuccess = true;
       }
 
-      // Complete payment with success
-      console.log("[Apple Pay] Completing payment with success status");
-      await response.complete("success");
-      console.log("[Apple Pay] Payment completed successfully");
+      // Complete payment with success or fail based on callback result
+      // IMPORTANT: Only call complete() after the callback has fully finished
+      console.log("[Apple Pay] Completing payment with status:", callbackSuccess ? "success" : "fail");
+
+      try {
+        // Use a small delay to ensure state updates are complete
+        // This prevents the dialog from closing before the token is saved
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        const completionStatus = callbackSuccess ? "success" : "fail";
+        await response.complete(completionStatus);
+        console.log("[Apple Pay] Payment completed with status:", completionStatus);
+
+        // If there was an error, notify the error handler
+        if (!callbackSuccess && callbackError && onError) {
+          onError(callbackError);
+        }
+      } catch (completeError) {
+        console.error("[Apple Pay] Error completing payment:", completeError);
+        // Try to complete with fail status if there's an error
+        try {
+          await response.complete("fail");
+        } catch (finalError) {
+          console.error("[Apple Pay] Failed to complete payment even with fail status:", finalError);
+        }
+        if (onError) {
+          onError(completeError);
+        }
+      }
 
     } catch (error) {
       console.error("[Apple Pay] Payment error:", {