intrpay-payments 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +12 -12
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +12 -12
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -78,13 +78,13 @@ function PaymentDrawer({
78
78
  onClose,
79
79
  paymentLinkId,
80
80
  params,
81
- width = 400,
81
+ width = 600,
82
82
  position = "right",
83
83
  showOverlay = true,
84
84
  onSuccess,
85
85
  onFailure,
86
86
  closeOnOverlayClick = true,
87
- zIndex = 1e3
87
+ zIndex = 2e3
88
88
  }) {
89
89
  const { iframeUrl } = usePaymentIframe({
90
90
  paymentLinkId,
@@ -154,20 +154,20 @@ function PaymentDrawer({
154
154
  right: 12,
155
155
  width: 36,
156
156
  height: 36,
157
- border: "none",
158
- backgroundColor: "#f3f4f6",
157
+ border: "1px solid rgba(0, 0, 0, 0.2)",
158
+ backgroundColor: "#ffffff",
159
159
  borderRadius: "50%",
160
160
  cursor: "pointer",
161
161
  display: "flex",
162
162
  alignItems: "center",
163
163
  justifyContent: "center",
164
- color: "#6b7280",
165
- zIndex: 1
164
+ color: "#000000",
165
+ zIndex: 10,
166
+ boxShadow: "0 1px 4px rgba(0, 0, 0, 0.2)"
166
167
  },
167
168
  content: {
168
169
  flex: 1,
169
- overflow: "hidden",
170
- paddingTop: 60
170
+ overflow: "hidden"
171
171
  },
172
172
  iframe: {
173
173
  width: "100%",
@@ -200,12 +200,12 @@ function PaymentDrawer({
200
200
  "aria-label": "Close drawer",
201
201
  type: "button",
202
202
  onMouseEnter: (e) => {
203
- e.currentTarget.style.backgroundColor = "#e5e7eb";
204
- e.currentTarget.style.color = "#374151";
203
+ e.currentTarget.style.backgroundColor = "#f0f0f0";
204
+ e.currentTarget.style.color = "#000000";
205
205
  },
206
206
  onMouseLeave: (e) => {
207
- e.currentTarget.style.backgroundColor = "#f3f4f6";
208
- e.currentTarget.style.color = "#6b7280";
207
+ e.currentTarget.style.backgroundColor = "#ffffff";
208
+ e.currentTarget.style.color = "#000000";
209
209
  },
210
210
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
211
211
  "svg",
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/PaymentDrawer.tsx","../src/payment-shared.ts","../src/components/PaymentEmbed.tsx"],"sourcesContent":["export { PaymentDrawer } from './components/PaymentDrawer';\nexport { PaymentEmbed } from './components/PaymentEmbed';\nexport type { PaymentDrawerProps, PaymentParams } from './components/PaymentDrawer';\nexport type { PaymentEmbedProps } from './components/PaymentEmbed';\n","import React, { useEffect, useCallback, CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport type { PaymentParams };\n\nexport interface PaymentDrawerProps {\n /** Whether the drawer is open */\n open: boolean;\n /** Callback when the drawer should close */\n onClose: () => void;\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Width of the drawer (default: 400px) */\n width?: string | number;\n /** Position of the drawer */\n position?: \"left\" | \"right\";\n /** Whether to show overlay backdrop */\n showOverlay?: boolean;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Whether clicking overlay closes the drawer */\n closeOnOverlayClick?: boolean;\n /** Z-index for the drawer */\n zIndex?: number;\n}\n\nexport function PaymentDrawer({\n open,\n onClose,\n paymentLinkId,\n params,\n width = 400,\n position = \"right\",\n showOverlay = true,\n onSuccess,\n onFailure,\n closeOnOverlayClick = true,\n zIndex = 1000,\n}: PaymentDrawerProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && open) {\n onClose();\n }\n },\n [open, onClose],\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleKeyDown]);\n\n useEffect(() => {\n if (open) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n return () => {\n document.body.style.overflow = \"\";\n };\n }, [open]);\n\n const handleOverlayClick = () => {\n if (closeOnOverlayClick) {\n onClose();\n }\n };\n\n const drawerWidth = typeof width === \"number\" ? `${width}px` : width;\n\n const styles: Record<string, CSSProperties> = {\n overlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n zIndex,\n opacity: open ? 1 : 0,\n visibility: open ? \"visible\" : \"hidden\",\n transition: \"opacity 0.3s ease, visibility 0.3s ease\",\n },\n drawer: {\n position: \"fixed\",\n top: 0,\n bottom: 0,\n [position]: 0,\n width: drawerWidth,\n maxWidth: \"100%\",\n backgroundColor: \"#ffffff\",\n zIndex: zIndex + 1,\n boxShadow:\n position === \"right\"\n ? \"-4px 0 20px rgba(0, 0, 0, 0.15)\"\n : \"4px 0 20px rgba(0, 0, 0, 0.15)\",\n transform: open\n ? \"translateX(0)\"\n : `translateX(${position === \"right\" ? \"100%\" : \"-100%\"})`,\n transition: \"transform 0.3s ease\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n closeButton: {\n position: \"absolute\",\n top: 12,\n right: 12,\n width: 36,\n height: 36,\n border: \"none\",\n backgroundColor: \"#f3f4f6\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#6b7280\",\n zIndex: 1,\n },\n content: {\n flex: 1,\n overflow: \"hidden\",\n paddingTop: 60,\n },\n iframe: {\n width: \"100%\",\n height: \"100%\",\n border: \"none\",\n },\n };\n\n return (\n <>\n {showOverlay && (\n <div\n style={styles.overlay}\n onClick={handleOverlayClick}\n aria-hidden=\"true\"\n />\n )}\n <div\n style={styles.drawer}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Payment\"\n >\n <button\n style={styles.closeButton}\n onClick={onClose}\n aria-label=\"Close drawer\"\n type=\"button\"\n onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#e5e7eb\";\n e.currentTarget.style.color = \"#374151\";\n }}\n onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#f3f4f6\";\n e.currentTarget.style.color = \"#6b7280\";\n }}\n >\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n <div style={styles.content}>\n <iframe\n src={open ? iframeUrl : \"about:blank\"}\n title=\"Payment\"\n style={styles.iframe}\n allow=\"payment; clipboard-write\"\n />\n </div>\n </div>\n </>\n );\n}\n","import { useEffect, useMemo } from \"react\";\n\nexport const BASE_URL = \"https://pay.intrpay.us\";\n\nconst baseParams = {\n showHeader: false,\n};\n\nexport interface PaymentParams {\n /** Payment amount */\n amount?: number;\n /** Customer's first name */\n firstName?: string;\n /** Customer's last name */\n lastName?: string;\n /** Customer's email */\n email?: string;\n /** Customer's phone number */\n phone?: string;\n /** Company name */\n companyName?: string;\n /** Whether to show the contact form */\n showContactForm?: boolean;\n}\n\nexport function buildPaymentUrl(\n paymentLinkId: string,\n params?: PaymentParams\n): string {\n const url = new URL(`${BASE_URL}/${paymentLinkId}`);\n const combinedParams = { ...baseParams, ...params };\n\n Object.entries(combinedParams).forEach(([key, value]) => {\n if (value !== undefined && value !== null && value !== \"\") {\n url.searchParams.set(key, String(value));\n }\n });\n\n return url.toString();\n}\n\nexport interface UsePaymentIframeOptions {\n paymentLinkId: string;\n params?: PaymentParams;\n onSuccess?: (data: unknown) => void;\n onFailure?: (data: unknown) => void;\n}\n\nexport function usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n}: UsePaymentIframeOptions) {\n const iframeUrl = useMemo(\n () => buildPaymentUrl(paymentLinkId, params),\n [paymentLinkId, params]\n );\n\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (event.origin !== BASE_URL) return;\n\n const data = event.data ?? {};\n const { type } = data as { type?: string };\n\n if (type === \"payment_success\") {\n onSuccess?.(data);\n } else if (type === \"payment_failure\") {\n onFailure?.(data);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [onSuccess, onFailure]);\n\n return { iframeUrl };\n}\n","import React, { CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport interface PaymentEmbedProps {\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Height of the iframe (default: 400px) */\n height?: string | number;\n /** Width of the iframe (default: 100%) */\n width?: string | number;\n /** Optional CSS class name */\n className?: string;\n /** Optional inline styles for the container */\n style?: CSSProperties;\n}\n\nexport function PaymentEmbed({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n height = 400,\n width = \"100%\",\n className,\n style,\n}: PaymentEmbedProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const iframeHeight = typeof height === \"number\" ? `${height}px` : height;\n const iframeWidth = typeof width === \"number\" ? `${width}px` : width;\n\n return (\n <div className={className} style={style}>\n <iframe\n src={iframeUrl}\n title=\"Payment\"\n style={{\n width: iframeWidth,\n height: iframeHeight,\n border: \"none\",\n }}\n allow=\"payment; clipboard-write\"\n />\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA6D;;;ACA7D,mBAAmC;AAE5B,IAAM,WAAW;AAExB,IAAM,aAAa;AAAA,EACjB,YAAY;AACd;AAmBO,SAAS,gBACd,eACA,QACQ;AACR,QAAM,MAAM,IAAI,IAAI,GAAG,QAAQ,IAAI,aAAa,EAAE;AAClD,QAAM,iBAAiB,EAAE,GAAG,YAAY,GAAG,OAAO;AAElD,SAAO,QAAQ,cAAc,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACvD,QAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACzD,UAAI,aAAa,IAAI,KAAK,OAAO,KAAK,CAAC;AAAA,IACzC;AAAA,EACF,CAAC;AAED,SAAO,IAAI,SAAS;AACtB;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,gBAAY;AAAA,IAChB,MAAM,gBAAgB,eAAe,MAAM;AAAA,IAC3C,CAAC,eAAe,MAAM;AAAA,EACxB;AAEA,8BAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAwB;AAC7C,UAAI,MAAM,WAAW,SAAU;AAE/B,YAAM,OAAO,MAAM,QAAQ,CAAC;AAC5B,YAAM,EAAE,KAAK,IAAI;AAEjB,UAAI,SAAS,mBAAmB;AAC9B,oBAAY,IAAI;AAAA,MAClB,WAAW,SAAS,mBAAmB;AACrC,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,WAAW,SAAS,CAAC;AAEzB,SAAO,EAAE,UAAU;AACrB;;;ADoEI;AAnHG,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,SAAS;AACX,GAAuB;AACrB,QAAM,EAAE,UAAU,IAAI,iBAAiB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,oBAAgB;AAAA,IACpB,CAAC,UAAyB;AACxB,UAAI,MAAM,QAAQ,YAAY,MAAM;AAClC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO;AAAA,EAChB;AAEA,+BAAU,MAAM;AACd,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM,SAAS,oBAAoB,WAAW,aAAa;AAAA,EACpE,GAAG,CAAC,aAAa,CAAC;AAElB,+BAAU,MAAM;AACd,QAAI,MAAM;AACR,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,OAAO;AACL,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AACA,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,qBAAqB,MAAM;AAC/B,QAAI,qBAAqB;AACvB,cAAQ;AAAA,IACV;AAAA,EACF;AAEA,QAAM,cAAc,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAE/D,QAAM,SAAwC;AAAA,IAC5C,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB;AAAA,MACA,SAAS,OAAO,IAAI;AAAA,MACpB,YAAY,OAAO,YAAY;AAAA,MAC/B,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,CAAC,QAAQ,GAAG;AAAA,MACZ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,QAAQ,SAAS;AAAA,MACjB,WACE,aAAa,UACT,oCACA;AAAA,MACN,WAAW,OACP,kBACA,cAAc,aAAa,UAAU,SAAS,OAAO;AAAA,MACzD,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE,4EACG;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,OAAO;AAAA,QACd,SAAS;AAAA,QACT,eAAY;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,OAAO;AAAA,QACd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAW;AAAA,QAEX;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACd,SAAS;AAAA,cACT,cAAW;AAAA,cACX,MAAK;AAAA,cACL,cAAc,CAAC,MAA2C;AACxD,kBAAE,cAAc,MAAM,kBAAkB;AACxC,kBAAE,cAAc,MAAM,QAAQ;AAAA,cAChC;AAAA,cACA,cAAc,CAAC,MAA2C;AACxD,kBAAE,cAAc,MAAM,kBAAkB;AACxC,kBAAE,cAAc,MAAM,QAAQ;AAAA,cAChC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA,kBACd,gBAAe;AAAA,kBAEf;AAAA,gEAAC,UAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK;AAAA,oBACpC,4CAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK;AAAA;AAAA;AAAA,cACtC;AAAA;AAAA,UACF;AAAA,UACA,4CAAC,SAAI,OAAO,OAAO,SACjB;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,OAAO,YAAY;AAAA,cACxB,OAAM;AAAA,cACN,OAAO,OAAO;AAAA,cACd,OAAM;AAAA;AAAA,UACR,GACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;;;AE1JM,IAAAC,sBAAA;AAtBC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,EAAE,UAAU,IAAI,iBAAiB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAClE,QAAM,cAAc,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAE/D,SACE,6CAAC,SAAI,WAAsB,OACzB;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAM;AAAA,MACN,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,OAAM;AAAA;AAAA,EACR,GACF;AAEJ;","names":["import_react","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/PaymentDrawer.tsx","../src/payment-shared.ts","../src/components/PaymentEmbed.tsx"],"sourcesContent":["export { PaymentDrawer } from './components/PaymentDrawer';\nexport { PaymentEmbed } from './components/PaymentEmbed';\nexport type { PaymentDrawerProps, PaymentParams } from './components/PaymentDrawer';\nexport type { PaymentEmbedProps } from './components/PaymentEmbed';\n","import React, { useEffect, useCallback, CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport type { PaymentParams };\n\nexport interface PaymentDrawerProps {\n /** Whether the drawer is open */\n open: boolean;\n /** Callback when the drawer should close */\n onClose: () => void;\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Width of the drawer (default: 400px) */\n width?: string | number;\n /** Position of the drawer */\n position?: \"left\" | \"right\";\n /** Whether to show overlay backdrop */\n showOverlay?: boolean;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Whether clicking overlay closes the drawer */\n closeOnOverlayClick?: boolean;\n /** Z-index for the drawer */\n zIndex?: number;\n}\n\nexport function PaymentDrawer({\n open,\n onClose,\n paymentLinkId,\n params,\n width = 600,\n position = \"right\",\n showOverlay = true,\n onSuccess,\n onFailure,\n closeOnOverlayClick = true,\n zIndex = 2000,\n}: PaymentDrawerProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && open) {\n onClose();\n }\n },\n [open, onClose],\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleKeyDown]);\n\n useEffect(() => {\n if (open) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n return () => {\n document.body.style.overflow = \"\";\n };\n }, [open]);\n\n const handleOverlayClick = () => {\n if (closeOnOverlayClick) {\n onClose();\n }\n };\n\n const drawerWidth = typeof width === \"number\" ? `${width}px` : width;\n\n const styles: Record<string, CSSProperties> = {\n overlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n zIndex,\n opacity: open ? 1 : 0,\n visibility: open ? \"visible\" : \"hidden\",\n transition: \"opacity 0.3s ease, visibility 0.3s ease\",\n },\n drawer: {\n position: \"fixed\",\n top: 0,\n bottom: 0,\n [position]: 0,\n width: drawerWidth,\n maxWidth: \"100%\",\n backgroundColor: \"#ffffff\",\n zIndex: zIndex + 1,\n boxShadow:\n position === \"right\"\n ? \"-4px 0 20px rgba(0, 0, 0, 0.15)\"\n : \"4px 0 20px rgba(0, 0, 0, 0.15)\",\n transform: open\n ? \"translateX(0)\"\n : `translateX(${position === \"right\" ? \"100%\" : \"-100%\"})`,\n transition: \"transform 0.3s ease\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n closeButton: {\n position: \"absolute\",\n top: 12,\n right: 12,\n width: 36,\n height: 36,\n border: \"1px solid rgba(0, 0, 0, 0.2)\",\n backgroundColor: \"#ffffff\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#000000\",\n zIndex: 10,\n boxShadow: \"0 1px 4px rgba(0, 0, 0, 0.2)\",\n },\n content: {\n flex: 1,\n overflow: \"hidden\",\n },\n iframe: {\n width: \"100%\",\n height: \"100%\",\n border: \"none\",\n },\n };\n\n return (\n <>\n {showOverlay && (\n <div\n style={styles.overlay}\n onClick={handleOverlayClick}\n aria-hidden=\"true\"\n />\n )}\n <div\n style={styles.drawer}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Payment\"\n >\n <button\n style={styles.closeButton}\n onClick={onClose}\n aria-label=\"Close drawer\"\n type=\"button\"\n onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#f0f0f0\";\n e.currentTarget.style.color = \"#000000\";\n }}\n onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#ffffff\";\n e.currentTarget.style.color = \"#000000\";\n }}\n >\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n <div style={styles.content}>\n <iframe\n src={open ? iframeUrl : \"about:blank\"}\n title=\"Payment\"\n style={styles.iframe}\n allow=\"payment; clipboard-write\"\n />\n </div>\n </div>\n </>\n );\n}\n","import { useEffect, useMemo } from \"react\";\n\nexport const BASE_URL = \"https://pay.intrpay.us\";\n\nconst baseParams = {\n showHeader: false,\n};\n\nexport interface PaymentParams {\n /** Payment amount */\n amount?: number;\n /** Customer's first name */\n firstName?: string;\n /** Customer's last name */\n lastName?: string;\n /** Customer's email */\n email?: string;\n /** Customer's phone number */\n phone?: string;\n /** Company name */\n companyName?: string;\n /** Whether to show the contact form */\n showContactForm?: boolean;\n}\n\nexport function buildPaymentUrl(\n paymentLinkId: string,\n params?: PaymentParams\n): string {\n const url = new URL(`${BASE_URL}/${paymentLinkId}`);\n const combinedParams = { ...baseParams, ...params };\n\n Object.entries(combinedParams).forEach(([key, value]) => {\n if (value !== undefined && value !== null && value !== \"\") {\n url.searchParams.set(key, String(value));\n }\n });\n\n return url.toString();\n}\n\nexport interface UsePaymentIframeOptions {\n paymentLinkId: string;\n params?: PaymentParams;\n onSuccess?: (data: unknown) => void;\n onFailure?: (data: unknown) => void;\n}\n\nexport function usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n}: UsePaymentIframeOptions) {\n const iframeUrl = useMemo(\n () => buildPaymentUrl(paymentLinkId, params),\n [paymentLinkId, params]\n );\n\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (event.origin !== BASE_URL) return;\n\n const data = event.data ?? {};\n const { type } = data as { type?: string };\n\n if (type === \"payment_success\") {\n onSuccess?.(data);\n } else if (type === \"payment_failure\") {\n onFailure?.(data);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [onSuccess, onFailure]);\n\n return { iframeUrl };\n}\n","import React, { CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport interface PaymentEmbedProps {\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Height of the iframe (default: 400px) */\n height?: string | number;\n /** Width of the iframe (default: 100%) */\n width?: string | number;\n /** Optional CSS class name */\n className?: string;\n /** Optional inline styles for the container */\n style?: CSSProperties;\n}\n\nexport function PaymentEmbed({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n height = 400,\n width = \"100%\",\n className,\n style,\n}: PaymentEmbedProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const iframeHeight = typeof height === \"number\" ? `${height}px` : height;\n const iframeWidth = typeof width === \"number\" ? `${width}px` : width;\n\n return (\n <div className={className} style={style}>\n <iframe\n src={iframeUrl}\n title=\"Payment\"\n style={{\n width: iframeWidth,\n height: iframeHeight,\n border: \"none\",\n }}\n allow=\"payment; clipboard-write\"\n />\n </div>\n );\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime"]}
package/dist/index.js CHANGED
@@ -51,13 +51,13 @@ function PaymentDrawer({
51
51
  onClose,
52
52
  paymentLinkId,
53
53
  params,
54
- width = 400,
54
+ width = 600,
55
55
  position = "right",
56
56
  showOverlay = true,
57
57
  onSuccess,
58
58
  onFailure,
59
59
  closeOnOverlayClick = true,
60
- zIndex = 1e3
60
+ zIndex = 2e3
61
61
  }) {
62
62
  const { iframeUrl } = usePaymentIframe({
63
63
  paymentLinkId,
@@ -127,20 +127,20 @@ function PaymentDrawer({
127
127
  right: 12,
128
128
  width: 36,
129
129
  height: 36,
130
- border: "none",
131
- backgroundColor: "#f3f4f6",
130
+ border: "1px solid rgba(0, 0, 0, 0.2)",
131
+ backgroundColor: "#ffffff",
132
132
  borderRadius: "50%",
133
133
  cursor: "pointer",
134
134
  display: "flex",
135
135
  alignItems: "center",
136
136
  justifyContent: "center",
137
- color: "#6b7280",
138
- zIndex: 1
137
+ color: "#000000",
138
+ zIndex: 10,
139
+ boxShadow: "0 1px 4px rgba(0, 0, 0, 0.2)"
139
140
  },
140
141
  content: {
141
142
  flex: 1,
142
- overflow: "hidden",
143
- paddingTop: 60
143
+ overflow: "hidden"
144
144
  },
145
145
  iframe: {
146
146
  width: "100%",
@@ -173,12 +173,12 @@ function PaymentDrawer({
173
173
  "aria-label": "Close drawer",
174
174
  type: "button",
175
175
  onMouseEnter: (e) => {
176
- e.currentTarget.style.backgroundColor = "#e5e7eb";
177
- e.currentTarget.style.color = "#374151";
176
+ e.currentTarget.style.backgroundColor = "#f0f0f0";
177
+ e.currentTarget.style.color = "#000000";
178
178
  },
179
179
  onMouseLeave: (e) => {
180
- e.currentTarget.style.backgroundColor = "#f3f4f6";
181
- e.currentTarget.style.color = "#6b7280";
180
+ e.currentTarget.style.backgroundColor = "#ffffff";
181
+ e.currentTarget.style.color = "#000000";
182
182
  },
183
183
  children: /* @__PURE__ */ jsxs(
184
184
  "svg",
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/PaymentDrawer.tsx","../src/payment-shared.ts","../src/components/PaymentEmbed.tsx"],"sourcesContent":["import React, { useEffect, useCallback, CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport type { PaymentParams };\n\nexport interface PaymentDrawerProps {\n /** Whether the drawer is open */\n open: boolean;\n /** Callback when the drawer should close */\n onClose: () => void;\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Width of the drawer (default: 400px) */\n width?: string | number;\n /** Position of the drawer */\n position?: \"left\" | \"right\";\n /** Whether to show overlay backdrop */\n showOverlay?: boolean;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Whether clicking overlay closes the drawer */\n closeOnOverlayClick?: boolean;\n /** Z-index for the drawer */\n zIndex?: number;\n}\n\nexport function PaymentDrawer({\n open,\n onClose,\n paymentLinkId,\n params,\n width = 400,\n position = \"right\",\n showOverlay = true,\n onSuccess,\n onFailure,\n closeOnOverlayClick = true,\n zIndex = 1000,\n}: PaymentDrawerProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && open) {\n onClose();\n }\n },\n [open, onClose],\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleKeyDown]);\n\n useEffect(() => {\n if (open) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n return () => {\n document.body.style.overflow = \"\";\n };\n }, [open]);\n\n const handleOverlayClick = () => {\n if (closeOnOverlayClick) {\n onClose();\n }\n };\n\n const drawerWidth = typeof width === \"number\" ? `${width}px` : width;\n\n const styles: Record<string, CSSProperties> = {\n overlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n zIndex,\n opacity: open ? 1 : 0,\n visibility: open ? \"visible\" : \"hidden\",\n transition: \"opacity 0.3s ease, visibility 0.3s ease\",\n },\n drawer: {\n position: \"fixed\",\n top: 0,\n bottom: 0,\n [position]: 0,\n width: drawerWidth,\n maxWidth: \"100%\",\n backgroundColor: \"#ffffff\",\n zIndex: zIndex + 1,\n boxShadow:\n position === \"right\"\n ? \"-4px 0 20px rgba(0, 0, 0, 0.15)\"\n : \"4px 0 20px rgba(0, 0, 0, 0.15)\",\n transform: open\n ? \"translateX(0)\"\n : `translateX(${position === \"right\" ? \"100%\" : \"-100%\"})`,\n transition: \"transform 0.3s ease\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n closeButton: {\n position: \"absolute\",\n top: 12,\n right: 12,\n width: 36,\n height: 36,\n border: \"none\",\n backgroundColor: \"#f3f4f6\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#6b7280\",\n zIndex: 1,\n },\n content: {\n flex: 1,\n overflow: \"hidden\",\n paddingTop: 60,\n },\n iframe: {\n width: \"100%\",\n height: \"100%\",\n border: \"none\",\n },\n };\n\n return (\n <>\n {showOverlay && (\n <div\n style={styles.overlay}\n onClick={handleOverlayClick}\n aria-hidden=\"true\"\n />\n )}\n <div\n style={styles.drawer}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Payment\"\n >\n <button\n style={styles.closeButton}\n onClick={onClose}\n aria-label=\"Close drawer\"\n type=\"button\"\n onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#e5e7eb\";\n e.currentTarget.style.color = \"#374151\";\n }}\n onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#f3f4f6\";\n e.currentTarget.style.color = \"#6b7280\";\n }}\n >\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n <div style={styles.content}>\n <iframe\n src={open ? iframeUrl : \"about:blank\"}\n title=\"Payment\"\n style={styles.iframe}\n allow=\"payment; clipboard-write\"\n />\n </div>\n </div>\n </>\n );\n}\n","import { useEffect, useMemo } from \"react\";\n\nexport const BASE_URL = \"https://pay.intrpay.us\";\n\nconst baseParams = {\n showHeader: false,\n};\n\nexport interface PaymentParams {\n /** Payment amount */\n amount?: number;\n /** Customer's first name */\n firstName?: string;\n /** Customer's last name */\n lastName?: string;\n /** Customer's email */\n email?: string;\n /** Customer's phone number */\n phone?: string;\n /** Company name */\n companyName?: string;\n /** Whether to show the contact form */\n showContactForm?: boolean;\n}\n\nexport function buildPaymentUrl(\n paymentLinkId: string,\n params?: PaymentParams\n): string {\n const url = new URL(`${BASE_URL}/${paymentLinkId}`);\n const combinedParams = { ...baseParams, ...params };\n\n Object.entries(combinedParams).forEach(([key, value]) => {\n if (value !== undefined && value !== null && value !== \"\") {\n url.searchParams.set(key, String(value));\n }\n });\n\n return url.toString();\n}\n\nexport interface UsePaymentIframeOptions {\n paymentLinkId: string;\n params?: PaymentParams;\n onSuccess?: (data: unknown) => void;\n onFailure?: (data: unknown) => void;\n}\n\nexport function usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n}: UsePaymentIframeOptions) {\n const iframeUrl = useMemo(\n () => buildPaymentUrl(paymentLinkId, params),\n [paymentLinkId, params]\n );\n\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (event.origin !== BASE_URL) return;\n\n const data = event.data ?? {};\n const { type } = data as { type?: string };\n\n if (type === \"payment_success\") {\n onSuccess?.(data);\n } else if (type === \"payment_failure\") {\n onFailure?.(data);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [onSuccess, onFailure]);\n\n return { iframeUrl };\n}\n","import React, { CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport interface PaymentEmbedProps {\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Height of the iframe (default: 400px) */\n height?: string | number;\n /** Width of the iframe (default: 100%) */\n width?: string | number;\n /** Optional CSS class name */\n className?: string;\n /** Optional inline styles for the container */\n style?: CSSProperties;\n}\n\nexport function PaymentEmbed({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n height = 400,\n width = \"100%\",\n className,\n style,\n}: PaymentEmbedProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const iframeHeight = typeof height === \"number\" ? `${height}px` : height;\n const iframeWidth = typeof width === \"number\" ? `${width}px` : width;\n\n return (\n <div className={className} style={style}>\n <iframe\n src={iframeUrl}\n title=\"Payment\"\n style={{\n width: iframeWidth,\n height: iframeHeight,\n border: \"none\",\n }}\n allow=\"payment; clipboard-write\"\n />\n </div>\n );\n}\n"],"mappings":"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","names":["useEffect","useEffect","jsx"]}
1
+ {"version":3,"sources":["../src/components/PaymentDrawer.tsx","../src/payment-shared.ts","../src/components/PaymentEmbed.tsx"],"sourcesContent":["import React, { useEffect, useCallback, CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport type { PaymentParams };\n\nexport interface PaymentDrawerProps {\n /** Whether the drawer is open */\n open: boolean;\n /** Callback when the drawer should close */\n onClose: () => void;\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Width of the drawer (default: 400px) */\n width?: string | number;\n /** Position of the drawer */\n position?: \"left\" | \"right\";\n /** Whether to show overlay backdrop */\n showOverlay?: boolean;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Whether clicking overlay closes the drawer */\n closeOnOverlayClick?: boolean;\n /** Z-index for the drawer */\n zIndex?: number;\n}\n\nexport function PaymentDrawer({\n open,\n onClose,\n paymentLinkId,\n params,\n width = 600,\n position = \"right\",\n showOverlay = true,\n onSuccess,\n onFailure,\n closeOnOverlayClick = true,\n zIndex = 2000,\n}: PaymentDrawerProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && open) {\n onClose();\n }\n },\n [open, onClose],\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleKeyDown]);\n\n useEffect(() => {\n if (open) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n return () => {\n document.body.style.overflow = \"\";\n };\n }, [open]);\n\n const handleOverlayClick = () => {\n if (closeOnOverlayClick) {\n onClose();\n }\n };\n\n const drawerWidth = typeof width === \"number\" ? `${width}px` : width;\n\n const styles: Record<string, CSSProperties> = {\n overlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n zIndex,\n opacity: open ? 1 : 0,\n visibility: open ? \"visible\" : \"hidden\",\n transition: \"opacity 0.3s ease, visibility 0.3s ease\",\n },\n drawer: {\n position: \"fixed\",\n top: 0,\n bottom: 0,\n [position]: 0,\n width: drawerWidth,\n maxWidth: \"100%\",\n backgroundColor: \"#ffffff\",\n zIndex: zIndex + 1,\n boxShadow:\n position === \"right\"\n ? \"-4px 0 20px rgba(0, 0, 0, 0.15)\"\n : \"4px 0 20px rgba(0, 0, 0, 0.15)\",\n transform: open\n ? \"translateX(0)\"\n : `translateX(${position === \"right\" ? \"100%\" : \"-100%\"})`,\n transition: \"transform 0.3s ease\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n closeButton: {\n position: \"absolute\",\n top: 12,\n right: 12,\n width: 36,\n height: 36,\n border: \"1px solid rgba(0, 0, 0, 0.2)\",\n backgroundColor: \"#ffffff\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#000000\",\n zIndex: 10,\n boxShadow: \"0 1px 4px rgba(0, 0, 0, 0.2)\",\n },\n content: {\n flex: 1,\n overflow: \"hidden\",\n },\n iframe: {\n width: \"100%\",\n height: \"100%\",\n border: \"none\",\n },\n };\n\n return (\n <>\n {showOverlay && (\n <div\n style={styles.overlay}\n onClick={handleOverlayClick}\n aria-hidden=\"true\"\n />\n )}\n <div\n style={styles.drawer}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Payment\"\n >\n <button\n style={styles.closeButton}\n onClick={onClose}\n aria-label=\"Close drawer\"\n type=\"button\"\n onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#f0f0f0\";\n e.currentTarget.style.color = \"#000000\";\n }}\n onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.currentTarget.style.backgroundColor = \"#ffffff\";\n e.currentTarget.style.color = \"#000000\";\n }}\n >\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n <div style={styles.content}>\n <iframe\n src={open ? iframeUrl : \"about:blank\"}\n title=\"Payment\"\n style={styles.iframe}\n allow=\"payment; clipboard-write\"\n />\n </div>\n </div>\n </>\n );\n}\n","import { useEffect, useMemo } from \"react\";\n\nexport const BASE_URL = \"https://pay.intrpay.us\";\n\nconst baseParams = {\n showHeader: false,\n};\n\nexport interface PaymentParams {\n /** Payment amount */\n amount?: number;\n /** Customer's first name */\n firstName?: string;\n /** Customer's last name */\n lastName?: string;\n /** Customer's email */\n email?: string;\n /** Customer's phone number */\n phone?: string;\n /** Company name */\n companyName?: string;\n /** Whether to show the contact form */\n showContactForm?: boolean;\n}\n\nexport function buildPaymentUrl(\n paymentLinkId: string,\n params?: PaymentParams\n): string {\n const url = new URL(`${BASE_URL}/${paymentLinkId}`);\n const combinedParams = { ...baseParams, ...params };\n\n Object.entries(combinedParams).forEach(([key, value]) => {\n if (value !== undefined && value !== null && value !== \"\") {\n url.searchParams.set(key, String(value));\n }\n });\n\n return url.toString();\n}\n\nexport interface UsePaymentIframeOptions {\n paymentLinkId: string;\n params?: PaymentParams;\n onSuccess?: (data: unknown) => void;\n onFailure?: (data: unknown) => void;\n}\n\nexport function usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n}: UsePaymentIframeOptions) {\n const iframeUrl = useMemo(\n () => buildPaymentUrl(paymentLinkId, params),\n [paymentLinkId, params]\n );\n\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (event.origin !== BASE_URL) return;\n\n const data = event.data ?? {};\n const { type } = data as { type?: string };\n\n if (type === \"payment_success\") {\n onSuccess?.(data);\n } else if (type === \"payment_failure\") {\n onFailure?.(data);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [onSuccess, onFailure]);\n\n return { iframeUrl };\n}\n","import React, { CSSProperties } from \"react\";\nimport { usePaymentIframe } from \"../payment-shared\";\nimport type { PaymentParams } from \"../payment-shared\";\n\nexport interface PaymentEmbedProps {\n /** Payment link ID */\n paymentLinkId: string;\n /** Payment parameters to pass as URL query params */\n params?: PaymentParams;\n /** Callback when payment succeeds; receives the message data from the iframe */\n onSuccess?: (data: unknown) => void;\n /** Callback when payment fails; receives the message data from the iframe */\n onFailure?: (data: unknown) => void;\n /** Height of the iframe (default: 400px) */\n height?: string | number;\n /** Width of the iframe (default: 100%) */\n width?: string | number;\n /** Optional CSS class name */\n className?: string;\n /** Optional inline styles for the container */\n style?: CSSProperties;\n}\n\nexport function PaymentEmbed({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n height = 400,\n width = \"100%\",\n className,\n style,\n}: PaymentEmbedProps) {\n const { iframeUrl } = usePaymentIframe({\n paymentLinkId,\n params,\n onSuccess,\n onFailure,\n });\n\n const iframeHeight = typeof height === \"number\" ? `${height}px` : height;\n const iframeWidth = typeof width === \"number\" ? `${width}px` : width;\n\n return (\n <div className={className} style={style}>\n <iframe\n src={iframeUrl}\n title=\"Payment\"\n style={{\n width: iframeWidth,\n height: iframeHeight,\n border: \"none\",\n }}\n allow=\"payment; clipboard-write\"\n />\n </div>\n );\n}\n"],"mappings":"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","names":["useEffect","useEffect","jsx"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intrpay-payments",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "A package for integrating Intrpay payments into your React application",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",