@superlogic/spree-pay 0.1.8 → 0.1.10

package/README.md

@@ -14,6 +14,7 @@ npm i @superlogic/spree-pay
 import { useState } from 'react';
 
 import { SpreePay, SpreePayProvider, useSpreePay } from '@superlogic/spree-pay';
+import '@superlogic/spree-pay/styles.css';
 
 const spreeEnv = {
   tenantId: 'moca' // Keep moca for crypto payments on BASE network
@@ -31,7 +32,7 @@ function Checkout() {
 }
 
 function CheckoutContent() {
-  const { process } = useSpreePay(); // Access payment process function (must be inside provider)
+  const { process, selectedPaymentMethod, isProcessing } = useSpreePay(); // Access payment process function and processing state (must be inside provider)
   const [status, setStatus] = useState<'idle' | 'processing' | 'success' | 'error'>('idle');
 
   async function handleProcess() {
@@ -48,7 +49,7 @@ function CheckoutContent() {
 
   return (
     <div style={{ maxWidth: 540 }}>
-      <SpreePay amount={99} onProcess={handleProcess} />
+      <SpreePay isLoading={status === 'processing'} amount={99} onProcess={handleProcess} />
       {status === 'success' && <p>Payment successful! Thank you for your order.</p>}
       {status === 'error' && <p>Payment failed. Please try again.</p>}
     </div>

package/build/index.cjs

@@ -316,7 +316,8 @@ function Dialog({ ...props }) {
 }
 function DialogPortal({ ...props }) {
   const container = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: container ?? void 0, "data-slot": "dialog-portal", ...props });
+  const safeContainer = container && document.body.contains(container) ? container : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -527,14 +528,14 @@ var SlapiPaymentService = {
   //   return coin.balance > outAmountNumber;
   // },
   createPayment: (params) => {
-    const { type, hash } = params;
+    const { type, hash, metadata, capture = false } = params;
     let reqParams;
     if (type === "CRYPTO" /* CRYPTO */) {
       reqParams = { type, hash, crypto: params.crypto };
     } else {
       reqParams = { type, hash, card: params.card };
     }
-    return slapiApi.post("/v1/payments", { ...reqParams, capture: false }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments", { ...reqParams, capture, metadata }).then((data) => ({ data }));
   },
   baseVerify: ({ id, txHash }) => {
     return slapiApi.post(`/v1/base-transactions/transactions/${id}/verify`, { txHash });
@@ -561,7 +562,13 @@ var SlapiPaymentService = {
 };
 
 // src/services/cardPayment.ts
-var cardPayment = async ({ card, hash, redirect3dsURI }) => {
+var cardPayment = async ({
+  card,
+  hash,
+  redirect3dsURI,
+  metadata,
+  capture
+}) => {
   let cardId = card.id;
   if ("token" in card) {
     const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
@@ -570,6 +577,8 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
   const { data: paymentResData } = await SlapiPaymentService.createPayment({
     hash,
     type: "CREDIT_CARD" /* CREDIT_CARD */,
+    metadata,
+    capture,
     card: { cardId, returnUrl: `${window.location.origin}${redirect3dsURI}` }
   });
   if (paymentResData.redirectUrl) {
@@ -577,13 +586,18 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
     if (paymentIntent) {
       const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
       return {
-        status: validateData.status
+        status: validateData.status,
+        paymentId: paymentResData.id,
+        txId: paymentResData.txId,
+        txHash: null
       };
     }
   }
   return {
     status: paymentResData.status,
-    paymentId: paymentResData.id
+    paymentId: paymentResData.id,
+    txId: paymentResData.txId,
+    txHash: null
   };
 };
 
@@ -996,8 +1010,8 @@ var CreditCardTab = () => {
       try {
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
           const res = await cardPayment({
+            ...data,
             card: selectedPaymentMethod.method,
-            hash: data.hash,
             redirect3dsURI: env.redirect3dsURI
           });
           if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
@@ -1157,7 +1171,7 @@ var useCryptoPayment = () => {
   const { data: walletClient } = (0, import_wagmi.useWalletClient)();
   const config2 = (0, import_wagmi.useConfig)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const cryptoPayment = async ({ hash }) => {
+  const cryptoPayment = async (params) => {
     if (!walletClient) {
       throw new Error("Wallet not connected");
     }
@@ -1191,8 +1205,8 @@ var useCryptoPayment = () => {
       }
     }
     const paymentRes = await SlapiPaymentService.createPayment({
+      ...params,
       type: "CRYPTO" /* CRYPTO */,
-      hash,
       crypto: {
         token: TOKEN,
         publicKey: walletClient.account.address,
@@ -1210,7 +1224,8 @@ var useCryptoPayment = () => {
     const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
     return {
       txHash,
-      paymentId: paymentRes.data.txId,
+      paymentId: paymentRes.data.id,
+      txId: paymentRes.data.txId,
       status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */
     };
   };
@@ -1589,7 +1604,7 @@ var Crypto = () => {
   const handlePay = (0, import_react8.useCallback)(
     async (data) => {
       try {
-        const res = await cryptoPayment({ hash: data.hash });
+        const res = await cryptoPayment(data);
         if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
           return Promise.resolve(res);
         }
@@ -1846,7 +1861,7 @@ var envConfig = {
 var SpreePay = ({ className, ...rest }) => {
   const rootRef = (0, import_react10.useRef)(null);
   const [portalEl, setPortalEl] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
@@ -1855,11 +1870,11 @@ var SpreePay = ({ className, ...rest }) => {
   const environment = env?.environment || "dev";
   const tenantId = env?.tenantId || "bookit";
   const { isChecking, accessToken, error } = useKeycloakSSO({
-    realm: env.tenantId,
+    realm: tenantId,
     url: envConfig[environment][tenantId].keyklockUrl,
     clientId: envConfig[environment][tenantId].keyklockClientId,
-    ssoPageURI: env.ssoPageURI,
-    enabled: !env.accessToken
+    ssoPageURI: env?.ssoPageURI,
+    enabled: !env?.accessToken
   });
   const slapiFetcher = (0, import_react10.useMemo)(() => {
     if (accessToken || env.accessToken) {
@@ -1870,18 +1885,17 @@ var SpreePay = ({ className, ...rest }) => {
       });
     }
   }, [env.accessToken, environment, tenantId, accessToken]);
-  if (isChecking) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-full text-center text-sm", children: [
-      "Error: ",
-      error.message
-    ] }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sl-spreepay__portal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const getContent = () => {
+    if (isChecking) {
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." });
+    }
+    if (error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-full text-center text-sm", children: [
+        "Error: ",
+        error.message
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_swr4.SWRConfig,
       {
         value: {
@@ -1892,7 +1906,11 @@ var SpreePay = ({ className, ...rest }) => {
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreePayContent, { ...rest }) }) })
       }
-    )
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sl-spreepay__portal" }),
+    getContent()
   ] });
 };
 

package/build/index.d.cts

@@ -93,9 +93,16 @@ declare const enum SlapiPaymentStatus {
 }
 type PaymentMethodResult = {
     status: SlapiPaymentStatus;
-    txHash?: string;
-    paymentId?: string;
+    paymentId: string;
+    txHash: string | null;
+    txId: string | null;
 };
+type ProcessFnParams = {
+    hash: string;
+    capture?: boolean;
+    metadata?: Record<string, unknown>;
+};
+type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;
 
 type SpreePayProviderProps = {
     children: ReactNode;
@@ -103,9 +110,7 @@ type SpreePayProviderProps = {
 };
 declare const SpreePayProvider: FC<SpreePayProviderProps>;
 declare const useSpreePay: () => {
-    process: (data: {
-        hash: string;
-    }) => Promise<PaymentMethodResult>;
+    process: ProcessFn;
     isProcessing: boolean;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;

package/build/index.d.ts

@@ -93,9 +93,16 @@ declare const enum SlapiPaymentStatus {
 }
 type PaymentMethodResult = {
     status: SlapiPaymentStatus;
-    txHash?: string;
-    paymentId?: string;
+    paymentId: string;
+    txHash: string | null;
+    txId: string | null;
 };
+type ProcessFnParams = {
+    hash: string;
+    capture?: boolean;
+    metadata?: Record<string, unknown>;
+};
+type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;
 
 type SpreePayProviderProps = {
     children: ReactNode;
@@ -103,9 +110,7 @@ type SpreePayProviderProps = {
 };
 declare const SpreePayProvider: FC<SpreePayProviderProps>;
 declare const useSpreePay: () => {
-    process: (data: {
-        hash: string;
-    }) => Promise<PaymentMethodResult>;
+    process: ProcessFn;
     isProcessing: boolean;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;

package/build/index.js

@@ -1,5 +1,5 @@
 // src/SpreePay.tsx
-import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef3, useState as useState7 } from "react";
+import { useLayoutEffect, useMemo as useMemo2, useRef as useRef3, useState as useState7 } from "react";
 import NiceModal6 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
@@ -277,7 +277,8 @@ function Dialog({ ...props }) {
 }
 function DialogPortal({ ...props }) {
   const container = usePortalContainer();
-  return /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { container: container ?? void 0, "data-slot": "dialog-portal", ...props });
+  const safeContainer = container && document.body.contains(container) ? container : void 0;
+  return /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsx5(
@@ -488,14 +489,14 @@ var SlapiPaymentService = {
   //   return coin.balance > outAmountNumber;
   // },
   createPayment: (params) => {
-    const { type, hash } = params;
+    const { type, hash, metadata, capture = false } = params;
     let reqParams;
     if (type === "CRYPTO" /* CRYPTO */) {
       reqParams = { type, hash, crypto: params.crypto };
     } else {
       reqParams = { type, hash, card: params.card };
     }
-    return slapiApi.post("/v1/payments", { ...reqParams, capture: false }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments", { ...reqParams, capture, metadata }).then((data) => ({ data }));
   },
   baseVerify: ({ id, txHash }) => {
     return slapiApi.post(`/v1/base-transactions/transactions/${id}/verify`, { txHash });
@@ -522,7 +523,13 @@ var SlapiPaymentService = {
 };
 
 // src/services/cardPayment.ts
-var cardPayment = async ({ card, hash, redirect3dsURI }) => {
+var cardPayment = async ({
+  card,
+  hash,
+  redirect3dsURI,
+  metadata,
+  capture
+}) => {
   let cardId = card.id;
   if ("token" in card) {
     const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
@@ -531,6 +538,8 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
   const { data: paymentResData } = await SlapiPaymentService.createPayment({
     hash,
     type: "CREDIT_CARD" /* CREDIT_CARD */,
+    metadata,
+    capture,
     card: { cardId, returnUrl: `${window.location.origin}${redirect3dsURI}` }
   });
   if (paymentResData.redirectUrl) {
@@ -538,13 +547,18 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
     if (paymentIntent) {
       const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
       return {
-        status: validateData.status
+        status: validateData.status,
+        paymentId: paymentResData.id,
+        txId: paymentResData.txId,
+        txHash: null
       };
     }
   }
   return {
     status: paymentResData.status,
-    paymentId: paymentResData.id
+    paymentId: paymentResData.id,
+    txId: paymentResData.txId,
+    txHash: null
   };
 };
 
@@ -957,8 +971,8 @@ var CreditCardTab = () => {
       try {
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
           const res = await cardPayment({
+            ...data,
             card: selectedPaymentMethod.method,
-            hash: data.hash,
             redirect3dsURI: env.redirect3dsURI
           });
           if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
@@ -1118,7 +1132,7 @@ var useCryptoPayment = () => {
   const { data: walletClient } = useWalletClient();
   const config2 = useConfig2();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const cryptoPayment = async ({ hash }) => {
+  const cryptoPayment = async (params) => {
     if (!walletClient) {
       throw new Error("Wallet not connected");
     }
@@ -1152,8 +1166,8 @@ var useCryptoPayment = () => {
       }
     }
     const paymentRes = await SlapiPaymentService.createPayment({
+      ...params,
       type: "CRYPTO" /* CRYPTO */,
-      hash,
       crypto: {
         token: TOKEN,
         publicKey: walletClient.account.address,
@@ -1171,7 +1185,8 @@ var useCryptoPayment = () => {
     const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
     return {
       txHash,
-      paymentId: paymentRes.data.txId,
+      paymentId: paymentRes.data.id,
+      txId: paymentRes.data.txId,
       status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */
     };
   };
@@ -1550,7 +1565,7 @@ var Crypto = () => {
   const handlePay = useCallback3(
     async (data) => {
       try {
-        const res = await cryptoPayment({ hash: data.hash });
+        const res = await cryptoPayment(data);
         if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
           return Promise.resolve(res);
         }
@@ -1807,7 +1822,7 @@ var envConfig = {
 var SpreePay = ({ className, ...rest }) => {
   const rootRef = useRef3(null);
   const [portalEl, setPortalEl] = useState7(null);
-  useEffect6(() => {
+  useLayoutEffect(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
@@ -1816,11 +1831,11 @@ var SpreePay = ({ className, ...rest }) => {
   const environment = env?.environment || "dev";
   const tenantId = env?.tenantId || "bookit";
   const { isChecking, accessToken, error } = useKeycloakSSO({
-    realm: env.tenantId,
+    realm: tenantId,
     url: envConfig[environment][tenantId].keyklockUrl,
     clientId: envConfig[environment][tenantId].keyklockClientId,
-    ssoPageURI: env.ssoPageURI,
-    enabled: !env.accessToken
+    ssoPageURI: env?.ssoPageURI,
+    enabled: !env?.accessToken
   });
   const slapiFetcher = useMemo2(() => {
     if (accessToken || env.accessToken) {
@@ -1831,18 +1846,17 @@ var SpreePay = ({ className, ...rest }) => {
       });
     }
   }, [env.accessToken, environment, tenantId, accessToken]);
-  if (isChecking) {
-    return /* @__PURE__ */ jsx28("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsx28("p", { className: "w-full text-center text-sm", children: "Loading..." }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx28("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs22("p", { className: "w-full text-center text-sm", children: [
-      "Error: ",
-      error.message
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs22("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
-    /* @__PURE__ */ jsx28("div", { className: "sl-spreepay__portal" }),
-    /* @__PURE__ */ jsx28(
+  const getContent = () => {
+    if (isChecking) {
+      return /* @__PURE__ */ jsx28("p", { className: "w-full text-center text-sm", children: "Loading..." });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxs22("p", { className: "w-full text-center text-sm", children: [
+        "Error: ",
+        error.message
+      ] });
+    }
+    return /* @__PURE__ */ jsx28(
       SWRConfig,
       {
         value: {
@@ -1853,14 +1867,18 @@ var SpreePay = ({ className, ...rest }) => {
         },
         children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { ...rest }) }) })
       }
-    )
+    );
+  };
+  return /* @__PURE__ */ jsxs22("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
+    /* @__PURE__ */ jsx28("div", { className: "sl-spreepay__portal" }),
+    getContent()
   ] });
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect7(() => {
+  useEffect6(() => {
     if (window?.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/package.json

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