@primer-io/primer-js 0.0.3 → 0.1.1

package/dist/primer-loader.d.ts

@@ -1,13 +1,56 @@
+/**
+ * Injects the CSS loader styles into the page
+ * These styles display a loading indicator before JavaScript initializes
+ *
+ * Unlike theme styles, loader styles should take precedence over merchant styles
+ * to ensure the loading indicator is visible. We append them to the end of the head.
+ */
+export declare function injectLoaderStyles(): void;
+/**
+ * Injects all required theme CSS variables into the page
+ * This should be called before components are rendered to ensure
+ * they have access to all design tokens
+ *
+ * Theme styles are prepended to the document head to allow merchant styles
+ * to override our default variables.
+ */
+export declare function injectThemeStyles(): void;
+/**
+ * Utility function to inject only the light theme CSS variables
+ * @returns {void}
+ */
+export declare function injectLightTheme(): void;
+/**
+ * Utility function to inject only the dark theme CSS variables
+ * @returns {void}
+ */
+export declare function injectDarkTheme(): void;
+/**
+ * Main function to load the Primer SDK with all required dependencies and styles
+ * @returns {Promise<void>} A promise that resolves when loading is complete
+ */
+export declare function loadPrimer(): Promise<void>;
 export type CardNetwork = {
 	displayName: string;
 	network: string;
-	iconUrl: string;
 };
 export type CardNetworksContext = {
 	detectedCardNetwork: CardNetwork | null;
 	selectableCardNetworks: CardNetwork[];
 	isLoading: boolean;
+} | null;
+export type SdkState = {
+	isSuccessful: boolean;
+	isProcessing: boolean;
+	error: Error | null;
+	isLoading: boolean;
+	failure: {
+		code: string;
+		message: string;
+		details?: Record<string, unknown>;
+	} | null;
 };
+export type SdkStateContext = SdkState | null;
 /**
  * A CSSResult or native CSSStyleSheet.
  *
@@ -883,6 +926,152 @@ export interface RenderOptions {
  * ensuring backward compatibility.
  */
 export type APIVersionOption = "legacy" | "2.4";
+declare enum ImplementationType {
+	WEB_REDIRECT = "WEB_REDIRECT",
+	NATIVE_SDK = "NATIVE_SDK"
+}
+declare enum ProductType {
+	DIGITAL = "DIGITAL",
+	PHYSICAL = "PHYSICAL",
+	SHIPPING_FEE = "SHIPPING_FEE"
+}
+export interface ClientSessionLineItem {
+	amount: number;
+	description: string;
+	discountAmount?: number;
+	itemId: string;
+	name?: string;
+	productType?: ProductType;
+	quantity: number;
+	taxAmount?: number;
+	taxCode?: string;
+}
+export interface ClientSessionShipping {
+	amount: number;
+	methodId?: string;
+	methodName?: string;
+	methodDescription?: string;
+}
+export interface ClientSessionFeeItem {
+	type?: string;
+	description?: string;
+	amount: number;
+}
+export interface ClientSessionAddress {
+	firstName?: string;
+	lastName?: string;
+	addressLine1?: string;
+	addressLine2?: string;
+	city?: string;
+	state?: string;
+	countryCode?: string;
+	postalCode?: string;
+}
+export interface ClientSession {
+	orderId?: string;
+	currencyCode?: string;
+	lineItems?: ClientSessionLineItem[];
+	totalAmount?: number;
+	customerId?: string;
+	orderDetails?: {
+		countryCode?: string;
+		shipping?: ClientSessionShipping;
+		fees?: ClientSessionFeeItem[];
+	};
+	customer?: {
+		emailAddress?: string;
+		mobileNumber?: string;
+		firstName?: string;
+		lastName?: string;
+		billingAddress?: ClientSessionAddress;
+		shippingAddress?: ClientSessionAddress;
+		taxId?: string;
+		nationalDocumentId?: string;
+	};
+	paymentMethod?: {
+		options?: Record<string, any>;
+		orderedAllowedCardNetworks?: string[];
+		vaultOnSuccess?: boolean;
+	};
+}
+export interface PaymentMethodDisplayMetadata {
+	button: {
+		backgroundColor: BackgroundColor;
+		borderColor: BorderColor;
+		borderWidth: BorderWidth;
+		cornerRadius: number;
+		iconPositionRelativeToText?: "START" | "END";
+		iconUrl: IconUrl;
+		text?: string;
+		textColor?: TextColor;
+	};
+	overlay: {
+		logo: IconUrl;
+		backgroundColor: BackgroundColor;
+	};
+	popup: {
+		width: number;
+		height: number;
+	};
+}
+export interface BackgroundColor {
+	colored: string;
+	dark: string;
+	light: string;
+}
+export interface BorderColor {
+	dark: string;
+	light: string;
+}
+export interface BorderWidth {
+	colored: number;
+	dark: number;
+	light: number;
+}
+export interface IconUrl {
+	colored: string;
+	dark: string;
+	light: string;
+}
+export interface TextColor {
+	dark: string;
+	light: string;
+}
+export interface PaymentMethodConfig {
+	id: string;
+	type: PaymentMethodType;
+	name: string;
+	implementationType: ImplementationType;
+	displayMetadata: PaymentMethodDisplayMetadata;
+	options: {
+		captureVaultedCardCvv?: boolean;
+		clientId?: string;
+		threeDSecureToken?: string;
+		threeDSecureInitUrl?: string;
+		threeDSecureProvider?: string;
+		threeDSecureEnabled?: boolean;
+	};
+	forceRedirect?: boolean;
+}
+export type GoatBrand = {
+	assets: {
+		icon: string;
+	};
+	colors: {
+		background: string;
+		main: string;
+	};
+	description: string | null;
+	is_primer_app: boolean;
+	name: string;
+	website: string | null;
+};
+export type GoatBrandWithCdn = GoatBrand & {
+	/**
+	 * The full CDN URL that can be used directly in applications
+	 */
+	goatCdnUrl: string;
+};
 declare const PaymentInstrumentType: {
 	readonly WORLDPAY_IDEAL: "WORLDPAY_IDEAL";
 	readonly AUTOMATED_CLEARING_HOUSE: "AUTOMATED_CLEARING_HOUSE";
@@ -1196,98 +1385,95 @@ export interface CheckoutStyle {
 	processingIndicator?: ProcessingIndicatorStyle;
 	focusCheckoutOnInit?: boolean;
 }
-export interface IVaultedPaymentMethod<T, U extends PaymentInstrumentType> {
-	id: string;
-	analyticsId: string;
-	paymentInstrumentData: T;
-	paymentInstrumentType: U;
-	threeDSecureAuthentication: ThreeDSAuthenticationData | null;
-	vaultData: VaultData | null;
-	userDescription?: string;
-}
-export type VaultedPaymentMethod = IVaultedPaymentMethod<any, any>;
-declare enum ProductType {
-	DIGITAL = "DIGITAL",
-	PHYSICAL = "PHYSICAL",
-	SHIPPING_FEE = "SHIPPING_FEE"
-}
-export interface ClientSessionLineItem {
-	amount: number;
-	description: string;
-	discountAmount?: number;
-	itemId: string;
-	name?: string;
-	productType?: ProductType;
-	quantity: number;
-	taxAmount?: number;
-	taxCode?: string;
-}
-export interface ClientSessionShipping {
-	amount: number;
-	methodId?: string;
-	methodName?: string;
-	methodDescription?: string;
-}
-export interface ClientSessionFeeItem {
-	type?: string;
-	description?: string;
-	amount: number;
+declare enum CheckoutUXFlow {
+	CHECKOUT = "CHECKOUT",
+	HEADLESS_CHECKOUT = "HEADLESS_CHECKOUT",
+	MANAGE_PAYMENT_METHODS = "MANAGE_PAYMENT_METHODS"
 }
-export interface ClientSessionAddress {
-	firstName?: string;
-	lastName?: string;
-	addressLine1?: string;
-	addressLine2?: string;
-	city?: string;
-	state?: string;
-	countryCode?: string;
-	postalCode?: string;
+export interface BasePaymentInstrumentData {
+	[key: string]: unknown;
 }
-export interface ClientSession {
-	orderId?: string;
-	currencyCode?: string;
-	lineItems?: ClientSessionLineItem[];
-	totalAmount?: number;
-	customerId?: string;
-	orderDetails?: {
-		countryCode?: string;
-		shipping?: ClientSessionShipping;
-		fees?: ClientSessionFeeItem[];
+export interface PaymentCardInstrumentData extends BasePaymentInstrumentData {
+	last4Digits: string;
+	first6Digits: string;
+	expirationMonth: string;
+	expirationYear: string;
+	cardholderName: string;
+	network: string;
+	isNetworkTokenized: boolean;
+	binData?: {
+		network: string;
+		issuerCountryCode: string;
+		issuerName: string;
+		issuerCurrencyCode: string;
+		regionalRestriction: string;
+		accountNumberType: string;
+		accountFundingType: string;
+		prepaidReloadableIndicator: string;
+		productUsageType: string;
+		productCode: string;
+		productName: string;
 	};
-	customer?: {
-		emailAddress?: string;
-		mobileNumber?: string;
+}
+export interface PayPalInstrumentData extends BasePaymentInstrumentData {
+	externalPayerInfo?: {
+		externalPayerId?: string;
 		firstName?: string;
 		lastName?: string;
-		billingAddress?: ClientSessionAddress;
-		shippingAddress?: ClientSessionAddress;
-		taxId?: string;
-		nationalDocumentId?: string;
+		email?: string;
 	};
-	paymentMethod?: {
-		options?: Record<string, any>;
-		orderedAllowedCardNetworks?: string[];
-		vaultOnSuccess?: boolean;
+	shippingAddress?: {
+		firstName?: string;
+		lastName?: string;
+		addressLine1?: string;
+		addressLine2?: string;
+		city?: string;
+		state?: string;
+		countryCode?: string;
+		postalCode?: string;
 	};
 }
-export interface BackgroundColor {
-	colored: string;
-	dark: string;
-	light: string;
+export interface KlarnaInstrumentData extends BasePaymentInstrumentData {
+	sessionData?: {
+		billingAddress?: {
+			firstName?: string;
+			lastName?: string;
+			email?: string;
+			phoneNumber?: string;
+			addressLine1?: string;
+			addressLine2?: string;
+			city?: string;
+			state?: string;
+			countryCode?: string;
+			postalCode?: string;
+		};
+	};
 }
-export interface IconUrl {
-	colored: string;
-	dark: string;
-	light: string;
+export interface ACHInstrumentData extends BasePaymentInstrumentData {
+	accountNumberLastFourDigits: string;
+	bankName: string;
+	accountType?: string;
+	routingNumber?: string;
 }
-declare enum CheckoutUXFlow {
-	CHECKOUT = "CHECKOUT",
-	HEADLESS_CHECKOUT = "HEADLESS_CHECKOUT",
-	MANAGE_PAYMENT_METHODS = "MANAGE_PAYMENT_METHODS"
+export interface IVaultedPaymentMethod<B extends BasePaymentInstrumentData = BasePaymentInstrumentData, I extends PaymentInstrumentType = PaymentInstrumentType, T extends PaymentMethodType = PaymentMethodType> {
+	id: string;
+	analyticsId: string;
+	paymentInstrumentData: B;
+	paymentInstrumentType: I;
+	paymentMethodType: T;
+	threeDSecureAuthentication?: ThreeDSAuthenticationData | null;
+	vaultData?: VaultData | null;
+	userDescription?: string;
+	isVaulted?: boolean;
 }
+export type PaymentCardVaultedMethod = IVaultedPaymentMethod<PaymentCardInstrumentData, typeof PaymentInstrumentType.CARD, typeof PaymentMethodType.PAYMENT_CARD>;
+export type PayPalVaultedMethod = IVaultedPaymentMethod<PayPalInstrumentData, typeof PaymentInstrumentType.PAYPAL_VAULTED, typeof PaymentMethodType.PAYPAL>;
+export type KlarnaVaultedMethod = IVaultedPaymentMethod<KlarnaInstrumentData, typeof PaymentInstrumentType.KLARNA_CUSTOMER_TOKEN, typeof PaymentMethodType.KLARNA>;
+export type ACHVaultedMethod = IVaultedPaymentMethod<ACHInstrumentData, typeof PaymentInstrumentType.AUTOMATED_CLEARING_HOUSE, typeof PaymentMethodType.STRIPE_ACH>;
+export type VaultedPaymentMethod = PaymentCardVaultedMethod | PayPalVaultedMethod | KlarnaVaultedMethod | ACHVaultedMethod | IVaultedPaymentMethod;
 export type SecureInputOptions = {
 	ariaLabel?: string;
-	container: string;
+	container: string | Element | HTMLElement;
 	id?: string;
 	name: string;
 	placeholder?: string;
@@ -1397,13 +1583,6 @@ export interface CardMetadata {
 	cvvLength: number;
 	cardNumberLength: number;
 }
-export type PaymentMethodData$1 = AdyenMultibancoPaymentData;
-export type AdyenMultibancoPaymentData = {
-	paymentMethodType: typeof PaymentMethodType.ADYEN_MULTIBANCO;
-	reference: string;
-	expiresAt: string;
-	entity: string;
-};
 export interface PositionalConfig {
 	container: string | Element;
 }
@@ -1589,6 +1768,15 @@ export interface Validation {
 	validationErrors: InputValidationError[];
 	error?: string;
 }
+export interface InputMetadata {
+	errorCode: string | null;
+	error: string | null;
+	valid: boolean;
+	active: boolean;
+	dirty: boolean;
+	touched: boolean;
+	submitted: boolean;
+}
 export interface ExternalPayerInfo {
 	externalPayerId: string;
 	firstName?: string;
@@ -1634,20 +1822,21 @@ export interface ThreeDSAuthenticationData {
 export interface VaultData {
 	customerId: string;
 }
-export interface PaymentCardDetails {
+export type PaymentCardDetails = {
 	last4Digits: string;
 	cardholderName: string;
 	network: string;
-}
-export interface PayPalBillingAgreementDetails {
+};
+export type PayPalBillingAgreementDetails = {
 	paypalBillingAgreementId: string;
 	externalPayerInfo?: ExternalPayerInfo;
 	shippingAddress?: CustomerAddress;
-}
-export interface GoCardlessDetails {
+};
+export type GoCardlessDetails = {
 	gocardlessMandateId: string;
-}
-export interface IPaymentMethodToken<T, U extends PaymentInstrumentType> {
+};
+export type BasePaymentInstrumentData$1 = Record<string, unknown>;
+export interface IPaymentMethodToken<T extends BasePaymentInstrumentData$1 = BasePaymentInstrumentData$1, U extends PaymentInstrumentType = PaymentInstrumentType> {
 	token: string;
 	analyticsId: string;
 	tokenType: TokenType;
@@ -1656,11 +1845,12 @@ export interface IPaymentMethodToken<T, U extends PaymentInstrumentType> {
 	threeDSecureAuthentication: ThreeDSAuthenticationData | null;
 	vaultData: VaultData | null;
 }
+export type UnknownPaymentMethodToken = IPaymentMethodToken<BasePaymentInstrumentData$1, PaymentInstrumentType>;
 export type PaymentCardToken = IPaymentMethodToken<PaymentCardDetails, typeof PaymentInstrumentType.CARD>;
 export type PayPalBillingAgreementToken = IPaymentMethodToken<PayPalBillingAgreementDetails, typeof PaymentInstrumentType.PAYPAL_VAULTED>;
 export type GoCardlessToken = IPaymentMethodToken<GoCardlessDetails, typeof PaymentInstrumentType.GO_CARDLESS>;
 export type IdealPayToken = IPaymentMethodToken<Record<string, never>, typeof PaymentInstrumentType.PAY_NL_IDEAL>;
-export type PaymentMethodToken = PaymentCardToken | PayPalBillingAgreementToken | GoCardlessToken | IdealPayToken | IPaymentMethodToken<any, any>;
+export type PaymentMethodToken = PaymentCardToken | PayPalBillingAgreementToken | GoCardlessToken | IdealPayToken | UnknownPaymentMethodToken;
 export type CheckSuccessScreenOptions = {
 	type: SuccessScreenType.CHECK;
 	title: Label;
@@ -1695,6 +1885,13 @@ export type AdvancedOptions = {
 };
 export type PaymentMethodAction = "PAYMENT_METHOD_SELECTED" | "PAYMENT_METHOD_UNSELECTED";
 export type PaymentHandling = "AUTO" | "MANUAL";
+export type PaymentMethodData$1 = AdyenMultibancoPaymentData;
+export type AdyenMultibancoPaymentData = {
+	paymentMethodType: typeof PaymentMethodType.ADYEN_MULTIBANCO;
+	reference: string;
+	expiresAt: string;
+	entity: string;
+};
 export type Payment = {
 	id: string;
 	orderId: string;
@@ -1759,6 +1956,7 @@ export interface ClientSessionHandlers {
 	onBeforeClientSessionUpdate?: () => void;
 }
 export interface VaultManagerOptions extends WithAllowedCardNetworks {
+	uxFlow?: CheckoutUXFlow.MANAGE_PAYMENT_METHODS;
 	container: string | Element;
 	locale?: SupportedLocale;
 	vaultOnly?: boolean;
@@ -1772,7 +1970,9 @@ export interface VaultManagerOptions extends WithAllowedCardNetworks {
 	card?: CheckoutCardOptions;
 	threeDSecure?: ThreeDSVerificationOptions;
 	giftCard?: CustomizablePaymentMethodButton;
+	googlePay?: Omit<GooglePayOptions, "container">;
 	directDebit?: DirectDebitOptions;
+	stripe?: StripeOptionsDropIn;
 	paypal?: Omit<PayPalOptions, "container">;
 	onTokenizeShouldStart?: OnTokenizeShouldStart;
 	onTokenizeDidNotStart?: OnTokenizeDidNotStart;
@@ -1849,7 +2049,11 @@ declare enum EventTypes {
 	FOCUS = "focus",
 	BLUR = "blur",
 	CLICK = "click",
-	CLOSE = "close"
+	CLOSE = "close",
+	CONFIRMED_KLARNA_CATEGORY = "CONFIRMED_KLARNA_CATEGORY",
+	CONFIRMED_KLARNA_CATEGORY_ERROR = "CONFIRMED_KLARNA_CATEGORY_ERROR",
+	KLARNA_SESSION_UPDATE = "KLARNA_SESSION_UPDATE",
+	KLARNA_SESSION_REFRESH_ERROR = "KLARNA_SESSION_REFRESH_ERROR"
 }
 export interface HeadlessHostedInputOptions {
 	placeholder?: string;
@@ -1916,10 +2120,6 @@ export interface IRedirectPaymentMethodManager {
 	start(): Promise<void>;
 	addEventListener(event: EventTypes, callback: EventListener$1): void;
 }
-export interface IFormWithRedirectPaymentMethodManager<T> {
-	start(): any;
-	submit(data: T): any;
-}
 export interface IKlarnaPaymentMethodManager {
 	start(paymentPayload: KlarnaPaymentPayload): Promise<KlarnaPaymentResponse>;
 	renderCategory(renderCategoryDetails: RenderCategoryDetails): Promise<void>;
@@ -1937,7 +2137,6 @@ declare enum HeadlessManagerType {
 	CARD = "CARD",
 	NATIVE = "NATIVE",
 	REDIRECT = "REDIRECT",
-	FORM_WITH_REDIRECT = "FORM_WITH_REDIRECT",
 	KLARNA = "KLARNA",
 	ACH = "ACH"
 }
@@ -2000,6 +2199,10 @@ export interface FormWithRedirectPaymentMethodManagerOptions {
 }
 export interface KlarnaPaymentMethodManagerOptions {
 	onPaymentMethodCategoriesChange?: (paymentMethodCategories: KlarnaPaymentMethodCategory[]) => void;
+	onPaymentMethodAction?: (action: string, data: {
+		paymentMethodType: string;
+		category: string;
+	}) => void;
 }
 export interface AchPaymentMethodManagerOptions {
 	onCollectBankAccountDetailsComplete?: () => void;
@@ -2021,15 +2224,24 @@ export type RenderCategoryDetails = {
 	paymentMethodCategoryId: string;
 	onHeightChange: (height: number) => void;
 };
+export interface HeadlessSDKUtilities {
+	getCardNetworkAsset(network: string): {
+		cardUrl: string;
+		displayName: string;
+	};
+	getUIOrderAmount(): string | null;
+	getCDNAssets(paymentMethodType: PaymentMethodType): Promise<GoatBrandWithCdn | undefined>;
+	getPaymentMethodConfiguration(paymentMethodType: PaymentMethodType): PaymentMethodConfig | undefined;
+}
 export type PaymentMethodManagerOptions = CardPaymentMethodManagerOptions | FormWithRedirectPaymentMethodManagerOptions | KlarnaPaymentMethodManagerOptions;
 export interface PrimerHeadlessCheckout {
 	createPaymentMethodManager(type: "PAYMENT_CARD", options?: PaymentMethodManagerOptions): Promise<ICardPaymentMethodManager | null>;
 	createPaymentMethodManager(type: "PAYPAL" | "GOOGLE_PAY" | "APPLE_PAY", options?: PaymentMethodManagerOptions): Promise<INativePaymentMethodManager | null>;
-	createPaymentMethodManager(type: "ADYEN_IDEAL", options?: FormWithRedirectPaymentMethodManagerOptions): Promise<IFormWithRedirectPaymentMethodManager<BankIssuer> | null>;
 	createPaymentMethodManager(type: "STRIPE_ACH", options?: AchPaymentMethodManagerOptions): Promise<IAchPaymentMethodManager | null>;
 	createPaymentMethodManager(type: "KLARNA", options?: PaymentMethodManagerOptions): Promise<IKlarnaPaymentMethodManager | null>;
 	createPaymentMethodManager(type: PaymentMethodType, options?: PaymentMethodManagerOptions): Promise<IRedirectPaymentMethodManager | null>;
 	createVaultManager(): HeadlessVaultManager;
+	getSDKUtilities(): HeadlessSDKUtilities;
 	/**
 	 * @deprecated
 	 * The options should be set on the `createHeadless` second parameter instead:
@@ -2056,18 +2268,19 @@ declare const Primer: {
 export type JSONSafe<T> = T extends (...args: any[]) => any ? never : T extends symbol ? never : T extends bigint ? never : T extends Array<infer U> ? JSONSafe<U>[] : T extends object ? {
 	[K in keyof T as JSONSafe<T[K]> extends never ? never : K]: JSONSafe<T[K]>;
 } : T;
-export type PrimerCheckoutOptions = JSONSafe<HeadlessUniversalCheckoutOptions>;
+export type PrimerCheckoutOptions = JSONSafe<HeadlessUniversalCheckoutOptions> & {
+	vault?: {
+		enabled: boolean;
+	};
+	submitButton?: {
+		amountVisible?: boolean;
+	};
+};
 declare global {
 	interface Window {
 		Primer: typeof Primer;
 	}
 }
-export type InitializedPaymentAssets = {
-	displayName: string;
-	backgroundColor?: BackgroundColor;
-	buttonText: string;
-	iconUrl?: IconUrl;
-};
 export type InitializedManager = {
 	type: typeof PaymentMethodType.STRIPE_ACH;
 	manager: IAchPaymentMethodManager;
@@ -2094,32 +2307,25 @@ export type RedirectPaymentMethodTypes = Exclude<PaymentMethodType, typeof Payme
 export type RedirectPaymentMethod = {
 	type: RedirectPaymentMethodTypes;
 	managerType: HeadlessManagerType.REDIRECT;
-	assets: InitializedPaymentAssets;
 };
 export type InitializedPaymentMethod = {
 	type: typeof PaymentMethodType.STRIPE_ACH;
 	managerType: HeadlessManagerType.ACH;
-	assets: InitializedPaymentAssets;
 } | {
 	type: typeof PaymentMethodType.PAYMENT_CARD;
 	managerType: HeadlessManagerType.CARD;
-	assets: null;
 } | {
 	type: typeof PaymentMethodType.KLARNA;
 	managerType: HeadlessManagerType.KLARNA;
-	assets: InitializedPaymentAssets;
 } | {
 	type: typeof PaymentMethodType.PAYPAL;
 	managerType: HeadlessManagerType.NATIVE;
-	assets: null;
 } | {
 	type: typeof PaymentMethodType.GOOGLE_PAY;
 	managerType: HeadlessManagerType.NATIVE;
-	assets: null;
 } | {
 	type: typeof PaymentMethodType.APPLE_PAY;
 	managerType: HeadlessManagerType.NATIVE;
-	assets: null;
 } | RedirectPaymentMethod;
 export type PaymentMethodByType<T extends PaymentMethodType> = Extract<InitializedPaymentMethod, {
 	type: T;
@@ -2127,7 +2333,7 @@ export type PaymentMethodByType<T extends PaymentMethodType> = Extract<Initializ
 export interface InitializedPaymentMethodMap extends Map<PaymentMethodType, InitializedPaymentMethod> {
 	get<T extends PaymentMethodType>(key: T): PaymentMethodByType<T> | undefined;
 }
-declare class PaymentsObject {
+declare class InitializedPayments {
 	private readonly _methods;
 	constructor(map: InitializedPaymentMethodMap);
 	get<T extends RedirectPaymentMethodTypes>(type: T): RedirectPaymentMethod | undefined;
@@ -2135,17 +2341,6 @@ declare class PaymentsObject {
 	toArray(): InitializedPaymentMethod[];
 	size(): number;
 }
-export type SdkStateContext = {
-	isSuccessful: boolean;
-	isProcessing: boolean;
-	error?: Error;
-	isLoading?: boolean;
-	failure?: {
-		code: string;
-		message: string;
-		details?: Record<string, unknown>;
-	};
-};
 export interface CardSubmitSuccessPayload {
 	result: unknown;
 }
@@ -2154,7 +2349,7 @@ export interface CardSubmitErrorsPayload {
 }
 export interface PrimerEvents {
 	"primer-state-changed": CustomEvent<SdkStateContext>;
-	"primer-payment-methods-updated": CustomEvent<PaymentsObject>;
+	"primer-payment-methods-updated": CustomEvent<InitializedPayments>;
 	"primer-checkout-initialized": CustomEvent<PrimerHeadlessCheckout>;
 	"primer-card-network-change": CustomEvent<CardNetworksContext>;
 	"primer-card-submit-success": CustomEvent<CardSubmitSuccessPayload>;
@@ -2173,27 +2368,167 @@ declare class PrimerEventsController implements ReactiveController {
 	 */
 	dispatchEvent<K extends keyof PrimerEvents>(type: K, detail: PrimerEvents[K]["detail"]): void;
 	dispatchSdkState(sdkState: SdkStateContext): void;
-	dispatchPaymentMethods(paymentMethods: PaymentsObject): void;
+	dispatchPaymentMethods(paymentMethods: InitializedPayments): void;
 	dispatchCheckoutInitialized(checkoutInstance: PrimerHeadlessCheckout): void;
 	dispatchCardNetworkChange(network: CardNetworksContext): void;
 	dispatchFormSubmitSuccess(result: unknown): void;
 	dispatchFormSubmitErrors(errors: unknown): void;
 }
-declare class SdkStateController implements ReactiveController {
-	host: PrimerCheckoutType;
-	private _state;
-	constructor(host: PrimerCheckoutType);
+export type HeadlessUnitilsContext = HeadlessSDKUtilities | null;
+export type KlarnaCategoriesContext = {
+	categories: KlarnaPaymentMethodCategory[];
+	isLoading: boolean;
+};
+/**
+ * Options for initializing the Vault Manager
+ */
+export interface VaultManagerInitOptions {
+	vaultEnabled?: boolean;
+	captureVaultedCardCvv?: boolean;
+}
+/**
+ * Core state interface for vault manager
+ * Contains properties related to vault functionality that don't change frequently
+ */
+export interface VaultManagerState {
+	enabled: boolean;
+	isLoading: boolean;
+	vaultedPaymentMethods: VaultedPaymentMethod[];
+	cvvRecapture: boolean;
+	createCvvInput?: (options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>;
+	deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
+	startVaultedPaymentFlow: (options?: {
+		cvv?: string;
+	}) => Promise<void>;
+}
+/**
+ * CVV-specific state interface
+ * Contains properties specifically related to CVV input functionality
+ */
+export interface VaultManagerItemState {
+	formIsDirty: boolean;
+	cvvInput: CvvInput | null;
+	setCvvInput: (metadata: CvvInput | null) => void;
+	selectedVaultedPaymentMethod: VaultedPaymentMethod | null;
+	setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
+}
+declare class VaultManagerController implements ReactiveController {
+	host: PrimerCheckoutType;
+	private _vaultManagerState;
+	private _vaultItemState;
+	private _vaultManager;
+	private _options;
+	constructor(host: PrimerCheckoutType);
+	/**
+	 * Initialize the vault manager with additional options
+	 * @param vaultManager - The HeadlessVaultManager instance
+	 * @param options - Additional initialization options
+	 */
+	initializeVaultManager(vaultManager: HeadlessVaultManager, options?: VaultManagerInitOptions): void;
+	get vaultManager(): HeadlessVaultManager | null;
+	set vaultManager(vaultManager: HeadlessVaultManager | null);
+	get options(): VaultManagerInitOptions | null;
+	set options(options: VaultManagerInitOptions | null);
+	/**
+	 * Lifecycle method called when the host disconnects
+	 */
+	hostDisconnected(): void;
+	/**
+	 * Dispatches an action to update the core vault state
+	 */
+	private dispatchVaultManager;
+	/**
+	 * Dispatches an action to update the CVV state
+	 * Separate dispatch method to handle CVV state independently
+	 */
+	private dispatchVaultItem;
+	/**
+	 * Fetch vaulted payment methods from the server
+	 */
+	fetchVaultedPaymentMethods(): Promise<VaultedPaymentMethod[]>;
+	/**
+	 * Delete a vaulted payment method by ID
+	 */
+	deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
+	/**
+	 * Set the CVV metadata - updates CVV state only
+	 * Moved to the separate CVV context
+	 */
+	setCvvInput: (metadata: CvvInput | null) => void;
+	/**
+	 * Start the vaulted payment flow
+	 * Verifies form state validity before processing
+	 */
+	startVaultedPaymentFlow: () => Promise<void>;
+	/**
+	 * Set the selected vaulted payment method - updates form state only
+	 */
+	setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
+}
+/**
+ * Context for core vault manager functionality
+ * Contains properties that don't change frequently and relate to vault functionality
+ */
+export type VaultManagerContext = VaultManagerState | null;
+/**
+ * Context for vault manager CVV-specific state
+ * Contains properties specifically related to CVV input functionality
+ * Further separated to minimize re-renders related to frequently changing CVV input state
+ */
+export type VaultItemContext = VaultManagerItemState | null;
+declare class SDKContextController implements ReactiveController {
+	host: PrimerCheckoutType;
+	private sdkStateProvider;
+	private paymentMethodsProvider;
+	private paymentManagerProvider;
+	private cardNetworksContext;
+	private vaultManagerProvider;
+	private vaultManagerCvvProvider;
+	private clientOptionsContext;
+	private headlessUtilsProvider;
+	private klarnaCategoriesProvider;
+	private computedStylesProvider;
+	constructor(host: PrimerCheckoutType);
+	hostConnected(): void;
+	/**
+	 * Updates the SDK state context.
+	 * @param value The new SDK state.
+	 */
+	setSdkState(value: SdkStateContext): void;
+	/**
+	 * Updates the payment methods context.
+	 * @param value The new payment methods data.
+	 */
+	setPaymentMethods(value: InitializedPayments): void;
+	/**
+	 * Updates the payment manager context.
+	 * @param value The new payment manager mapping.
+	 */
+	setPaymentManagers(value: InitializedManagersMap): void;
+	setCardNetworks(value: CardNetworksContext): void;
+	setVaultManager(value: VaultManagerContext): void;
+	setKlarnaCategories(value: KlarnaCategoriesContext): void;
+	setClientOptions(value: PrimerCheckoutOptions | null): void;
+	setHeadlessUtils(value: HeadlessUnitilsContext): void;
+	setComputedStyles(value: CSSStyleDeclaration): void;
+	setVaultManagerCvv(value: VaultItemContext): void;
+}
+declare class SdkStateController implements ReactiveController {
+	host: PrimerCheckoutType;
+	private _state;
+	constructor(host: PrimerCheckoutType);
 	hostConnected(): void;
 	private reducer;
 	private dispatch;
 	startLoading(): void;
 	startProcessing(): void;
+	stopProcessing(): void;
 	completeProcessing(): void;
 	completeLoading(): void;
 	setError(error: Error): void;
 	setFailure(code: string, message: string, details?: Record<string, unknown>): void;
 	reset(): void;
-	get state(): SdkStateContext;
+	get state(): SdkState;
 }
 export interface PrimerCheckoutType extends ReactiveControllerHost, LitElement {
 	requestUpdate: ReactiveControllerHost["requestUpdate"];
@@ -2203,31 +2538,29 @@ export interface PrimerCheckoutType extends ReactiveControllerHost, LitElement {
 	sdkContextController: SDKContextController;
 	sdkStateController: SdkStateController;
 	primerEventsController: PrimerEventsController;
+	vaultManagerController: VaultManagerController;
+	cardNetworkController: CardNetworkController;
 }
-declare class SDKContextController implements ReactiveController {
-	host: PrimerCheckoutType;
-	private sdkStateProvider;
-	private paymentMethodsProvider;
-	private paymentManagerProvider;
-	private cardNetworksContext;
+declare class CardNetworkController implements ReactiveController {
+	private host;
 	constructor(host: PrimerCheckoutType);
 	hostConnected(): void;
 	/**
-	 * Updates the SDK state context.
-	 * @param value The new SDK state.
+	 * Sets the card networks to loading state
 	 */
-	setSdkState(value: SdkStateContext): void;
+	setCardNetworksLoading(): void;
 	/**
-	 * Updates the payment methods context.
-	 * @param value The new payment methods data.
+	 * Updates card networks state and dispatches events
+	 *
+	 * @param cardNetworks - The new card networks context
 	 */
-	setPaymentMethods(value: PaymentsObject): void;
+	private updateCardNetworksState;
 	/**
-	 * Updates the payment manager context.
-	 * @param value The new payment manager mapping.
+	 * Processes a card network change event
+	 *
+	 * @param event - The card network change event
 	 */
-	setPaymentManagers(value: InitializedManagersMap): void;
-	setCardNetworks(value: CardNetworksContext): void;
+	processCardNetworkChangeEvent(event: CardNetworkChangeEvent): Promise<void>;
 }
 declare class StyleProcessingController implements ReactiveController {
 	host: ReactiveControllerHost & LitElement;
@@ -2335,12 +2668,20 @@ declare const targetLocales = [
 ] as const;
 export type LocaleCode = typeof sourceLocale | (typeof targetLocales)[number];
 declare class PrimerCheckoutComponent extends LitElement implements PrimerCheckoutType {
+	set jsInitialized(value: boolean);
+	get jsInitialized(): boolean;
 	static styles: CSSResult[];
 	customStyles: string;
 	clientToken: string;
 	options: PrimerCheckoutOptions;
-	disableLoader: boolean;
+	/**
+	 * Whether the component has completed initialization and loading
+	 * This is used to control the CSS-only loader visibility
+	 * @private
+	 */
+	private _jsInitialized;
 	defaultSlot: HTMLSlotElement;
+	private previousLoadingState;
 	private hasAssignedContent;
 	locale?: LocaleCode;
 	private onSlotChange;
@@ -2348,9 +2689,17 @@ declare class PrimerCheckoutComponent extends LitElement implements PrimerChecko
 	sdkStateController: SdkStateController;
 	primerEventsController: PrimerEventsController;
 	styleProcessingController: StyleProcessingController;
+	vaultManagerController: VaultManagerController;
+	cardNetworkController: CardNetworkController;
 	constructor();
 	attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
 	willUpdate(changedProperties: PropertyValues): void;
+	updated(): void;
+	/**
+	 * Check if the loading state has changed and update the CSS loader visibility accordingly.
+	 * This method is called after each update cycle to detect when loading is complete.
+	 */
+	private checkLoadingStateChange;
 	render(): TemplateResult;
 	addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
 	addEventListener<K extends keyof ShadowRootEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: ShadowRootEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
@@ -2430,11 +2779,43 @@ declare global {
 		"primer-input-label": InputLabelComponent;
 	}
 }
+/**
+ * Simplified selection state for buttons
+ */
+export type ButtonSelectionState = "default" | "checked";
 declare class ButtonComponent extends LitElement {
 	static styles: CSSResult[];
 	variant: "primary" | "secondary" | "tertiary";
 	disabled: boolean;
+	/**
+	 * Loading state of the button
+	 * When true, the button will display a spinner and be disabled
+	 */
+	loading: boolean;
 	buttonType: "button" | "submit" | "reset";
+	/**
+	 * Selection state of the button
+	 * - default: Not checked
+	 * - checked: Button is checked
+	 */
+	selectionState: ButtonSelectionState;
+	/**
+	 * Indicates if this button is selectable/checkable
+	 */
+	selectable: boolean;
+	/**
+	 * Event handler for button click
+	 * If selectable, it will toggle between checked and default states
+	 */
+	private handleClick;
+	/**
+	 * Renders the checkmark icon when checked
+	 */
+	private renderCheckmark;
+	/**
+	 * Renders the spinner when in loading state
+	 */
+	private renderSpinner;
 	render(): TemplateResult<1>;
 }
 declare global {
@@ -2464,7 +2845,7 @@ declare const icons: Record<string, SVGTemplateResult>;
 declare class PrimerIconComponent extends LitElement {
 	static styles: CSSResult[];
 	color: string;
-	size: "lg" | "sm";
+	size: "lg" | "md" | "sm";
 	/** The name of the icon to draw - available names can be found under library.ts file */
 	name?: IconName;
 	render(): TemplateResult<1>;
@@ -2588,11 +2969,130 @@ declare global {
 		"primer-input": InputComponent;
 	}
 }
+/**
+ * Button variant types
+ */
+export type ButtonVariant = "primary" | "secondary" | "tertiary";
+declare class CollapsableComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * The header text for the collapsable
+	 */
+	header: string;
+	/**
+	 * Whether the collapsable is expanded by default
+	 */
+	expanded: boolean;
+	/**
+	 * Text for expand button (for accessibility)
+	 */
+	expandText: string;
+	/**
+	 * Text for collapse button (for accessibility)
+	 */
+	collapseText: string;
+	/**
+	 * ARIA label for the collapsable header
+	 */
+	ariaLabel: string;
+	/**
+	 * The button variant to use
+	 */
+	buttonVariant: ButtonVariant;
+	/**
+	 * Internal state to track expanded state
+	 */
+	private isExpanded;
+	/**
+	 * Hook into the component lifecycle to set the initial expanded state
+	 */
+	connectedCallback(): void;
+	/**
+	 * Dispatch the expanded-changed event
+	 */
+	private dispatchExpandedChangedEvent;
+	/**
+	 * Toggle the expanded state
+	 */
+	private toggleExpanded;
+	/**
+	 * Expand the collapsable programmatically
+	 */
+	expand(): void;
+	/**
+	 * Collapse the collapsable programmatically
+	 */
+	collapse(): void;
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-collapsable": CollapsableComponent;
+	}
+}
+declare class ErrorMessageComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * The error message text to display
+	 */
+	message: string;
+	/**
+	 * Whether the error message is visible
+	 */
+	visible: boolean;
+	/**
+	 * Accessibility role for the error message
+	 * Defaults to "alert" for proper screen reader announcements
+	 */
+	role: string;
+	/**
+	 * Internal state to track animation state
+	 * This helps manage proper animations with DOM presence/absence
+	 */
+	private showMessage;
+	protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+	/**
+	 * Handle visibility changes with proper animation timing
+	 */
+	private handleVisibilityChange;
+	render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-error-message": ErrorMessageComponent;
+	}
+}
+declare class PrimerKlarnaComponent extends LitElement {
+	static styles: CSSResult[];
+	paymentManagers: InitializedManagersMap;
+	sdkState: SdkStateContext;
+	headlessUtils: HeadlessUnitilsContext;
+	klarnaCategories: KlarnaCategoriesContext | null;
+	private selectedCategory;
+	private isExpanded;
+	private headerAriaLabel;
+	private klarnaContainer;
+	private _paymentMethodManagerTask;
+	toggleExpand(): void;
+	startKlarnaPayment(): Promise<void>;
+	renderSelectedCategory(): Promise<void>;
+	selectCategory(category: string): void;
+	updated(changedProperties: Map<string, unknown>): void;
+	renderCategorySelection(): typeof nothing | TemplateResult<1>;
+	renderExpandedContent(): TemplateResult<1>;
+	render(): typeof nothing | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-klarna": PrimerKlarnaComponent;
+	}
+}
+export type PaymentMethodsContext = InitializedPayments | null;
 declare class PaymentMethodComponent extends LitElement {
 	static styles: CSSResult[];
 	type: PaymentMethodType | undefined;
-	paymentMethods: PaymentsObject | null;
-	render(): TemplateResult<1> | typeof nothing;
+	paymentMethods: PaymentMethodsContext;
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
@@ -2603,8 +3103,11 @@ declare class RedirectPaymentComponent extends LitElement {
 	static styles: CSSResult[];
 	paymentMethod: InitializedPaymentMethod | undefined;
 	paymentManagers: InitializedManagersMap;
-	sdkState: SdkStateContext | undefined;
+	sdkState: SdkStateContext;
+	headlessUtils: HeadlessUnitilsContext;
 	private _paymentMethodManagerTask;
+	private _getAssetsTask;
+	private _setupTasks;
 	startRedirectPayment(): void;
 	render(): symbol | TemplateResult<1> | undefined;
 }
@@ -2621,8 +3124,8 @@ declare class PrimerMainComponent extends LitElement {
 	 * Uses assignedNodes with flatten to detect if the slot has any nodes.
 	 */
 	private onSlotChange;
-	paymentMethods: PaymentsObject | null;
-	sdkState: SdkStateContext | undefined;
+	paymentMethods: PaymentMethodsContext;
+	sdkState: SdkStateContext;
 	render(): TemplateResult<1>;
 }
 declare global {
@@ -2634,6 +3137,7 @@ declare class NativePaymentComponent extends LitElement {
 	static styles: CSSResult[];
 	paymentMethod: InitializedPaymentMethod | undefined;
 	paymentManagers: InitializedManagersMap;
+	computedStyles: CSSStyleDeclaration | null;
 	private _buttonId;
 	private loadManagerTask;
 	constructor();
@@ -2707,7 +3211,7 @@ declare class CardFormComponent extends LitElement {
 	 * Handles both native form submissions and custom events
 	 */
 	private handleFormSubmit;
-	render(): TemplateResult<1> | typeof nothing;
+	render(): typeof nothing | TemplateResult<1>;
 }
 export interface CardFormContext {
 	cardNumberInput: IHeadlessHostedInput;
@@ -2725,6 +3229,7 @@ export interface CardFormContext {
  */
 export interface HostedInputHost extends ReactiveControllerHost, LitElement {
 	cardFormContext: CardFormContext | null;
+	computedStyles: CSSStyleDeclaration | null;
 	/** A string for the input placeholder. */
 	placeholder: string;
 	/** An accessible label for the input. */
@@ -2912,6 +3417,7 @@ export interface HostedInputConfig {
 export type InputSource = IHeadlessHostedInput | "cardholderName" | undefined;
 declare class HostedInputController<T extends HostedInputHost> implements ReactiveController {
 	private _isFocused;
+	private _meta;
 	private _hostedInput;
 	private _standardInput;
 	private readonly host;
@@ -2956,6 +3462,8 @@ declare class HostedInputController<T extends HostedInputHost> implements Reacti
 	private setupHostedIframeInput;
 	/** Exposes the current focus state. */
 	get isFocused(): boolean;
+	/** Exposes the current metadata state. */
+	get meta(): InputMetadata;
 	hostConnected(): void;
 	hostDisconnected(): void;
 }
@@ -2987,6 +3495,7 @@ export interface InputComponentConfig {
 }
 declare abstract class AbstractCardInputComponent extends LitElement implements HostedInputHost {
 	cardFormContext: CardFormContext | null;
+	computedStyles: CSSStyleDeclaration | null;
 	/** Tracks which properties were explicitly set by the user */
 	protected readonly _userAssignedProps: Set<string>;
 	/** Internal storage for property values */
@@ -3031,10 +3540,19 @@ declare abstract class AbstractCardInputComponent extends LitElement implements
 	 * This is still needed for hosted iframe inputs
 	 */
 	private handleWrapperClick;
+	/**
+	 * Get the error code from the hosted input controller when the input is submitted or touched
+	 *
+	 * Can be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`
+	 * uses the same logic to compute the error code
+	 *
+	 * @returns {string|null}
+	 */
+	getError(): string | null;
 	/**
 	 * Common rendering logic for all card input components
 	 */
-	protected renderInput(): TemplateResult<1> | typeof nothing;
+	protected renderInput(): typeof nothing | TemplateResult<1>;
 }
 declare class InputCardNumberComponent extends AbstractCardInputComponent {
 	static styles: CSSResult[];
@@ -3050,8 +3568,8 @@ declare class InputCardNumberComponent extends AbstractCardInputComponent {
 	/**
 	 * Override the renderInput method to include the network selector
 	 */
-	protected renderInput(): TemplateResult<1> | typeof nothing;
-	render(): TemplateResult<1> | typeof nothing;
+	protected renderInput(): typeof nothing | TemplateResult<1>;
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
@@ -3062,7 +3580,7 @@ declare class InputCvvComponent extends AbstractCardInputComponent {
 	static styles: CSSResult[];
 	protected readonly config: InputComponentConfig;
 	constructor();
-	render(): TemplateResult<1> | typeof nothing;
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
@@ -3073,7 +3591,7 @@ declare class InputCardExpiryComponent extends AbstractCardInputComponent {
 	static styles: CSSResult[];
 	protected readonly config: InputComponentConfig;
 	constructor();
-	render(): TemplateResult<1> | typeof nothing;
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
@@ -3085,13 +3603,14 @@ declare class InputCardHolderNameComponent extends AbstractCardInputComponent {
 	protected readonly config: InputComponentConfig;
 	constructor();
 	private handleInput;
-	render(): TemplateResult<1> | typeof nothing;
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
 		"primer-input-card-holder-name": InputCardHolderNameComponent;
 	}
 }
+export type ClientOptionsContext = PrimerCheckoutOptions | null;
 declare class CardFormSubmitComponent extends LitElement {
 	static styles: CSSResult[];
 	private readonly _userAssignedProps;
@@ -3102,6 +3621,9 @@ declare class CardFormSubmitComponent extends LitElement {
 	 */
 	get buttonText(): string;
 	set buttonText(value: string);
+	headlessInstance: HeadlessUnitilsContext;
+	clientOptions: ClientOptionsContext;
+	sdkState: SdkStateContext;
 	/**
 	 * The button variant to use.
 	 * @default "primary"
@@ -3125,7 +3647,8 @@ declare class CardNetworkSelectorComponent extends LitElement {
 	/**
 	 * Card networks context from provider
 	 */
-	cardNetworks: CardNetworksContext | null;
+	cardNetworks: CardNetworksContext;
+	headlessUtils: HeadlessUnitilsContext;
 	private selectedCardNetwork;
 	/**
 	 * Internal state to track if dropdown is open
@@ -3155,6 +3678,7 @@ declare class CardNetworkSelectorComponent extends LitElement {
 	 * Toggle the dropdown state
 	 */
 	private toggleDropdown;
+	private getNetworkIconUrl;
 	/**
 	 * Get selectable networks from context
 	 */
@@ -3192,11 +3716,17 @@ declare class CardNetworkSelectorComponent extends LitElement {
 	 */
 	private setNetworkOptionRef;
 	/**
-	 * Lifecycle: Add document event listener when connected
+	 * Attach event listener to the component for keydown events
+	 * and to document for click outside and mousemove
 	 */
 	connectedCallback(): void;
 	/**
-	 * Lifecycle: Remove document event listener when disconnected
+	 * Handle document-level keydown events, but only when dropdown is open
+	 * This allows keyboard navigation to continue working
+	 */
+	private handleDocumentKeyDown;
+	/**
+	 * Lifecycle: Remove all event listeners when disconnected
 	 */
 	disconnectedCallback(): void;
 	render(): TemplateResult<1>;
@@ -3211,6 +3741,358 @@ declare global {
 		"primer-card-form": CardFormComponent;
 	}
 }
+/**
+ * Events emitted by the vault manager components
+ */
+export interface VaultManagerEvents {
+	deletePaymentMethod: CustomEvent<string>;
+	cancelDelete: CustomEvent<void>;
+	confirmDelete: CustomEvent<void>;
+	toggleEditMode: CustomEvent<boolean>;
+	closeError: CustomEvent<void>;
+	vaultPaymentError: CustomEvent<{
+		error: Error | unknown;
+	}>;
+}
+/**
+ * Declare the event map for strict typing of events
+ */
+export interface VaultManagerEventMap {
+	"delete-payment-method": VaultManagerEvents["deletePaymentMethod"];
+	"cancel-delete": VaultManagerEvents["cancelDelete"];
+	"confirm-delete": VaultManagerEvents["confirmDelete"];
+	"toggle-edit-mode": VaultManagerEvents["toggleEditMode"];
+	"close-error": VaultManagerEvents["closeError"];
+	"primer-vault-payment-error": VaultManagerEvents["vaultPaymentError"];
+}
+declare class VaultManagerComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Strongly typed event declarations
+	 */
+	addEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	/**
+	 * The vault manager core context from the SDK
+	 * Contains vault-related functionality and state
+	 */
+	vaultManagerContext: VaultManagerContext;
+	/**
+	 * Whether we're in edit mode
+	 */
+	private isEditMode;
+	/**
+	 * Payment method being deleted
+	 */
+	private deletePaymentMethodId;
+	/**
+	 * Whether a delete operation is in progress
+	 */
+	private isDeleting;
+	/**
+	 * Error message if something goes wrong
+	 */
+	private errorMessage;
+	/**
+	 * Toggle edit mode handler
+	 */
+	private handleToggleEditMode;
+	/**
+	 * Handle delete click from payment method item
+	 */
+	private handleDeletePaymentMethod;
+	/**
+	 * Cancel delete operation
+	 */
+	private handleCancelDelete;
+	/**
+	 * Confirm and process payment method deletion
+	 */
+	private handleConfirmDelete;
+	/**
+	 * Handle payment error events
+	 */
+	private handlePaymentError;
+	/**
+	 * Handle closing error message
+	 */
+	private handleCloseError;
+	/**
+	 * Get payment method display name for the given ID
+	 */
+	private getPaymentMethodName;
+	/**
+	 * Render the delete confirmation for the current payment method
+	 */
+	private renderDeleteConfirmation;
+	/**
+	 * Render a payment method item
+	 */
+	private renderPaymentMethodItem;
+	render(): typeof nothing | TemplateResult<1>;
+}
+declare class VaultPaymentMethodItemComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Strongly typed event declarations
+	 */
+	addEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	/**
+	 * Consume the vault manager context
+	 */
+	vaultManagerContext: VaultManagerContext;
+	vaultItemContext: VaultItemContext;
+	headlessUtils: HeadlessUnitilsContext;
+	/**
+	 * The payment method to display
+	 */
+	paymentMethod: VaultedPaymentMethod | null;
+	/**
+	 * Whether the component is in edit mode
+	 */
+	isEditMode: boolean;
+	private _getAssetsTask;
+	/**
+	 * Check if this payment method is currently selected in the context
+	 */
+	private isSelected;
+	/**
+	 * Handle when the button is clicked
+	 * This is used to select the payment method and deselect others
+	 */
+	private handleClick;
+	/**
+	 * Dispatch delete event
+	 */
+	private handleDeleteClick;
+	/**
+	 * Builds the common content template shared between modes
+	 */
+	private renderPaymentMethodContent;
+	/**
+	 * Render method
+	 */
+	render(): symbol | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-payment-method-item": VaultPaymentMethodItemComponent;
+	}
+}
+declare class VaultManagerHeaderComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Strongly typed event declarations
+	 */
+	addEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	/**
+	 * Whether we're in edit mode
+	 */
+	isEditMode: boolean;
+	/**
+	 * Whether we have payment methods to edit
+	 */
+	hasPaymentMethods: boolean;
+	/**
+	 * Toggle edit mode
+	 */
+	private toggleEditMode;
+	/**
+	 * Render method
+	 */
+	protected render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-manager-header": VaultManagerHeaderComponent;
+	}
+}
+declare class VaultDeleteConfirmationComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Strongly typed event declarations
+	 */
+	addEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	/**
+	 * Whether a delete operation is in progress
+	 */
+	isDeleting: boolean;
+	/**
+	 * The ID of the payment method being deleted
+	 */
+	paymentMethodId: string;
+	/**
+	 * Payment method name to display in confirmation
+	 */
+	paymentMethodName: string;
+	/**
+	 * Consume the vault manager context to access payment method info
+	 */
+	vaultManager: VaultManagerContext;
+	/**
+	 * Handle confirm click
+	 */
+	private handleConfirmClick;
+	/**
+	 * Handle cancel click
+	 */
+	private handleCancelClick;
+	/**
+	 * Render method
+	 */
+	protected render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-delete-confirmation": VaultDeleteConfirmationComponent;
+	}
+}
+declare class VaultEmptyStateComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Render method
+	 */
+	protected render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-empty-state": VaultEmptyStateComponent;
+	}
+}
+declare class VaultErrorMessageComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Strongly typed event declarations
+	 */
+	addEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+	/**
+	 * The error message to display
+	 */
+	errorMessage: string;
+	/**
+	 * Handle dismiss click
+	 */
+	private handleDismiss;
+	/**
+	 * Render method
+	 */
+	protected render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-error-message": VaultErrorMessageComponent;
+	}
+}
+declare class VaultPaymentSubmitComponent extends LitElement {
+	static styles: CSSResult[];
+	private readonly _userAssignedProps;
+	private _internalButtonText;
+	/**
+	 * The button text to display.
+	 * Falls back to localized default if not explicitly set.
+	 */
+	get buttonText(): string;
+	set buttonText(value: string);
+	headlessInstance: HeadlessUnitilsContext;
+	sdkState: SdkStateContext;
+	vaultItemContext: VaultItemContext;
+	vaultManager: VaultManagerContext;
+	clientOptions: PrimerCheckoutOptions | null;
+	/**
+	 * The button variant to use.
+	 * @default "primary"
+	 */
+	variant: string;
+	/**
+	 * Whether the button is disabled.
+	 * This property allows external disabling of the button
+	 * regardless of the context state.
+	 * @default false
+	 */
+	disabled: boolean;
+	/**
+	 * Handle button click event.
+	 * Prevents default form submission and triggers the vault payment flow.
+	 */
+	private handleClick;
+	/**
+	 * Computed property to determine if the button should be disabled
+	 */
+	private get isButtonDisabled();
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-payment-submit": VaultPaymentSubmitComponent;
+	}
+}
+declare class VaultCvvInputComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Form context for checking form dirty state
+	 */
+	vaultManagerFormContext: VaultManagerContext;
+	/**
+	 * CVV-specific context for dedicated CVV handling
+	 * Separated to minimize re-renders on frequent CVV input changes
+	 */
+	vaultManagerCvvContext: VaultItemContext;
+	computedStyles: CSSStyleDeclaration | null;
+	paymentMethod: PaymentCardVaultedMethod | null;
+	private cvvError;
+	private cvvInputIsDirty;
+	private cvvInputIsBlurred;
+	private cvvInput;
+	/**
+	 * Unique ID for the CVV input container
+	 */
+	private readonly cvvContainerId;
+	private _setupCVVIframe;
+	constructor();
+	disconnectedCallback(): void;
+	/**
+	 * Update CVV metadata in the context when input changes
+	 */
+	onCvvInputChange(): void;
+	onBlur(): void;
+	/**
+	 * Main render method
+	 */
+	protected render(): symbol | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-cvv-input": VaultCvvInputComponent;
+	}
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-manager": VaultManagerComponent;
+	}
+}
+declare class ShowOtherPaymentsComponent extends LitElement {
+	static styles: CSSResult[];
+	private isShowingOtherPayments;
+	/**
+	 * Consume the vault manager context to interact with vault state
+	 */
+	vaultManager: VaultManagerContext;
+	/**
+	 * Handle expanded state change events from the collapsable component
+	 * Syncs the collapsable UI state with the vault manager state
+	 */
+	private handleExpandedChanged;
+	render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-show-other-payments": ShowOtherPaymentsComponent;
+	}
+}
 declare class PrimerCheckoutCompleteComponent extends LitElement {
 	render(): TemplateResult<1>;
 }
@@ -3219,19 +4101,35 @@ declare global {
 		"primer-checkout-complete": PrimerCheckoutCompleteComponent;
 	}
 }
-export interface HeadlessSDKState {
-	isProcessing: boolean;
-	isSuccessful: boolean;
-	isFailure: boolean;
-	error?: Error | undefined;
-}
-declare class PrimerCheckoutFailureComponent extends LitElement {
-	sdkState: HeadlessSDKState | undefined;
+declare class PrimerCheckoutErrorComponent extends LitElement {
+	sdkState: SdkStateContext;
 	render(): TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-checkout-failure": PrimerCheckoutFailureComponent;
+		"primer-checkout-error": PrimerCheckoutErrorComponent;
+	}
+}
+declare class ErrorMessageContainerComponent extends LitElement {
+	static styles: CSSResult[];
+	/**
+	 * Consume the SDK state context
+	 * This automatically subscribes to changes in the SDK state
+	 */
+	protected sdkState?: SdkStateContext;
+	showProcessingErrors: boolean;
+	/**
+	 * Determine if an error should be shown
+	 * Takes into account the current SDK state and component configuration
+	 *
+	 * @returns Boolean indicating whether an error should be shown
+	 */
+	private get shouldShowError();
+	render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-error-message-container": ErrorMessageContainerComponent;
 	}
 }
 declare global {
@@ -3239,11 +4137,5 @@ declare global {
 		"primer-checkout": PrimerCheckoutComponent;
 	}
 }
-type PaymentsObject$1 = PaymentsObject;
-export declare function loadPrimer(): Promise<void>;
-
-export {
-	PaymentsObject$1 as PaymentsObject,
-};
 
 export {};