@flopay/react 1.2.8 → 1.3.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.
- package/README.md +76 -1
- package/dist/index.cjs +1455 -637
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +104 -4
- package/dist/index.d.ts +104 -4
- package/dist/index.mjs +1258 -440
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FloPay, FloPayElements } from '@flopay/js';
|
|
3
3
|
import * as _flopay_shared from '@flopay/shared';
|
|
4
|
-
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
4
|
+
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CardCaptureAdapter, VaultCardThemeColors, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
5
5
|
export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
|
|
6
6
|
|
|
7
7
|
/** Props for the `FloPayProvider` component. */
|
|
@@ -167,6 +167,19 @@ interface FloPayCheckoutProps {
|
|
|
167
167
|
* - `false` / omitted — AVS disabled
|
|
168
168
|
*/
|
|
169
169
|
enableAVS?: boolean | _flopay_shared.AVSFieldConfig;
|
|
170
|
+
/**
|
|
171
|
+
* Per-merchant order of the hosted vault card rows — a permutation of
|
|
172
|
+
* `['name','number','expiry']` (`'expiry'` = the expiry+CVV row; submit stays
|
|
173
|
+
* last). Sets both the visual and tab order. Omit for the default
|
|
174
|
+
* (`name`, `number`, `expiry`). Vault card path only.
|
|
175
|
+
*/
|
|
176
|
+
cardFieldOrder?: _flopay_shared.VaultCardFieldKey[];
|
|
177
|
+
/**
|
|
178
|
+
* Content rendered directly above the card form (below the "or pay with card"
|
|
179
|
+
* divider, above the card fields). Used by the demo playground to surface a
|
|
180
|
+
* test-cards helper; harmless to omit in a normal integration.
|
|
181
|
+
*/
|
|
182
|
+
cardPreFormSlot?: React.ReactNode;
|
|
170
183
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
171
184
|
avsLayout?: 'row' | 'column';
|
|
172
185
|
/** Label for the submit button. */
|
|
@@ -220,7 +233,7 @@ interface FloPayCheckoutProps {
|
|
|
220
233
|
* />
|
|
221
234
|
* ```
|
|
222
235
|
*/
|
|
223
|
-
declare function FloPayCheckout({ sessionId: sessionIdProp, nonce: nonceProp, createSession: createSessionParams, billingApiUrl, appearance: appearanceOverride, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showStripe, showApplePay, showGooglePay, debug, layout, theme, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter: _showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
|
|
236
|
+
declare function FloPayCheckout({ sessionId: sessionIdProp, nonce: nonceProp, createSession: createSessionParams, billingApiUrl, appearance: appearanceOverride, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showStripe, showApplePay, showGooglePay, debug, layout, theme, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter: _showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, cardFieldOrder, cardPreFormSlot, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
|
|
224
237
|
|
|
225
238
|
/**
|
|
226
239
|
* Returns the current `FloPay` instance, or `null` if the provider
|
|
@@ -491,6 +504,15 @@ interface SplitCardFormProps {
|
|
|
491
504
|
* `showApplePay`/`showGooglePay`/`showPayPal` toggles.
|
|
492
505
|
*/
|
|
493
506
|
enabledPaymentMethods?: string[];
|
|
507
|
+
/**
|
|
508
|
+
* Per-method buyer-country gate from `gateways.stripe.enabledPaymentMethodCountries`
|
|
509
|
+
* (method → allowed ISO-3166-1 alpha-2 countries; a method absent here has no
|
|
510
|
+
* country gate). The SDK filters the rendered tile row by the buyer's *live*
|
|
511
|
+
* country against this map, so per-method country eligibility comes from the
|
|
512
|
+
* backend rather than a hardcoded SDK table. When omitted (legacy backend),
|
|
513
|
+
* the SDK falls back to its built-in {@link STRIPE_METHOD_COUNTRIES} table.
|
|
514
|
+
*/
|
|
515
|
+
enabledPaymentMethodCountries?: Record<string, string[]>;
|
|
494
516
|
/**
|
|
495
517
|
* @deprecated The Apple Pay / Google Pay surface is now driven by the
|
|
496
518
|
* `gateways.stripe.enabledPaymentMethods` list returned per-session by the
|
|
@@ -566,6 +588,16 @@ interface SplitCardFormProps {
|
|
|
566
588
|
* - `false` / omitted — AVS disabled
|
|
567
589
|
*/
|
|
568
590
|
enableAVS?: boolean | AVSFieldConfig;
|
|
591
|
+
/**
|
|
592
|
+
* Per-merchant order of the hosted vault card rows — a permutation of
|
|
593
|
+
* `['name','number','expiry']` (`'expiry'` is the combined expiry+CVV row;
|
|
594
|
+
* the submit button stays last). Drives both the visual order and the tab
|
|
595
|
+
* order inside the widget. Omit for the default (`name`, `number`, `expiry`).
|
|
596
|
+
* Only applies on the vault card path.
|
|
597
|
+
*/
|
|
598
|
+
cardFieldOrder?: _flopay_shared.VaultCardFieldKey[];
|
|
599
|
+
/** Content rendered above the card form (below the wallet divider). */
|
|
600
|
+
cardPreFormSlot?: React.ReactNode;
|
|
569
601
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
570
602
|
avsLayout?: 'row' | 'column';
|
|
571
603
|
/** Pre-filled country code (ISO 3166-1 alpha-2) for AVS. */
|
|
@@ -626,6 +658,66 @@ interface SplitCardFormProps {
|
|
|
626
658
|
*/
|
|
627
659
|
declare const SplitCardForm: React.ForwardRefExoticComponent<SplitCardFormProps & React.RefAttributes<SplitCardFormRef>>;
|
|
628
660
|
|
|
661
|
+
/** Props for {@link VaultCardFields}. */
|
|
662
|
+
interface VaultCardFieldsProps {
|
|
663
|
+
/**
|
|
664
|
+
* The card-capture adapter (typically `useFloPay().cardCapture()`). Owns
|
|
665
|
+
* injecting + bootstrapping the hosted vault widget. Changing this instance
|
|
666
|
+
* (or {@link VaultCardFieldsProps.html}) remounts the widget.
|
|
667
|
+
*/
|
|
668
|
+
capture: CardCaptureAdapter;
|
|
669
|
+
/**
|
|
670
|
+
* Server-rendered hosted vault widget HTML (the session's
|
|
671
|
+
* {@link CheckoutSession.vault} block `html`, or one fetched from
|
|
672
|
+
* `POST /vault/capture`). The widget owns the card fields, submit button,
|
|
673
|
+
* tokenization, charge, and 3DS; this component only injects it.
|
|
674
|
+
*/
|
|
675
|
+
html: string;
|
|
676
|
+
/**
|
|
677
|
+
* Per-session integrity token (the vault block's `messageToken`). Forwarded
|
|
678
|
+
* to the adapter so it can reject forged terminal `postMessage` outcomes that
|
|
679
|
+
* omit/mismatch it. Omitted when the backend does not (yet) mint one.
|
|
680
|
+
*/
|
|
681
|
+
messageToken?: string;
|
|
682
|
+
/**
|
|
683
|
+
* Exact origin expected for the widget's terminal `postMessage` outcomes
|
|
684
|
+
* (the vault block's `expectedOrigin`). Forwarded to the adapter's origin
|
|
685
|
+
* gate; omitted to skip it.
|
|
686
|
+
*/
|
|
687
|
+
expectedOrigin?: string;
|
|
688
|
+
/**
|
|
689
|
+
* Merchant theme colors pushed into the hosted widget so the card form
|
|
690
|
+
* matches the surrounding checkout. Applied live on change (no remount).
|
|
691
|
+
*/
|
|
692
|
+
theme?: VaultCardThemeColors;
|
|
693
|
+
/** Inline styles for the container the widget mounts into. */
|
|
694
|
+
containerStyle?: React.CSSProperties;
|
|
695
|
+
/** Fired once the widget is injected and bootstrapping. */
|
|
696
|
+
onReady?: () => void;
|
|
697
|
+
/**
|
|
698
|
+
* Fired with a load/runtime error message from the widget, or `null` when it
|
|
699
|
+
* clears. Wired to the card form's shared error banner. Terminal payment
|
|
700
|
+
* outcomes (`complete` / `decline`) are observed by the parent form directly
|
|
701
|
+
* off the same adapter and are not surfaced here.
|
|
702
|
+
*/
|
|
703
|
+
onError?: (message: string | null) => void;
|
|
704
|
+
/**
|
|
705
|
+
* Fired with the widget's inline field-validation message (live, debounced by
|
|
706
|
+
* the widget to changes), or `null` when validation clears. Surfaced in the
|
|
707
|
+
* card form's error banner and the merchant `onError`.
|
|
708
|
+
*/
|
|
709
|
+
onValidation?: (message: string | null) => void;
|
|
710
|
+
}
|
|
711
|
+
/**
|
|
712
|
+
* Renders the backend-served vault PCI card widget in place of provider-owned
|
|
713
|
+
* (Stripe) card elements (TeamFloPay/backend#823, Model A). The hosted widget
|
|
714
|
+
* is a self-contained form: PAN / CVC, the submit button, the charge, and 3DS
|
|
715
|
+
* all live inside it. This component only injects the widget HTML through the
|
|
716
|
+
* {@link CardCaptureAdapter} and bridges its `ready` / `error` lifecycle events
|
|
717
|
+
* back to the surrounding card form.
|
|
718
|
+
*/
|
|
719
|
+
declare function VaultCardFields({ capture, html, messageToken, expectedOrigin, theme, containerStyle, onReady, onError, onValidation, }: VaultCardFieldsProps): React.ReactElement;
|
|
720
|
+
|
|
629
721
|
/**
|
|
630
722
|
* Props for the `PayPalButton` component.
|
|
631
723
|
*
|
|
@@ -854,6 +946,14 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
|
|
|
854
946
|
* `buttonsStyles` still wins for fine-grained overrides.
|
|
855
947
|
*/
|
|
856
948
|
theme?: ThemeId;
|
|
949
|
+
/**
|
|
950
|
+
* Per-checkout appearance overrides layered on top of the chosen `theme`
|
|
951
|
+
* (same shape as {@link FloPayCheckout}'s `appearance`). Its `colorPrimary` /
|
|
952
|
+
* `colorPrimaryHover` / `borderRadius` re-skin the button — and the fallback
|
|
953
|
+
* `FloPayCheckout` modal — so the auto-pay button matches the rest of the
|
|
954
|
+
* themed checkout. Without this the button only saw the bundle's defaults.
|
|
955
|
+
*/
|
|
956
|
+
appearance?: FloPayAppearance;
|
|
857
957
|
/**
|
|
858
958
|
* @deprecated Use `theme` instead. Legacy buttons-layout preset
|
|
859
959
|
* (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
|
|
@@ -866,6 +966,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
|
|
|
866
966
|
onDecline?: (decline: DeclineEvent) => void;
|
|
867
967
|
children?: React.ReactNode;
|
|
868
968
|
}
|
|
869
|
-
declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): React.JSX.Element;
|
|
969
|
+
declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, appearance, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): React.JSX.Element;
|
|
870
970
|
|
|
871
|
-
export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };
|
|
971
|
+
export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, VaultCardFields, type VaultCardFieldsProps, useCheckout, useElements, useFloPay, usePayPalFloPay };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FloPay, FloPayElements } from '@flopay/js';
|
|
3
3
|
import * as _flopay_shared from '@flopay/shared';
|
|
4
|
-
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
4
|
+
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CardCaptureAdapter, VaultCardThemeColors, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
5
5
|
export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
|
|
6
6
|
|
|
7
7
|
/** Props for the `FloPayProvider` component. */
|
|
@@ -167,6 +167,19 @@ interface FloPayCheckoutProps {
|
|
|
167
167
|
* - `false` / omitted — AVS disabled
|
|
168
168
|
*/
|
|
169
169
|
enableAVS?: boolean | _flopay_shared.AVSFieldConfig;
|
|
170
|
+
/**
|
|
171
|
+
* Per-merchant order of the hosted vault card rows — a permutation of
|
|
172
|
+
* `['name','number','expiry']` (`'expiry'` = the expiry+CVV row; submit stays
|
|
173
|
+
* last). Sets both the visual and tab order. Omit for the default
|
|
174
|
+
* (`name`, `number`, `expiry`). Vault card path only.
|
|
175
|
+
*/
|
|
176
|
+
cardFieldOrder?: _flopay_shared.VaultCardFieldKey[];
|
|
177
|
+
/**
|
|
178
|
+
* Content rendered directly above the card form (below the "or pay with card"
|
|
179
|
+
* divider, above the card fields). Used by the demo playground to surface a
|
|
180
|
+
* test-cards helper; harmless to omit in a normal integration.
|
|
181
|
+
*/
|
|
182
|
+
cardPreFormSlot?: React.ReactNode;
|
|
170
183
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
171
184
|
avsLayout?: 'row' | 'column';
|
|
172
185
|
/** Label for the submit button. */
|
|
@@ -220,7 +233,7 @@ interface FloPayCheckoutProps {
|
|
|
220
233
|
* />
|
|
221
234
|
* ```
|
|
222
235
|
*/
|
|
223
|
-
declare function FloPayCheckout({ sessionId: sessionIdProp, nonce: nonceProp, createSession: createSessionParams, billingApiUrl, appearance: appearanceOverride, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showStripe, showApplePay, showGooglePay, debug, layout, theme, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter: _showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
|
|
236
|
+
declare function FloPayCheckout({ sessionId: sessionIdProp, nonce: nonceProp, createSession: createSessionParams, billingApiUrl, appearance: appearanceOverride, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showStripe, showApplePay, showGooglePay, debug, layout, theme, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter: _showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, cardFieldOrder, cardPreFormSlot, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
|
|
224
237
|
|
|
225
238
|
/**
|
|
226
239
|
* Returns the current `FloPay` instance, or `null` if the provider
|
|
@@ -491,6 +504,15 @@ interface SplitCardFormProps {
|
|
|
491
504
|
* `showApplePay`/`showGooglePay`/`showPayPal` toggles.
|
|
492
505
|
*/
|
|
493
506
|
enabledPaymentMethods?: string[];
|
|
507
|
+
/**
|
|
508
|
+
* Per-method buyer-country gate from `gateways.stripe.enabledPaymentMethodCountries`
|
|
509
|
+
* (method → allowed ISO-3166-1 alpha-2 countries; a method absent here has no
|
|
510
|
+
* country gate). The SDK filters the rendered tile row by the buyer's *live*
|
|
511
|
+
* country against this map, so per-method country eligibility comes from the
|
|
512
|
+
* backend rather than a hardcoded SDK table. When omitted (legacy backend),
|
|
513
|
+
* the SDK falls back to its built-in {@link STRIPE_METHOD_COUNTRIES} table.
|
|
514
|
+
*/
|
|
515
|
+
enabledPaymentMethodCountries?: Record<string, string[]>;
|
|
494
516
|
/**
|
|
495
517
|
* @deprecated The Apple Pay / Google Pay surface is now driven by the
|
|
496
518
|
* `gateways.stripe.enabledPaymentMethods` list returned per-session by the
|
|
@@ -566,6 +588,16 @@ interface SplitCardFormProps {
|
|
|
566
588
|
* - `false` / omitted — AVS disabled
|
|
567
589
|
*/
|
|
568
590
|
enableAVS?: boolean | AVSFieldConfig;
|
|
591
|
+
/**
|
|
592
|
+
* Per-merchant order of the hosted vault card rows — a permutation of
|
|
593
|
+
* `['name','number','expiry']` (`'expiry'` is the combined expiry+CVV row;
|
|
594
|
+
* the submit button stays last). Drives both the visual order and the tab
|
|
595
|
+
* order inside the widget. Omit for the default (`name`, `number`, `expiry`).
|
|
596
|
+
* Only applies on the vault card path.
|
|
597
|
+
*/
|
|
598
|
+
cardFieldOrder?: _flopay_shared.VaultCardFieldKey[];
|
|
599
|
+
/** Content rendered above the card form (below the wallet divider). */
|
|
600
|
+
cardPreFormSlot?: React.ReactNode;
|
|
569
601
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
570
602
|
avsLayout?: 'row' | 'column';
|
|
571
603
|
/** Pre-filled country code (ISO 3166-1 alpha-2) for AVS. */
|
|
@@ -626,6 +658,66 @@ interface SplitCardFormProps {
|
|
|
626
658
|
*/
|
|
627
659
|
declare const SplitCardForm: React.ForwardRefExoticComponent<SplitCardFormProps & React.RefAttributes<SplitCardFormRef>>;
|
|
628
660
|
|
|
661
|
+
/** Props for {@link VaultCardFields}. */
|
|
662
|
+
interface VaultCardFieldsProps {
|
|
663
|
+
/**
|
|
664
|
+
* The card-capture adapter (typically `useFloPay().cardCapture()`). Owns
|
|
665
|
+
* injecting + bootstrapping the hosted vault widget. Changing this instance
|
|
666
|
+
* (or {@link VaultCardFieldsProps.html}) remounts the widget.
|
|
667
|
+
*/
|
|
668
|
+
capture: CardCaptureAdapter;
|
|
669
|
+
/**
|
|
670
|
+
* Server-rendered hosted vault widget HTML (the session's
|
|
671
|
+
* {@link CheckoutSession.vault} block `html`, or one fetched from
|
|
672
|
+
* `POST /vault/capture`). The widget owns the card fields, submit button,
|
|
673
|
+
* tokenization, charge, and 3DS; this component only injects it.
|
|
674
|
+
*/
|
|
675
|
+
html: string;
|
|
676
|
+
/**
|
|
677
|
+
* Per-session integrity token (the vault block's `messageToken`). Forwarded
|
|
678
|
+
* to the adapter so it can reject forged terminal `postMessage` outcomes that
|
|
679
|
+
* omit/mismatch it. Omitted when the backend does not (yet) mint one.
|
|
680
|
+
*/
|
|
681
|
+
messageToken?: string;
|
|
682
|
+
/**
|
|
683
|
+
* Exact origin expected for the widget's terminal `postMessage` outcomes
|
|
684
|
+
* (the vault block's `expectedOrigin`). Forwarded to the adapter's origin
|
|
685
|
+
* gate; omitted to skip it.
|
|
686
|
+
*/
|
|
687
|
+
expectedOrigin?: string;
|
|
688
|
+
/**
|
|
689
|
+
* Merchant theme colors pushed into the hosted widget so the card form
|
|
690
|
+
* matches the surrounding checkout. Applied live on change (no remount).
|
|
691
|
+
*/
|
|
692
|
+
theme?: VaultCardThemeColors;
|
|
693
|
+
/** Inline styles for the container the widget mounts into. */
|
|
694
|
+
containerStyle?: React.CSSProperties;
|
|
695
|
+
/** Fired once the widget is injected and bootstrapping. */
|
|
696
|
+
onReady?: () => void;
|
|
697
|
+
/**
|
|
698
|
+
* Fired with a load/runtime error message from the widget, or `null` when it
|
|
699
|
+
* clears. Wired to the card form's shared error banner. Terminal payment
|
|
700
|
+
* outcomes (`complete` / `decline`) are observed by the parent form directly
|
|
701
|
+
* off the same adapter and are not surfaced here.
|
|
702
|
+
*/
|
|
703
|
+
onError?: (message: string | null) => void;
|
|
704
|
+
/**
|
|
705
|
+
* Fired with the widget's inline field-validation message (live, debounced by
|
|
706
|
+
* the widget to changes), or `null` when validation clears. Surfaced in the
|
|
707
|
+
* card form's error banner and the merchant `onError`.
|
|
708
|
+
*/
|
|
709
|
+
onValidation?: (message: string | null) => void;
|
|
710
|
+
}
|
|
711
|
+
/**
|
|
712
|
+
* Renders the backend-served vault PCI card widget in place of provider-owned
|
|
713
|
+
* (Stripe) card elements (TeamFloPay/backend#823, Model A). The hosted widget
|
|
714
|
+
* is a self-contained form: PAN / CVC, the submit button, the charge, and 3DS
|
|
715
|
+
* all live inside it. This component only injects the widget HTML through the
|
|
716
|
+
* {@link CardCaptureAdapter} and bridges its `ready` / `error` lifecycle events
|
|
717
|
+
* back to the surrounding card form.
|
|
718
|
+
*/
|
|
719
|
+
declare function VaultCardFields({ capture, html, messageToken, expectedOrigin, theme, containerStyle, onReady, onError, onValidation, }: VaultCardFieldsProps): React.ReactElement;
|
|
720
|
+
|
|
629
721
|
/**
|
|
630
722
|
* Props for the `PayPalButton` component.
|
|
631
723
|
*
|
|
@@ -854,6 +946,14 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
|
|
|
854
946
|
* `buttonsStyles` still wins for fine-grained overrides.
|
|
855
947
|
*/
|
|
856
948
|
theme?: ThemeId;
|
|
949
|
+
/**
|
|
950
|
+
* Per-checkout appearance overrides layered on top of the chosen `theme`
|
|
951
|
+
* (same shape as {@link FloPayCheckout}'s `appearance`). Its `colorPrimary` /
|
|
952
|
+
* `colorPrimaryHover` / `borderRadius` re-skin the button — and the fallback
|
|
953
|
+
* `FloPayCheckout` modal — so the auto-pay button matches the rest of the
|
|
954
|
+
* themed checkout. Without this the button only saw the bundle's defaults.
|
|
955
|
+
*/
|
|
956
|
+
appearance?: FloPayAppearance;
|
|
857
957
|
/**
|
|
858
958
|
* @deprecated Use `theme` instead. Legacy buttons-layout preset
|
|
859
959
|
* (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
|
|
@@ -866,6 +966,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
|
|
|
866
966
|
onDecline?: (decline: DeclineEvent) => void;
|
|
867
967
|
children?: React.ReactNode;
|
|
868
968
|
}
|
|
869
|
-
declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): React.JSX.Element;
|
|
969
|
+
declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, appearance, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): React.JSX.Element;
|
|
870
970
|
|
|
871
|
-
export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };
|
|
971
|
+
export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, VaultCardFields, type VaultCardFieldsProps, useCheckout, useElements, useFloPay, usePayPalFloPay };
|