@flopay/react 0.1.5 → 0.2.1

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 (8) hide show
  1. package/README.md +42 -0
  2. package/dist/index.cjs +762 -161
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +48 -4
  5. package/dist/index.d.ts +48 -4
  6. package/dist/index.mjs +743 -142
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +3 -3
package/dist/index.d.cts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { FloPay, FloPayElements } from '@flopay/js';
3
+ import * as _flopay_shared from '@flopay/shared';
3
4
  import { FloPayAppearance, FloPayError, PaymentResult, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody } from '@flopay/shared';
4
5
 
5
6
  /** Props for the `FloPayProvider` component. */
@@ -37,8 +38,14 @@ declare function FloPayProvider({ flopay: floPayProp, options, children, }: FloP
37
38
 
38
39
  /** Props for the all-in-one `FloPayCheckout` wrapper. */
39
40
  interface FloPayCheckoutProps {
40
- /** The checkout session ID (UUID from billing API). */
41
- sessionId: string;
41
+ /** The checkout session ID (UUID from billing API). Required unless `createSession` is provided. */
42
+ sessionId?: string;
43
+ /**
44
+ * Create a checkout session inline — no separate API route needed.
45
+ * The component POSTs to the billing API, gets the full session back, and renders the form.
46
+ * Alternative to `sessionId` (provide one or the other).
47
+ */
48
+ createSession?: _flopay_shared.InlineSessionParams;
42
49
  /** Billing API base URL. Defaults to the shared `BILLING_API_URL` constant. */
43
50
  billingApiUrl?: string;
44
51
  /** Visual appearance for payment elements. */
@@ -46,8 +53,12 @@ interface FloPayCheckoutProps {
46
53
  /** Locale for payment elements (default: 'auto'). */
47
54
  locale?: string;
48
55
  /**
49
- * Fallback publishable key, used only if the session response
56
+ * Fallback Stripe publishable key — used only if the session response
50
57
  * doesn't include `gatewayData.publishableKey`.
58
+ *
59
+ * When the backend returns full session data (e.g. via `createSession`
60
+ * with `?expand=true`), the response's `gatewayData.publishableKey` is
61
+ * the single source of truth and this prop is not needed.
51
62
  */
52
63
  fallbackPublishableKey?: string;
53
64
  /** Custom loading UI. Defaults to a simple centered spinner. */
@@ -64,6 +75,17 @@ interface FloPayCheckoutProps {
64
75
  showApplePay?: boolean;
65
76
  /** Whether to show Google Pay button (default: true). Only renders on supported devices. */
66
77
  showGooglePay?: boolean;
78
+ /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
79
+ layout?: 'default' | 'buttons';
80
+ /** Theme preset for the buttons layout: 'default', 'minimal', 'rounded', or 'dark'. */
81
+ buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
82
+ /** Custom style overrides for the buttons layout. Merged on top of the theme preset. */
83
+ buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
84
+ /**
85
+ * Called when a payment method button is clicked.
86
+ * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
87
+ */
88
+ onButtonClick?: (method: string) => void;
67
89
  /** Label for the submit button. */
68
90
  submitLabel?: string;
69
91
  /** Additional CSS class for the wrapper. */
@@ -107,7 +129,7 @@ interface FloPayCheckoutProps {
107
129
  * />
108
130
  * ```
109
131
  */
110
- declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
132
+ declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, onButtonClick, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
111
133
 
112
134
  /**
113
135
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -330,6 +352,28 @@ interface SplitCardFormProps {
330
352
  showApplePay?: boolean;
331
353
  /** Show Google Pay button. Defaults to `true`. Only renders on supported devices. */
332
354
  showGooglePay?: boolean;
355
+ /**
356
+ * Layout mode for the payment form.
357
+ * - `'default'` — all payment methods + card form shown together (current behavior)
358
+ * - `'buttons'` — PayPal, wallets, and a "Credit / Debit Card" button; clicking the card
359
+ * button expands the card form with a back button to return to the button view
360
+ */
361
+ layout?: 'default' | 'buttons';
362
+ /**
363
+ * Theme preset for the `buttons` layout. Ignored when `layout` is `'default'`.
364
+ * - `'default'` — white card button, neutral borders
365
+ * - `'minimal'` — borderless, subtle backgrounds
366
+ * - `'rounded'` — large border radius, soft shadows
367
+ * - `'dark'` — dark backgrounds, light text
368
+ */
369
+ buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
370
+ /** Custom style overrides for the `buttons` layout. Merged on top of the theme preset. */
371
+ buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
372
+ /**
373
+ * Called when a payment method button is clicked.
374
+ * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
375
+ */
376
+ onButtonClick?: (method: string) => void;
333
377
  /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
334
378
  totalAmount?: number;
335
379
  /** Currency code (used for PayPal Elements config). */
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { FloPay, FloPayElements } from '@flopay/js';
3
+ import * as _flopay_shared from '@flopay/shared';
3
4
  import { FloPayAppearance, FloPayError, PaymentResult, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody } from '@flopay/shared';
4
5
 
5
6
  /** Props for the `FloPayProvider` component. */
@@ -37,8 +38,14 @@ declare function FloPayProvider({ flopay: floPayProp, options, children, }: FloP
37
38
 
38
39
  /** Props for the all-in-one `FloPayCheckout` wrapper. */
39
40
  interface FloPayCheckoutProps {
40
- /** The checkout session ID (UUID from billing API). */
41
- sessionId: string;
41
+ /** The checkout session ID (UUID from billing API). Required unless `createSession` is provided. */
42
+ sessionId?: string;
43
+ /**
44
+ * Create a checkout session inline — no separate API route needed.
45
+ * The component POSTs to the billing API, gets the full session back, and renders the form.
46
+ * Alternative to `sessionId` (provide one or the other).
47
+ */
48
+ createSession?: _flopay_shared.InlineSessionParams;
42
49
  /** Billing API base URL. Defaults to the shared `BILLING_API_URL` constant. */
43
50
  billingApiUrl?: string;
44
51
  /** Visual appearance for payment elements. */
@@ -46,8 +53,12 @@ interface FloPayCheckoutProps {
46
53
  /** Locale for payment elements (default: 'auto'). */
47
54
  locale?: string;
48
55
  /**
49
- * Fallback publishable key, used only if the session response
56
+ * Fallback Stripe publishable key — used only if the session response
50
57
  * doesn't include `gatewayData.publishableKey`.
58
+ *
59
+ * When the backend returns full session data (e.g. via `createSession`
60
+ * with `?expand=true`), the response's `gatewayData.publishableKey` is
61
+ * the single source of truth and this prop is not needed.
51
62
  */
52
63
  fallbackPublishableKey?: string;
53
64
  /** Custom loading UI. Defaults to a simple centered spinner. */
@@ -64,6 +75,17 @@ interface FloPayCheckoutProps {
64
75
  showApplePay?: boolean;
65
76
  /** Whether to show Google Pay button (default: true). Only renders on supported devices. */
66
77
  showGooglePay?: boolean;
78
+ /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
79
+ layout?: 'default' | 'buttons';
80
+ /** Theme preset for the buttons layout: 'default', 'minimal', 'rounded', or 'dark'. */
81
+ buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
82
+ /** Custom style overrides for the buttons layout. Merged on top of the theme preset. */
83
+ buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
84
+ /**
85
+ * Called when a payment method button is clicked.
86
+ * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
87
+ */
88
+ onButtonClick?: (method: string) => void;
67
89
  /** Label for the submit button. */
68
90
  submitLabel?: string;
69
91
  /** Additional CSS class for the wrapper. */
@@ -107,7 +129,7 @@ interface FloPayCheckoutProps {
107
129
  * />
108
130
  * ```
109
131
  */
110
- declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
132
+ declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, onButtonClick, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
111
133
 
112
134
  /**
113
135
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -330,6 +352,28 @@ interface SplitCardFormProps {
330
352
  showApplePay?: boolean;
331
353
  /** Show Google Pay button. Defaults to `true`. Only renders on supported devices. */
332
354
  showGooglePay?: boolean;
355
+ /**
356
+ * Layout mode for the payment form.
357
+ * - `'default'` — all payment methods + card form shown together (current behavior)
358
+ * - `'buttons'` — PayPal, wallets, and a "Credit / Debit Card" button; clicking the card
359
+ * button expands the card form with a back button to return to the button view
360
+ */
361
+ layout?: 'default' | 'buttons';
362
+ /**
363
+ * Theme preset for the `buttons` layout. Ignored when `layout` is `'default'`.
364
+ * - `'default'` — white card button, neutral borders
365
+ * - `'minimal'` — borderless, subtle backgrounds
366
+ * - `'rounded'` — large border radius, soft shadows
367
+ * - `'dark'` — dark backgrounds, light text
368
+ */
369
+ buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
370
+ /** Custom style overrides for the `buttons` layout. Merged on top of the theme preset. */
371
+ buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
372
+ /**
373
+ * Called when a payment method button is clicked.
374
+ * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
375
+ */
376
+ onButtonClick?: (method: string) => void;
333
377
  /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
334
378
  totalAmount?: number;
335
379
  /** Currency code (used for PayPal Elements config). */