@flopay/react 1.1.5 → 1.1.6

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 +179 -163
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +179 -163
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -1284,6 +1284,14 @@ var FLOPAY_KEYFRAMES = `
1284
1284
  }
1285
1285
  `;
1286
1286
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT = 44;
1287
+ var BUTTONS_PANEL_HIDDEN_STYLE = {
1288
+ visibility: "hidden",
1289
+ position: "absolute",
1290
+ pointerEvents: "none",
1291
+ width: "100%",
1292
+ height: 0,
1293
+ overflow: "hidden"
1294
+ };
1287
1295
  function getButtonMethodLabel(method) {
1288
1296
  switch (method) {
1289
1297
  case "paypal":
@@ -2805,173 +2813,181 @@ function SplitCardFormInner({
2805
2813
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
2806
2814
  overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2807
2815
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid" }, children: [
2808
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2809
- gridArea: "1 / 1",
2810
- display: "flex",
2811
- flexDirection: "column",
2812
- gap: "0.5rem",
2813
- // When card form is showing (and not transitioning), hide but keep mounted
2814
- ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
2815
- ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
2816
- }, children: [
2817
- debug && showPayPal && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2818
- "pre",
2819
- {
2820
- "data-testid": "flopay-direct-paypal-gate-debug",
2821
- style: {
2822
- margin: 0,
2823
- padding: "6px 8px",
2824
- background: "#eef2ff",
2825
- border: "1px solid #c7d2fe",
2826
- borderRadius: 6,
2827
- color: "#111827",
2828
- font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
2829
- whiteSpace: "pre-wrap",
2830
- wordBreak: "break-word"
2831
- },
2832
- children: [
2833
- "FloPay/DirectPayPal-debug (parent gate)",
2834
- ` showPayPal=${showPayPal}`,
2835
- ` directPaypalConfigured=${directPaypalConfigured}`,
2836
- ` inAppBrowserDetected=${String(inAppBrowserDetected)}`,
2837
- ` shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
2838
- ` shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
2839
- ` hasPaypalStripeInstance=${!!paypalStripeInstance}`
2840
- ].join("\n")
2841
- }
2842
- ),
2843
- shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
2844
- paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2845
- "div",
2846
- {
2847
- "data-testid": "flopay-paypal-direct-retry-notice",
2848
- style: {
2849
- padding: "8px 10px",
2850
- background: "#fef3c7",
2851
- border: "1px solid #fcd34d",
2852
- borderRadius: 6,
2853
- color: "#78350f",
2854
- fontSize: 13,
2855
- lineHeight: 1.4
2856
- },
2857
- children: "Please confirm your PayPal payment to complete checkout."
2858
- }
2859
- ),
2860
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2861
- DirectPayPalButton,
2862
- {
2863
- sessionId,
2864
- billingApiUrl: resolvedBillingApiUrl,
2865
- email: resolvedAccount.email,
2866
- clientId: directPaypal.clientId,
2867
- environment: directPaypal.environment,
2868
- currency: currency.toUpperCase(),
2869
- isSubscription,
2870
- onTokenizedBody: dispatchTokenizedBody,
2871
- onComplete,
2872
- onErrorChange: updateError,
2873
- onDecline,
2874
- onButtonClick,
2875
- runBeforeButtonClick,
2876
- isProcessing: isSubmitting,
2877
- onLoadStateChange: setDirectPaypalReady,
2878
- session: session ?? null,
2879
- existingOrderId: paypalDirectRetry?.orderId,
2880
- debug
2881
- },
2882
- paypalDirectRetry?.orderId ?? "fresh"
2883
- )
2884
- ] }),
2885
- shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2886
- PayPalButtonInner,
2887
- {
2888
- sessionId,
2889
- email: resolvedAccount.email,
2890
- billingApiUrl: resolvedBillingApiUrl,
2891
- onTokenizedBody: dispatchTokenizedBody,
2892
- onErrorChange: updateError,
2893
- isProcessing: isSubmitting,
2894
- onButtonClick,
2895
- onDecline,
2896
- runBeforeButtonClick,
2897
- onLoadStateChange: setPaypalLoadState
2898
- }
2899
- ) }),
2900
- shouldRenderWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2901
- WalletButtonInner,
2902
- {
2903
- sessionId,
2904
- email: resolvedAccount.email,
2905
- billingApiUrl: resolvedBillingApiUrl,
2906
- showApplePay,
2907
- showGooglePay,
2908
- onTokenizedBody: dispatchTokenizedBody,
2909
- onErrorChange: updateError,
2910
- onButtonClick,
2911
- onDecline,
2912
- runBeforeButtonClick,
2913
- onLoadStateChange: setWalletLoadState
2914
- }
2915
- ) }) : shouldShowWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2916
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2917
- "button",
2918
- {
2919
- type: "button",
2920
- onClick: async () => {
2921
- if (isSubmitting) return;
2922
- const beforeClick = await runBeforeButtonClick("card");
2923
- if (!beforeClick.proceed) return;
2924
- onButtonClick?.("card");
2925
- expandToCard();
2926
- },
2927
- disabled: isSubmitting,
2928
- style: {
2929
- width: "100%",
2930
- ...cardButtonSizing,
2931
- backgroundColor: "white",
2932
- color: "#262833",
2933
- border: "1px solid #d1d5db",
2816
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2817
+ "div",
2818
+ {
2819
+ "data-testid": "flopay-buttons-panel",
2820
+ "aria-hidden": !isButtonsView && !buttonsAnim ? true : void 0,
2821
+ style: {
2822
+ gridArea: "1 / 1",
2823
+ display: "flex",
2824
+ flexDirection: "column",
2825
+ gap: "0.5rem",
2826
+ // When card form is showing (and not transitioning), hide but keep mounted.
2827
+ ...!isButtonsView && !buttonsAnim ? BUTTONS_PANEL_HIDDEN_STYLE : {},
2828
+ ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
2829
+ },
2830
+ children: [
2831
+ debug && showPayPal && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2832
+ "pre",
2833
+ {
2834
+ "data-testid": "flopay-direct-paypal-gate-debug",
2835
+ style: {
2836
+ margin: 0,
2837
+ padding: "6px 8px",
2838
+ background: "#eef2ff",
2839
+ border: "1px solid #c7d2fe",
2840
+ borderRadius: 6,
2841
+ color: "#111827",
2842
+ font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
2843
+ whiteSpace: "pre-wrap",
2844
+ wordBreak: "break-word"
2845
+ },
2846
+ children: [
2847
+ "FloPay/DirectPayPal-debug (parent gate)",
2848
+ ` showPayPal=${showPayPal}`,
2849
+ ` directPaypalConfigured=${directPaypalConfigured}`,
2850
+ ` inAppBrowserDetected=${String(inAppBrowserDetected)}`,
2851
+ ` shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
2852
+ ` shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
2853
+ ` hasPaypalStripeInstance=${!!paypalStripeInstance}`
2854
+ ].join("\n")
2855
+ }
2856
+ ),
2857
+ shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
2858
+ paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2859
+ "div",
2860
+ {
2861
+ "data-testid": "flopay-paypal-direct-retry-notice",
2862
+ style: {
2863
+ padding: "8px 10px",
2864
+ background: "#fef3c7",
2865
+ border: "1px solid #fcd34d",
2866
+ borderRadius: 6,
2867
+ color: "#78350f",
2868
+ fontSize: 13,
2869
+ lineHeight: 1.4
2870
+ },
2871
+ children: "Please confirm your PayPal payment to complete checkout."
2872
+ }
2873
+ ),
2874
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2875
+ DirectPayPalButton,
2876
+ {
2877
+ sessionId,
2878
+ billingApiUrl: resolvedBillingApiUrl,
2879
+ email: resolvedAccount.email,
2880
+ clientId: directPaypal.clientId,
2881
+ environment: directPaypal.environment,
2882
+ currency: currency.toUpperCase(),
2883
+ isSubscription,
2884
+ onTokenizedBody: dispatchTokenizedBody,
2885
+ onComplete,
2886
+ onErrorChange: updateError,
2887
+ onDecline,
2888
+ onButtonClick,
2889
+ runBeforeButtonClick,
2890
+ isProcessing: isSubmitting,
2891
+ onLoadStateChange: setDirectPaypalReady,
2892
+ session: session ?? null,
2893
+ existingOrderId: paypalDirectRetry?.orderId,
2894
+ debug
2895
+ },
2896
+ paypalDirectRetry?.orderId ?? "fresh"
2897
+ )
2898
+ ] }),
2899
+ shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2900
+ PayPalButtonInner,
2901
+ {
2902
+ sessionId,
2903
+ email: resolvedAccount.email,
2904
+ billingApiUrl: resolvedBillingApiUrl,
2905
+ onTokenizedBody: dispatchTokenizedBody,
2906
+ onErrorChange: updateError,
2907
+ isProcessing: isSubmitting,
2908
+ onButtonClick,
2909
+ onDecline,
2910
+ runBeforeButtonClick,
2911
+ onLoadStateChange: setPaypalLoadState
2912
+ }
2913
+ ) }),
2914
+ shouldRenderWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2915
+ WalletButtonInner,
2916
+ {
2917
+ sessionId,
2918
+ email: resolvedAccount.email,
2919
+ billingApiUrl: resolvedBillingApiUrl,
2920
+ showApplePay,
2921
+ showGooglePay,
2922
+ onTokenizedBody: dispatchTokenizedBody,
2923
+ onErrorChange: updateError,
2924
+ onButtonClick,
2925
+ onDecline,
2926
+ runBeforeButtonClick,
2927
+ onLoadStateChange: setWalletLoadState
2928
+ }
2929
+ ) }) : shouldShowWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2930
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2931
+ "button",
2932
+ {
2933
+ type: "button",
2934
+ onClick: async () => {
2935
+ if (isSubmitting) return;
2936
+ const beforeClick = await runBeforeButtonClick("card");
2937
+ if (!beforeClick.proceed) return;
2938
+ onButtonClick?.("card");
2939
+ expandToCard();
2940
+ },
2941
+ disabled: isSubmitting,
2942
+ style: {
2943
+ width: "100%",
2944
+ ...cardButtonSizing,
2945
+ backgroundColor: "white",
2946
+ color: "#262833",
2947
+ border: "1px solid #d1d5db",
2948
+ borderRadius: "8px",
2949
+ fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
2950
+ fontWeight: 600,
2951
+ cursor: isSubmitting ? "not-allowed" : "pointer",
2952
+ display: "flex",
2953
+ alignItems: "center",
2954
+ justifyContent: "center",
2955
+ gap: "0.625rem",
2956
+ transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
2957
+ boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
2958
+ position: "relative",
2959
+ opacity: isSubmitting ? 0.6 : 1,
2960
+ ...bStyles.cardButton
2961
+ },
2962
+ onMouseDown: (e) => {
2963
+ e.currentTarget.style.transform = "scale(0.985)";
2964
+ },
2965
+ onMouseUp: (e) => {
2966
+ e.currentTarget.style.transform = "scale(1)";
2967
+ },
2968
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
2969
+ }
2970
+ ),
2971
+ displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2972
+ margin: "0.25rem 0",
2973
+ padding: "0.625rem 0.875rem",
2974
+ background: "#FEF2F2",
2975
+ border: "1px solid #FECACA",
2934
2976
  borderRadius: "8px",
2935
- fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
2977
+ color: "#991B1B",
2978
+ fontSize: "0.85rem",
2936
2979
  fontWeight: 600,
2937
- cursor: isSubmitting ? "not-allowed" : "pointer",
2938
2980
  display: "flex",
2939
2981
  alignItems: "center",
2940
- justifyContent: "center",
2941
- gap: "0.625rem",
2942
- transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
2943
- boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
2944
- position: "relative",
2945
- opacity: isSubmitting ? 0.6 : 1,
2946
- ...bStyles.cardButton
2947
- },
2948
- onMouseDown: (e) => {
2949
- e.currentTarget.style.transform = "scale(0.985)";
2950
- },
2951
- onMouseUp: (e) => {
2952
- e.currentTarget.style.transform = "scale(1)";
2953
- },
2954
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
2955
- }
2956
- ),
2957
- displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2958
- margin: "0.25rem 0",
2959
- padding: "0.625rem 0.875rem",
2960
- background: "#FEF2F2",
2961
- border: "1px solid #FECACA",
2962
- borderRadius: "8px",
2963
- color: "#991B1B",
2964
- fontSize: "0.85rem",
2965
- fontWeight: 600,
2966
- display: "flex",
2967
- alignItems: "center",
2968
- gap: "0.5rem",
2969
- ...bStyles.errorBanner ? bStyles.errorBanner : {}
2970
- }, children: [
2971
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2972
- displayError
2973
- ] })
2974
- ] }),
2982
+ gap: "0.5rem",
2983
+ ...bStyles.errorBanner ? bStyles.errorBanner : {}
2984
+ }, children: [
2985
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2986
+ displayError
2987
+ ] })
2988
+ ]
2989
+ }
2990
+ ),
2975
2991
  isCardView && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2976
2992
  gridArea: "1 / 1",
2977
2993
  ...cardAnim ? { animation: cardAnim } : {},