strapi-plugin-payone-provider 5.6.13 → 5.6.15

package/admin/src/index.js

@@ -1,11 +1,11 @@
 
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
-import Initializer from "./components/Initializer/index.jsx";
-import PluginIcon from "./components/PluginIcon/index.jsx";
-import { injectGooglePayScript } from "./pages/utils/injectGooglePayScript";
-import { injectApplePayScript } from "./pages/utils/injectApplePayScript";
-
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+import { injectGooglePayScript } from './pages/utils/injectGooglePayScript';
+import { injectApplePayScript } from './pages/utils/injectApplePayScript';
+import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
 const name = pluginPkg.strapi.name;
 
@@ -33,30 +33,24 @@ export default {
     });
   },
 
-  bootstrap(app) {
+  bootstrap() {
     injectGooglePayScript();
     injectApplePayScript();
   },
 
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
-      locales.map(async (locale) => {
-        try {
-          const { default: data } = await import(
-            /* webpackChunkName: "[pluginId]-[request]" */ `./translations/${locale}.json`
-          );
-
-          return {
-            data,
+      locales.map((locale) =>
+        import(`./translations/${locale}.json`)
+          .then(({ default: data }) => ({
+            data: prefixPluginTranslations(data, pluginId),
             locale,
-          };
-        } catch (error) {
-          return {
+          }))
+          .catch(() => ({
             data: {},
             locale,
-          };
-        }
-      })
+          }))
+      )
     );
 
     return Promise.resolve(importedTrads);

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

@@ -2,29 +2,28 @@ import * as React from '@strapi/strapi/admin';
 import { Button } from "@strapi/design-system";
 import { Layouts } from "@strapi/strapi/admin";
 import { Check, ArrowLeft } from "@strapi/icons";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 
 const AppHeader = ({ activeTab, isSaving, onSave, title, onBack }) => {
-  const isConfigPage = title && title !== "Payone Provider";
+  const { t } = usePluginTranslations();
+  const pluginName = t("plugin.name", "Payone Provider");
+  const isConfigPage = title && title !== pluginName;
+
+  const subtitle =
+    title === "Apple Pay Configuration"
+      ? t("header.subtitleApplePay", "Configure Apple Pay settings for your payment gateway")
+      : title === "Google Pay Configuration"
+        ? t("header.subtitleGooglePay", "Configure Google Pay settings for your payment gateway")
+        : t("header.subtitle", "Configure your Payone integration and manage payment transactions");
 
   return (
     <Layouts.Header
-      title={title || "Payone Provider"}
-      subtitle={
-        title === "Apple Pay Configuration"
-          ? "Configure Apple Pay settings for your payment gateway"
-          : title === "Google Pay Configuration"
-            ? "Configure Google Pay settings for your payment gateway"
-            : "Configure your Payone integration and manage payment transactions"
-      }
+      title={title || pluginName}
+      subtitle={subtitle}
       primaryAction={
         isConfigPage ? (
-          <Button
-            onClick={onBack}
-            startIcon={<ArrowLeft />}
-            size="L"
-            variant="secondary"
-          >
-            Back to Main
+          <Button onClick={onBack} startIcon={<ArrowLeft />} size="L" variant="secondary">
+            {t("header.backToMain", "Back to Main")}
           </Button>
         ) : activeTab === 2 ? (
           <Button
@@ -35,7 +34,7 @@ const AppHeader = ({ activeTab, isSaving, onSave, title, onBack }) => {
             variant="default"
             className="payment-button payment-button-success"
           >
-            Save Configuration
+            {t("header.saveConfiguration", "Save Configuration")}
           </Button>
         ) : null
       }

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

@@ -4,6 +4,7 @@ import ConfigurationPanel from "./configuration/ConfigurationPanel";
 import HistoryPanel from "./transaction-history/HistoryPanel";
 import PaymentActionsPanel from "./payment-actions/PaymentActionsPanel";
 import DocsPanel from "./DocsPanel";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 
 /**
  * Error boundary to prevent a single tab's error from crashing the entire plugin.
@@ -31,18 +32,15 @@ class TabErrorBoundary extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
     if (this.state.hasError) {
       return (
         <Box padding={6} style={{ textAlign: "center" }}>
           <Typography variant="beta" textColor="danger600">
-            Something went wrong loading this tab.
+            {t ? t("error.tabError", "Something went wrong loading this tab.") : "Something went wrong loading this tab."}
           </Typography>
-          <Typography
-            variant="pi"
-            textColor="neutral600"
-            style={{ marginTop: "8px", display: "block" }}
-          >
-            Try switching to another tab or reload the page.
+          <Typography variant="pi" textColor="neutral600" style={{ marginTop: "8px", display: "block" }}>
+            {t ? t("error.tabErrorHint", "Try switching to another tab or reload the page.") : "Try switching to another tab or reload the page."}
           </Typography>
         </Box>
       );
@@ -58,6 +56,7 @@ const AppTabs = ({
   settings,
   paymentActions
 }) => {
+  const { t } = usePluginTranslations();
   return (
     <Tabs.Root
       value={`tab-${activeTab}`}
@@ -67,18 +66,18 @@ const AppTabs = ({
       }
     >
       <Tabs.List style={{ width: "100%" }}>
-        <Tabs.Trigger value="tab-1">Transaction History</Tabs.Trigger>
-        <Tabs.Trigger value="tab-2">Configuration</Tabs.Trigger>
-        <Tabs.Trigger value="tab-3">Payment Actions</Tabs.Trigger>
-        <Tabs.Trigger value="tab-4">Documentation</Tabs.Trigger>
+        <Tabs.Trigger value="tab-1">{t("tabs.history", "Transaction History")}</Tabs.Trigger>
+        <Tabs.Trigger value="tab-2">{t("tabs.configuration", "Configuration")}</Tabs.Trigger>
+        <Tabs.Trigger value="tab-3">{t("tabs.paymentActions", "Payment Actions")}</Tabs.Trigger>
+        <Tabs.Trigger value="tab-4">{t("tabs.documentation", "Documentation")}</Tabs.Trigger>
       </Tabs.List>
       <Tabs.Content value="tab-1">
-        <TabErrorBoundary activeTab={activeTab}>
+        <TabErrorBoundary activeTab={activeTab} t={t}>
           <HistoryPanel />
         </TabErrorBoundary>
       </Tabs.Content>
       <Tabs.Content value="tab-2">
-        <TabErrorBoundary activeTab={activeTab}>
+        <TabErrorBoundary activeTab={activeTab} t={t}>
           <ConfigurationPanel
             settings={settings}
             onNavigateToConfig={onNavigateToConfig}
@@ -86,7 +85,7 @@ const AppTabs = ({
         </TabErrorBoundary>
       </Tabs.Content>
       <Tabs.Content value="tab-3">
-        <TabErrorBoundary activeTab={activeTab}>
+        <TabErrorBoundary activeTab={activeTab} t={t}>
           <PaymentActionsPanel
             onNavigateToConfig={onNavigateToConfig}
             settings={settings}
@@ -95,7 +94,7 @@ const AppTabs = ({
         </TabErrorBoundary>
       </Tabs.Content>
       <Tabs.Content value="tab-4">
-        <TabErrorBoundary activeTab={activeTab}>
+        <TabErrorBoundary activeTab={activeTab} t={t}>
           <DocsPanel settings={settings} paymentActions={paymentActions} />
         </TabErrorBoundary>
       </Tabs.Content>

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

@@ -1,8 +1,9 @@
-import * as React from '@strapi/strapi/admin';
+import * as React from "react";
 import ApplePayButton from "apple-pay-button";
 import { Box, Typography, Alert } from "@strapi/design-system";
 import { getFetchClient } from "@strapi/strapi/admin";
 import pluginId from "../../../pluginId";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 
 const ApplePayBtn = ({
   amount,
@@ -12,6 +13,7 @@ const ApplePayBtn = ({
   buttonStyle = "black",
   type = "pay",
 }) => {
+  const { t } = usePluginTranslations();
   const handleEventsForApplePay = (session, amountValue, currencyCode) => {
     session.onvalidatemerchant = async (event) => {
       try {
@@ -284,12 +286,9 @@ const ApplePayBtn = ({
   if (!settings?.mid) {
     return (
       <Box>
-        <Alert closeLabel="Close" title="Merchant ID Missing" variant="warning">
+        <Alert closeLabel="Close" title={t("applePayBtn.merchantIdMissingTitle", "Merchant ID Missing")} variant="warning">
           <Typography variant="pi" marginTop={2}>
-            Merchant ID is not configured. Please set Merchant ID in plugin
-            settings. You can find your merchantIdentifier in PMI at:
-            CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Payment type
-            configuration tab.
+            {t("applePayBtn.merchantIdMissing", "Merchant ID is not configured. Please set Merchant ID in plugin settings.")} {t("applePayBtn.merchantIdHint", "You can find your merchantIdentifier in PMI at: CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Payment type configuration tab.")}
           </Typography>
         </Alert>
       </Box>
@@ -301,17 +300,14 @@ const ApplePayBtn = ({
       <Box>
         <Alert
           closeLabel="Close"
-          title=" Apple Pay Only Works in Live Mode"
+          title={t("applePayBtn.liveModeOnly", "Apple Pay Only Works in Live Mode")}
           variant="danger"
         >
           <Typography variant="pi" marginTop={2}>
-            <strong>Apple Pay is only supported in live mode.</strong> According
-            to Payone documentation, test mode support will be available at a
-            later time.
+            {t("applePayBtn.liveModeMessage", "Apple Pay is only supported in live mode. According to Payone documentation, test mode support will be available at a later time.")}
           </Typography>
           <Typography variant="pi" style={{ marginLeft: "8px" }}>
-            Please switch to <strong>live mode</strong> in plugin settings to
-            use Apple Pay.
+            {t("applePayBtn.switchToLive", "Please switch to live mode in plugin settings to use Apple Pay.")}
           </Typography>
         </Alert>
       </Box>
@@ -350,8 +346,7 @@ const ApplePayBtn = ({
         textColor="neutral600"
         style={{ fontSize: "12px", marginTop: "8px", marginRight: "6px" }}
       >
-        Apple Pay does NOT work on localhost. Use a production domain with
-        HTTPS.
+        {t("applePayBtn.noLocalhost", "Apple Pay does NOT work on localhost. Use a production domain with HTTPS.")}
       </Typography>
     </Box>
   );

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

@@ -7,6 +7,7 @@ import {
   Divider,
 } from "@strapi/design-system";
 import RenderInput from "./RenderInput";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 import {
   APPLE_PAY_SUPPORTED_COUNTRIES,
   APPLE_PAY_SUPPORTED_NETWORKS,
@@ -19,6 +20,7 @@ import {
 } from "../../utils/applePayConstants";
 
 const ApplePayConfig = ({ config, onConfigChange, settings }) => {
+  const { t } = usePluginTranslations();
   const {
     countryCode = DEFAULT_APPLE_PAY_CONFIG.countryCode,
     currencyCode = DEFAULT_APPLE_PAY_CONFIG.currencyCode,
@@ -94,7 +96,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
           <Box>
             <RenderInput
               name="countryCode"
-              label="Country Code"
+              label={t("applePayConfig.countryCode", "Country Code")}
               value={countryCode || ""}
               onChange={(e) => {
                 const value = e.target?.value || e;
@@ -102,7 +104,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
               }}
               inputType="select"
               required
-              tooltipContent="Select the country where your business operates"
+              tooltipContent={t("applePayConfig.countryTooltip", "Select the country where your business operates")}
               options={APPLE_PAY_SUPPORTED_COUNTRIES.map((country) => ({
                 value: country.code,
                 label: `${country.name} (${country.code})`,
@@ -113,7 +115,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
           <Box>
             <RenderInput
               name="currencyCode"
-              label="Currency Code"
+              label={t("applePayConfig.currencyCode", "Currency Code")}
               value={currencyCode || ""}
               onChange={(e) => {
                 const value = e.target?.value || e;
@@ -121,7 +123,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
               }}
               inputType="select"
               required
-              tooltipContent={`Supported currencies for ${countryCode}`}
+              tooltipContent={t("applePayConfig.currencyTooltip", "Supported currencies for {{country}}", { country: countryCode })}
               options={supportedCurrencies.map((currency) => ({
                 value: currency.code,
                 label: `${currency.name} (${currency.code}) ${currency.symbol}`,
@@ -133,22 +135,21 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
                 textColor="danger600"
                 style={{ marginTop: "4px" }}
               >
-                No supported currencies for this country. Please select a
-                different country.
+                {t("applePayConfig.noCurrencies", "No supported currencies for this country. Please select a different country.")}
               </Typography>
             )}
           </Box>
           <Box>
             <RenderInput
               name="buttonStyle"
-              label="Button Style"
+              label={t("applePayConfig.buttonStyle", "Button Style")}
               value={buttonStyle || ""}
               onChange={(e) => {
                 const value = e.target?.value || e;
                 onConfigChange({ ...config, buttonStyle: value });
               }}
               inputType="select"
-              tooltipContent="Visual style of the Apple Pay button"
+              tooltipContent={t("applePayConfig.buttonStyleTooltip", "Visual style of the Apple Pay button")}
               options={APPLE_PAY_BUTTON_STYLES.map((style) => ({
                 value: style.code,
                 label: style.name,
@@ -159,14 +160,14 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
           <Box>
             <RenderInput
               name="buttonType"
-              label="Button Type"
+              label={t("applePayConfig.buttonType", "Button Type")}
               value={buttonType || ""}
               onChange={(e) => {
                 const value = e.target?.value || e;
                 onConfigChange({ ...config, buttonType: value });
               }}
               inputType="select"
-              tooltipContent="Type of action the button represents"
+              tooltipContent={t("applePayConfig.buttonTypeTooltip", "Type of action the button represents")}
               options={APPLE_PAY_BUTTON_TYPES.map((type) => ({
                 value: type.code,
                 label: type.name,
@@ -180,10 +181,10 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
         <Box>
           <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
             <Typography variant="pi" fontWeight="semiBold">
-              Supported Networks
+              {t("applePayConfig.supportedNetworks", "Supported Networks")}
             </Typography>
             <Typography variant="pi" textColor="neutral600">
-              Select payment networks supported in {countryCode}
+              {t("applePayConfig.supportedNetworksHint", "Select payment networks supported in {{country}}", { country: countryCode })}
             </Typography>
           </div>
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
@@ -211,7 +212,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
                         textColor="neutral500"
                         style={{ marginLeft: "8px" }}
                       >
-                        (Not available)
+                        {t("applePayConfig.notAvailable", "(Not available)")}
                       </Typography>
                     )}
                   </Checkbox>
@@ -225,7 +226,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
               textColor="danger600"
               style={{ marginTop: "8px" }}
             >
-              At least one network must be selected
+              {t("applePayConfig.atLeastOneNetwork", "At least one network must be selected")}
             </Typography>
           )}
         </Box>
@@ -240,15 +241,14 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
               fontWeight="semiBold"
               style={{ marginLeft: "2px" }}
             >
-              Merchant Capabilities
+              {t("applePayConfig.merchantCapabilities", "Merchant Capabilities")}
             </Typography>
             <Typography
               variant="pi"
               textColor="neutral600"
               style={{ marginLeft: "2px" }}
             >
-              Select payment capabilities. "3D Secure" is required for most
-              payment methods.
+              {t("applePayConfig.merchantCapabilitiesHint", "Select payment capabilities. \"3D Secure\" is required for most payment methods.")}
             </Typography>
           </div>
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
@@ -281,8 +281,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
               textColor="danger600"
               style={{ marginTop: "8px" }}
             >
-              At least one capability must be selected. "supports3DS" is
-              recommended.
+              {t("applePayConfig.atLeastOneCapability", "At least one capability must be selected. \"supports3DS\" is recommended.")}
             </Typography>
           )}
         </Box>
@@ -302,15 +301,15 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
           gap={4}
         >
           <Typography variant="pi" fontWeight="bold" textColor="warning700">
-            ⚠️ Domain Verification File Required
+            ⚠️ {t("applePayConfig.domainVerificationTitle", "Domain Verification File Required")}
           </Typography>
           <Typography variant="pi" textColor="neutral700">
-            <strong>Download the Apple Pay domain verification file</strong>{" "}
-            from your Payone documentation:
+            <strong>{t("applePayConfig.domainVerificationDesc", "Download the Apple Pay domain verification file")}</strong>{" "}
+            {t("applePayConfig.domainVerificationDescSuffix", "from your Payone documentation:")}
           </Typography>
           <Box padding={2} background="neutral0" borderRadius="4px">
             <Typography variant="pi" style={{ fontSize: "12px" }}>
-              <strong>Download URL:</strong>{" "}
+              <strong>{t("applePayConfig.downloadUrl", "Download URL:")}</strong>{" "}
               <a
                 href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
                 target="_blank"
@@ -322,7 +321,7 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
             </Typography>
           </Box>
           <Typography variant="pi" textColor="neutral700">
-            <strong>Place the file at:</strong>
+            <strong>{t("applePayConfig.placeFileAt", "Place the file at:")}</strong>
           </Typography>
           <Box padding={2} background="neutral0" borderRadius="4px">
             <Typography
@@ -341,13 +340,13 @@ const ApplePayConfig = ({ config, onConfigChange, settings }) => {
             </Typography>
           </Box>
           <Typography variant="pi" textColor="neutral700" marginTop={2}>
-            The file must be accessible at:{" "}
+            {t("applePayConfig.fileMustBeAccessible", "The file must be accessible at:")}{" "}
             <code>
               https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
             </code>
           </Typography>
           <Typography variant="pi" fontWeight="bold" textColor="danger600">
-            Without this file, Apple Pay will NOT work on your domain!
+            {t("applePayConfig.withoutFileWarning", "Without this file, Apple Pay will NOT work on your domain!")}
           </Typography>
         </Flex>
       </Flex>

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

@@ -9,8 +9,10 @@ import {
 } from "@strapi/design-system";
 import { Check } from "@strapi/icons";
 import ApplePayConfig from "./ApplePayConfig";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 
 const ApplePayConfigPanel = ({ settings, onInputChange, isSaving, onSave }) => {
+  const { t } = usePluginTranslations();
   const [applePayConfig, setApplePayConfig] = React.useState(
     settings?.applePayConfig || {}
   );
@@ -36,9 +38,7 @@ const ApplePayConfigPanel = ({ settings, onInputChange, isSaving, onSave }) => {
 
       <Flex direction="column" gap={4} alignItems="stretch" paddingTop={4}>
         <Typography variant="sigma" textColor="neutral600">
-          Note: Apple Pay configuration is used for Apple Pay payment requests.
-          Make sure to configure the correct merchant identifier, supported
-          networks, and capabilities for your region.
+          {t("applePayConfigPanel.note", "Note: Apple Pay configuration is used for Apple Pay payment requests. Make sure to configure the correct merchant identifier, supported networks, and capabilities for your region.")}
         </Typography>
         <Button
           loading={isSaving}
@@ -48,7 +48,7 @@ const ApplePayConfigPanel = ({ settings, onInputChange, isSaving, onSave }) => {
           variant="default"
           maxWidth={"220px"}
         >
-          Save Configuration
+          {t("applePayConfigPanel.save", "Save Configuration")}
         </Button>
       </Flex>
     </Flex>

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { Box, Flex, Typography, Accordion, Link } from "@strapi/design-system";
-import CodeBlock from "./docs/CodeBlock";
+import { Box, Flex, Typography, Accordion } from "@strapi/design-system";
 import TableOfContents from "./docs/TableOfContents";
 import BaseUrlSection from "./docs/BaseUrlSection";
 import PaymentMethodsSection from "./docs/PaymentMethodsSection";
@@ -11,29 +10,18 @@ import ApplePaySection from "./docs/ApplePaySection";
 import ThreeDSecureSection from "./docs/ThreeDSecureSection";
 import CaptureRefundSection from "./docs/CaptureRefundSection";
 import TestCredentialsSection from "./docs/TestCredentialsSection";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 
 const DocsPanel = ({ settings, paymentActions }) => {
+  const { t } = usePluginTranslations();
   return (
     <Flex direction="column" alignItems="stretch" gap={6} padding={8}>
         <Box>
-          <Typography
-            variant="beta"
-            as="h2"
-            fontWeight="bold"
-            className="payment-title"
-          style={{ fontSize: "20px", marginBottom: "4px" }}
-          >
-            Payone Provider Plugin - Frontend Integration Guide
+          <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: "20px", marginBottom: "4px" }}>
+            {t("docs.title", "Payone Provider Plugin - Frontend Integration Guide")}
           </Typography>
-          <Typography
-            variant="pi"
-            textColor="neutral600"
-            marginTop={2}
-            className="payment-subtitle"
-          style={{ fontSize: "14px" }}
-          >
-          Complete documentation for integrating Payone payment methods in your
-          frontend application
+          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: "14px" }}>
+            {t("docs.subtitle", "Complete documentation for integrating Payone payment methods in your frontend application")}
           </Typography>
         </Box>
 
@@ -55,8 +43,7 @@ const DocsPanel = ({ settings, paymentActions }) => {
 
         <Box paddingTop={4}>
           <Typography variant="sigma" textColor="neutral600">
-            For more information, visit the Payone documentation or contact your
-            Payone account manager.
+            {t("docs.moreInfo", "For more information, visit the Payone documentation or contact your Payone account manager.")}
           </Typography>
         </Box>
       </Flex>

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

@@ -1,6 +1,7 @@
-import * as React from "@strapi/strapi/admin";
+import * as React from "react";
 import { Box, Flex, Typography, Checkbox } from "@strapi/design-system";
 import RenderInput from "./RenderInput";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 import {
   GOOGLE_PAY_SUPPORTED_COUNTRIES,
   GOOGLE_PAY_SUPPORTED_CURRENCIES,
@@ -10,6 +11,7 @@ import {
 } from "../../utils/googlePayConstants";
 
 const GooglePayConfig = ({ config, onConfigChange }) => {
+  const { t } = usePluginTranslations();
   const {
     countryCode = DEFAULT_GOOGLE_PAY_CONFIG.countryCode,
     currencyCode = DEFAULT_GOOGLE_PAY_CONFIG.currencyCode,
@@ -76,7 +78,7 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
         <Box>
           <RenderInput
             name="countryCode"
-            label="Country Code"
+            label={t("googlePayConfig.countryCode", "Country Code")}
             value={countryCode || ""}
             onChange={(e) => {
               const value = e.target?.value || e;
@@ -84,7 +86,7 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
             }}
             inputType="select"
             required
-            tooltipContent="Select the country where your business operates"
+            tooltipContent={t("googlePayConfig.countryTooltip", "Select the country where your business operates")}
             options={GOOGLE_PAY_SUPPORTED_COUNTRIES.map((country) => ({
               value: country.code,
               label: `${country.name} (${country.code})`,
@@ -95,7 +97,7 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
         <Box>
           <RenderInput
             name="currencyCode"
-            label="Currency Code"
+            label={t("googlePayConfig.currencyCode", "Currency Code")}
             value={currencyCode || ""}
             onChange={(e) => {
               const value = e.target?.value || e;
@@ -103,7 +105,7 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
             }}
             inputType="select"
             required
-            tooltipContent="Select the currency for transactions"
+            tooltipContent={t("googlePayConfig.currencyTooltip", "Select the currency for transactions")}
             options={GOOGLE_PAY_SUPPORTED_CURRENCIES.map((currency) => ({
               value: currency.code,
               label: `${currency.name} (${currency.code}) ${currency.symbol}`,
@@ -113,14 +115,14 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
         <Box>
           <RenderInput
             name="merchantName"
-            label="Merchant Name"
+            label={t("googlePayConfig.merchantName", "Merchant Name")}
             value={merchantName || ""}
             onChange={(e) =>
               onConfigChange({ ...config, merchantName: e.target.value })
             }
             inputType="textInput"
-            placeholder="Your Store Name"
-            tooltipContent="The name of your business as it will appear in Google Pay"
+            placeholder={t("googlePayConfig.merchantNamePlaceholder", "Your Store Name")}
+            tooltipContent={t("googlePayConfig.merchantNameTooltip", "The name of your business as it will appear in Google Pay")}
           />
         </Box>
       </Box>
@@ -129,10 +131,10 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
       <Box width="100%" marginBottom={4} marginTop={4}>
         <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
           <Typography variant="pi" fontWeight="semiBold">
-            Allowed Card Networks
+            {t("googlePayConfig.allowedNetworks", "Allowed Card Networks")}
           </Typography>
           <Typography variant="pi" textColor="neutral600">
-            Select payment card networks to accept
+            {t("googlePayConfig.allowedNetworksHint", "Select payment card networks to accept")}
           </Typography>
         </div>
         <Flex
@@ -165,7 +167,7 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
             textColor="danger600"
             style={{ marginTop: "8px" }}
           >
-            At least one card network must be selected
+            {t("googlePayConfig.atLeastOneNetwork", "At least one card network must be selected")}
           </Typography>
         )}
       </Box>
@@ -174,10 +176,10 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
       <Box width="100%">
         <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
           <Typography variant="pi" fontWeight="semiBold">
-            Allowed Authentication Methods
+            {t("googlePayConfig.allowedAuthMethods", "Allowed Authentication Methods")}
           </Typography>
           <Typography variant="pi" textColor="neutral600">
-            Select authentication methods for card payments
+            {t("googlePayConfig.allowedAuthMethodsHint", "Select authentication methods for card payments")}
           </Typography>
         </div>
         <Flex
@@ -210,7 +212,7 @@ const GooglePayConfig = ({ config, onConfigChange }) => {
             textColor="danger600"
             style={{ marginTop: "8px" }}
           >
-            At least one authentication method must be selected
+            {t("googlePayConfig.atLeastOneAuth", "At least one authentication method must be selected")}
           </Typography>
         )}
       </Box>