@flash-pay/react 0.1.0

package/dist/FlashpayCheckout.d.ts

@@ -0,0 +1,14 @@
+import { PaymentEventData, PaymentData } from '@flash-pay/browser-sdk';
+export type { PaymentEventData, PaymentData };
+export interface FlashpayCheckoutProps {
+    transactionId: string;
+    onSuccess?: (data: PaymentEventData) => void;
+    onFailure?: (data: PaymentEventData) => void;
+    onClose?: (data: PaymentEventData) => void;
+    showTitle?: boolean;
+    showDescription?: boolean;
+    showAmount?: boolean;
+    style?: Partial<CSSStyleDeclaration>;
+    origin?: string;
+}
+export declare function FlashpayCheckout({ transactionId, onSuccess, onFailure, onClose, showTitle, showDescription, showAmount, style, origin, }: FlashpayCheckoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/FlashpayCheckout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),b=require("@flash-pay/browser-sdk"),e=require("react");function j({transactionId:u,onSuccess:c,onFailure:n,onClose:s,showTitle:o,showDescription:f,showAmount:a,style:d,origin:R}){const t=e.useRef(null),i=e.useRef(c),l=e.useRef(n),y=e.useRef(s);return e.useEffect(()=>{i.current=c,l.current=n,y.current=s}),e.useEffect(()=>{if(!t.current)return;const k=b.checkout({transactionId:u,container:t.current,onSuccess:r=>i.current?.(r),onFailure:r=>l.current?.(r),onClose:r=>y.current?.(r),showTitle:o,showDescription:f,showAmount:a,style:d,origin:R});return()=>k.destroy()},[u,o,f,a,R]),S.jsx("div",{ref:t})}exports.FlashpayCheckout=j;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/FlashpayCheckout.tsx"],"sourcesContent":["import { checkout } from \"@flash-pay/browser-sdk\";\nimport type { PaymentEventData, PaymentData } from \"@flash-pay/browser-sdk\";\nimport { useEffect, useRef } from \"react\";\n\nexport type { PaymentEventData, PaymentData };\n\nexport interface FlashpayCheckoutProps {\n  transactionId: string;\n  onSuccess?: (data: PaymentEventData) => void;\n  onFailure?: (data: PaymentEventData) => void;\n  onClose?: (data: PaymentEventData) => void;\n  showTitle?: boolean;\n  showDescription?: boolean;\n  showAmount?: boolean;\n  style?: Partial<CSSStyleDeclaration>;\n  origin?: string;\n}\n\nexport function FlashpayCheckout({\n  transactionId,\n  onSuccess,\n  onFailure,\n  onClose,\n  showTitle,\n  showDescription,\n  showAmount,\n  style,\n  origin,\n}: FlashpayCheckoutProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Stable refs so callback identity changes don't re-initialize the SDK\n  const onSuccessRef = useRef(onSuccess);\n  const onFailureRef = useRef(onFailure);\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onSuccessRef.current = onSuccess;\n    onFailureRef.current = onFailure;\n    onCloseRef.current = onClose;\n  });\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n    const instance = checkout({\n      transactionId,\n      container: containerRef.current,\n      onSuccess: (data) => onSuccessRef.current?.(data),\n      onFailure: (data) => onFailureRef.current?.(data),\n      onClose: (data) => onCloseRef.current?.(data),\n      showTitle,\n      showDescription,\n      showAmount,\n      style,\n      origin,\n    });\n    return () => instance.destroy();\n  }, [transactionId, showTitle, showDescription, showAmount, origin]);\n\n  return <div ref={containerRef} />;\n}\n"],"names":["FlashpayCheckout","transactionId","onSuccess","onFailure","onClose","showTitle","showDescription","showAmount","style","origin","containerRef","useRef","onSuccessRef","onFailureRef","onCloseRef","useEffect","instance","checkout","data","jsx"],"mappings":"4KAkBO,SAASA,EAAiB,CAC/B,cAAAC,EACA,UAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,MAAAC,EACA,OAAAC,CACF,EAA0B,CACxB,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAG1CC,EAAeD,EAAAA,OAAOT,CAAS,EAC/BW,EAAeF,EAAAA,OAAOR,CAAS,EAC/BW,EAAaH,EAAAA,OAAOP,CAAO,EACjCW,OAAAA,EAAAA,UAAU,IAAM,CACdH,EAAa,QAAUV,EACvBW,EAAa,QAAUV,EACvBW,EAAW,QAAUV,CACvB,CAAC,EAEDW,EAAAA,UAAU,IAAM,CACd,GAAI,CAACL,EAAa,QAAS,OAC3B,MAAMM,EAAWC,EAAAA,SAAS,CACxB,cAAAhB,EACA,UAAWS,EAAa,QACxB,UAAYQ,GAASN,EAAa,UAAUM,CAAI,EAChD,UAAYA,GAASL,EAAa,UAAUK,CAAI,EAChD,QAAUA,GAASJ,EAAW,UAAUI,CAAI,EAC5C,UAAAb,EACA,gBAAAC,EACA,WAAAC,EACA,MAAAC,EACA,OAAAC,CAAA,CACD,EACD,MAAO,IAAMO,EAAS,QAAA,CACxB,EAAG,CAACf,EAAeI,EAAWC,EAAiBC,EAAYE,CAAM,CAAC,EAE3DU,EAAAA,IAAC,MAAA,CAAI,IAAKT,CAAA,CAAc,CACjC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { FlashpayCheckout } from './FlashpayCheckout';
+export type { FlashpayCheckoutProps, PaymentEventData, PaymentData } from './FlashpayCheckout';

package/dist/index.es.js

@@ -0,0 +1,38 @@
+import { jsx as y } from "react/jsx-runtime";
+import { checkout as C } from "@flash-pay/browser-sdk";
+import { useRef as e, useEffect as p } from "react";
+function v({
+  transactionId: t,
+  onSuccess: c,
+  onFailure: u,
+  onClose: o,
+  showTitle: f,
+  showDescription: s,
+  showAmount: m,
+  style: k,
+  origin: R
+}) {
+  const n = e(null), a = e(c), i = e(u), l = e(o);
+  return p(() => {
+    a.current = c, i.current = u, l.current = o;
+  }), p(() => {
+    if (!n.current) return;
+    const x = C({
+      transactionId: t,
+      container: n.current,
+      onSuccess: (r) => a.current?.(r),
+      onFailure: (r) => i.current?.(r),
+      onClose: (r) => l.current?.(r),
+      showTitle: f,
+      showDescription: s,
+      showAmount: m,
+      style: k,
+      origin: R
+    });
+    return () => x.destroy();
+  }, [t, f, s, m, R]), /* @__PURE__ */ y("div", { ref: n });
+}
+export {
+  v as FlashpayCheckout
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/FlashpayCheckout.tsx"],"sourcesContent":["import { checkout } from \"@flash-pay/browser-sdk\";\nimport type { PaymentEventData, PaymentData } from \"@flash-pay/browser-sdk\";\nimport { useEffect, useRef } from \"react\";\n\nexport type { PaymentEventData, PaymentData };\n\nexport interface FlashpayCheckoutProps {\n  transactionId: string;\n  onSuccess?: (data: PaymentEventData) => void;\n  onFailure?: (data: PaymentEventData) => void;\n  onClose?: (data: PaymentEventData) => void;\n  showTitle?: boolean;\n  showDescription?: boolean;\n  showAmount?: boolean;\n  style?: Partial<CSSStyleDeclaration>;\n  origin?: string;\n}\n\nexport function FlashpayCheckout({\n  transactionId,\n  onSuccess,\n  onFailure,\n  onClose,\n  showTitle,\n  showDescription,\n  showAmount,\n  style,\n  origin,\n}: FlashpayCheckoutProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Stable refs so callback identity changes don't re-initialize the SDK\n  const onSuccessRef = useRef(onSuccess);\n  const onFailureRef = useRef(onFailure);\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onSuccessRef.current = onSuccess;\n    onFailureRef.current = onFailure;\n    onCloseRef.current = onClose;\n  });\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n    const instance = checkout({\n      transactionId,\n      container: containerRef.current,\n      onSuccess: (data) => onSuccessRef.current?.(data),\n      onFailure: (data) => onFailureRef.current?.(data),\n      onClose: (data) => onCloseRef.current?.(data),\n      showTitle,\n      showDescription,\n      showAmount,\n      style,\n      origin,\n    });\n    return () => instance.destroy();\n  }, [transactionId, showTitle, showDescription, showAmount, origin]);\n\n  return <div ref={containerRef} />;\n}\n"],"names":["FlashpayCheckout","transactionId","onSuccess","onFailure","onClose","showTitle","showDescription","showAmount","style","origin","containerRef","useRef","onSuccessRef","onFailureRef","onCloseRef","useEffect","instance","checkout","data","jsx"],"mappings":";;;AAkBO,SAASA,EAAiB;AAAA,EAC/B,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AACF,GAA0B;AACxB,QAAMC,IAAeC,EAAuB,IAAI,GAG1CC,IAAeD,EAAOT,CAAS,GAC/BW,IAAeF,EAAOR,CAAS,GAC/BW,IAAaH,EAAOP,CAAO;AACjC,SAAAW,EAAU,MAAM;AACd,IAAAH,EAAa,UAAUV,GACvBW,EAAa,UAAUV,GACvBW,EAAW,UAAUV;AAAA,EACvB,CAAC,GAEDW,EAAU,MAAM;AACd,QAAI,CAACL,EAAa,QAAS;AAC3B,UAAMM,IAAWC,EAAS;AAAA,MACxB,eAAAhB;AAAA,MACA,WAAWS,EAAa;AAAA,MACxB,WAAW,CAACQ,MAASN,EAAa,UAAUM,CAAI;AAAA,MAChD,WAAW,CAACA,MAASL,EAAa,UAAUK,CAAI;AAAA,MAChD,SAAS,CAACA,MAASJ,EAAW,UAAUI,CAAI;AAAA,MAC5C,WAAAb;AAAA,MACA,iBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AACD,WAAO,MAAMO,EAAS,QAAA;AAAA,EACxB,GAAG,CAACf,GAAeI,GAAWC,GAAiBC,GAAYE,CAAM,CAAC,GAE3D,gBAAAU,EAAC,OAAA,EAAI,KAAKT,EAAA,CAAc;AACjC;"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@flash-pay/react",
+  "version": "0.1.0",
+  "description": "Flashpay React component wrapper",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@flash-pay/browser-sdk": ">=0.1.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@flash-pay/browser-sdk": "workspace:*",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "ajv": "^8.18.0",
+    "jsdom": "^26.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.0.0"
+  }
+}