@primer-io/primer-js 0.8.2 → 0.10.0

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.
@@ -190,6 +190,8 @@ declare const PaymentMethodType: {
190
190
  readonly ATOME: "ATOME";
191
191
  readonly DLOCAL_PIX: "DLOCAL_PIX";
192
192
  readonly ALMA: "ALMA";
193
+ readonly ADYEN_CASHAPP: "ADYEN_CASHAPP";
194
+ readonly ADYEN_AFFIRM: "ADYEN_AFFIRM";
193
195
  };
194
196
  export type PaymentMethodType = (typeof PaymentMethodType)[keyof typeof PaymentMethodType];
195
197
  declare const PaymentMethodType$1 = {
@@ -1418,6 +1420,44 @@ export interface PrimerCheckoutOptions {
1418
1420
  * @default false
1419
1421
  */
1420
1422
  showEmptyState?: boolean;
1423
+ /**
1424
+ * Whether to hide vault UI components while keeping vault functionality active.
1425
+ *
1426
+ * When true:
1427
+ * - Vault UI components do not render
1428
+ * - Vault functionality remains active (onVaultedMethodsUpdate callback, APIs)
1429
+ * - Card form and other payment methods display normally
1430
+ * - Enables headless vault implementation patterns
1431
+ *
1432
+ * When false or undefined:
1433
+ * - Vault UI components render normally (default behavior)
1434
+ *
1435
+ * Use this for custom vault UI implementations where you want to:
1436
+ * - Build your own vault item display using onVaultedMethodsUpdate callback
1437
+ * - Create custom CVV inputs programmatically
1438
+ * - Start vaulted payments through PrimerJS API
1439
+ *
1440
+ * @default false
1441
+ * @example
1442
+ * ```typescript
1443
+ * // Headless vault mode - no vault UI
1444
+ * {
1445
+ * vault: {
1446
+ * enabled: true,
1447
+ * headless: true
1448
+ * }
1449
+ * }
1450
+ *
1451
+ * // Standard vault mode - shows vault UI
1452
+ * {
1453
+ * vault: {
1454
+ * enabled: true,
1455
+ * headless: false
1456
+ * }
1457
+ * }
1458
+ * ```
1459
+ */
1460
+ headless?: boolean;
1421
1461
  };
1422
1462
  /**
1423
1463
  * Configuration options for Stripe ACH payment method.
@@ -1724,6 +1764,149 @@ export declare class InitializedVaultedPayments {
1724
1764
  */
1725
1765
  size(): number;
1726
1766
  }
1767
+ export type ReducerCallbacks<State, _Action extends {
1768
+ type: string;
1769
+ }> = {
1770
+ [K in keyof State]?: State[K] extends (...args: unknown[]) => unknown ? State[K] : never;
1771
+ };
1772
+ export type TypedReducer<State, Action extends {
1773
+ type: string;
1774
+ }, Callbacks> = (state: State, action: Action, callbacks: Callbacks) => State;
1775
+ declare abstract class ReactiveStateController<Host extends ReactiveControllerHost, State, Action extends {
1776
+ type: string;
1777
+ }, Callbacks = ReducerCallbacks<State, Action> | null> implements ReactiveController {
1778
+ protected host: Host;
1779
+ protected stateHandler: (state: State) => void;
1780
+ private _dispatcher;
1781
+ constructor(host: Host, initialState: State, reducer: TypedReducer<State, Action, Callbacks>, initialCallbacks: Callbacks, stateHandler?: (state: State) => void);
1782
+ get currentState(): Readonly<State>;
1783
+ protected dispatch(action: Action): void;
1784
+ protected setCallbacks(callbacks: Partial<Callbacks>): void;
1785
+ hostConnected(): void;
1786
+ hostDisconnected(): void;
1787
+ }
1788
+ declare class CompositeStateController<Host extends ReactiveControllerHost> implements ReactiveController {
1789
+ protected host: Host;
1790
+ private _controllers;
1791
+ constructor(host: Host);
1792
+ addController<State, Action extends {
1793
+ type: string;
1794
+ }, Callbacks = ReducerCallbacks<State, Action> | null>(controller: ReactiveStateController<Host, State, Action, Callbacks>): void;
1795
+ hostConnected(): void;
1796
+ hostDisconnected(): void;
1797
+ }
1798
+ /**
1799
+ * Options for initializing the Vault Manager
1800
+ */
1801
+ export interface VaultManagerInitOptions {
1802
+ vaultEnabled?: boolean;
1803
+ captureVaultedCardCvv?: boolean;
1804
+ showEmptyState?: boolean;
1805
+ headless?: boolean;
1806
+ }
1807
+ /**
1808
+ * Core state interface for vault manager
1809
+ * Contains properties related to vault functionality that don't change frequently
1810
+ */
1811
+ export interface VaultManagerState {
1812
+ enabled: boolean;
1813
+ isLoading: boolean;
1814
+ isUpdating: boolean;
1815
+ vaultedPaymentMethods: VaultedPaymentMethod[];
1816
+ cvvRecapture: boolean;
1817
+ showEmptyState: boolean;
1818
+ headless: boolean;
1819
+ createCvvInput: ((options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>) | null;
1820
+ deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
1821
+ startVaultedPaymentFlow: (options?: {
1822
+ cvv?: string;
1823
+ }) => Promise<void>;
1824
+ }
1825
+ /**
1826
+ * CVV-specific state interface
1827
+ * Contains properties specifically related to CVV input functionality
1828
+ */
1829
+ export interface VaultManagerItemState {
1830
+ formIsDirty: boolean;
1831
+ cvvInput: CvvInput | null;
1832
+ setCvvInput: (metadata: CvvInput | null) => void;
1833
+ selectedVaultedPaymentMethod: VaultedPaymentMethod | null;
1834
+ setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
1835
+ }
1836
+ declare class VaultManagerController extends CompositeStateController<PrimerCheckoutType> {
1837
+ private coreController;
1838
+ private itemController;
1839
+ private _vaultManager;
1840
+ private _options;
1841
+ private createVaultManagerFn;
1842
+ constructor(host: PrimerCheckoutType);
1843
+ /**
1844
+ * Initialize the vault manager with a factory function and options
1845
+ * @param createVaultManagerFn - Bound function to create vault manager when needed
1846
+ * @param options - Vault configuration options
1847
+ */
1848
+ initializeVaultManager(createVaultManagerFn: PrimerHeadlessCheckout["createVaultManager"] | null, options?: VaultManagerInitOptions): void;
1849
+ get vaultManager(): HeadlessVaultManager | null;
1850
+ set vaultManager(vaultManager: HeadlessVaultManager | null);
1851
+ get options(): VaultManagerInitOptions | null;
1852
+ set options(options: VaultManagerInitOptions | null);
1853
+ get vaultManagerState(): Readonly<VaultManagerState>;
1854
+ get vaultItemState(): Readonly<VaultManagerItemState>;
1855
+ /**
1856
+ * Lifecycle method called when the host disconnects
1857
+ */
1858
+ hostDisconnected(): void;
1859
+ /**
1860
+ * Transform raw vault data into filtered, event-ready format.
1861
+ * Applies PII filtering to all vaulted payment methods.
1862
+ *
1863
+ * @param vaultedPaymentMethods - Raw vaulted payment methods from API
1864
+ * @returns InitializedVaultedPayments wrapper with filtered data
1865
+ */
1866
+ private createVaultedPaymentsWrapper;
1867
+ /**
1868
+ * Update vaulted payment methods and dispatch events/callbacks.
1869
+ * This method:
1870
+ * 1. Updates internal state via core controller
1871
+ * 2. Creates filtered wrapper for external APIs
1872
+ * 3. Dispatches event to listeners
1873
+ * 4. Invokes callback if defined
1874
+ *
1875
+ * @param methods - Raw vaulted payment methods from API
1876
+ */
1877
+ private updatePaymentMethodsWithEvents;
1878
+ /**
1879
+ * Fetch vaulted payment methods from the server
1880
+ */
1881
+ fetchVaultedPaymentMethods(initialLoad?: boolean): Promise<VaultedPaymentMethod[]>;
1882
+ createCvvInput: (options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>;
1883
+ /**
1884
+ * Delete a vaulted payment method by ID
1885
+ */
1886
+ deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
1887
+ /**
1888
+ * Set the CVV metadata - updates CVV state only
1889
+ * Moved to the separate CVV context
1890
+ */
1891
+ setCvvInput: (metadata: CvvInput | null) => void;
1892
+ /**
1893
+ * Start the vaulted payment flow
1894
+ * Verifies form state validity before processing
1895
+ */
1896
+ startVaultedPaymentFlow: () => Promise<void>;
1897
+ /**
1898
+ * Set the selected vaulted payment method - updates form state only
1899
+ */
1900
+ setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
1901
+ /**
1902
+ * Start vaulted payment flow by payment method ID
1903
+ * @param paymentMethodId - The ID of the vaulted payment method
1904
+ * @param options - Optional payment options including CVV token
1905
+ */
1906
+ startVaultPaymentById: (paymentMethodId: string, options?: {
1907
+ cvv?: string;
1908
+ }) => Promise<void>;
1909
+ }
1727
1910
  /**
1728
1911
  * Payment prepare callback data.
1729
1912
  * Includes payment method type for validation or abort control flow.
@@ -1774,6 +1957,8 @@ export interface PaymentFailureData {
1774
1957
  export interface VaultedMethodsUpdateData {
1775
1958
  /** Wrapper containing filtered vaulted payment methods */
1776
1959
  vaultedPayments: InitializedVaultedPayments;
1960
+ /** Indicates if CVV recapture is required for vaulted payments */
1961
+ cvvRecapture: boolean;
1777
1962
  /** Unix timestamp in seconds */
1778
1963
  timestamp: number;
1779
1964
  }
@@ -1785,6 +1970,7 @@ export declare class PrimerJS {
1785
1970
  private headlessInstance;
1786
1971
  private paymentMethods;
1787
1972
  private paymentManagers;
1973
+ private vaultController;
1788
1974
  /**
1789
1975
  * Called when payment flow begins.
1790
1976
  * Use for analytics tracking or UI updates (e.g., disable form).
@@ -1879,10 +2065,11 @@ export declare class PrimerJS {
1879
2065
  *
1880
2066
  * Use for:
1881
2067
  * - Building custom vault UI
2068
+ * - Determining if CVV recapture is required (check cvvRecapture flag)
1882
2069
  * - Analytics tracking for vault usage
1883
2070
  * - Syncing vault state with backend
1884
2071
  *
1885
- * @param data - Vault methods update data with filtered payment methods
2072
+ * @param data - Vault methods update data with filtered payment methods and cvvRecapture flag
1886
2073
  *
1887
2074
  * @example
1888
2075
  * ```typescript
@@ -1914,6 +2101,98 @@ export declare class PrimerJS {
1914
2101
  * @internal - This is only used internally by the SDK
1915
2102
  */
1916
2103
  setPaymentManagers(managers: InitializedManagersMap): void;
2104
+ /**
2105
+ * Internal method to set the vault controller reference.
2106
+ * Called during vault initialization.
2107
+ * @internal
2108
+ */
2109
+ setVaultController(controller: VaultManagerController | null): void;
2110
+ /**
2111
+ * Creates a CVV input for vaulted payment method CVV recapture.
2112
+ *
2113
+ * ⚠️ Requires vault to be initialized. Check vault availability via
2114
+ * the onVaultedMethodsUpdate callback before calling.
2115
+ *
2116
+ * @param options - CVV input configuration
2117
+ * @returns Promise resolving to CvvInput or null if vault unavailable
2118
+ *
2119
+ * @example
2120
+ * ```typescript
2121
+ * const method = vaultedPayments.get(selectedId);
2122
+ * const cvvInput = await primerJS.createCvvInput({
2123
+ * cardNetwork: method.paymentInstrumentData.network,
2124
+ * container: "#cvv-container",
2125
+ * placeholder: "123"
2126
+ * });
2127
+ *
2128
+ * if (cvvInput.metadata.error) {
2129
+ * // Handle validation error
2130
+ * }
2131
+ * ```
2132
+ */
2133
+ createCvvInput(options: CardSecurityCodeInputOptions): Promise<CvvInput | null>;
2134
+ /**
2135
+ * Initiates payment using a vaulted payment method.
2136
+ *
2137
+ * Enables headless vault flows where merchants build custom vault UIs.
2138
+ * Mirrors the legacy SDK's vaultManager.startPaymentFlow().
2139
+ *
2140
+ * @param paymentMethodId - The ID of the vaulted payment method
2141
+ * @param options - Optional payment options
2142
+ * @param options.cvv - CVV value token (required if cvvRecapture is true)
2143
+ * @returns Promise that resolves when payment flow starts
2144
+ * @throws Error if vault not initialized or payment method not found
2145
+ *
2146
+ * @example
2147
+ * ```typescript
2148
+ * // Complete headless vault flow
2149
+ * let vaultedMethods;
2150
+ * let needsCvv = false;
2151
+ *
2152
+ * primerJS.onVaultedMethodsUpdate = ({ vaultedPayments, cvvRecapture }) => {
2153
+ * vaultedMethods = vaultedPayments.toArray();
2154
+ * needsCvv = cvvRecapture;
2155
+ *
2156
+ * // Build custom vault UI
2157
+ * vaultedMethods.forEach(method => {
2158
+ * displayVaultItem({
2159
+ * id: method.id,
2160
+ * last4: method.paymentInstrumentData?.last4Digits,
2161
+ * network: method.paymentInstrumentData?.network
2162
+ * });
2163
+ * });
2164
+ * };
2165
+ *
2166
+ * // When user submits payment
2167
+ * async function handlePayment(selectedMethodId) {
2168
+ * try {
2169
+ * if (needsCvv) {
2170
+ * const method = vaultedMethods.find(m => m.id === selectedMethodId);
2171
+ * const cvvInput = await primerJS.createCvvInput({
2172
+ * cardNetwork: method.paymentInstrumentData.network,
2173
+ * container: "#cvv-container"
2174
+ * });
2175
+ *
2176
+ * if (cvvInput.metadata.error) {
2177
+ * showError("Invalid CVV");
2178
+ * return;
2179
+ * }
2180
+ *
2181
+ * await primerJS.startVaultPayment(selectedMethodId, {
2182
+ * cvv: cvvInput.valueToken
2183
+ * });
2184
+ * } else {
2185
+ * await primerJS.startVaultPayment(selectedMethodId);
2186
+ * }
2187
+ * } catch (error) {
2188
+ * console.error("Payment failed:", error);
2189
+ * }
2190
+ * }
2191
+ * ```
2192
+ */
2193
+ startVaultPayment(paymentMethodId: string, options?: {
2194
+ cvv?: string;
2195
+ }): Promise<void>;
1917
2196
  /**
1918
2197
  * Refetches a new client session from merchant backend.
1919
2198
  */
@@ -1941,7 +2220,7 @@ export declare class PrimerJS {
1941
2220
  * Internal method to handle the onVaultedMethodsUpdate callback
1942
2221
  * @internal - This is only used internally by the SDK
1943
2222
  */
1944
- handleVaultedMethodsUpdate(vaultedPayments: InitializedVaultedPayments): void;
2223
+ handleVaultedMethodsUpdate(vaultedPayments: InitializedVaultedPayments, cvvRecapture: boolean): void;
1945
2224
  /**
1946
2225
  * Sets the cardholder name value in the card payment form.
1947
2226
  *
@@ -2134,139 +2413,6 @@ export type KlarnaCategoriesContextType = {
2134
2413
  categories: KlarnaPaymentMethodCategory[];
2135
2414
  isLoading: boolean;
2136
2415
  };
2137
- export type ReducerCallbacks<State, _Action extends {
2138
- type: string;
2139
- }> = {
2140
- [K in keyof State]?: State[K] extends (...args: unknown[]) => unknown ? State[K] : never;
2141
- };
2142
- export type TypedReducer<State, Action extends {
2143
- type: string;
2144
- }, Callbacks> = (state: State, action: Action, callbacks: Callbacks) => State;
2145
- declare abstract class ReactiveStateController<Host extends ReactiveControllerHost, State, Action extends {
2146
- type: string;
2147
- }, Callbacks = ReducerCallbacks<State, Action> | null> implements ReactiveController {
2148
- protected host: Host;
2149
- protected stateHandler: (state: State) => void;
2150
- private _dispatcher;
2151
- constructor(host: Host, initialState: State, reducer: TypedReducer<State, Action, Callbacks>, initialCallbacks: Callbacks, stateHandler?: (state: State) => void);
2152
- get currentState(): Readonly<State>;
2153
- protected dispatch(action: Action): void;
2154
- protected setCallbacks(callbacks: Partial<Callbacks>): void;
2155
- hostConnected(): void;
2156
- hostDisconnected(): void;
2157
- }
2158
- declare class CompositeStateController<Host extends ReactiveControllerHost> implements ReactiveController {
2159
- protected host: Host;
2160
- private _controllers;
2161
- constructor(host: Host);
2162
- addController<State, Action extends {
2163
- type: string;
2164
- }, Callbacks = ReducerCallbacks<State, Action> | null>(controller: ReactiveStateController<Host, State, Action, Callbacks>): void;
2165
- hostConnected(): void;
2166
- hostDisconnected(): void;
2167
- }
2168
- /**
2169
- * Options for initializing the Vault Manager
2170
- */
2171
- export interface VaultManagerInitOptions {
2172
- vaultEnabled?: boolean;
2173
- captureVaultedCardCvv?: boolean;
2174
- showEmptyState?: boolean;
2175
- }
2176
- /**
2177
- * Core state interface for vault manager
2178
- * Contains properties related to vault functionality that don't change frequently
2179
- */
2180
- export interface VaultManagerState {
2181
- enabled: boolean;
2182
- isLoading: boolean;
2183
- isUpdating: boolean;
2184
- vaultedPaymentMethods: VaultedPaymentMethod[];
2185
- cvvRecapture: boolean;
2186
- showEmptyState: boolean;
2187
- createCvvInput: ((options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>) | null;
2188
- deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
2189
- startVaultedPaymentFlow: (options?: {
2190
- cvv?: string;
2191
- }) => Promise<void>;
2192
- }
2193
- /**
2194
- * CVV-specific state interface
2195
- * Contains properties specifically related to CVV input functionality
2196
- */
2197
- export interface VaultManagerItemState {
2198
- formIsDirty: boolean;
2199
- cvvInput: CvvInput | null;
2200
- setCvvInput: (metadata: CvvInput | null) => void;
2201
- selectedVaultedPaymentMethod: VaultedPaymentMethod | null;
2202
- setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
2203
- }
2204
- declare class VaultManagerController extends CompositeStateController<PrimerCheckoutType> {
2205
- private coreController;
2206
- private itemController;
2207
- private _vaultManager;
2208
- private _options;
2209
- private createVaultManagerFn;
2210
- constructor(host: PrimerCheckoutType);
2211
- /**
2212
- * Initialize the vault manager with a factory function and options
2213
- * @param createVaultManagerFn - Bound function to create vault manager when needed
2214
- * @param options - Vault configuration options
2215
- */
2216
- initializeVaultManager(createVaultManagerFn: PrimerHeadlessCheckout["createVaultManager"] | null, options?: VaultManagerInitOptions): void;
2217
- get vaultManager(): HeadlessVaultManager | null;
2218
- set vaultManager(vaultManager: HeadlessVaultManager | null);
2219
- get options(): VaultManagerInitOptions | null;
2220
- set options(options: VaultManagerInitOptions | null);
2221
- get vaultManagerState(): Readonly<VaultManagerState>;
2222
- get vaultItemState(): Readonly<VaultManagerItemState>;
2223
- /**
2224
- * Lifecycle method called when the host disconnects
2225
- */
2226
- hostDisconnected(): void;
2227
- /**
2228
- * Transform raw vault data into filtered, event-ready format.
2229
- * Applies PII filtering to all vaulted payment methods.
2230
- *
2231
- * @param vaultedPaymentMethods - Raw vaulted payment methods from API
2232
- * @returns InitializedVaultedPayments wrapper with filtered data
2233
- */
2234
- private createVaultedPaymentsWrapper;
2235
- /**
2236
- * Update vaulted payment methods and dispatch events/callbacks.
2237
- * This method:
2238
- * 1. Updates internal state via core controller
2239
- * 2. Creates filtered wrapper for external APIs
2240
- * 3. Dispatches event to listeners
2241
- * 4. Invokes callback if defined
2242
- *
2243
- * @param methods - Raw vaulted payment methods from API
2244
- */
2245
- private updatePaymentMethodsWithEvents;
2246
- /**
2247
- * Fetch vaulted payment methods from the server
2248
- */
2249
- fetchVaultedPaymentMethods(initialLoad?: boolean): Promise<VaultedPaymentMethod[]>;
2250
- createCvvInput: (options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>;
2251
- /**
2252
- * Delete a vaulted payment method by ID
2253
- */
2254
- deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
2255
- /**
2256
- * Set the CVV metadata - updates CVV state only
2257
- * Moved to the separate CVV context
2258
- */
2259
- setCvvInput: (metadata: CvvInput | null) => void;
2260
- /**
2261
- * Start the vaulted payment flow
2262
- * Verifies form state validity before processing
2263
- */
2264
- startVaultedPaymentFlow: () => Promise<void>;
2265
- /**
2266
- * Set the selected vaulted payment method - updates form state only
2267
- */
2268
- setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
2269
- }
2270
2416
  /**
2271
2417
  * Context for core vault manager functionality
2272
2418
  * Contains properties that don't change frequently and relate to vault functionality