strapi-plugin-payone-provider 1.4.2 → 1.5.2

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { Box, Flex, Select, Option } from "@strapi/design-system";
+import { Box, Flex, Select, Option, Typography, Link, Alert } from "@strapi/design-system";
+import pluginId from "../../../../pluginId";
 import {
   getPaymentMethodOptions,
   supportsCaptureMode,
@@ -11,7 +12,8 @@ const PaymentMethodSelector = ({
   paymentMethod,
   setPaymentMethod,
   captureMode,
-  setCaptureMode
+  setCaptureMode,
+  onNavigateToConfig
 }) => {
   return (
     <Box>
@@ -29,6 +31,108 @@ const PaymentMethodSelector = ({
             </Option>
           ))}
         </Select>
+        {paymentMethod === "apl" && onNavigateToConfig && (
+          <>
+            <Alert closeLabel="Close" title="⚠️ Important: Middleware Configuration Required" variant="warning">
+              <Typography variant="pi" marginTop={2}>
+                <strong>Apple Pay requires middleware configuration</strong> to work properly. You must configure Content Security Policy (CSP) in <code>config/middlewares.js</code> to allow Apple Pay scripts, otherwise Apple Pay will NOT work.
+              </Typography>
+              <Typography variant="pi" marginTop={2}>
+                Required CSP directives for Apple Pay:
+              </Typography>
+              <Box marginTop={2} padding={2} background="neutral100" borderRadius="4px">
+                <Typography variant="pi" style={{ fontFamily: "monospace", fontSize: "12px" }}>
+                  'script-src': ['https://applepay.cdn-apple.com', 'https://www.apple.com']<br/>
+                  'connect-src': ['https://applepay.cdn-apple.com', 'https://www.apple.com']<br/>
+                  'frame-src': ['https://applepay.cdn-apple.com']
+                </Typography>
+              </Box>
+              <Typography variant="pi" marginTop={2} fontWeight="bold">
+                ⚠️ Without this configuration, Apple Pay will NOT work!
+              </Typography>
+            </Alert>
+            <Alert closeLabel="Close" title="📥 Apple Pay Domain Verification File Required" variant="default">
+              <Typography variant="pi" marginTop={2}>
+                <strong>Download the Apple Pay domain verification file</strong> from your Payone merchant portal and place it in:
+              </Typography>
+              <Box marginTop={2} padding={2} background="neutral100" borderRadius="4px">
+                <Typography variant="pi" style={{ fontFamily: "monospace", fontSize: "12px" }}>
+                  <strong>Strapi:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code><br/>
+                  <strong>Frontend:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code>
+                </Typography>
+              </Box>
+              <Typography variant="pi" marginTop={2}>
+                <strong>Download URL:</strong> Download the domain verification file from Payone documentation:{" "}
+                <Link
+                  href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: "#0066ff", textDecoration: "underline" }}
+                >
+                  https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+                </Link>
+              </Typography>
+              <Typography variant="pi" marginTop={2}>
+                <strong>Alternative:</strong> Log into your Payone Merchant Interface (PMI) → Configuration → Payment Portals → Apple Pay → Download domain verification file
+              </Typography>
+              <Typography variant="pi" marginTop={2} fontWeight="bold" textColor="danger600">
+                ⚠️ Without this file, Apple Pay will NOT work on your domain!
+              </Typography>
+            </Alert>
+            <Box padding={3} background="neutral100" 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>
+          </>
+        )}
+        {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>
+          </>
+        )}
         {supportsCaptureMode(paymentMethod) && (
           <Select
             label="Capture Mode"

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
 import { Play } from "@strapi/icons";
 import GooglePayButton from "../GooglePaybutton";
+import ApplePayButton from "../ApplePayButton";
 import CardDetailsInput from "./CardDetailsInput";
 
 const PreauthorizationForm = ({
@@ -15,6 +16,8 @@ const PreauthorizationForm = ({
   settings,
   googlePayToken,
   setGooglePayToken,
+  applePayToken,
+  setApplePayToken,
   cardtype,
   setCardtype,
   cardpan,
@@ -22,7 +25,8 @@ const PreauthorizationForm = ({
   cardexpiredate,
   setCardexpiredate,
   cardcvc2,
-  setCardcvc2
+  setCardcvc2,
+  isLiveMode = false
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -37,6 +41,26 @@ const PreauthorizationForm = ({
       onError(error);
     }
   };
+
+  const handleApplePayToken = async (token, paymentData) => {
+    if (!token) {
+      return Promise.reject(new Error("Token is missing"));
+    }
+    setApplePayToken(token);
+    try {
+      await onPreauthorization(token);
+      return Promise.resolve();
+    } catch (error) {
+      console.error("[Apple Pay] Error in preauthorization:", error);
+      return Promise.reject(error);
+    }
+  };
+
+  const handleApplePayError = (error) => {
+    if (onError) {
+      onError(error);
+    }
+  };
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
@@ -73,8 +97,7 @@ const PreauthorizationForm = ({
         />
       </Flex>
 
-      {/* Show card details input if 3DS is enabled and payment method is credit card */}
-      {paymentMethod === "cc" && settings?.enable3DSecure !== false && (
+      {paymentMethod === "cc" && settings?.enable3DSecure && (
         <Box marginTop={4}>
           <CardDetailsInput
             cardtype={cardtype}
@@ -97,18 +120,55 @@ const PreauthorizationForm = ({
           onError={handleGooglePayError}
           settings={settings}
         />
+      ) : paymentMethod === "apl" ? (
+        <Box>
+          <ApplePayButton
+            amount={paymentAmount}
+            currency="EUR"
+            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 preauthorization:
+              </Typography>
+              <Button
+                variant="default"
+                onClick={() => onPreauthorization(applePayToken)}
+                loading={isProcessingPayment}
+                startIcon={<Play />}
+                style={{ maxWidth: '200px' }}
+                disabled={!paymentAmount.trim() || !preauthReference.trim() || isLiveMode}
+                className="payment-button payment-button-primary"
+              >
+                Process Preauthorization
+              </Button>
+            </Box>
+          )}
+          {!applePayToken && (
+            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
+              <Typography variant="pi" textColor="neutral600" style={{ marginBottom: "8px" }}>
+                Apple Pay is not available on localhost. You can test the payment flow without Apple Pay token:
+              </Typography>
+            </Box>
+          )}
+        </Box>
       ) : (
         <Button
           variant="default"
           onClick={onPreauthorization}
           loading={isProcessingPayment}
           startIcon={<Play />}
+          style={{ maxWidth: '200px' }}
           className="payment-button payment-button-primary"
           disabled={
             !paymentAmount.trim() ||
             (paymentMethod === "cc" &&
               settings?.enable3DSecure !== false &&
-              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2))
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2)) ||
+            isLiveMode
           }
         >
           Process Preauthorization

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

@@ -76,6 +76,7 @@ const RefundForm = ({
         onClick={onRefund}
         loading={isProcessingPayment}
         startIcon={<Play />}
+        style={{ maxWidth: '200px' }}
         className="payment-button payment-button-primary"
         disabled={!refundTxid.trim() || !paymentAmount.trim()}
       >

package/admin/src/pages/App/index.js

@@ -1,13 +1,19 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useLocation, useHistory } from "react-router-dom";
 import { Layout, ContentLayout, Box } from "@strapi/design-system";
 import useSettings from "../hooks/useSettings";
 import useTransactionHistory from "../hooks/useTransactionHistory";
 import usePaymentActions from "../hooks/usePaymentActions";
 import AppHeader from "./components/AppHeader";
 import AppTabs from "./components/AppTabs";
+import ApplePayConfigPanel from "./components/ApplePayConfigPanel";
+import GooglePayConfigPanel from "./components/GooglePayConfigPanel";
 import "./styles.css";
+import pluginId from "../../pluginId";
 
 const App = () => {
+  const location = useLocation();
+  const history = useHistory();
   const [activeTab, setActiveTab] = useState(0);
 
   // Custom hooks
@@ -15,6 +21,68 @@ const App = () => {
   const transactionHistory = useTransactionHistory();
   const paymentActions = usePaymentActions();
 
+  useEffect(() => {
+    if (location.pathname.includes('/apple-pay-config') || location.pathname.includes('/google-pay-config')) {
+    } else {
+      const tabFromPath = location.pathname.includes('/history') ? 1 :
+        location.pathname.includes('/payment-actions') ? 2 :
+          location.pathname.includes('/documentation') ? 3 : 0;
+      setActiveTab(tabFromPath);
+    }
+  }, [location.pathname]);
+
+  const isApplePayConfigPage = location.pathname.includes('/apple-pay-config');
+  const isGooglePayConfigPage = location.pathname.includes('/google-pay-config');
+
+  if (isApplePayConfigPage) {
+    return (
+      <Layout>
+        <AppHeader
+          title="Apple Pay Configuration"
+          activeTab={null}
+          isSaving={settings.isSaving}
+          onSave={settings.handleSave}
+          onBack={() => history.push(`/plugins/${pluginId}`)}
+        />
+        <ContentLayout>
+          <Box padding={6}>
+            <ApplePayConfigPanel
+              settings={settings.settings}
+              onInputChange={settings.handleInputChange}
+              isSaving={settings.isSaving}
+              onSave={settings.handleSave}
+            />
+          </Box>
+        </ContentLayout>
+      </Layout>
+    );
+  }
+
+  if (isGooglePayConfigPage) {
+    return (
+      <Layout>
+        <AppHeader
+          title="Google Pay Configuration"
+          activeTab={null}
+          isSaving={settings.isSaving}
+          onSave={settings.handleSave}
+          onBack={() => history.push(`/plugins/${pluginId}`)}
+        />
+        <ContentLayout>
+          <Box padding={6}>
+            <GooglePayConfigPanel
+              settings={settings.settings}
+              onInputChange={settings.handleInputChange}
+              isSaving={settings.isSaving}
+              onSave={settings.handleSave}
+              onBack={() => history.push(`/plugins/${pluginId}`)}
+            />
+          </Box>
+        </ContentLayout>
+      </Layout>
+    );
+  }
+
   return (
     <Layout>
       <AppHeader
@@ -48,6 +116,7 @@ const App = () => {
             selectedTransaction={transactionHistory.selectedTransaction}
             onTransactionSelect={transactionHistory.handleTransactionSelect}
             paymentActions={paymentActions}
+            history={history}
           />
         </Box>
       </ContentLayout>

package/admin/src/pages/hooks/usePaymentActions.js

@@ -50,6 +50,7 @@ const usePaymentActions = () => {
   const [paymentMethod, setPaymentMethod] = useState("cc");
   const [captureMode, setCaptureMode] = useState("full");
   const [googlePayToken, setGooglePayToken] = useState(null);
+  const [applePayToken, setApplePayToken] = useState(null);
 
   // Card details for 3DS testing
   const [cardtype, setCardtype] = useState("");
@@ -129,10 +130,13 @@ const usePaymentActions = () => {
         baseParams.backurl = `${baseUrl}${basePath}${pluginPath}/back`;
       }
 
-      const tokenToUse = tokenParam || googlePayToken;
+      const tokenToUse = tokenParam || googlePayToken || applePayToken;
       if (paymentMethod === "gpp" && tokenToUse) {
         baseParams.googlePayToken = tokenToUse;
         baseParams.settings = settings;
+      } else if (paymentMethod === "apl" && tokenToUse) {
+        baseParams.applePayToken = tokenToUse;
+        baseParams.settings = settings;
       }
 
       const params = getPreauthorizationParams(paymentMethod, baseParams);
@@ -271,10 +275,13 @@ const usePaymentActions = () => {
         baseParams.backurl = `${baseUrl}${basePath}${pluginPath}/back`;
       }
 
-      const tokenToUse = tokenParam || googlePayToken;
+      const tokenToUse = tokenParam || googlePayToken || applePayToken;
       if (paymentMethod === "gpp" && tokenToUse) {
         baseParams.googlePayToken = tokenToUse;
         baseParams.settings = settings;
+      } else if (paymentMethod === "apl" && tokenToUse) {
+        baseParams.applePayToken = tokenToUse;
+        baseParams.settings = settings;
       }
 
       const params = getAuthorizationParams(paymentMethod, baseParams);
@@ -454,6 +461,10 @@ const usePaymentActions = () => {
     googlePayToken,
     setGooglePayToken,
 
+    // Apple Pay
+    applePayToken,
+    setApplePayToken,
+
     // Card details for 3DS
     cardtype,
     setCardtype,

package/admin/src/pages/hooks/useSettings.js

@@ -49,6 +49,8 @@ const useSettings = () => {
         type: "success",
         message: "Settings saved successfully"
       });
+      // Reload settings after save to ensure consistency
+      await loadSettings();
     } catch (error) {
       toggleNotification({
         type: "warning",

package/admin/src/pages/utils/applePayConstants.js

@@ -0,0 +1,222 @@
+/**
+ * Apple Pay Constants
+ * Based on Apple Pay documentation and Payone requirements
+ * https://developer.apple.com/documentation/applepayontheweb
+ * https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+ */
+
+// Apple Pay supported countries
+// Note: Apple Pay availability varies by country
+export const APPLE_PAY_SUPPORTED_COUNTRIES = [
+  { code: "US", name: "United States" },
+  { code: "GB", name: "United Kingdom" },
+  { code: "CA", name: "Canada" },
+  { code: "AU", name: "Australia" },
+  { code: "DE", name: "Germany" },
+  { code: "FR", name: "France" },
+  { code: "IT", name: "Italy" },
+  { code: "ES", name: "Spain" },
+  { code: "NL", name: "Netherlands" },
+  { code: "BE", name: "Belgium" },
+  { code: "CH", name: "Switzerland" },
+  { code: "AT", name: "Austria" },
+  { code: "IE", name: "Ireland" },
+  { code: "SE", name: "Sweden" },
+  { code: "NO", name: "Norway" },
+  { code: "DK", name: "Denmark" },
+  { code: "FI", name: "Finland" },
+  { code: "PL", name: "Poland" },
+  { code: "CZ", name: "Czech Republic" },
+  { code: "HU", name: "Hungary" },
+  { code: "PT", name: "Portugal" },
+  { code: "GR", name: "Greece" },
+  { code: "JP", name: "Japan" },
+  { code: "CN", name: "China" },
+  { code: "HK", name: "Hong Kong" },
+  { code: "TW", name: "Taiwan" },
+  { code: "SG", name: "Singapore" },
+  { code: "NZ", name: "New Zealand" },
+  { code: "BR", name: "Brazil" },
+  { code: "MX", name: "Mexico" },
+  { code: "AE", name: "United Arab Emirates" },
+  { code: "SA", name: "Saudi Arabia" },
+  { code: "RU", name: "Russia" },
+  { code: "UA", name: "Ukraine" },
+  { code: "TR", name: "Turkey" },
+  { code: "ZA", name: "South Africa" }
+];
+
+// Apple Pay supported currencies
+// Note: Some currencies may be restricted in certain countries
+export const APPLE_PAY_SUPPORTED_CURRENCIES = [
+  { code: "USD", name: "US Dollar", symbol: "$" },
+  { code: "EUR", name: "Euro", symbol: "€" },
+  { code: "GBP", name: "British Pound", symbol: "£" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "C$" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$" },
+  { code: "TWD", name: "Taiwan Dollar", symbol: "NT$" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$" },
+  { code: "MXN", name: "Mexican Peso", symbol: "Mex$" },
+  { code: "AED", name: "UAE Dirham", symbol: "د.إ" },
+  { code: "SAR", name: "Saudi Riyal", symbol: "﷼" },
+  { code: "RUB", name: "Russian Ruble", symbol: "₽" },
+  { code: "UAH", name: "Ukrainian Hryvnia", symbol: "₴" },
+  { code: "TRY", name: "Turkish Lira", symbol: "₺" },
+  { code: "ZAR", name: "South African Rand", symbol: "R" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr" },
+  { code: "PLN", name: "Polish Zloty", symbol: "zł" },
+  { code: "CZK", name: "Czech Koruna", symbol: "Kč" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft" }
+];
+
+// Apple Pay supported payment networks
+export const APPLE_PAY_SUPPORTED_NETWORKS = [
+  { code: "amex", name: "American Express" },
+  { code: "discover", name: "Discover" },
+  { code: "masterCard", name: "Mastercard" },
+  { code: "visa", name: "Visa" },
+  { code: "maestro", name: "Maestro" },
+  { code: "girocard", name: "Girocard" },
+  { code: "cartesBancaires", name: "Cartes Bancaires" },
+  { code: "chinaUnionPay", name: "China UnionPay" },
+  { code: "jcb", name: "JCB" },
+  { code: "interac", name: "Interac" },
+  { code: "privateLabel", name: "Private Label" }
+];
+
+// Merchant capabilities
+export const APPLE_PAY_MERCHANT_CAPABILITIES = [
+  { code: "supports3DS", name: "3D Secure", description: "Required for most payment methods" },
+  { code: "supportsCredit", name: "Credit Cards", description: "Support credit card payments" },
+  { code: "supportsDebit", name: "Debit Cards", description: "Support debit card payments" }
+];
+
+// Country-currency restrictions
+// Some currencies are not available in certain countries
+export const COUNTRY_CURRENCY_RESTRICTIONS = {
+  US: ["USD"],
+  GB: ["GBP", "EUR"],
+  CA: ["CAD", "USD"],
+  AU: ["AUD"],
+  DE: ["EUR"],
+  FR: ["EUR"],
+  IT: ["EUR"],
+  ES: ["EUR"],
+  JP: ["JPY"],
+  CN: ["CNY"],
+  HK: ["HKD"],
+  TW: ["TWD"],
+  SG: ["SGD"],
+  NZ: ["NZD"],
+  BR: ["BRL"],
+  MX: ["MXN"],
+  AE: ["AED"],
+  SA: ["SAR"],
+  RU: ["RUB", "USD", "EUR"],
+  UA: ["UAH", "USD", "EUR"],
+  TR: ["TRY", "USD", "EUR"],
+  ZA: ["ZAR"]
+};
+
+// Get supported currencies for a country
+export const getSupportedCurrenciesForCountry = (countryCode) => {
+  const restrictions = COUNTRY_CURRENCY_RESTRICTIONS[countryCode];
+  if (restrictions) {
+    return APPLE_PAY_SUPPORTED_CURRENCIES.filter(currency => 
+      restrictions.includes(currency.code)
+    );
+  }
+  // Default: return all currencies if no restrictions
+  return APPLE_PAY_SUPPORTED_CURRENCIES;
+};
+
+// Get supported networks for a country
+// Some networks are country-specific
+export const getSupportedNetworksForCountry = (countryCode) => {
+  const countryNetworks = {
+    US: ["amex", "discover", "masterCard", "visa"],
+    GB: ["amex", "masterCard", "visa", "maestro"],
+    DE: ["masterCard", "visa", "girocard", "maestro"],
+    FR: ["masterCard", "visa", "cartesBancaires"],
+    CN: ["chinaUnionPay", "visa", "masterCard"],
+    JP: ["jcb", "visa", "masterCard", "amex"],
+    CA: ["visa", "masterCard", "amex", "interac"],
+    AU: ["visa", "masterCard", "amex"],
+    // Default networks for other countries
+    default: ["visa", "masterCard", "amex"]
+  };
+
+  return countryNetworks[countryCode] || countryNetworks.default;
+};
+
+// Test data for Apple Pay
+// Based on Apple Pay sandbox testing documentation
+export const APPLE_PAY_TEST_DATA = {
+  // Test card numbers (for sandbox testing)
+  testCards: {
+    visa: "4111111111111111",
+    mastercard: "5555555555554444",
+    amex: "378282246310005",
+    discover: "6011111111111117"
+  },
+  // Test merchant identifiers (for development)
+  testMerchantIdentifier: "merchant.com.payone.test",
+  // Test domain
+  testDomain: "test.payone.com"
+};
+
+// Apple Pay button styles
+export const APPLE_PAY_BUTTON_STYLES = [
+  { code: "black", name: "Black" },
+  { code: "white", name: "White with outline" },
+  { code: "white-outline", name: "White" }
+];
+
+// Apple Pay button types
+export const APPLE_PAY_BUTTON_TYPES = [
+  { code: "plain", name: "Plain" },
+  { code: "buy", name: "Buy" },
+  { code: "donate", name: "Donate" },
+  { code: "check-out", name: "Check Out" },
+  { code: "book", name: "Book" },
+  { code: "subscribe", name: "Subscribe" },
+  { code: "reload", name: "Reload" },
+  { code: "add-money", name: "Add Money" },
+  { code: "top-up", name: "Top Up" },
+  { code: "order", name: "Order" },
+  { code: "rent", name: "Rent" },
+  { code: "support", name: "Support" },
+  { code: "contribute", name: "Contribute" },
+  { code: "tip", name: "Tip" },
+  { code: "continue", name: "Continue" },
+  { code: "pay", name: "Pay" },
+  { code: "set-up", name: "Set Up" }
+];
+
+// Default Apple Pay configuration
+export const DEFAULT_APPLE_PAY_CONFIG = {
+  countryCode: "DE",
+  currencyCode: "EUR",
+  merchantCapabilities: ["supports3DS"],
+  supportedNetworks: ["visa", "masterCard", "girocard"],
+  buttonStyle: "black",
+  buttonType: "pay",
+  requestPayerName: false,
+  requestBillingAddress: false,
+  requestPayerEmail: false,
+  requestPayerPhone: false,
+  requestShipping: false,
+  shippingType: "shipping"
+};
+
+
+
+