strapi-plugin-payone-provider 1.6.1 → 1.6.2

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

@@ -1,217 +0,0 @@
-import React from "react";
-import { Box, Flex, Typography, Select, Option, Checkbox, Stack } from "@strapi/design-system";
-import {
-  GOOGLE_PAY_SUPPORTED_COUNTRIES,
-  GOOGLE_PAY_SUPPORTED_CURRENCIES,
-  GOOGLE_PAY_SUPPORTED_NETWORKS,
-  GOOGLE_PAY_AUTH_METHODS,
-  DEFAULT_GOOGLE_PAY_CONFIG
-} from "../../utils/googlePayConstants";
-
-const GooglePayConfig = ({
-  config,
-  onConfigChange,
-  settings
-}) => {
-  const {
-    countryCode = DEFAULT_GOOGLE_PAY_CONFIG.countryCode,
-    currencyCode = DEFAULT_GOOGLE_PAY_CONFIG.currencyCode,
-    allowedCardNetworks = DEFAULT_GOOGLE_PAY_CONFIG.allowedCardNetworks,
-    allowedAuthMethods = DEFAULT_GOOGLE_PAY_CONFIG.allowedAuthMethods,
-    merchantName = DEFAULT_GOOGLE_PAY_CONFIG.merchantName
-  } = config || {};
-
-  const handleCountryChange = (value) => {
-    onConfigChange({
-      ...config,
-      countryCode: value
-    });
-  };
-
-  const handleCurrencyChange = (value) => {
-    onConfigChange({
-      ...config,
-      currencyCode: value
-    });
-  };
-
-  const handleNetworkToggle = (networkCode) => {
-    const currentNetworks = allowedCardNetworks || [];
-    const newNetworks = currentNetworks.includes(networkCode)
-      ? currentNetworks.filter(n => n !== networkCode)
-      : [...currentNetworks, networkCode];
-
-    onConfigChange({
-      ...config,
-      allowedCardNetworks: newNetworks
-    });
-  };
-
-  const handleAuthMethodToggle = (authMethodCode) => {
-    const currentMethods = allowedAuthMethods || [];
-    const newMethods = currentMethods.includes(authMethodCode)
-      ? currentMethods.filter(m => m !== authMethodCode)
-      : [...currentMethods, authMethodCode];
-
-    onConfigChange({
-      ...config,
-      allowedAuthMethods: newMethods
-    });
-  };
-
-  return (
-    <Box>
-      <Stack spacing={6}>
-        <Box>
-          <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: "6px" }}>
-            Google Pay Configuration
-          </Typography>
-          <Typography variant="pi" textColor="neutral600">
-            Configure Google Pay settings for your payment gateway
-          </Typography>
-        </Box>
-
-        {/* Country and Currency */}
-        <Flex gap={4} wrap="wrap">
-          <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
-              label="Country Code"
-              name="countryCode"
-              value={countryCode}
-              onChange={handleCountryChange}
-              hint="Select the country where your business operates"
-              required
-            >
-              {GOOGLE_PAY_SUPPORTED_COUNTRIES.map(country => (
-                <Option key={country.code} value={country.code}>
-                  {country.name} ({country.code})
-                </Option>
-              ))}
-            </Select>
-          </Box>
-
-          <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
-              label="Currency Code"
-              name="currencyCode"
-              value={currencyCode}
-              onChange={handleCurrencyChange}
-              hint="Select the currency for transactions"
-              required
-            >
-              {GOOGLE_PAY_SUPPORTED_CURRENCIES.map(currency => (
-                <Option key={currency.code} value={currency.code}>
-                  {currency.name} ({currency.code}) {currency.symbol}
-                </Option>
-              ))}
-            </Select>
-          </Box>
-        </Flex>
-
-        {/* Merchant Name */}
-        <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
-            Merchant Name
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
-            The name of your business as it will appear in Google Pay
-          </Typography>
-          <input
-            type="text"
-            value={merchantName}
-            onChange={(e) => onConfigChange({ ...config, merchantName: e.target.value })}
-            style={{
-              width: "100%",
-              padding: "8px 12px",
-              marginTop: "8px",
-              border: "1px solid #dcdce4",
-              borderRadius: "4px",
-              fontSize: "14px"
-            }}
-            placeholder="Your Store Name"
-          />
-        </Box>
-
-        {/* Allowed Card Networks */}
-        <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
-            Allowed Card Networks
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
-            Select payment card networks to accept
-          </Typography>
-          <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
-            {GOOGLE_PAY_SUPPORTED_NETWORKS.map(network => {
-              const isSelected = allowedCardNetworks?.includes(network.code);
-
-              return (
-                <Box key={network.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
-                  <Checkbox
-                    name={`network-${network.code}`}
-                    checked={isSelected}
-                    onChange={() => handleNetworkToggle(network.code)}
-                  >
-                    {network.name} ({network.code})
-                  </Checkbox>
-                </Box>
-              );
-            })}
-          </Flex>
-          {allowedCardNetworks?.length === 0 && (
-            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
-              At least one card network must be selected
-            </Typography>
-          )}
-        </Box>
-
-        {/* Allowed Authentication Methods */}
-        <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
-            Allowed Authentication Methods
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
-            Select authentication methods for card payments
-          </Typography>
-          <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
-            {GOOGLE_PAY_AUTH_METHODS.map(method => {
-              const isSelected = allowedAuthMethods?.includes(method.code);
-
-              return (
-                <Box key={method.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
-                  <Checkbox
-                    name={`auth-method-${method.code}`}
-                    checked={isSelected}
-                    onChange={() => handleAuthMethodToggle(method.code)}
-                  >
-                    {method.name} - {method.description}
-                  </Checkbox>
-                </Box>
-              );
-            })}
-          </Flex>
-          {allowedAuthMethods?.length === 0 && (
-            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
-              At least one authentication method must be selected
-            </Typography>
-          )}
-        </Box>
-
-        {/* Gateway Merchant ID Info */}
-        <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
-            Gateway Merchant ID
-          </Typography>
-          <Typography variant="pi" textColor="neutral600">
-            {settings?.mid || settings?.portalid
-              ? `Using: ${settings.mid || settings.portalid}`
-              : "Gateway merchant ID will be obtained from your Payone Merchant ID (MID) or Portal ID. Make sure these are configured in the main Configuration tab."
-            }
-          </Typography>
-        </Box>
-      </Stack>
-    </Box>
-  );
-};
-
-export default GooglePayConfig;
-

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

@@ -1,82 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-  Box,
-  Card,
-  CardBody,
-  Flex,
-  Typography,
-  Button
-} from "@strapi/design-system";
-import { Check } from "@strapi/icons";
-import GooglePayConfig from "./GooglePayConfig";
-
-const GooglePayConfigPanel = ({
-  settings,
-  onInputChange,
-  isSaving,
-  onSave,
-  onBack
-}) => {
-  const [googlePayConfig, setGooglePayConfig] = useState(settings?.googlePayConfig || {});
-
-  useEffect(() => {
-    setGooglePayConfig(settings?.googlePayConfig || {});
-  }, [settings?.googlePayConfig]);
-
-  return (
-    <Box
-      className="payment-container"
-      paddingTop={8}
-      paddingBottom={8}
-      paddingLeft={8}
-      paddingRight={8}
-    >
-      <Flex direction="column" alignItems="stretch" gap={8}>
-        <Box>
-          <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
-            Google Pay Configuration
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '14px' }}>
-            Configure Google Pay settings for your payment gateway
-          </Typography>
-        </Box>
-
-        <Box>
-          <Card className="payment-card">
-            <CardBody padding={6}>
-              <GooglePayConfig
-                config={googlePayConfig}
-                onConfigChange={(newConfig) => {
-                  setGooglePayConfig(newConfig);
-                  onInputChange("googlePayConfig", newConfig);
-                }}
-                settings={settings}
-              />
-            </CardBody>
-          </Card>
-        </Box>
-
-        <Box paddingTop={4}>
-          <Flex direction="row" gap={4} alignItems="center">
-            <Button
-              loading={isSaving}
-              onClick={onSave}
-              startIcon={<Check />}
-              size="L"
-              variant="default"
-              className="payment-button payment-button-success"
-            >
-              Save Google Pay Configuration
-            </Button>
-            <Typography variant="sigma" textColor="neutral600">
-              Note: Google Pay configuration is used for Google Pay payment requests. Make sure to configure the correct card networks, authentication methods, and merchant information for your region.
-            </Typography>
-          </Flex>
-        </Box>
-      </Flex>
-    </Box>
-  );
-};
-
-export default GooglePayConfigPanel;
-

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

@@ -1,300 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Box, Flex, Typography } from "@strapi/design-system";
-import { injectGooglePayScript } from "../../utils/injectGooglePayScript";
-
-const GooglePayButton = ({
-  amount,
-  currency = "EUR",
-  onTokenReceived,
-  onError,
-  settings
-}) => {
-  const [isReady, setIsReady] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const buttonContainerRef = useRef(null);
-  const paymentsClientRef = useRef(null);
-
-  const baseRequest = {
-    apiVersion: 2,
-    apiVersionMinor: 0
-  };
-
-  const getGooglePayConfig = (settings) => {
-    const gatewayMerchantId = settings?.mid || settings?.portalid || '';
-
-    const allowedCardNetworks = ["MASTERCARD", "VISA"];
-    const allowedAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
-
-    const tokenizationSpecification = {
-      type: 'PAYMENT_GATEWAY',
-      parameters: {
-        'gateway': 'payonegmbh',
-        'gatewayMerchantId': gatewayMerchantId
-      }
-    };
-
-    const baseCardPaymentMethod = {
-      type: "CARD",
-      parameters: {
-        allowedCardNetworks,
-        allowedAuthMethods
-      }
-    };
-
-    const cardPaymentMethod = {
-      ...baseCardPaymentMethod,
-      tokenizationSpecification
-    };
-    return {
-      baseCardPaymentMethod,
-      cardPaymentMethod,
-    };
-  };
-
-  useEffect(() => {
-    injectGooglePayScript();
-
-    const checkGooglePay = () => {
-      try {
-        return typeof window !== 'undefined' &&
-          typeof window.google !== 'undefined' &&
-          window.google.payments?.api?.PaymentsClient;
-      } catch (e) {
-        return false;
-      }
-    };
-
-    if (checkGooglePay()) {
-      initializeGooglePay();
-      return;
-    }
-
-    const handleScriptLoaded = () => {
-      setTimeout(() => {
-        if (checkGooglePay()) {
-          initializeGooglePay();
-        }
-      }, 500);
-    };
-
-    const handleScriptError = () => {
-      setIsLoading(false);
-      if (onError) {
-        onError(new Error("Failed to load Google Pay script. Please check CSP settings."));
-      }
-    };
-
-    window.addEventListener("googlePayScriptLoaded", handleScriptLoaded);
-    window.addEventListener("googlePayScriptError", handleScriptError);
-
-    const checkInterval = setInterval(() => {
-      if (checkGooglePay()) {
-        clearInterval(checkInterval);
-        initializeGooglePay();
-      }
-    }, 200);
-
-    const timeout = setTimeout(() => {
-      clearInterval(checkInterval);
-      if (!checkGooglePay()) {
-        setIsLoading(false);
-        if (onError) {
-          onError(new Error("Google Pay API is not available. Please check if the script is loaded and CSP allows pay.google.com"));
-        }
-      }
-    }, 15000);
-
-    return () => {
-      window.removeEventListener("googlePayScriptLoaded", handleScriptLoaded);
-      window.removeEventListener("googlePayScriptError", handleScriptError);
-      clearInterval(checkInterval);
-      clearTimeout(timeout);
-    };
-  }, [settings, amount, currency]);
-
-  const initializeGooglePay = () => {
-    if (!settings || (!settings.mid && !settings.portalid)) {
-      setIsLoading(false);
-      if (onError) {
-        onError(new Error("Google Pay settings missing. Please configure mid or portalid in settings."));
-      }
-      return;
-    }
-
-    try {
-      if (typeof window === 'undefined' || typeof window.google === 'undefined' || !window.google.payments?.api?.PaymentsClient) {
-        setIsLoading(false);
-        if (onError) {
-          onError(new Error("Google Pay API is not loaded. Please check browser console for CSP errors."));
-        }
-        return;
-      }
-
-
-      const environment = settings?.mode === "live" ? "PRODUCTION" : "TEST";
-      paymentsClientRef.current = new window.google.payments.api.PaymentsClient({
-        environment: environment
-      });
-
-      const config = getGooglePayConfig(settings);
-
-      const isReadyToPayRequest = Object.assign({}, baseRequest);
-      isReadyToPayRequest.allowedPaymentMethods = [config.baseCardPaymentMethod];
-
-      paymentsClientRef.current.isReadyToPay(isReadyToPayRequest)
-        .then((response) => {
-          if (response.result) {
-            setIsReady(true);
-            const tryAddButton = () => {
-              if (buttonContainerRef.current) {
-                addGooglePayButton(config);
-              } else {
-                setTimeout(tryAddButton, 100);
-              }
-            };
-            setTimeout(tryAddButton, 100);
-          } else {
-            setIsLoading(false);
-            if (onError) {
-              onError(new Error("Google Pay is not available on this device"));
-            }
-          }
-        })
-        .catch((err) => {
-          setIsLoading(false);
-          if (onError) {
-            onError(err);
-          }
-        });
-    } catch (error) {
-      setIsLoading(false);
-      if (onError) {
-        onError(error);
-      }
-    }
-  };
-
-  const addGooglePayButton = (config) => {
-    if (!buttonContainerRef.current) {
-      setTimeout(() => {
-        if (buttonContainerRef.current) {
-          addGooglePayButton(config);
-        } else {
-          setIsLoading(false);
-        }
-      }, 500);
-      return;
-    }
-
-    if (!paymentsClientRef.current) {
-      setIsLoading(false);
-      return;
-    }
-
-    buttonContainerRef.current.innerHTML = "";
-
-    const gatewayMerchantId = settings?.mid || settings?.portalid || '';
-    const paymentDataRequest = Object.assign({}, baseRequest);
-    paymentDataRequest.allowedPaymentMethods = [config.cardPaymentMethod];
-    paymentDataRequest.transactionInfo = {
-      totalPriceStatus: "FINAL",
-      totalPrice: (parseFloat(amount) / 100).toFixed(2),
-      currencyCode: currency
-    };
-    paymentDataRequest.merchantInfo = {
-      merchantId: gatewayMerchantId,
-      merchantName: settings?.merchantName || 'Demo Shop'
-    };
-
-    try {
-      const button = paymentsClientRef.current.createButton({
-        onClick: () => handleGooglePayClick(paymentDataRequest),
-        buttonColor: "black",
-        buttonType: "pay",
-        buttonSizeMode: "fill"
-      });
-
-      if (buttonContainerRef.current) {
-        buttonContainerRef.current.appendChild(button);
-        setIsLoading(false);
-        setIsReady(true);
-      } else {
-        setIsLoading(false);
-      }
-    } catch (error) {
-      setIsLoading(false);
-      if (onError) {
-        onError(error);
-      }
-    }
-  };
-
-  const handleGooglePayClick = async (paymentDataRequest) => {
-    try {
-      if (!paymentsClientRef.current) {
-        throw new Error("Google Pay client not initialized");
-      }
-
-      const paymentData = await paymentsClientRef.current.loadPaymentData(paymentDataRequest);
-      const rawToken = paymentData.paymentMethodData?.tokenizationData?.token;
-
-      if (!rawToken) {
-        throw new Error("Google Pay token is missing from payment data");
-      }
-
-      let token = rawToken;
-
-      try {
-        const tokenObj = JSON.parse(token);
-        if (!tokenObj.signature || !tokenObj.protocolVersion || !tokenObj.signedMessage) {
-          throw new Error("Google Pay token is missing required fields");
-        }
-        token = btoa(unescape(encodeURIComponent(rawToken)));
-      } catch (e) {
-        if (typeof token === 'string') {
-          token = btoa(unescape(encodeURIComponent(token)));
-        } else {
-          throw new Error(`Invalid Google Pay token format: ${e.message}`);
-        }
-      }
-
-      if (onTokenReceived) {
-        onTokenReceived(token, paymentData);
-      }
-    } catch (error) {
-      if (onError) {
-        onError(error);
-      }
-    }
-  };
-
-  return (
-    <Box width="100%">
-      <Flex direction="column" gap={3} alignItems="stretch">
-        {isLoading && (
-          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
-            Loading Google Pay...
-          </Typography>
-        )}
-        {!isLoading && !isReady && (
-          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
-            Google Pay is not available
-          </Typography>
-        )}
-        {!isLoading && isReady && (
-          <>
-            <Typography variant="sigma" textColor="neutral700" fontWeight="semiBold" style={{ textAlign: "left" }}>
-              Google Pay Payment
-            </Typography>
-            <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
-              Click the button below to pay with Google Pay. The token will be automatically sent to Payone.
-            </Typography>
-          </>
-        )}
-        <Box ref={buttonContainerRef} style={{ minHeight: "40px", width: "100%", maxWidth: "200px", display: "flex", justifyContent: "flex-start", }} />
-      </Flex>
-    </Box>
-  );
-};
-
-export default GooglePayButton;