@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.mjs CHANGED
@@ -1246,6 +1246,14 @@ var FLOPAY_KEYFRAMES = `
1246
1246
  }
1247
1247
  `;
1248
1248
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT = 44;
1249
+ var BUTTONS_PANEL_HIDDEN_STYLE = {
1250
+ visibility: "hidden",
1251
+ position: "absolute",
1252
+ pointerEvents: "none",
1253
+ width: "100%",
1254
+ height: 0,
1255
+ overflow: "hidden"
1256
+ };
1249
1257
  function getButtonMethodLabel(method) {
1250
1258
  switch (method) {
1251
1259
  case "paypal":
@@ -2767,173 +2775,181 @@ function SplitCardFormInner({
2767
2775
  /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
2768
2776
  overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2769
2777
  /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
2770
- /* @__PURE__ */ jsxs4("div", { style: {
2771
- gridArea: "1 / 1",
2772
- display: "flex",
2773
- flexDirection: "column",
2774
- gap: "0.5rem",
2775
- // When card form is showing (and not transitioning), hide but keep mounted
2776
- ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
2777
- ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
2778
- }, children: [
2779
- debug && showPayPal && /* @__PURE__ */ jsx6(
2780
- "pre",
2781
- {
2782
- "data-testid": "flopay-direct-paypal-gate-debug",
2783
- style: {
2784
- margin: 0,
2785
- padding: "6px 8px",
2786
- background: "#eef2ff",
2787
- border: "1px solid #c7d2fe",
2788
- borderRadius: 6,
2789
- color: "#111827",
2790
- font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
2791
- whiteSpace: "pre-wrap",
2792
- wordBreak: "break-word"
2793
- },
2794
- children: [
2795
- "FloPay/DirectPayPal-debug (parent gate)",
2796
- ` showPayPal=${showPayPal}`,
2797
- ` directPaypalConfigured=${directPaypalConfigured}`,
2798
- ` inAppBrowserDetected=${String(inAppBrowserDetected)}`,
2799
- ` shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
2800
- ` shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
2801
- ` hasPaypalStripeInstance=${!!paypalStripeInstance}`
2802
- ].join("\n")
2803
- }
2804
- ),
2805
- shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
2806
- paypalDirectRetry && /* @__PURE__ */ jsx6(
2807
- "div",
2808
- {
2809
- "data-testid": "flopay-paypal-direct-retry-notice",
2810
- style: {
2811
- padding: "8px 10px",
2812
- background: "#fef3c7",
2813
- border: "1px solid #fcd34d",
2814
- borderRadius: 6,
2815
- color: "#78350f",
2816
- fontSize: 13,
2817
- lineHeight: 1.4
2818
- },
2819
- children: "Please confirm your PayPal payment to complete checkout."
2820
- }
2821
- ),
2822
- /* @__PURE__ */ jsx6(
2823
- DirectPayPalButton,
2824
- {
2825
- sessionId,
2826
- billingApiUrl: resolvedBillingApiUrl,
2827
- email: resolvedAccount.email,
2828
- clientId: directPaypal.clientId,
2829
- environment: directPaypal.environment,
2830
- currency: currency.toUpperCase(),
2831
- isSubscription,
2832
- onTokenizedBody: dispatchTokenizedBody,
2833
- onComplete,
2834
- onErrorChange: updateError,
2835
- onDecline,
2836
- onButtonClick,
2837
- runBeforeButtonClick,
2838
- isProcessing: isSubmitting,
2839
- onLoadStateChange: setDirectPaypalReady,
2840
- session: session ?? null,
2841
- existingOrderId: paypalDirectRetry?.orderId,
2842
- debug
2843
- },
2844
- paypalDirectRetry?.orderId ?? "fresh"
2845
- )
2846
- ] }),
2847
- shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
2848
- PayPalButtonInner,
2849
- {
2850
- sessionId,
2851
- email: resolvedAccount.email,
2852
- billingApiUrl: resolvedBillingApiUrl,
2853
- onTokenizedBody: dispatchTokenizedBody,
2854
- onErrorChange: updateError,
2855
- isProcessing: isSubmitting,
2856
- onButtonClick,
2857
- onDecline,
2858
- runBeforeButtonClick,
2859
- onLoadStateChange: setPaypalLoadState
2860
- }
2861
- ) }),
2862
- shouldRenderWallets ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
2863
- WalletButtonInner,
2864
- {
2865
- sessionId,
2866
- email: resolvedAccount.email,
2867
- billingApiUrl: resolvedBillingApiUrl,
2868
- showApplePay,
2869
- showGooglePay,
2870
- onTokenizedBody: dispatchTokenizedBody,
2871
- onErrorChange: updateError,
2872
- onButtonClick,
2873
- onDecline,
2874
- runBeforeButtonClick,
2875
- onLoadStateChange: setWalletLoadState
2876
- }
2877
- ) }) : shouldShowWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2878
- /* @__PURE__ */ jsx6(
2879
- "button",
2880
- {
2881
- type: "button",
2882
- onClick: async () => {
2883
- if (isSubmitting) return;
2884
- const beforeClick = await runBeforeButtonClick("card");
2885
- if (!beforeClick.proceed) return;
2886
- onButtonClick?.("card");
2887
- expandToCard();
2888
- },
2889
- disabled: isSubmitting,
2890
- style: {
2891
- width: "100%",
2892
- ...cardButtonSizing,
2893
- backgroundColor: "white",
2894
- color: "#262833",
2895
- border: "1px solid #d1d5db",
2778
+ /* @__PURE__ */ jsxs4(
2779
+ "div",
2780
+ {
2781
+ "data-testid": "flopay-buttons-panel",
2782
+ "aria-hidden": !isButtonsView && !buttonsAnim ? true : void 0,
2783
+ style: {
2784
+ gridArea: "1 / 1",
2785
+ display: "flex",
2786
+ flexDirection: "column",
2787
+ gap: "0.5rem",
2788
+ // When card form is showing (and not transitioning), hide but keep mounted.
2789
+ ...!isButtonsView && !buttonsAnim ? BUTTONS_PANEL_HIDDEN_STYLE : {},
2790
+ ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
2791
+ },
2792
+ children: [
2793
+ debug && showPayPal && /* @__PURE__ */ jsx6(
2794
+ "pre",
2795
+ {
2796
+ "data-testid": "flopay-direct-paypal-gate-debug",
2797
+ style: {
2798
+ margin: 0,
2799
+ padding: "6px 8px",
2800
+ background: "#eef2ff",
2801
+ border: "1px solid #c7d2fe",
2802
+ borderRadius: 6,
2803
+ color: "#111827",
2804
+ font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
2805
+ whiteSpace: "pre-wrap",
2806
+ wordBreak: "break-word"
2807
+ },
2808
+ children: [
2809
+ "FloPay/DirectPayPal-debug (parent gate)",
2810
+ ` showPayPal=${showPayPal}`,
2811
+ ` directPaypalConfigured=${directPaypalConfigured}`,
2812
+ ` inAppBrowserDetected=${String(inAppBrowserDetected)}`,
2813
+ ` shouldRenderDirectPayPal=${shouldRenderDirectPayPal}`,
2814
+ ` shouldRenderStripePayPal=${shouldRenderStripePayPal}`,
2815
+ ` hasPaypalStripeInstance=${!!paypalStripeInstance}`
2816
+ ].join("\n")
2817
+ }
2818
+ ),
2819
+ shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
2820
+ paypalDirectRetry && /* @__PURE__ */ jsx6(
2821
+ "div",
2822
+ {
2823
+ "data-testid": "flopay-paypal-direct-retry-notice",
2824
+ style: {
2825
+ padding: "8px 10px",
2826
+ background: "#fef3c7",
2827
+ border: "1px solid #fcd34d",
2828
+ borderRadius: 6,
2829
+ color: "#78350f",
2830
+ fontSize: 13,
2831
+ lineHeight: 1.4
2832
+ },
2833
+ children: "Please confirm your PayPal payment to complete checkout."
2834
+ }
2835
+ ),
2836
+ /* @__PURE__ */ jsx6(
2837
+ DirectPayPalButton,
2838
+ {
2839
+ sessionId,
2840
+ billingApiUrl: resolvedBillingApiUrl,
2841
+ email: resolvedAccount.email,
2842
+ clientId: directPaypal.clientId,
2843
+ environment: directPaypal.environment,
2844
+ currency: currency.toUpperCase(),
2845
+ isSubscription,
2846
+ onTokenizedBody: dispatchTokenizedBody,
2847
+ onComplete,
2848
+ onErrorChange: updateError,
2849
+ onDecline,
2850
+ onButtonClick,
2851
+ runBeforeButtonClick,
2852
+ isProcessing: isSubmitting,
2853
+ onLoadStateChange: setDirectPaypalReady,
2854
+ session: session ?? null,
2855
+ existingOrderId: paypalDirectRetry?.orderId,
2856
+ debug
2857
+ },
2858
+ paypalDirectRetry?.orderId ?? "fresh"
2859
+ )
2860
+ ] }),
2861
+ shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
2862
+ PayPalButtonInner,
2863
+ {
2864
+ sessionId,
2865
+ email: resolvedAccount.email,
2866
+ billingApiUrl: resolvedBillingApiUrl,
2867
+ onTokenizedBody: dispatchTokenizedBody,
2868
+ onErrorChange: updateError,
2869
+ isProcessing: isSubmitting,
2870
+ onButtonClick,
2871
+ onDecline,
2872
+ runBeforeButtonClick,
2873
+ onLoadStateChange: setPaypalLoadState
2874
+ }
2875
+ ) }),
2876
+ shouldRenderWallets ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
2877
+ WalletButtonInner,
2878
+ {
2879
+ sessionId,
2880
+ email: resolvedAccount.email,
2881
+ billingApiUrl: resolvedBillingApiUrl,
2882
+ showApplePay,
2883
+ showGooglePay,
2884
+ onTokenizedBody: dispatchTokenizedBody,
2885
+ onErrorChange: updateError,
2886
+ onButtonClick,
2887
+ onDecline,
2888
+ runBeforeButtonClick,
2889
+ onLoadStateChange: setWalletLoadState
2890
+ }
2891
+ ) }) : shouldShowWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2892
+ /* @__PURE__ */ jsx6(
2893
+ "button",
2894
+ {
2895
+ type: "button",
2896
+ onClick: async () => {
2897
+ if (isSubmitting) return;
2898
+ const beforeClick = await runBeforeButtonClick("card");
2899
+ if (!beforeClick.proceed) return;
2900
+ onButtonClick?.("card");
2901
+ expandToCard();
2902
+ },
2903
+ disabled: isSubmitting,
2904
+ style: {
2905
+ width: "100%",
2906
+ ...cardButtonSizing,
2907
+ backgroundColor: "white",
2908
+ color: "#262833",
2909
+ border: "1px solid #d1d5db",
2910
+ borderRadius: "8px",
2911
+ fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
2912
+ fontWeight: 600,
2913
+ cursor: isSubmitting ? "not-allowed" : "pointer",
2914
+ display: "flex",
2915
+ alignItems: "center",
2916
+ justifyContent: "center",
2917
+ gap: "0.625rem",
2918
+ transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
2919
+ boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
2920
+ position: "relative",
2921
+ opacity: isSubmitting ? 0.6 : 1,
2922
+ ...bStyles.cardButton
2923
+ },
2924
+ onMouseDown: (e) => {
2925
+ e.currentTarget.style.transform = "scale(0.985)";
2926
+ },
2927
+ onMouseUp: (e) => {
2928
+ e.currentTarget.style.transform = "scale(1)";
2929
+ },
2930
+ children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
2931
+ }
2932
+ ),
2933
+ displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
2934
+ margin: "0.25rem 0",
2935
+ padding: "0.625rem 0.875rem",
2936
+ background: "#FEF2F2",
2937
+ border: "1px solid #FECACA",
2896
2938
  borderRadius: "8px",
2897
- fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
2939
+ color: "#991B1B",
2940
+ fontSize: "0.85rem",
2898
2941
  fontWeight: 600,
2899
- cursor: isSubmitting ? "not-allowed" : "pointer",
2900
2942
  display: "flex",
2901
2943
  alignItems: "center",
2902
- justifyContent: "center",
2903
- gap: "0.625rem",
2904
- transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
2905
- boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
2906
- position: "relative",
2907
- opacity: isSubmitting ? 0.6 : 1,
2908
- ...bStyles.cardButton
2909
- },
2910
- onMouseDown: (e) => {
2911
- e.currentTarget.style.transform = "scale(0.985)";
2912
- },
2913
- onMouseUp: (e) => {
2914
- e.currentTarget.style.transform = "scale(1)";
2915
- },
2916
- children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
2917
- }
2918
- ),
2919
- displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
2920
- margin: "0.25rem 0",
2921
- padding: "0.625rem 0.875rem",
2922
- background: "#FEF2F2",
2923
- border: "1px solid #FECACA",
2924
- borderRadius: "8px",
2925
- color: "#991B1B",
2926
- fontSize: "0.85rem",
2927
- fontWeight: 600,
2928
- display: "flex",
2929
- alignItems: "center",
2930
- gap: "0.5rem",
2931
- ...bStyles.errorBanner ? bStyles.errorBanner : {}
2932
- }, children: [
2933
- /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("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" }) }),
2934
- displayError
2935
- ] })
2936
- ] }),
2944
+ gap: "0.5rem",
2945
+ ...bStyles.errorBanner ? bStyles.errorBanner : {}
2946
+ }, children: [
2947
+ /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("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" }) }),
2948
+ displayError
2949
+ ] })
2950
+ ]
2951
+ }
2952
+ ),
2937
2953
  isCardView && /* @__PURE__ */ jsx6("div", { style: {
2938
2954
  gridArea: "1 / 1",
2939
2955
  ...cardAnim ? { animation: cardAnim } : {},