strapi-plugin-payone-provider 1.1.3 → 1.2.4

package/admin/src/pages/App/components/paymentActions/AuthorizationForm.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../GooglePaybutton";
+
+const AuthorizationForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  authReference,
+  setAuthReference,
+  isProcessingPayment,
+  onAuthorization,
+  paymentMethod,
+  settings,
+  googlePayToken,
+  setGooglePayToken
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onAuthorization(token);
+  };
+
+  const handleGooglePayError = (error) => {
+    if (onError) {
+      onError(error);
+    }
+  };
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <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>
+
+      <Flex gap={4} wrap="wrap">
+        <TextInput
+          label="Amount (in cents) *"
+          name="authAmount"
+          value={paymentAmount}
+          onChange={(e) => setPaymentAmount(e.target.value)}
+          placeholder="Enter amount (e.g., 1000 for €10.00)"
+          hint="Amount in cents (e.g., 1000 = €10.00)"
+          required
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+
+        <TextInput
+          label="Reference *"
+          name="authReference"
+          value={authReference}
+          onChange={(e) => setAuthReference(e.target.value)}
+          placeholder="Enter reference"
+          hint="Reference for this transaction"
+          required
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+      </Flex>
+
+      {paymentMethod === "gpp" ? (
+        <GooglePayButton
+          amount={paymentAmount}
+          currency="EUR"
+          onTokenReceived={handleGooglePayToken}
+          onError={handleGooglePayError}
+          settings={settings}
+        />
+      ) : (
+        <Button
+          variant="default"
+          onClick={onAuthorization}
+          loading={isProcessingPayment}
+          startIcon={<Play />}
+          className="payment-button payment-button-primary"
+          disabled={!paymentAmount.trim() || !authReference.trim()}
+        >
+          Process Authorization
+        </Button>
+      )}
+    </Flex>
+  );
+};
+
+export default AuthorizationForm;
+

package/admin/src/pages/App/components/paymentActions/CaptureForm.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+
+const CaptureForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  captureTxid,
+  setCaptureTxid,
+  isProcessingPayment,
+  onCapture
+}) => {
+  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>
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          Capture a previously authorized amount. Note: Reference parameter is
+          not supported by Payone capture.
+        </Typography>
+      </Flex>
+
+      <Flex gap={4} wrap="wrap">
+        <TextInput
+          label="Transaction ID"
+          name="captureTxid"
+          value={captureTxid}
+          onChange={(e) => setCaptureTxid(e.target.value)}
+          placeholder="Enter TxId from preauthorization"
+          hint="Transaction ID from a previous preauthorization"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+
+        <TextInput
+          label="Amount (in cents)"
+          name="captureAmount"
+          value={paymentAmount}
+          onChange={(e) => setPaymentAmount(e.target.value)}
+          placeholder="1000"
+          hint="Amount in cents to capture"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+      </Flex>
+
+      <Button
+        variant="default"
+        onClick={onCapture}
+        loading={isProcessingPayment}
+        startIcon={<Play />}
+        className="payment-button payment-button-primary"
+        disabled={!captureTxid.trim() || !paymentAmount.trim()}
+      >
+        Process Capture
+      </Button>
+    </Flex>
+  );
+};
+
+export default CaptureForm;
+

package/admin/src/pages/App/components/paymentActions/PaymentMethodSelector.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, Flex, Select, Option } from "@strapi/design-system";
+import {
+  getPaymentMethodOptions,
+  supportsCaptureMode,
+  getCaptureModeOptions,
+  getPaymentMethodDisplayName
+} from "../../../utils/paymentUtils";
+
+const PaymentMethodSelector = ({
+  paymentMethod,
+  setPaymentMethod,
+  captureMode,
+  setCaptureMode
+}) => {
+  return (
+    <Box>
+      <Flex direction="column" alignItems="stretch" gap={4}>
+        <Select
+          label="Select Payment Method"
+          name="paymentMethod"
+          value={paymentMethod}
+          onChange={(value) => setPaymentMethod(value)}
+          hint={`Current: ${getPaymentMethodDisplayName(paymentMethod)}`}
+        >
+          {getPaymentMethodOptions().map((option) => (
+            <Option key={option.value} value={option.value}>
+              {option.label}
+            </Option>
+          ))}
+        </Select>
+        {supportsCaptureMode(paymentMethod) && (
+          <Select
+            label="Capture Mode"
+            name="captureMode"
+            value={captureMode}
+            onChange={(value) => setCaptureMode(value)}
+            hint="Select capture mode for wallet payments"
+          >
+            {getCaptureModeOptions().map((option) => (
+              <Option key={option.value} value={option.value}>
+                {option.label}
+              </Option>
+            ))}
+          </Select>
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
+export default PaymentMethodSelector;

package/admin/src/pages/App/components/paymentActions/PaymentResult.js

@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  Box,
+  Card,
+  CardBody,
+  Divider,
+  Flex,
+  Stack,
+  Typography,
+  Alert
+} from "@strapi/design-system";
+import StatusBadge from "../StatusBadge";
+import { formatTransactionData } from "../../../utils/formatTransactionData";
+
+const PaymentResult = ({ paymentError, paymentResult }) => {
+  if (!paymentError && !paymentResult) {
+    return null;
+  }
+
+  return (
+    <>
+      {paymentError && (
+        <Alert 
+          variant="danger" 
+          title="Error"
+          className="payment-alert"
+        >
+          {paymentError}
+        </Alert>
+      )}
+
+      {paymentResult && (
+        <Card className="payment-result-card">
+          <CardBody>
+            <Stack spacing={4}>
+              <Flex justifyContent="space-between" alignItems="center">
+                <Typography variant="delta" as="h3" className="payment-section-title">
+                  Payment Result
+                </Typography>
+                {paymentResult.Status && (
+                  <StatusBadge status={paymentResult.Status} />
+                )}
+              </Flex>
+
+              <hr className="payment-divider" style={{ margin: '16px 0' }} />
+
+              <Box>
+                <Stack spacing={3}>
+                  {formatTransactionData(paymentResult).map((item, index) => (
+                    <Flex
+                      key={index}
+                      justifyContent="space-between"
+                      alignItems="start"
+                      style={{
+                        padding: '8px 0',
+                        borderBottom: index < formatTransactionData(paymentResult).length - 1 ? '1px solid #e8e8ea' : 'none'
+                      }}
+                    >
+                      <Typography
+                        variant="pi"
+                        textColor="neutral600"
+                        style={{ minWidth: "200px", fontWeight: '500' }}
+                      >
+                        {item.key}:
+                      </Typography>
+                      <Typography
+                        variant="pi"
+                        style={{ flex: 1, textAlign: "right", fontWeight: '400' }}
+                      >
+                        {item.value}
+                      </Typography>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            </Stack>
+          </CardBody>
+        </Card>
+      )}
+    </>
+  );
+};
+
+export default PaymentResult;
+

package/admin/src/pages/App/components/paymentActions/PreauthorizationForm.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../GooglePaybutton";
+
+const PreauthorizationForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  preauthReference,
+  setPreauthReference,
+  isProcessingPayment,
+  onPreauthorization,
+  paymentMethod,
+  settings,
+  googlePayToken,
+  setGooglePayToken
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onPreauthorization(token);
+  };
+
+  const handleGooglePayError = (error) => {
+    if (onError) {
+      onError(error);
+    }
+  };
+  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>
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          Reserve an amount on a credit card without capturing it immediately.
+        </Typography>
+      </Flex>
+
+      <Flex gap={4} wrap="wrap">
+        <TextInput
+          label="Amount (in cents) *"
+          name="paymentAmount"
+          value={paymentAmount}
+          onChange={(e) => setPaymentAmount(e.target.value)}
+          placeholder="Enter amount (e.g., 1000 for €10.00)"
+          hint="Amount in cents (e.g., 1000 = €10.00)"
+          required
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+
+        <TextInput
+          label="Reference *"
+          name="preauthReference"
+          value={preauthReference}
+          onChange={(e) => setPreauthReference(e.target.value)}
+          placeholder="Enter reference"
+          hint="Reference for this transaction"
+          required
+          className="payment-input"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+      </Flex>
+
+      {paymentMethod === "gpp" ? (
+        <GooglePayButton
+          amount={paymentAmount}
+          currency="EUR"
+          onTokenReceived={handleGooglePayToken}
+          onError={handleGooglePayError}
+          settings={settings}
+        />
+      ) : (
+        <Button
+          variant="default"
+          onClick={onPreauthorization}
+          loading={isProcessingPayment}
+          startIcon={<Play />}
+          className="payment-button payment-button-primary"
+          disabled={!paymentAmount.trim() || !preauthReference.trim()}
+        >
+          Process Preauthorization
+        </Button>
+      )}
+    </Flex>
+  );
+};
+
+export default PreauthorizationForm;
+

package/admin/src/pages/App/components/paymentActions/RefundForm.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+
+const RefundForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  refundTxid,
+  setRefundTxid,
+  refundSequenceNumber,
+  setRefundSequenceNumber,
+  refundReference,
+  setRefundReference,
+  isProcessingPayment,
+  onRefund
+}) => {
+  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>
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          Refund a previously captured amount.
+        </Typography>
+      </Flex>
+
+      <Flex gap={4} wrap="wrap">
+        <TextInput
+          label="Transaction ID"
+          name="refundTxid"
+          value={refundTxid}
+          onChange={(e) => setRefundTxid(e.target.value)}
+          placeholder="Enter TxId from capture"
+          hint="Transaction ID from a previous capture"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+
+        <TextInput
+          label="Sequence Number"
+          name="refundSequenceNumber"
+          value={refundSequenceNumber}
+          onChange={(e) => setRefundSequenceNumber(e.target.value)}
+          placeholder="2"
+          hint="Sequence number for this refund (1-127) and by default for first 2"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+
+        <TextInput
+          label="Amount (in cents)"
+          name="refundAmount"
+          value={paymentAmount}
+          onChange={(e) => setPaymentAmount(e.target.value)}
+          placeholder="1000"
+          hint="Amount in cents to refund (will be negative)"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+
+        <TextInput
+          label="Reference"
+          name="refundReference"
+          value={refundReference}
+          onChange={(e) => setRefundReference(e.target.value)}
+          placeholder="Optional reference"
+          hint="Optional reference for this refund"
+          className="payment-input"
+          style={{ flex: 1, minWidth: "200px" }}
+        />
+      </Flex>
+
+      <Button
+        variant="default"
+        onClick={onRefund}
+        loading={isProcessingPayment}
+        startIcon={<Play />}
+        className="payment-button payment-button-primary"
+        disabled={!refundTxid.trim() || !paymentAmount.trim()}
+      >
+        Process Refund
+      </Button>
+    </Flex>
+  );
+};
+
+export default RefundForm;
+