@superlogic/spree-pay 0.3.5 → 0.4.0

package/README.md

@@ -105,9 +105,45 @@ type SpreePayProps = {
   disabledPoints?: boolean; // Disables points payment option if true.
   topUpLink?: string; // Optional link to top-up page for points balance.
   className?: string; // Optional wrapper class for layout/styling.
+
+  // Multi-currency display (all three fields should be supplied together)
+  currencyCode?: string; // ISO 4217 display currency (e.g. "AUD").
+  foreignCurrencyAmount?: number; // Pre-fee order total in the display currency (e.g. 1280.46). Used directly as Pay button base; transaction fee is added on top.
+  exchangeRate?: number; // 1 unit of currencyCode in USD (e.g. 0.65 for AUD→USD). Used to convert USD remainder when points are applied.
 };
 ```
 
+#### Multi-currency display
+
+When `currencyCode`, `foreignCurrencyAmount`, and `exchangeRate` are all provided the widget shows prices in the shopper-selected currency. Settlement and points calculations continue in USD.
+
+```tsx
+<SpreePay
+  amount={832.3} // USD amount — used for points math and payment-intent creation
+  currencyCode="AUD"
+  foreignCurrencyAmount={1280.46} // pre-fee order total in AUD from your backend
+  exchangeRate={0.65} // 1 AUD = 0.65 USD
+  onProcess={handleProcess}
+  transactionFeePercentage={0.04}
+  className="w-full max-w-[540px]"
+  isProcessing={status === 'processing'}
+/>
+```
+
+Display behaviour:
+
+- **Pay button (no points)** — shows `foreignCurrencyAmount + fee` in the display currency
+- **Pay button (split)** — shows the card portion converted from USD remainder + fee
+- **Points slider** — card amount updates live in the display currency as the slider moves
+- **Available points value** — shown in display currency alongside the points count
+
+After the user commits the points slider, `selectedPaymentMethod` exposes:
+
+- `amount` — USD card amount including fee (use for payment-intent creation)
+- `foreignCurrencyAmount` — card amount in display currency, 2 d.p. (use for order display / receipts)
+
+If any of the three display params are absent the widget falls back to USD-only display — no breaking change.
+
 ## API Reference
 
 ### SpreePayProvider Props

package/build/{CryptoComTab-P4MC2R2N.js → CryptoComTab-QOGLM3EB.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-D23MABH2.js";
+} from "./chunk-BGLP7QYP.js";
 import {
   InfoBanner,
   Legal,
@@ -12,7 +12,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-KQ25SXYH.js";
+} from "./chunk-JUAE4572.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";

package/build/{CryptoTab-CI5C22BD.js → CryptoTab-AK7WPMBJ.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-FHY6YBXC.js";
+} from "./chunk-STM24EZ3.js";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-KQ25SXYH.js";
+} from "./chunk-JUAE4572.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";

package/build/{chunk-D23MABH2.js → chunk-BGLP7QYP.js}

@@ -2,7 +2,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle
-} from "./chunk-KQ25SXYH.js";
+} from "./chunk-JUAE4572.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/{chunk-KQ25SXYH.js → chunk-JUAE4572.js}

@@ -9,7 +9,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.3.5";
+var version = "0.4.0";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -533,10 +533,19 @@ var InfoBanner = (props) => {
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var Legal = () => {
   const { spreePayConfig } = useSpreePayConfig();
-  return /* @__PURE__ */ jsxs2("p", { className: "text-center text-xs leading-5 font-medium text-(--secondary)", children: [
+  return /* @__PURE__ */ jsxs2("p", { className: "text-xs leading-5 font-medium text-(--secondary)", children: [
     "By clicking on the button below I acknowledge that I have read and accepted the",
     " ",
-    /* @__PURE__ */ jsx4("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
+    /* @__PURE__ */ jsx4(
+      "a",
+      {
+        className: "whitespace-nowrap underline",
+        href: spreePayConfig?.termsConditionsUrl,
+        target: "_blank",
+        rel: "noreferrer",
+        children: "Terms and Conditions"
+      }
+    ),
     "."
   ] });
 };

package/build/{chunk-FHY6YBXC.js → chunk-STM24EZ3.js}

@@ -6,7 +6,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-KQ25SXYH.js";
+} from "./chunk-JUAE4572.js";
 
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";
@@ -60,11 +60,11 @@ function Switch({ className, ...props }) {
 }
 
 // src/utils/format.ts
-var formatUSD = (amount, currency = "USD") => {
+var formatCurrency = (amount, currency = "USD") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
     currency,
     style: "currency",
-    maximumFractionDigits: 5,
+    maximumFractionDigits: 2,
     minimumFractionDigits: 2
   }).format(amount);
   return formattedAmount;
@@ -93,7 +93,10 @@ var PointsSwitch = (props) => {
   const { disabled = false, value, onChange, message } = props;
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
+  const { currencyCode, exchangeRate, topUpLink, foreignCurrencyAmount } = appProps;
   const { balance } = useSlapiBalance();
+  const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
+  const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
   const id = useId();
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
@@ -114,15 +117,15 @@ var PointsSwitch = (props) => {
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
         balance?.availablePoints ? /* @__PURE__ */ jsxs("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
           formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx3("span", { className: "text-(--secondary)", children: ` \xB7 ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx3("span", { className: "text-(--secondary)", children: ` \xB7 ${formatPointsValue(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
         ] }) : null,
-        Boolean(appProps.topUpLink) && /* @__PURE__ */ jsx3(
+        Boolean(topUpLink) && /* @__PURE__ */ jsx3(
           "a",
           {
             className: "cursor-pointer rounded-full bg-(--s-brand) px-2 py-1.5 text-xs font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
             rel: "noreferrer",
             target: "_blank",
-            href: appProps.topUpLink,
+            href: topUpLink,
             children: "Top Up"
           }
         )
@@ -204,28 +207,45 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var CheckoutButton = ({ isLoggedIn }) => {
   const { appProps, staticConfig } = useStaticConfig();
-  const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
+  const {
+    amount,
+    onProcess,
+    isProcessing,
+    transactionFeePercentage,
+    currencyCode,
+    foreignCurrencyAmount,
+    exchangeRate
+  } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
   const { tenantId, keycloakClientId } = useSpreePayEnv();
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
-  const { splitAmount, type, method } = selectedPaymentMethod;
-  const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
+  const { pointsAmount, type, method } = selectedPaymentMethod;
+  const usdAmount = getSplitAmount(amount ?? 0, pointsAmount ?? 0, spreePayConfig?.pointsConversionRatio);
   const isDisabled = !amount || !method && usdAmount !== 0 || !!isProcessing || isInternalProcessing || !isLoggedIn;
   const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
   const isCrypto = type === "CRYPTO" /* CRYPTO */;
+  const hasForeignCurrency = !!(currencyCode && foreignCurrencyAmount && exchangeRate);
+  const formatCashWithFee = (usdCash, foreignBase) => {
+    const fee = getTransactionFee(usdCash, transactionFeePercentage);
+    if (hasForeignCurrency) {
+      const base = foreignBase ?? usdCash / exchangeRate;
+      return formatCurrency(base + fee / exchangeRate, currencyCode);
+    }
+    return formatCurrency(usdCash + fee);
+  };
   const getCheckoutContent = () => {
     if (!!isProcessing || isInternalProcessing) {
       return /* @__PURE__ */ jsx5(Spinner, { className: "inline", size: "sm" });
     }
     if (isCC && amount) {
-      if (splitAmount && usdAmount) {
-        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
+      if (pointsAmount && usdAmount) {
+        return `Pay ${formatCashWithFee(usdAmount)} + ${formatPoints(pointsAmount, spreePayConfig?.pointsTitle)}`;
       }
       if (usdAmount) {
-        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
+        return `Pay ${formatCashWithFee(usdAmount, hasForeignCurrency ? foreignCurrencyAmount : void 0)}`;
       }
-      if (splitAmount) {
-        return `Pay ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
+      if (pointsAmount) {
+        return `Pay ${formatPoints(pointsAmount, spreePayConfig?.pointsTitle)}`;
       }
       return "Checkout";
     }
@@ -272,7 +292,7 @@ export {
   getTransactionFee,
   getSplitAmount,
   useSlapiBalance,
-  formatUSD,
+  formatCurrency,
   formatPoints,
   Label,
   PointsSwitch,

package/build/index.cjs

@@ -68,7 +68,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.3.5";
+    version = "0.4.0";
   }
 });
 
@@ -962,15 +962,15 @@ var init_spinner = __esm({
 });
 
 // src/utils/format.ts
-var formatUSD, formatPoints, formatCoin;
+var formatCurrency, formatPoints, formatCoin;
 var init_format = __esm({
   "src/utils/format.ts"() {
     "use strict";
-    formatUSD = (amount, currency = "USD") => {
+    formatCurrency = (amount, currency = "USD") => {
       const formattedAmount = new Intl.NumberFormat("en-US", {
         currency,
         style: "currency",
-        maximumFractionDigits: 5,
+        maximumFractionDigits: 2,
         minimumFractionDigits: 2
       }).format(amount);
       return formattedAmount;
@@ -1135,7 +1135,10 @@ var init_PointsSwitch = __esm({
       const { disabled = false, value, onChange, message } = props;
       const { spreePayConfig } = useSpreePayConfig();
       const { appProps } = useStaticConfig();
+      const { currencyCode, exchangeRate, topUpLink, foreignCurrencyAmount } = appProps;
       const { balance } = useSlapiBalance();
+      const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
+      const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
       const id = (0, import_react5.useId)();
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
@@ -1156,15 +1159,15 @@ var init_PointsSwitch = __esm({
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2.5", children: [
             balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
               formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-              !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-(--secondary)", children: ` \xB7 ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+              !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-(--secondary)", children: ` \xB7 ${formatPointsValue(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
             ] }) : null,
-            Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Boolean(topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "a",
               {
                 className: "cursor-pointer rounded-full bg-(--s-brand) px-2 py-1.5 text-xs font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
                 rel: "noreferrer",
                 target: "_blank",
-                href: appProps.topUpLink,
+                href: topUpLink,
                 children: "Top Up"
               }
             )
@@ -1185,10 +1188,19 @@ var init_Legal = __esm({
     import_jsx_runtime10 = require("react/jsx-runtime");
     Legal = () => {
       const { spreePayConfig } = useSpreePayConfig();
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-center text-xs leading-5 font-medium text-(--secondary)", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-xs leading-5 font-medium text-(--secondary)", children: [
         "By clicking on the button below I acknowledge that I have read and accepted the",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "a",
+          {
+            className: "whitespace-nowrap underline",
+            href: spreePayConfig?.termsConditionsUrl,
+            target: "_blank",
+            rel: "noreferrer",
+            children: "Terms and Conditions"
+          }
+        ),
         "."
       ] });
     };
@@ -1221,28 +1233,45 @@ var init_CheckoutButton = __esm({
     import_jsx_runtime11 = require("react/jsx-runtime");
     CheckoutButton = ({ isLoggedIn }) => {
       const { appProps, staticConfig } = useStaticConfig();
-      const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
+      const {
+        amount,
+        onProcess,
+        isProcessing,
+        transactionFeePercentage,
+        currencyCode,
+        foreignCurrencyAmount,
+        exchangeRate
+      } = appProps;
       const { spreePayConfig } = useSpreePayConfig();
       const { tenantId, keycloakClientId } = useSpreePayEnv();
       const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
-      const { splitAmount, type, method } = selectedPaymentMethod;
-      const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
+      const { pointsAmount, type, method } = selectedPaymentMethod;
+      const usdAmount = getSplitAmount(amount ?? 0, pointsAmount ?? 0, spreePayConfig?.pointsConversionRatio);
       const isDisabled = !amount || !method && usdAmount !== 0 || !!isProcessing || isInternalProcessing || !isLoggedIn;
       const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
       const isCrypto = type === "CRYPTO" /* CRYPTO */;
+      const hasForeignCurrency = !!(currencyCode && foreignCurrencyAmount && exchangeRate);
+      const formatCashWithFee = (usdCash, foreignBase) => {
+        const fee = getTransactionFee(usdCash, transactionFeePercentage);
+        if (hasForeignCurrency) {
+          const base2 = foreignBase ?? usdCash / exchangeRate;
+          return formatCurrency(base2 + fee / exchangeRate, currencyCode);
+        }
+        return formatCurrency(usdCash + fee);
+      };
       const getCheckoutContent = () => {
         if (!!isProcessing || isInternalProcessing) {
           return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { className: "inline", size: "sm" });
         }
         if (isCC && amount) {
-          if (splitAmount && usdAmount) {
-            return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
+          if (pointsAmount && usdAmount) {
+            return `Pay ${formatCashWithFee(usdAmount)} + ${formatPoints(pointsAmount, spreePayConfig?.pointsTitle)}`;
           }
           if (usdAmount) {
-            return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
+            return `Pay ${formatCashWithFee(usdAmount, hasForeignCurrency ? foreignCurrencyAmount : void 0)}`;
           }
-          if (splitAmount) {
-            return `Pay ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
+          if (pointsAmount) {
+            return `Pay ${formatPoints(pointsAmount, spreePayConfig?.pointsTitle)}`;
           }
           return "Checkout";
         }
@@ -3088,7 +3117,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "div",
           {
-            className: cn("flex h-full w-full items-center justify-between rounded-r-sm px-3", {
+            className: cn("flex h-full w-full items-center justify-between rounded-r-sm pr-2 pl-3", {
               "border-(--primary)": isSelected
             }),
             children: [
@@ -3394,6 +3423,7 @@ init_common();
 var import_react11 = require("react");
 var import_airkit2 = require("@mocanetwork/airkit");
 init_SpreePayActionsContext();
+init_StaticConfigContext();
 init_useSlapiBalance();
 init_useSpreePayConfig();
 init_format();
@@ -4397,17 +4427,27 @@ var PointsSelector = (props) => {
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { pointsConversionRatio } = spreePayConfig || {};
+  const { currencyCode, foreignCurrencyAmount, exchangeRate, amount, transactionFeePercentage } = appProps;
+  const hasForeignCurrency = !!(currencyCode && foreignCurrencyAmount && exchangeRate);
   const min = 0;
-  const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (appProps.amount ?? 0) / pointsConversionRatio : 0;
+  const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (amount ?? 0) / pointsConversionRatio : 0;
   const max = Math.min(maxByAmount, balance?.availablePoints ?? 0);
   const step = 10;
   const [splitTokens, setSplitTokens] = (0, import_react10.useState)(0);
-  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, pointsConversionRatio);
+  const usdAmount = getSplitAmount(amount ?? 0, splitTokens, pointsConversionRatio);
+  const pointsValue = String(Math.round(splitTokens));
+  const usdWithFee = usdAmount + getTransactionFee(usdAmount, transactionFeePercentage);
+  const cashDisplayValue = hasForeignCurrency ? formatCurrency(usdWithFee / exchangeRate, currencyCode) : formatCurrency(usdWithFee);
   const handleCommit = (value) => {
-    setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
+    const committedUsd = getSplitAmount(amount ?? 0, value, pointsConversionRatio);
+    const committedUsdWithFee = committedUsd + getTransactionFee(committedUsd, transactionFeePercentage);
+    setSelectedPaymentMethod({
+      ...selectedPaymentMethod,
+      pointsAmount: value,
+      amount: parseFloat(committedUsdWithFee.toFixed(2)),
+      foreignCurrencyAmount: hasForeignCurrency ? parseFloat((committedUsdWithFee / exchangeRate).toFixed(2)) : void 0
+    });
   };
-  const pointsValue = String(Math.round(splitTokens));
-  const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "button",
     {
@@ -4467,10 +4507,10 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
-                name: "usd amount",
-                value: usdValue,
+                name: "card amount",
+                value: cashDisplayValue,
                 className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
-                style: { width: `${usdValue.length}ch` },
+                style: { width: `${cashDisplayValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -4489,10 +4529,14 @@ var SplitBlock = (props) => {
   const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
+  const { currencyCode, exchangeRate, foreignCurrencyAmount } = appProps;
   const [address, setAddress] = (0, import_react11.useState)(null);
   const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { useWeb3Points, environment } = useSpreePayEnv();
+  const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
+  const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
   const prevPointsChainRef = (0, import_react11.useRef)(spreePayConfig?.pointsChain);
   const initWallet = (0, import_react11.useCallback)(
     async (pointsChain) => {
@@ -4537,7 +4581,7 @@ var SplitBlock = (props) => {
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-(--secondary)", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-(--secondary)", children: formatPointsValue(balance.availablePoints * pointsConversionRatio) })
     ] }) : null }),
     isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-4 w-6 animate-pulse bg-(--s-secondary)" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: "No points available" }),
     address && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sm font-medium text-(--brand-primary)", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
@@ -4556,7 +4600,7 @@ var Points = () => {
     setUsePoints(enabled);
     if (!enabled) {
       setSelectedPointsType(null);
-      setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, pointsAmount: void 0 });
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
@@ -4598,7 +4642,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
     async (data) => {
       try {
         let res = null;
-        const pointsAmount = selectedPaymentMethod.splitAmount ?? 0;
+        const pointsAmount = selectedPaymentMethod.pointsAmount ?? 0;
         const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
         if (usdAmount && pointsAmount) {
           res = await splitPayment({ ...data, points: pointsAmount });

package/build/index.css

@@ -767,6 +767,9 @@
 .sl-spreepay .pt-5 {
   padding-top: calc(var(--spacing) * 5);
 }
+.sl-spreepay .pr-2 {
+  padding-right: calc(var(--spacing) * 2);
+}
 .sl-spreepay .pb-2 {
   padding-bottom: calc(var(--spacing) * 2);
 }
@@ -782,6 +785,9 @@
 .sl-spreepay .pl-1\.5 {
   padding-left: calc(var(--spacing) * 1.5);
 }
+.sl-spreepay .pl-3 {
+  padding-left: calc(var(--spacing) * 3);
+}
 .sl-spreepay .text-center {
   text-align: center;
 }

package/build/index.d.cts

@@ -1,16 +1,24 @@
-import { FC, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
-type SpreePayProps = {
-    onProcess?: () => Promise<void>;
-    amount?: number;
-    className?: string;
-    isProcessing?: boolean;
-    transactionFeePercentage?: number;
-    disabledPoints?: boolean;
-    topUpLink?: string;
-};
+type SpreePayProps = Partial<{
+    onProcess: () => Promise<void>;
+    /** amount in USD (e.g. $10.00 → 10 USD) */
+    amount: number;
+    className: string;
+    isProcessing: boolean;
+    transactionFeePercentage: number;
+    disabledPoints: boolean;
+    topUpLink: string;
+    /** ISO 4217 display currency (e.g. "AUD"). Requires foreignCurrencyAmount + exchangeRate. */
+    currencyCode: string;
+    /** Order total in the display currency. */
+    foreignCurrencyAmount: number;
+    /** 1 unit of currencyCode in USD (e.g. 1 AUD = 0.65 USD → 0.65). */
+    exchangeRate: number;
+}>;
 
-declare const SpreePay: FC<SpreePayProps>;
+declare const SpreePay: (props: SpreePayProps) => react_jsx_runtime.JSX.Element;
 
 declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
 
@@ -79,17 +87,23 @@ type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'sc
 type CardPaymentMethod = {
     method: NewCard | Card | null;
     type: PaymentType.CREDIT_CARD;
-    splitAmount?: number;
+    pointsAmount?: number;
+    amount?: number;
+    foreignCurrencyAmount?: number;
 };
 type CryptoPaymentMethod = {
     method: Coin | NativeCoin | null;
     type: PaymentType.CRYPTO;
-    splitAmount?: number;
+    pointsAmount?: number;
+    amount?: number;
+    foreignCurrencyAmount?: number;
 };
 type CDCPaymentMethod = {
     method: Coin | NativeCoin | null;
     type: PaymentType.CDC;
-    splitAmount?: number;
+    pointsAmount?: number;
+    amount?: number;
+    foreignCurrencyAmount?: number;
 };
 type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod | CDCPaymentMethod;
 declare enum PaymentType {
@@ -126,7 +140,7 @@ type SpreePayProviderProps = {
     children: ReactNode;
     env: ENV;
 };
-declare const SpreePayProvider: FC<SpreePayProviderProps>;
+declare const SpreePayProvider: ({ children, env }: SpreePayProviderProps) => react_jsx_runtime.JSX.Element;
 declare const useSpreePay: () => {
     process: ProcessFn;
     isProcessing: boolean;

package/build/index.d.ts

@@ -1,16 +1,24 @@
-import { FC, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
-type SpreePayProps = {
-    onProcess?: () => Promise<void>;
-    amount?: number;
-    className?: string;
-    isProcessing?: boolean;
-    transactionFeePercentage?: number;
-    disabledPoints?: boolean;
-    topUpLink?: string;
-};
+type SpreePayProps = Partial<{
+    onProcess: () => Promise<void>;
+    /** amount in USD (e.g. $10.00 → 10 USD) */
+    amount: number;
+    className: string;
+    isProcessing: boolean;
+    transactionFeePercentage: number;
+    disabledPoints: boolean;
+    topUpLink: string;
+    /** ISO 4217 display currency (e.g. "AUD"). Requires foreignCurrencyAmount + exchangeRate. */
+    currencyCode: string;
+    /** Order total in the display currency. */
+    foreignCurrencyAmount: number;
+    /** 1 unit of currencyCode in USD (e.g. 1 AUD = 0.65 USD → 0.65). */
+    exchangeRate: number;
+}>;
 
-declare const SpreePay: FC<SpreePayProps>;
+declare const SpreePay: (props: SpreePayProps) => react_jsx_runtime.JSX.Element;
 
 declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
 
@@ -79,17 +87,23 @@ type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'sc
 type CardPaymentMethod = {
     method: NewCard | Card | null;
     type: PaymentType.CREDIT_CARD;
-    splitAmount?: number;
+    pointsAmount?: number;
+    amount?: number;
+    foreignCurrencyAmount?: number;
 };
 type CryptoPaymentMethod = {
     method: Coin | NativeCoin | null;
     type: PaymentType.CRYPTO;
-    splitAmount?: number;
+    pointsAmount?: number;
+    amount?: number;
+    foreignCurrencyAmount?: number;
 };
 type CDCPaymentMethod = {
     method: Coin | NativeCoin | null;
     type: PaymentType.CDC;
-    splitAmount?: number;
+    pointsAmount?: number;
+    amount?: number;
+    foreignCurrencyAmount?: number;
 };
 type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod | CDCPaymentMethod;
 declare enum PaymentType {
@@ -126,7 +140,7 @@ type SpreePayProviderProps = {
     children: ReactNode;
     env: ENV;
 };
-declare const SpreePayProvider: FC<SpreePayProviderProps>;
+declare const SpreePayProvider: ({ children, env }: SpreePayProviderProps) => react_jsx_runtime.JSX.Element;
 declare const useSpreePay: () => {
     process: ProcessFn;
     isProcessing: boolean;

package/build/index.js

@@ -3,15 +3,15 @@ import {
   Label,
   PointsSwitch,
   cn as cn2,
+  formatCurrency,
   formatPoints,
-  formatUSD,
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-FHY6YBXC.js";
+} from "./chunk-STM24EZ3.js";
 import {
   Iframe3ds
-} from "./chunk-D23MABH2.js";
+} from "./chunk-BGLP7QYP.js";
 import {
   InfoBanner,
   LogLevel,
@@ -31,7 +31,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-KQ25SXYH.js";
+} from "./chunk-JUAE4572.js";
 
 // src/SpreePay.tsx
 import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useState as useState10 } from "react";
@@ -587,7 +587,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex h-full w-full items-center justify-between rounded-r-sm px-3", {
+            className: cn("flex h-full w-full items-center justify-between rounded-r-sm pr-2 pl-3", {
               "border-(--primary)": isSelected
             }),
             children: [
@@ -1873,17 +1873,27 @@ var PointsSelector = (props) => {
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { pointsConversionRatio } = spreePayConfig || {};
+  const { currencyCode, foreignCurrencyAmount, exchangeRate, amount, transactionFeePercentage } = appProps;
+  const hasForeignCurrency = !!(currencyCode && foreignCurrencyAmount && exchangeRate);
   const min = 0;
-  const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (appProps.amount ?? 0) / pointsConversionRatio : 0;
+  const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (amount ?? 0) / pointsConversionRatio : 0;
   const max = Math.min(maxByAmount, balance?.availablePoints ?? 0);
   const step = 10;
   const [splitTokens, setSplitTokens] = useState6(0);
-  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, pointsConversionRatio);
+  const usdAmount = getSplitAmount(amount ?? 0, splitTokens, pointsConversionRatio);
+  const pointsValue = String(Math.round(splitTokens));
+  const usdWithFee = usdAmount + getTransactionFee(usdAmount, transactionFeePercentage);
+  const cashDisplayValue = hasForeignCurrency ? formatCurrency(usdWithFee / exchangeRate, currencyCode) : formatCurrency(usdWithFee);
   const handleCommit = (value) => {
-    setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
+    const committedUsd = getSplitAmount(amount ?? 0, value, pointsConversionRatio);
+    const committedUsdWithFee = committedUsd + getTransactionFee(committedUsd, transactionFeePercentage);
+    setSelectedPaymentMethod({
+      ...selectedPaymentMethod,
+      pointsAmount: value,
+      amount: parseFloat(committedUsdWithFee.toFixed(2)),
+      foreignCurrencyAmount: hasForeignCurrency ? parseFloat((committedUsdWithFee / exchangeRate).toFixed(2)) : void 0
+    });
   };
-  const pointsValue = String(Math.round(splitTokens));
-  const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
   return /* @__PURE__ */ jsxs6(
     "button",
     {
@@ -1943,10 +1953,10 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
-                name: "usd amount",
-                value: usdValue,
+                name: "card amount",
+                value: cashDisplayValue,
                 className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
-                style: { width: `${usdValue.length}ch` },
+                style: { width: `${cashDisplayValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -1965,10 +1975,14 @@ var SplitBlock = (props) => {
   const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
+  const { currencyCode, exchangeRate, foreignCurrencyAmount } = appProps;
   const [address, setAddress] = useState7(null);
   const [walletReady, setWalletReady] = useState7(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { useWeb3Points, environment } = useSpreePayEnv();
+  const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
+  const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
   const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
   const initWallet = useCallback4(
     async (pointsChain) => {
@@ -2013,7 +2027,7 @@ var SplitBlock = (props) => {
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      pointsConversionRatio && /* @__PURE__ */ jsx14("span", { className: "text-(--secondary)", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ jsx14("span", { className: "text-(--secondary)", children: formatPointsValue(balance.availablePoints * pointsConversionRatio) })
     ] }) : null }),
     isBalanceLoading ? /* @__PURE__ */ jsx14("div", { className: "h-4 w-6 animate-pulse bg-(--s-secondary)" }) : !balance?.availablePoints && /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium text-(--brand-primary)", children: "No points available" }),
     address && /* @__PURE__ */ jsx14("div", { className: "text-sm font-medium text-(--brand-primary)", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
@@ -2032,7 +2046,7 @@ var Points = () => {
     setUsePoints(enabled);
     if (!enabled) {
       setSelectedPointsType(null);
-      setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, pointsAmount: void 0 });
     }
   };
   return /* @__PURE__ */ jsxs8(Fragment3, { children: [
@@ -2074,7 +2088,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
     async (data) => {
       try {
         let res = null;
-        const pointsAmount = selectedPaymentMethod.splitAmount ?? 0;
+        const pointsAmount = selectedPaymentMethod.pointsAmount ?? 0;
         const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
         if (usdAmount && pointsAmount) {
           res = await splitPayment({ ...data, points: pointsAmount });
@@ -2191,9 +2205,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-CI5C22BD.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-AK7WPMBJ.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-P4MC2R2N.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-QOGLM3EB.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",