strapi-plugin-payone-provider 4.6.10 → 4.6.12

package/admin/src/pages/App/components/paymentActions/authorization/AuthorizationForm.jsx

@@ -0,0 +1,157 @@
+import { Box, Flex } from "@strapi/design-system";
+import AuthorizationFormHeader from "./AuthorizationFormHeader";
+import AuthorizationFormFields from "./AuthorizationFormFields";
+import AuthorizationPaymentButtons from "./AuthorizationPaymentButtons";
+import CardDetailsInput from "../CardDetailsInput";
+
+const AuthorizationForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  authReference,
+  setAuthReference,
+  isProcessingPayment,
+  onAuthorization,
+  paymentMethod,
+  settings,
+  setGooglePayToken,
+  applePayToken,
+  setApplePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2,
+  firstname,
+  setFirstname,
+  lastname,
+  setLastname,
+  email,
+  setEmail,
+  telephonenumber,
+  setTelephonenumber,
+  gender,
+  setGender,
+  salutation,
+  setSalutation,
+  country,
+  setCountry,
+  currency,
+  setCurrency,
+  city,
+  setCity,
+  street,
+  setStreet,
+  zip,
+  setZip,
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onAuthorization(token);
+  };
+
+  const handleGooglePayError = (error) => {
+    console.error("[AuthorizationForm] Google Pay error:", error);
+  };
+
+  const handleApplePayToken = async (token, paymentData) => {
+    if (!token) {
+      return Promise.reject(new Error("Token is missing"));
+    }
+
+    setApplePayToken(token);
+
+    return Promise.resolve({
+      success: true,
+      message:
+        "Token received successfully. Please click 'Process Authorization' to complete the payment.",
+    });
+  };
+
+  const handleApplePayError = (error) => {
+    console.error("[AuthorizationForm] Apple Pay error:", error);
+  };
+
+  const isCardDetailsValid =
+    !!cardtype && !!cardpan && !!cardexpiredate && !!cardcvc2;
+
+  const isDisabled =
+    !paymentAmount.trim() ||
+    (paymentMethod === "cc" &&
+      settings?.enable3DSecure !== false &&
+      !isCardDetailsValid) ||
+    (paymentMethod === "apl" && !applePayToken);
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <AuthorizationFormHeader />
+
+      <AuthorizationFormFields
+        paymentAmount={paymentAmount}
+        setPaymentAmount={setPaymentAmount}
+        authReference={authReference}
+        setAuthReference={setAuthReference}
+        firstname={firstname}
+        setFirstname={setFirstname}
+        lastname={lastname}
+        setLastname={setLastname}
+        email={email}
+        setEmail={setEmail}
+        telephonenumber={telephonenumber}
+        setTelephonenumber={setTelephonenumber}
+        gender={gender}
+        setGender={setGender}
+        salutation={salutation}
+        setSalutation={setSalutation}
+        country={country}
+        setCountry={setCountry}
+        currency={currency}
+        setCurrency={setCurrency}
+        city={city}
+        setCity={setCity}
+        street={street}
+        setStreet={setStreet}
+        zip={zip}
+        setZip={setZip}
+        paymentMethod={paymentMethod}
+      />
+
+      {paymentMethod === "cc" && settings?.enable3DSecure && (
+        <Box marginTop={4}>
+          <CardDetailsInput
+            cardtype={cardtype}
+            setCardtype={setCardtype}
+            cardpan={cardpan}
+            setCardpan={setCardpan}
+            cardexpiredate={cardexpiredate}
+            setCardexpiredate={setCardexpiredate}
+            cardcvc2={cardcvc2}
+            setCardcvc2={setCardcvc2}
+          />
+        </Box>
+      )}
+
+      <AuthorizationPaymentButtons
+        paymentMethod={paymentMethod}
+        paymentAmount={paymentAmount}
+        authReference={authReference}
+        isProcessingPayment={isProcessingPayment}
+        onAuthorization={onAuthorization}
+        settings={settings}
+        handleGooglePayToken={handleGooglePayToken}
+        handleGooglePayError={handleGooglePayError}
+        handleApplePayToken={handleApplePayToken}
+        handleApplePayError={handleApplePayError}
+        applePayToken={applePayToken}
+        isDisabled={isDisabled}
+      />
+    </Flex>
+  );
+};
+
+export default AuthorizationForm;

package/admin/src/pages/App/components/paymentActions/authorization/AuthorizationFormFields.jsx

@@ -0,0 +1,308 @@
+import { Box, Flex, TextInput, Select, Option } from "@strapi/design-system";
+import {
+  getSalutationOptions,
+  getGenderOptions,
+  getCurrencyOptions,
+  getCountryOptions,
+} from "../../../../utils/countryLanguageUtils";
+import InfoTooltip from "../../common/InfoTooltip";
+
+const AuthorizationFormFields = ({
+  paymentAmount,
+  setPaymentAmount,
+  authReference,
+  setAuthReference,
+  firstname,
+  setFirstname,
+  lastname,
+  setLastname,
+  email,
+  setEmail,
+  telephonenumber,
+  setTelephonenumber,
+  gender,
+  setGender,
+  salutation,
+  setSalutation,
+  country,
+  setCountry,
+  currency,
+  setCurrency,
+  city,
+  setCity,
+  street,
+  setStreet,
+  zip,
+  setZip,
+  paymentMethod,
+}) => {
+  const countryOptions = getCountryOptions(paymentMethod);
+  const salutationOptions = getSalutationOptions(country || "US");
+  const genderOptions = getGenderOptions(country || "US");
+  const currencyOptions = getCurrencyOptions();
+
+  return (
+    <Box
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+        gap: "16px",
+      }}
+    >
+      <TextInput
+        label="Amount *"
+        name="authAmount"
+        value={paymentAmount}
+        onChange={(e) => setPaymentAmount(e.target.value)}
+        placeholder="Enter amount (e.g., 1000 for €10.00)"
+        required
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Amount"
+            description="Amount in cents (e.g., 1000 = €10.00)"
+            id="authAmount-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="Reference *"
+        name="authReference"
+        value={authReference}
+        onChange={(e) => setAuthReference(e.target.value)}
+        placeholder="Auto-generated if empty"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Reference"
+            description="Reference will be auto-generated if left empty"
+            id="authReference-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="First Name"
+        name="firstname"
+        value={firstname || ""}
+        onChange={(e) => setFirstname(e.target.value)}
+        placeholder="John"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="First Name"
+            description="Customer first name"
+            id="firstname-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="Last Name"
+        name="lastname"
+        value={lastname || ""}
+        onChange={(e) => setLastname(e.target.value)}
+        placeholder="Doe"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Last Name"
+            description="Customer last name"
+            id="lastname-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="Email"
+        name="email"
+        value={email || ""}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="john.doe@example.com"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Email"
+            description="Customer email address"
+            id="email-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="Phone Number"
+        name="telephonenumber"
+        value={telephonenumber || ""}
+        onChange={(e) => setTelephonenumber(e.target.value)}
+        placeholder="+4917512345678"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Phone Number"
+            description={`Customer phone number. Format should match selected country: ${
+              country || "US"
+            } (e.g., +4917512345678 for Germany, +12125551234 for US)`}
+            id="telephonenumber-tooltip"
+          />
+        }
+      />
+
+      <Select
+        label="Gender"
+        name="gender"
+        value={gender || ""}
+        onChange={(value) => setGender(value)}
+        placeholder="Select gender"
+        labelAction={
+          <InfoTooltip
+            label="Gender"
+            description={`Customer gender. Options depend on selected country: ${
+              country || "US"
+            }`}
+            id="gender-tooltip"
+          />
+        }
+      >
+        <Option value="" multi={false}>
+          Select gender
+        </Option>
+        {genderOptions.map((option) => (
+          <Option key={option.value} value={option.value} multi={false}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+
+      <Select
+        label="Salutation"
+        name="salutation"
+        value={salutation || ""}
+        onChange={(value) => setSalutation(value)}
+        placeholder="Select salutation"
+        labelAction={
+          <InfoTooltip
+            label="Salutation"
+            description={`Customer salutation (e.g., Mr., Mrs., Ms.). Options depend on selected country: ${
+              country || "US"
+            }`}
+            id="salutation-tooltip"
+          />
+        }
+      >
+        <Option value="" multi={false}>
+          Select salutation
+        </Option>
+        {salutationOptions.map((option) => (
+          <Option key={option.value} value={option.value} multi={false}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+
+      <Select
+        label="Country"
+        name="country"
+        value={country || ""}
+        onChange={(value) => setCountry(value)}
+        placeholder="Select country"
+        labelAction={
+          <InfoTooltip
+            label="Country"
+            description="Billing address country. This affects available currencies, phone number formats, and ZIP code formats."
+            id="country-tooltip"
+          />
+        }
+      >
+        <Option value="" multi={false}>
+          Select country
+        </Option>
+        {countryOptions.map((option) => (
+          <Option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            multi={false}
+          >
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+
+      <Select
+        label="Currency"
+        name="currency"
+        value={currency || "EUR"}
+        onChange={(value) => setCurrency(value)}
+        placeholder="Select currency"
+        labelAction={
+          <InfoTooltip
+            label="Currency"
+            description={`Currency code (e.g., EUR, USD, GBP). Should match the selected country: ${
+              country || "US"
+            }`}
+            id="currency-tooltip"
+          />
+        }
+      >
+        {currencyOptions.map((option) => (
+          <Option key={option.value} value={option.value} multi={false}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+
+      <TextInput
+        label="City"
+        name="city"
+        value={city || ""}
+        onChange={(e) => setCity(e.target.value)}
+        placeholder="Berlin"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="City"
+            description={`Billing address city for country: ${country || "US"}`}
+            id="city-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="Street"
+        name="street"
+        value={street || ""}
+        onChange={(e) => setStreet(e.target.value)}
+        placeholder="Main Street 123"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Street"
+            description="Billing address street"
+            id="street-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="ZIP Code"
+        name="zip"
+        value={zip || ""}
+        onChange={(e) => setZip(e.target.value)}
+        placeholder="12345"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="ZIP Code"
+            description={`Billing address ZIP/postal code. Format should match selected country: ${
+              country || "US"
+            } (e.g., 12345 for US, 10115 for Germany)`}
+            id="zip-tooltip"
+          />
+        }
+      />
+    </Box>
+  );
+};
+
+export default AuthorizationFormFields;

package/admin/src/pages/App/components/paymentActions/authorization/AuthorizationFormHeader.jsx

@@ -0,0 +1,27 @@
+import { Flex, Typography } from "@strapi/design-system";
+
+const AuthorizationFormHeader = () => {
+  return (
+    <Flex direction="row" gap={2}>
+      <Typography
+        variant="omega"
+        fontWeight="semiBold"
+        textColor="neutral800"
+        className="payment-form-title"
+      >
+        Authorization
+      </Typography>
+      <Typography
+        variant="pi"
+        textColor="neutral600"
+        className="payment-form-description"
+      >
+        Authorize and capture an amount immediately.
+      </Typography>
+    </Flex>
+  );
+};
+
+export default AuthorizationFormHeader;
+
+

package/admin/src/pages/App/components/paymentActions/authorization/AuthorizationPaymentButtons.jsx

@@ -0,0 +1,93 @@
+import { Box, Button, Typography } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../../GooglePaybutton";
+import ApplePayBtn from "../../ApplePayBtn";
+
+const AuthorizationPaymentButtons = ({
+  paymentMethod,
+  paymentAmount,
+  authReference,
+  isProcessingPayment,
+  onAuthorization,
+  settings,
+  handleGooglePayToken,
+  handleGooglePayError,
+  handleApplePayToken,
+  handleApplePayError,
+  applePayToken,
+  isDisabled,
+}) => {
+  if (paymentMethod === "gpp") {
+    return (
+      <GooglePayButton
+        amount={paymentAmount}
+        currency="EUR"
+        onTokenReceived={handleGooglePayToken}
+        onError={handleGooglePayError}
+        settings={settings}
+      />
+    );
+  }
+
+  if (paymentMethod === "apl") {
+    return (
+      <Box>
+        <ApplePayBtn
+          amount={paymentAmount}
+          onTokenReceived={handleApplePayToken}
+          onError={handleApplePayError}
+          settings={settings}
+        />
+        {applePayToken && (
+          <Box
+            marginTop={3}
+            style={{
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              gap: "8px",
+            }}
+          >
+            <Typography
+              variant="pi"
+              textColor="success600"
+              style={{ marginBottom: "8px", fontWeight: "bold" }}
+            >
+              ✓ Apple Pay token received. You can now process the
+              authorization:
+            </Typography>
+            <Button
+              variant="default"
+              onClick={() => onAuthorization(applePayToken)}
+              loading={isProcessingPayment}
+              startIcon={<Play />}
+              style={{ maxWidth: "200px" }}
+              disabled={!paymentAmount.trim() || !authReference.trim()}
+              className="payment-button payment-button-primary"
+            >
+              Process Authorization
+            </Button>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <Button
+      variant="default"
+      onClick={onAuthorization}
+      loading={isProcessingPayment}
+      startIcon={<Play />}
+      style={{ maxWidth: "200px" }}
+      className="payment-button payment-button-primary"
+      disabled={isDisabled}
+    >
+      Process Authorization
+    </Button>
+  );
+};
+
+export default AuthorizationPaymentButtons;
+