@flopay/react 0.1.6 → 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 +608 -194
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +39 -4
  5. package/dist/index.d.ts +39 -4
  6. package/dist/index.mjs +589 -175
  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. */
@@ -66,6 +77,15 @@ interface FloPayCheckoutProps {
66
77
  showGooglePay?: boolean;
67
78
  /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
68
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;
69
89
  /** Label for the submit button. */
70
90
  submitLabel?: string;
71
91
  /** Additional CSS class for the wrapper. */
@@ -109,7 +129,7 @@ interface FloPayCheckoutProps {
109
129
  * />
110
130
  * ```
111
131
  */
112
- declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, 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;
113
133
 
114
134
  /**
115
135
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -339,6 +359,21 @@ interface SplitCardFormProps {
339
359
  * button expands the card form with a back button to return to the button view
340
360
  */
341
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;
342
377
  /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
343
378
  totalAmount?: number;
344
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. */
@@ -66,6 +77,15 @@ interface FloPayCheckoutProps {
66
77
  showGooglePay?: boolean;
67
78
  /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
68
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;
69
89
  /** Label for the submit button. */
70
90
  submitLabel?: string;
71
91
  /** Additional CSS class for the wrapper. */
@@ -109,7 +129,7 @@ interface FloPayCheckoutProps {
109
129
  * />
110
130
  * ```
111
131
  */
112
- declare function FloPayCheckout({ sessionId, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, 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;
113
133
 
114
134
  /**
115
135
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -339,6 +359,21 @@ interface SplitCardFormProps {
339
359
  * button expands the card form with a back button to return to the button view
340
360
  */
341
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;
342
377
  /** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
343
378
  totalAmount?: number;
344
379
  /** Currency code (used for PayPal Elements config). */