strapi-plugin-payone-provider 5.6.13 → 5.6.14

package/admin/src/pages/App/components/payment-actions/CaptureForm.jsx

@@ -3,27 +3,19 @@ import { Box, Flex, Typography, Button } from "@strapi/design-system";
 import { Play } from "@strapi/icons";
 import RenderInput from "../RenderInput";
 import { getCurrencyOptions } from "../../../utils/countryLanguageUtils";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const CaptureForm = ({ paymentActions }) => {
+  const { t } = usePluginTranslations();
   const currencyOptions = getCurrencyOptions();
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
-        <Typography
-          variant="omega"
-          fontWeight="semiBold"
-          textColor="neutral800"
-          className="payment-form-title"
-        >
-          Capture
+        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+          {t("capture.title", "Capture")}
         </Typography>
-        <Typography
-          variant="pi"
-          textColor="neutral600"
-          className="payment-form-description"
-        >
-          Capture a previously authorized amount. Note: Reference parameter is
-          not supported by Payone capture.
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          {t("capture.description", "Capture a previously preauthorized amount.")}
         </Typography>
       </Flex>
 
@@ -36,20 +28,20 @@ const CaptureForm = ({ paymentActions }) => {
       >
         <RenderInput
           name="captureTxid"
-          label="Transaction ID *"
+          label={t("common.transactionId", "Transaction ID *")}
           value={paymentActions.paymentState.captureTxid || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("captureTxid", e.target.value)
           }
           inputType="textInput"
-          placeholder="Enter TxId from preauthorization"
+          placeholder={t("capture.placeholderTxid", "Enter TxId from preauthorization")}
           required
-          tooltipContent="Transaction ID from a previous preauthorization"
+          tooltipContent={t("capture.tooltipTxid", "Transaction ID from a previous preauthorization")}
         />
 
         <RenderInput
           name="captureAmount"
-          label="Amount *"
+          label={t("common.amount", "Amount *")}
           value={paymentActions.paymentState.paymentAmount || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("paymentAmount", e.target.value)
@@ -57,12 +49,12 @@ const CaptureForm = ({ paymentActions }) => {
           inputType="textInput"
           placeholder="1000"
           required
-          tooltipContent="Amount in cents to capture"
+          tooltipContent={t("capture.tooltipAmount", "Amount in cents to capture")}
         />
 
         <RenderInput
           name="captureCurrency"
-          label="Currency"
+          label={t("common.currency", "Currency")}
           value={paymentActions.paymentState.captureCurrency || "EUR"}
           onChange={(e) =>
             paymentActions.handleFieldChange("captureCurrency", e.target.value)
@@ -75,7 +67,7 @@ const CaptureForm = ({ paymentActions }) => {
 
         <RenderInput
           name="captureSequenceNumber"
-          label="Sequence Number"
+          label={t("capture.sequenceNumber", "Sequence Number")}
           value={paymentActions.paymentState.captureSequenceNumber || "1"}
           onChange={(e) =>
             paymentActions.handleFieldChange(
@@ -85,7 +77,7 @@ const CaptureForm = ({ paymentActions }) => {
           }
           inputType="textInput"
           placeholder="1"
-          tooltipContent="Sequence number for this capture (1-127), default is 1"
+          tooltipContent={t("capture.tooltipSequence", "Sequence number for this capture (1-127), default is 1")}
         />
 
         {["wlt", "gpp", "apl"].includes(
@@ -119,7 +111,7 @@ const CaptureForm = ({ paymentActions }) => {
           !paymentActions.paymentState.paymentAmount?.trim()
         }
       >
-        Process Capture
+        {t("capture.submit", "Capture")}
       </Button>
     </Flex>
   );

package/admin/src/pages/App/components/payment-actions/CardDetailsInput.jsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Box, Flex, Typography, Link } from "@strapi/design-system";
 import RenderInput from "../RenderInput";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const TEST_3DS_CARDS = [
   {
@@ -31,6 +32,7 @@ const CardDetailsInput = ({
   cardcvc2,
   setCardcvc2,
 }) => {
+  const { t } = usePluginTranslations();
   const [selectedTestCard, setSelectedTestCard] = React.useState("");
   const isUpdatingFromTestCard = React.useRef(false);
 
@@ -81,17 +83,17 @@ const CardDetailsInput = ({
         <Flex direction="row" gap={2} alignItems="flex-start">
           <RenderInput
             name="testCard"
-            label="3D Secure Test Cards"
+            label={t("card.testCards", "3D Secure Test Cards")}
             value={selectedTestCard || ""}
             onChange={(e) => {
               const value = e.target?.value || e;
               handleTestCardSelect(value);
             }}
             inputType="select"
-            placeholder="Select a 3DS test card to auto-fill"
-            tooltipContent="These cards will trigger 3DS authentication redirect. Password: 12345"
+            placeholder={t("card.selectTestCard", "Select a 3DS test card to auto-fill")}
+            tooltipContent={t("card.testCardsTooltip", "These cards will trigger 3DS authentication redirect. Password: 12345")}
             options={[
-              { value: "", label: "-- Select a test card --" },
+              { value: "", label: t("card.selectTestCardOption", "-- Select a test card --") },
               ...TEST_3DS_CARDS.map((card, index) => ({
                 value: `${card.cardtype}-${card.cardpan}`,
                 label: `${card.name} - ${card.description}`,
@@ -103,7 +105,7 @@ const CardDetailsInput = ({
         <Flex gap={4} wrap="wrap" alignItems="flex-start">
           <RenderInput
             name="cardtype"
-            label="Card Type *"
+            label={t("card.cardType", "Card Type *")}
             value={cardtype || ""}
             onChange={(e) => {
               const value = e.target?.value || e;
@@ -111,7 +113,7 @@ const CardDetailsInput = ({
             }}
             inputType="select"
             required
-            tooltipContent="Select credit card type"
+            tooltipContent={t("card.cardTypeTooltip", "Select credit card type")}
             options={[
               { value: "V", label: "VISA" },
               { value: "M", label: "Mastercard" },
@@ -125,13 +127,13 @@ const CardDetailsInput = ({
 
           <RenderInput
             name="cardpan"
-            label="Card Number (PAN) *"
+            label={t("card.cardNumber", "Card Number (PAN) *")}
             value={cardpan || ""}
             onChange={(e) => setCardpan(e.target.value)}
             inputType="textInput"
-            placeholder="Enter card number"
+            placeholder={t("card.cardNumberPlaceholder", "Enter card number")}
             required
-            tooltipContent="Credit card number (PAN)"
+            tooltipContent={t("card.cardNumberTooltip", "Credit card number (PAN)")}
             style={{ flex: 2, minWidth: "300px" }}
           />
         </Flex>
@@ -139,13 +141,13 @@ const CardDetailsInput = ({
         <Flex gap={4} wrap="wrap" alignItems="flex-start">
           <RenderInput
             name="cardexpiredate"
-            label="Expiry Date *"
+            label={t("card.expiryDate", "Expiry Date *")}
             value={cardexpiredate || ""}
             onChange={(e) => setCardexpiredate(e.target.value)}
             inputType="textInput"
-            placeholder="YYMM (e.g., 2512)"
+            placeholder={t("card.expiryPlaceholder", "YYMM (e.g., 2512)")}
             required
-            tooltipContent="Format: YYMM (e.g., 2512 = December 2025)"
+            tooltipContent={t("card.expiryTooltip", "Format: YYMM (e.g., 2512 = December 2025)")}
             type="text"
             maxLength={4}
             style={{ flex: 1, minWidth: "150px" }}
@@ -153,16 +155,16 @@ const CardDetailsInput = ({
 
           <RenderInput
             name="cardcvc2"
-            label="CVC/CVV *"
+            label={t("card.cvc", "CVC/CVV *")}
             value={cardcvc2 || ""}
             onChange={(e) => setCardcvc2(e.target.value)}
             inputType="textInput"
-            placeholder="123 or 1234"
+            placeholder={t("card.cvcPlaceholder", "123 or 1234")}
             required
             tooltipContent={
               cardtype === "A"
-                ? "4 digits for AMEX"
-                : "3 digits for other cards"
+                ? t("card.cvcAmex", "4 digits for AMEX")
+                : t("card.cvcOther", "3 digits for other cards")
             }
             type="text"
             maxLength={4}
@@ -176,14 +178,13 @@ const CardDetailsInput = ({
             textColor="neutral600"
             style={{ textAlign: "left" }}
           >
-            For all test card numbers (positive, negative, frictionless 3DS), 3D
-            Secure test data, and detailed documentation, please refer to the{" "}
+            {t("card.3dsDocLink", "For all test card numbers (positive, negative, frictionless 3DS), 3D Secure test data, and detailed documentation, please refer to the")}{" "}
             <Link
               href="https://docs.payone.com/security-risk-management/3d-secure#/"
               target="_blank"
               rel="noopener noreferrer"
             >
-              Payone 3D Secure Documentation
+              {t("card.3dsDocTitle", "Payone 3D Secure Documentation")}
             </Link>
             .
           </Typography>

package/admin/src/pages/App/components/payment-actions/PaymentActionsPanel.jsx

@@ -7,12 +7,14 @@ import CaptureForm from "./CaptureForm";
 import RefundForm from "./RefundForm";
 import PaymentResult from "./PaymentResult";
 import ApplePayPanel from "./ApplePayPanel";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const PaymentActionsPanel = ({
   onNavigateToConfig,
   settings,
   paymentActions,
 }) => {
+  const { t } = usePluginTranslations();
   const mode = (settings?.settings?.mode || "test").toLowerCase();
   const isLiveMode = mode === "live";
 
@@ -39,10 +41,10 @@ const PaymentActionsPanel = ({
         }}
       >
         <Typography variant="pi" textColor="neutral600">
-          Test Payments are only works in test mode.
+          {t("paymentActions.testModeOnly", "Test Payments are only works in test mode.")}
         </Typography>
         <Typography variant="pi" textColor="neutral600">
-          Please switch to test mode in plugin settings to use test payments.
+          {t("paymentActions.switchToTestMode", "Please switch to test mode in plugin settings to use test payments.")}
         </Typography>
       </Box>
     );
@@ -76,22 +78,11 @@ const PaymentActionsPanel = ({
             gap: "8px",
           }}
         >
-          <Typography
-            variant="beta"
-            as="h2"
-            className="payment-title"
-            style={{ fontSize: "20px", marginBottom: "4px" }}
-          >
-            Payment Actions
+          <Typography variant="beta" as="h2" className="payment-title" style={{ fontSize: "20px", marginBottom: "4px" }}>
+            {t("paymentActions.title", "Payment Actions")}
           </Typography>
-          <Typography
-            variant="pi"
-            textColor="neutral600"
-            className="payment-subtitle"
-            style={{ fontSize: "14px" }}
-          >
-            Process payments, captures, and refunds with multiple payment
-            methods
+          <Typography variant="pi" textColor="neutral600" className="payment-subtitle" style={{ fontSize: "14px" }}>
+            {t("paymentActions.subtitle", "Perform preauthorization, capture, refund and other payment operations.")}
           </Typography>
         </Box>
 
@@ -105,7 +96,7 @@ const PaymentActionsPanel = ({
           {/* Preauthorization */}
           <Accordion.Item value="preauthorization">
             <Accordion.Header>
-              <Accordion.Trigger>Preauthorization</Accordion.Trigger>
+              <Accordion.Trigger>{t("preauth.title", "Preauthorization")}</Accordion.Trigger>
             </Accordion.Header>
             <Accordion.Content>
               <Box
@@ -125,7 +116,7 @@ const PaymentActionsPanel = ({
           {/* Authorization */}
           <Accordion.Item value="authorization">
             <Accordion.Header>
-              <Accordion.Trigger>Authorization</Accordion.Trigger>
+              <Accordion.Trigger>{t("auth.title", "Authorization")}</Accordion.Trigger>
             </Accordion.Header>
             <Accordion.Content>
               <Box className="payment-form-section">
@@ -139,7 +130,7 @@ const PaymentActionsPanel = ({
           {/* Capture */}
           <Accordion.Item value="capture">
             <Accordion.Header>
-              <Accordion.Trigger>Capture</Accordion.Trigger>
+              <Accordion.Trigger>{t("capture.title", "Capture")}</Accordion.Trigger>
             </Accordion.Header>
             <Accordion.Content>
               <Box
@@ -156,7 +147,7 @@ const PaymentActionsPanel = ({
           {/* Refund */}
           <Accordion.Item value="refund">
             <Accordion.Header>
-              <Accordion.Trigger>Refund</Accordion.Trigger>
+              <Accordion.Trigger>{t("refund.title", "Refund")}</Accordion.Trigger>
             </Accordion.Header>
             <Accordion.Content>
               <Box
@@ -181,9 +172,7 @@ const PaymentActionsPanel = ({
 
         <Box paddingTop={4}>
           <Typography variant="sigma" textColor="neutral600">
-            Note: These payment actions allow you to test the complete payment
-            flow: Preauthorization → Capture → Refund. Make sure to use valid
-            Transaction IDs for capture and refund operations.
+            {t("paymentActions.note", "Note: These payment actions allow you to test the complete payment flow: Preauthorization → Capture → Refund. Make sure to use valid Transaction IDs for capture and refund operations.")}
           </Typography>
         </Box>
       </Flex>

package/admin/src/pages/App/components/payment-actions/PaymentMethodSelector.jsx

@@ -1,25 +1,27 @@
-import * as React from "@strapi/strapi/admin";
+import * as React from "react";
 import { Box, Flex, Typography, Link, Alert } from "@strapi/design-system";
 import pluginId from "../../../../pluginId";
 import {
   getPaymentMethodOptions,
+  getPaymentMethodDisplayName,
   supportsCaptureMode,
   getCaptureModeOptions,
-  getPaymentMethodDisplayName,
 } from "../../../utils/paymentUtils";
 import RenderInput from "../RenderInput";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const PaymentMethodSelector = ({
   paymentActions,
   onNavigateToConfig,
   isLiveMode,
 }) => {
+  const { t } = usePluginTranslations();
   return (
     <Box>
       <Flex direction="column" alignItems="stretch" gap={4}>
         <RenderInput
           name="paymentMethod"
-          label="Select Payment Method"
+          label={t("paymentMethodSelector.label", "Select Payment Method")}
           value={paymentActions.paymentState.paymentMethod || ""}
           onChange={(e) => {
             const value = e.target?.value || e;
@@ -30,9 +32,9 @@ const PaymentMethodSelector = ({
             value: option.value,
             label: option.label,
           }))}
-          placeholder="Select payment method"
-          hint={`Current: ${getPaymentMethodDisplayName(paymentActions.paymentState.paymentMethod)}`}
-          tooltipContent="Select the payment method you want to use for this transaction"
+          placeholder={t("paymentMethodSelector.placeholder", "Select payment method")}
+          hint={`${t("paymentMethodSelector.hintCurrent", "Current")}: ${getPaymentMethodDisplayName(paymentActions.paymentState.paymentMethod)}`}
+          tooltipContent={t("paymentMethodSelector.tooltip", "Select the payment method you want to use for this transaction")}
         />
         {paymentActions.paymentState.paymentMethod === "apl" &&
           onNavigateToConfig && (

package/admin/src/pages/App/components/payment-actions/PaymentResult.jsx

@@ -1,19 +1,19 @@
-import * as React from "@strapi/strapi/admin";
+import * as React from "react";
 import { Card, CardBody, Flex, Typography, Alert } from "@strapi/design-system";
 import StatusBadge from "../StatusBadge";
 import { formatTransactionData } from "../../../utils/formatTransactionData";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const PaymentResult = ({ paymentError, paymentResult }) => {
+  const { t } = usePluginTranslations();
   if (!paymentError && !paymentResult) {
     return null;
   }
-  console.log(paymentResult);
-  console.log(paymentError);
 
   return (
     <>
       {paymentError && (
-        <Alert variant="danger" title="Error" className="payment-alert">
+        <Alert variant="danger" title={t("paymentResult.errorTitle", "Error")} className="payment-alert">
           {paymentError}
         </Alert>
       )}
@@ -23,12 +23,8 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
           <CardBody>
             <Flex direction="column" gap={4} alignItems={"stretch"}>
               <Flex direction={"row"} alignItems={"center"} gap={2}>
-                <Typography
-                  variant="delta"
-                  as="h3"
-                  className="payment-section-title"
-                >
-                  Payment Result
+                <Typography variant="delta" as="h3" className="payment-section-title">
+                  {t("paymentResult.title", "Payment Result")}
                 </Typography>
                 {paymentResult?.Status && (
                   <StatusBadge status={paymentResult.Status} />

package/admin/src/pages/App/components/payment-actions/PreauthorizationForm.jsx

@@ -10,8 +10,10 @@ import {
   getCurrencyOptions,
   getCountryOptions,
 } from "../../../utils/countryLanguageUtils";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const PreauthorizationForm = ({ paymentActions, settings }) => {
+  const { t } = usePluginTranslations();
   const handleGooglePayToken = (token) => {
     if (!token) {
       return;
@@ -39,20 +41,11 @@ const PreauthorizationForm = ({ paymentActions, settings }) => {
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
-        <Typography
-          variant="omega"
-          fontWeight="semiBold"
-          textColor="neutral800"
-          className="payment-form-title"
-        >
-          Preauthorization
+        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+          {t("preauth.title", "Preauthorization")}
         </Typography>
-        <Typography
-          variant="pi"
-          textColor="neutral600"
-          className="payment-form-description"
-        >
-          Reserve an amount on a credit card without capturing it immediately.
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          {t("preauth.description", "Reserve an amount on a credit card without capturing it immediately.")}
         </Typography>
       </Flex>
 
@@ -65,20 +58,20 @@ const PreauthorizationForm = ({ paymentActions, settings }) => {
       >
         <RenderInput
           name="paymentAmount"
-          label="Amount *"
+          label={t("preauth.amount", "Amount *")}
           value={paymentActions.paymentState.paymentAmount || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("paymentAmount", e.target.value)
           }
           inputType="textInput"
-          placeholder="Enter amount (e.g., 1000 for €10.00)"
+          placeholder={t("preauth.amountPlaceholder", "Enter amount (e.g., 1000 for €10.00)")}
           required
-          tooltipContent="Amount in cents (e.g., 1000 = €10.00)"
+          tooltipContent={t("preauth.amountTooltip", "Amount in cents (e.g., 1000 = €10.00)")}
         />
 
         <RenderInput
           name="firstname"
-          label="First Name"
+          label={t("preauth.firstName", "First Name")}
           value={paymentActions.paymentState.firstname || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("firstname", e.target.value)
@@ -90,7 +83,7 @@ const PreauthorizationForm = ({ paymentActions, settings }) => {
 
         <RenderInput
           name="lastname"
-          label="Last Name"
+          label={t("preauth.lastName", "Last Name")}
           value={paymentActions.paymentState.lastname || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("lastname", e.target.value)
@@ -270,7 +263,7 @@ const PreauthorizationForm = ({ paymentActions, settings }) => {
             paymentActions.isLiveMode
           }
         >
-          Process Preauthorization
+          {t("preauth.submit", "Preauthorize")}
         </Button>
       )}
     </Flex>

package/admin/src/pages/App/components/payment-actions/RefundForm.jsx

@@ -3,26 +3,19 @@ import { Box, Flex, Typography, Button } from "@strapi/design-system";
 import { Play } from "@strapi/icons";
 import RenderInput from "../RenderInput";
 import { getCurrencyOptions } from "../../../utils/countryLanguageUtils";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const RefundForm = ({ paymentActions }) => {
+  const { t } = usePluginTranslations();
   const currencyOptions = getCurrencyOptions();
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
-        <Typography
-          variant="omega"
-          fontWeight="semiBold"
-          textColor="neutral800"
-          className="payment-form-title"
-        >
-          Refund
+        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+          {t("refund.title", "Refund")}
         </Typography>
-        <Typography
-          variant="pi"
-          textColor="neutral600"
-          className="payment-form-description"
-        >
-          Refund a previously captured amount.
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          {t("refund.description", "Refund a captured payment.")}
         </Typography>
       </Flex>
 
@@ -35,20 +28,20 @@ const RefundForm = ({ paymentActions }) => {
       >
         <RenderInput
           name="refundTxid"
-          label="Transaction ID *"
+          label={t("common.transactionId", "Transaction ID *")}
           value={paymentActions.paymentState.refundTxid || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("refundTxid", e.target.value)
           }
           inputType="textInput"
-          placeholder="Enter TxId from capture"
+          placeholder={t("refund.placeholderTxid", "Enter TxId from capture")}
           required
-          tooltipContent="Transaction ID from a previous capture"
+          tooltipContent={t("refund.tooltipTxid", "Transaction ID from a previous capture")}
         />
 
         <RenderInput
           name="refundSequenceNumber"
-          label="Sequence Number"
+          label={t("refund.sequenceNumber", "Sequence Number")}
           value={paymentActions.paymentState.refundSequenceNumber || "2"}
           onChange={(e) =>
             paymentActions.handleFieldChange(
@@ -58,12 +51,12 @@ const RefundForm = ({ paymentActions }) => {
           }
           inputType="textInput"
           placeholder="2"
-          tooltipContent="Sequence number for this refund (1-127), default is 2 for first refund"
+          tooltipContent={t("refund.tooltipSequence", "Sequence number for this refund (1-127), default is 2 for first refund")}
         />
 
         <RenderInput
           name="refundAmount"
-          label="Amount *"
+          label={t("common.amount", "Amount *")}
           value={paymentActions.paymentState.paymentAmount || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("paymentAmount", e.target.value)
@@ -71,12 +64,12 @@ const RefundForm = ({ paymentActions }) => {
           inputType="textInput"
           placeholder="1000"
           required
-          tooltipContent="Amount in cents to refund (will be negative automatically)"
+          tooltipContent={t("refund.tooltipAmount", "Amount in cents to refund (will be negative automatically)")}
         />
 
         <RenderInput
           name="refundCurrency"
-          label="Currency"
+          label={t("common.currency", "Currency")}
           value={paymentActions.paymentState.refundCurrency || "EUR"}
           onChange={(e) =>
             paymentActions.handleFieldChange("refundCurrency", e.target.value)
@@ -112,7 +105,7 @@ const RefundForm = ({ paymentActions }) => {
           !paymentActions.paymentState.paymentAmount.trim()
         }
       >
-        Process Refund
+        {t("refund.submit", "Refund")}
       </Button>
     </Flex>
   );