strapi-plugin-payone-provider 4.6.9 → 5.6.10

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

@@ -0,0 +1,313 @@
+import * as React from "@strapi/strapi/admin";
+import { Box, Flex, Typography, Link, Alert } from "@strapi/design-system";
+import pluginId from "../../../../pluginId";
+import {
+  getPaymentMethodOptions,
+  supportsCaptureMode,
+  getCaptureModeOptions,
+  getPaymentMethodDisplayName,
+} from "../../../utils/paymentUtils";
+import RenderInput from "../RenderInput";
+
+const PaymentMethodSelector = ({
+  paymentActions,
+  onNavigateToConfig,
+  isLiveMode,
+}) => {
+  return (
+    <Box>
+      <Flex direction="column" alignItems="stretch" gap={4}>
+        <RenderInput
+          name="paymentMethod"
+          label="Select Payment Method"
+          value={paymentActions.paymentState.paymentMethod || ""}
+          onChange={(e) => {
+            const value = e.target?.value || e;
+            paymentActions.handleFieldChange("paymentMethod", value);
+          }}
+          inputType="select"
+          options={getPaymentMethodOptions(isLiveMode).map((option) => ({
+            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"
+        />
+        {paymentActions.paymentState.paymentMethod === "apl" &&
+          onNavigateToConfig && (
+            <>
+              <Box
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "16px",
+                }}
+              >
+                <Box
+                  style={{
+                    background: "transparent",
+                    padding: "16px",
+                    borderRadius: "4px",
+                    border: "1px solid #eaeaea",
+                  }}
+                >
+                  <Typography variant="pi" style={{ lineHeight: "1.6" }}>
+                    <strong>Apple Pay requires middleware configuration</strong>{" "}
+                    to work properly. You must configure Content Security Policy
+                    (CSP) in{" "}
+                    <code
+                      style={{
+                        padding: "2px 6px",
+                        borderRadius: "3px",
+                        fontSize: "13px",
+                      }}
+                    >
+                      config/middlewares.js
+                    </code>{" "}
+                    to allow Apple Pay scripts.
+                  </Typography>
+
+                  <Box style={{ marginTop: "16px" }}>
+                    <Typography
+                      variant="pi"
+                      style={{
+                        fontWeight: "600",
+                        marginBottom: "8px",
+                        display: "block",
+                      }}
+                    >
+                      Required CSP directives:
+                    </Typography>
+
+                    <Box>
+                      <Typography
+                        variant="pi"
+                        style={{
+                          fontFamily: "monospace",
+                          fontSize: "12px",
+                          lineHeight: "1.8",
+                        }}
+                      >
+                        <div>
+                          'script-src': ['https://applepay.cdn-apple.com',
+                          'https://www.apple.com']
+                        </div>
+                        <div>
+                          'connect-src': ['https://applepay.cdn-apple.com',
+                          'https://www.apple.com']
+                        </div>
+                        <div>
+                          'frame-src': ['https://applepay.cdn-apple.com']
+                        </div>
+                      </Typography>
+                    </Box>
+                  </Box>
+
+                  <Box
+                    padding={2}
+                    background="warning100"
+                    style={{
+                      marginTop: "16px",
+                      borderRadius: "4px",
+                      borderLeft: "3px solid #f29d41",
+                    }}
+                  >
+                    <Typography variant="pi" style={{ fontWeight: "600" }}>
+                      ⚠️ Without this configuration, Apple Pay will NOT work!
+                    </Typography>
+                  </Box>
+                </Box>
+
+                <Box
+                  style={{
+                    background: "transparent",
+                    padding: "16px",
+                    borderRadius: "4px",
+                    border: "1px solid #eaeaea",
+                  }}
+                >
+                  <Typography variant="pi" style={{ lineHeight: "1.6" }}>
+                    <strong>Download the domain verification file</strong> from
+                    your Payone merchant portal and place it in the following
+                    locations:
+                  </Typography>
+
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      style={{
+                        fontFamily: "monospace",
+                        fontSize: "12px",
+                        lineHeight: "1.8",
+                      }}
+                    >
+                      <div style={{ marginBottom: "8px" }}>
+                        <strong>Strapi:</strong>{" "}
+                        <code>
+                          public/.well-known/apple-developer-merchantid-domain-association
+                        </code>
+                      </div>
+                      <div>
+                        <strong>Frontend:</strong>{" "}
+                        <code>
+                          public/.well-known/apple-developer-merchantid-domain-association
+                        </code>
+                      </div>
+                    </Typography>
+                  </Box>
+
+                  <Box style={{ marginTop: "16px" }}>
+                    <Typography variant="pi" style={{ lineHeight: "1.6" }}>
+                      <strong>Download URL:</strong> Get the domain verification
+                      file from Payone documentation:
+                    </Typography>
+                    <Box
+                      padding={2}
+                      background="primary100"
+                      style={{ marginTop: "8px", borderRadius: "4px" }}
+                    >
+                      <Link
+                        href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                          color: "#4945ff",
+                          textDecoration: "none",
+                          fontWeight: "500",
+                          fontSize: "14px",
+                        }}
+                      >
+                        →
+                        https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+                      </Link>
+                    </Box>
+                  </Box>
+
+                  <Box
+                    padding={2}
+                    background="danger100"
+                    style={{
+                      marginTop: "16px",
+                      borderRadius: "4px",
+                      borderLeft: "3px solid #d02b20",
+                    }}
+                  >
+                    <Typography
+                      variant="pi"
+                      textColor="danger600"
+                      style={{ fontWeight: "600" }}
+                    >
+                      ⚠️ Without this file, Apple Pay will NOT work on your
+                      domain!
+                    </Typography>
+                  </Box>
+                </Box>
+              </Box>
+
+              <Box padding={3} borderRadius="4px">
+                <Typography variant="pi" textColor="neutral600">
+                  Configure Apple Pay settings:{" "}
+                  <Link
+                    href={`/plugins/${pluginId}/apple-pay-config`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onNavigateToConfig("apple-pay");
+                    }}
+                    style={{
+                      cursor: "pointer",
+                      textDecoration: "underline",
+                      color: "#0066ff",
+                    }}
+                  >
+                    /plugins/{pluginId}/apple-pay-config
+                  </Link>
+                </Typography>
+              </Box>
+            </>
+          )}
+        {paymentActions.paymentState.paymentMethod === "gpp" &&
+          onNavigateToConfig && (
+            <>
+              <Alert
+                closeLabel="Close"
+                title="⚠️ Important: Middleware Configuration Required"
+                variant="warning"
+              >
+                <Typography variant="pi" marginTop={2}>
+                  <strong>Google Pay requires middleware configuration</strong>{" "}
+                  to work properly. You must configure Content Security Policy
+                  (CSP) in <code>config/middlewares.js</code> to allow Google
+                  Pay scripts, otherwise Google Pay will NOT work.
+                </Typography>
+                <Typography variant="pi" marginTop={2}>
+                  Required CSP directives for Google Pay:
+                </Typography>
+                <Box
+                  marginTop={2}
+                  padding={2}
+                  background="neutral100"
+                  borderRadius="4px"
+                >
+                  <Typography
+                    variant="pi"
+                    style={{ fontFamily: "monospace", fontSize: "12px" }}
+                  >
+                    'script-src': ['https://pay.google.com']
+                    <br />
+                    'connect-src': ['https://pay.google.com']
+                    <br />
+                    'frame-src': ['https://pay.google.com']
+                  </Typography>
+                </Box>
+                <Typography variant="pi" marginTop={2} fontWeight="bold">
+                  ⚠️ Without this configuration, Google Pay will NOT work!
+                </Typography>
+              </Alert>
+              <Box padding={3} background="neutral100" borderRadius="4px">
+                <Typography variant="pi" textColor="neutral600">
+                  Configure Google Pay settings:{" "}
+                  <Link
+                    href={`/plugins/${pluginId}/google-pay-config`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onNavigateToConfig("google-pay");
+                    }}
+                    style={{
+                      cursor: "pointer",
+                      textDecoration: "underline",
+                      color: "#0066ff",
+                    }}
+                  >
+                    /plugins/{pluginId}/google-pay-config
+                  </Link>
+                </Typography>
+              </Box>
+            </>
+          )}
+        {paymentActions.paymentState.paymentMethod !== "apl" &&
+          supportsCaptureMode(paymentActions.paymentState.paymentMethod) && (
+            <RenderInput
+              name="captureMode"
+              label="Capture Mode"
+              value={paymentActions.paymentState.captureMode || ""}
+              onChange={(e) => {
+                const value = e.target?.value || e;
+                paymentActions.handleFieldChange("captureMode", value);
+              }}
+              inputType="select"
+              options={getCaptureModeOptions().map((option) => ({
+                value: option.value,
+                label: option.label,
+              }))}
+              placeholder="Select capture mode"
+              hint="Select capture mode for wallet payments"
+              tooltipContent="Choose how the payment should be captured for wallet payments"
+            />
+          )}
+      </Flex>
+    </Box>
+  );
+};
+
+export default PaymentMethodSelector;

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

@@ -0,0 +1,133 @@
+import * as React from "@strapi/strapi/admin";
+import { Card, CardBody, Flex, Typography, Alert } from "@strapi/design-system";
+import StatusBadge from "../StatusBadge";
+import { formatTransactionData } from "../../../utils/formatTransactionData";
+
+const PaymentResult = ({ paymentError, paymentResult }) => {
+  if (!paymentError && !paymentResult) {
+    return null;
+  }
+  console.log(paymentResult);
+  console.log(paymentError);
+
+  return (
+    <>
+      {paymentError && (
+        <Alert variant="danger" title="Error" className="payment-alert">
+          {paymentError}
+        </Alert>
+      )}
+
+      {paymentResult && (
+        <Card>
+          <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>
+                {paymentResult?.Status && (
+                  <StatusBadge status={paymentResult.Status} />
+                )}
+              </Flex>
+
+              <Flex direction="column" gap={3} alignItems={"stretch"}>
+                {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",
+                        wordBreak: "break-word",
+                        fontFamily: item.key.toLowerCase().includes("raw")
+                          ? "monospace"
+                          : "inherit",
+                        fontSize: item.key.toLowerCase().includes("raw")
+                          ? "11px"
+                          : "inherit",
+                      }}
+                    >
+                      {item.value}
+                    </Typography>
+                  </Flex>
+                ))}
+              </Flex>
+              {paymentResult?.is3DSRequired && !paymentResult?.redirectUrl && (
+                <Alert
+                  variant="warning"
+                  title="3D Secure Authentication Required"
+                >
+                  <Flex direction="column" gap={2}>
+                    <Typography variant="pi">
+                      Payone requires 3D Secure authentication, but no redirect
+                      URL was provided in the response.
+                    </Typography>
+                    <Typography variant="pi" fontWeight="semiBold">
+                      Possible solutions:
+                    </Typography>
+                    <Typography
+                      variant="pi"
+                      component="ul"
+                      style={{ marginLeft: "20px" }}
+                    >
+                      <li>
+                        Check Payone portal configuration for 3DS settings
+                      </li>
+                      <li>
+                        Verify that redirect URLs (successurl, errorurl,
+                        backurl) are properly configured
+                      </li>
+                      <li>
+                        Ensure you're using test mode with proper test
+                        credentials
+                      </li>
+                      <li>
+                        Check if 3dscheck request is needed before authorization
+                      </li>
+                    </Typography>
+                    <Typography
+                      variant="pi"
+                      textColor="neutral600"
+                      marginTop={2}
+                    >
+                      <strong>Error Code:</strong>{" "}
+                      {paymentResult?.errorCode ||
+                        paymentResult?.ErrorCode ||
+                        "4219"}
+                    </Typography>
+                  </Flex>
+                </Alert>
+              )}
+            </Flex>
+          </CardBody>
+        </Card>
+      )}
+    </>
+  );
+};
+
+export default PaymentResult;