@primer-io/primer-js 0.1.2 → 0.1.4

package/dist/jsx/index.d.ts

@@ -88,6 +88,8 @@ This is used to control the CSS-only loader visibility */
   vaultManagerController?: VaultManagerController;
   /**  */
   cardNetworkController?: CardNetworkController;
+  /**  */
+  achPaymentEventsController?: AchPaymentEventsController;
 };
 
 export type ButtonComponentProps = {
@@ -136,6 +138,11 @@ export type CollapsableComponentProps = {
   "onexpanded-changed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type DialogComponentProps = {
+  /**  */
+  "onprimer-dialog-close"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type ErrorMessageComponentProps = {
   /** The error message text to display */
   message?: string;
@@ -226,6 +233,13 @@ export type InputWrapperComponentProps = {
   "onwrapper-click"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type PortalComponentProps = {
+  /**  */
+  id?: string;
+  /**  */
+  oneventName?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type SpinnerComponentProps = {
   /** Color of the spinner
 Defaults to the design system loader color */
@@ -238,11 +252,45 @@ Useful when embedding in inputs */
   compact?: boolean;
 };
 
+export type AchPaymentComponentProps = {
+  /**  */
+  paymentMethod?: InitializedPaymentMethod | undefined;
+  /**  */
+  paymentManagers?: InitializedManagersMap;
+  /**  */
+  sdkState?: SdkStateContext | undefined;
+  /**  */
+  clientOptions?: ClientOptionsContext | undefined;
+  /**  */
+  screen?: "form" | "mandate";
+  /**  */
+  "onprimer-ach-error"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onprimer-ach-bank-details-collected"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onprimer-ach-mandate-confirmed"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onprimer-ach-mandate-declined"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type CardFormComponentProps = {
   /** Payment managers injected from context */
   paymentManagers?: InitializedManagersMap;
 };
 
+export type DynamicPaymentComponentProps = {
+  /**  */
+  paymentMethod?: InitializedPaymentMethod | undefined;
+  /**  */
+  paymentManagers?: InitializedManagersMap;
+  /**  */
+  sdkState?: SdkStateContext;
+  /**  */
+  headlessUtils?: HeadlessUnitilsContext;
+  /**  */
+  open?: boolean;
+};
+
 export type ErrorMessageContainerComponentProps = {
   /**  */
   "show-processing-errors"?: boolean;
@@ -592,6 +640,16 @@ export type CustomElements = {
    */
   "primer-collapsable": Partial<CollapsableComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **primer-dialog-close**
+   */
+  "primer-dialog": Partial<DialogComponentProps & BaseProps & BaseEvents>;
+
   /**
    * A reusable atomic error message component that displays error information
    * with appropriate styling and accessibility attributes.
@@ -680,6 +738,16 @@ export type CustomElements = {
    */
   "primer-input-wrapper": Partial<InputWrapperComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **eventName**
+   */
+  "primer-portal": Partial<PortalComponentProps & BaseProps & BaseEvents>;
+
   /**
    * Spinner component with configurable size and color
    * Adapted to work both standalone and within input components
@@ -688,6 +756,19 @@ export type CustomElements = {
    */
   "primer-spinner": Partial<SpinnerComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **primer-ach-error**
+   * - **primer-ach-bank-details-collected**
+   * - **primer-ach-mandate-confirmed**
+   * - **primer-ach-mandate-declined**
+   */
+  "primer-ach-payment": Partial<AchPaymentComponentProps & BaseProps & BaseEvents>;
+
   /**
    * CardFormComponent serves as a container for card input components.
    * It handles form submission, validation, and provides context to child components.
@@ -696,6 +777,13 @@ export type CustomElements = {
    */
   "primer-card-form": Partial<CardFormComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "primer-dynamic-payment": Partial<DynamicPaymentComponentProps & BaseProps & BaseEvents>;
+
   /**
    * A container component that connects to the SDK state context
    * and displays appropriate error messages based on error state.

package/dist/primer-loader.d.ts

@@ -1727,6 +1727,7 @@ export type ResumeToken = {
 	paymentId?: string;
 };
 export interface InputValidationError {
+	field?: string;
 	name: string;
 	error: string;
 	message: string;
@@ -2096,6 +2097,7 @@ export interface IKlarnaPaymentMethodManager {
 }
 export interface IAchPaymentMethodManager {
 	start(paymentDetails: StripeAchCustomerDetails): Promise<Validation | void>;
+	setAndValidate(paymentDetails: StripeAchCustomerDetails): Promise<Validation>;
 	collectBankAccountDetails(): Promise<void>;
 	confirmMandate(): Promise<void>;
 	declineMandate(): Promise<void>;
@@ -2243,6 +2245,7 @@ export type PrimerCheckoutOptions = JSONSafe<HeadlessUniversalCheckoutOptions> &
 	submitButton?: {
 		amountVisible?: boolean;
 	};
+	stripe?: UniversalCheckoutOptions["stripe"];
 };
 declare global {
 	interface Window {
@@ -2272,6 +2275,7 @@ export interface InitializedManagersMap extends Map<PaymentMethodType, Initializ
 	get<T extends PaymentMethodType>(key: T): ManagerByType<T> | undefined;
 }
 export type RedirectPaymentMethodTypes = Exclude<PaymentMethodType, typeof PaymentMethodType.STRIPE_ACH | typeof PaymentMethodType.PAYMENT_CARD | typeof PaymentMethodType.KLARNA | typeof PaymentMethodType.PAYPAL | typeof PaymentMethodType.GOOGLE_PAY | typeof PaymentMethodType.APPLE_PAY>;
+export type DynamicPaymentMethodTypes = typeof PaymentMethodType.STRIPE_ACH;
 export type NativePaymentMethodTypes = typeof PaymentMethodType.PAYPAL | typeof PaymentMethodType.GOOGLE_PAY | typeof PaymentMethodType.APPLE_PAY;
 export type RedirectPaymentMethod = {
 	type: RedirectPaymentMethodTypes;
@@ -2302,6 +2306,11 @@ export type PaymentMethodByType<T extends PaymentMethodType> = Extract<Initializ
 export interface InitializedPaymentMethodMap extends Map<PaymentMethodType, InitializedPaymentMethod> {
 	get<T extends PaymentMethodType>(key: T): PaymentMethodByType<T> | undefined;
 }
+export interface AssetsConfig {
+	backgroundColor: string;
+	name: string;
+	iconUrl: string;
+}
 export declare class InitializedPayments {
 	private readonly _methods;
 	constructor(map: InitializedPaymentMethodMap);
@@ -2316,6 +2325,9 @@ export interface CardSubmitSuccessPayload {
 export interface CardSubmitErrorsPayload {
 	errors: unknown | InputValidationError[];
 }
+export interface PrimeAchErrorPayload {
+	error: Error;
+}
 export interface PrimerEvents {
 	"primer-state-changed": CustomEvent<SdkStateContext>;
 	"primer-payment-methods-updated": CustomEvent<InitializedPayments>;
@@ -2323,6 +2335,10 @@ export interface PrimerEvents {
 	"primer-card-network-change": CustomEvent<CardNetworksContext>;
 	"primer-card-submit-success": CustomEvent<CardSubmitSuccessPayload>;
 	"primer-card-submit-errors": CustomEvent<CardSubmitErrorsPayload>;
+	"primer-ach-error": CustomEvent<PrimeAchErrorPayload>;
+	"primer-ach-bank-details-collected": CustomEvent;
+	"primer-ach-mandate-confirmed": CustomEvent;
+	"primer-ach-mandate-declined": CustomEvent;
 }
 declare class PrimerEventsController implements ReactiveController {
 	host: ReactiveControllerHost & LitElement;
@@ -2497,6 +2513,7 @@ declare class SdkStateController implements ReactiveController {
 	setError(error: Error): void;
 	setFailure(code: string, message: string, details?: Record<string, unknown>): void;
 	reset(): void;
+	forceCompleteLoading(): void;
 	get state(): SdkState;
 }
 export interface PrimerCheckoutType extends ReactiveControllerHost, LitElement {
@@ -2636,6 +2653,15 @@ declare const targetLocales = [
 	`zh-TW`,
 ] as const;
 export type LocaleCode = typeof sourceLocale | (typeof targetLocales)[number];
+declare class AchPaymentEventsController implements ReactiveController {
+	host: PrimerCheckoutComponent;
+	constructor(host: PrimerCheckoutComponent);
+	private _error;
+	private _mandateConfirmed;
+	private _mandateDeclined;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
 /**
  * PrimerCheckoutComponent implements the main checkout experience.
  * This component includes a CSS-only loader that displays before the JavaScript
@@ -2661,6 +2687,7 @@ export declare class PrimerCheckoutComponent extends LitElement implements Prime
 	defaultSlot: HTMLSlotElement;
 	private previousLoadingState;
 	private hasAssignedContent;
+	private _loadingTimeoutId;
 	locale?: LocaleCode;
 	private onSlotChange;
 	sdkContextController: SDKContextController;
@@ -2669,8 +2696,10 @@ export declare class PrimerCheckoutComponent extends LitElement implements Prime
 	styleProcessingController: StyleProcessingController;
 	vaultManagerController: VaultManagerController;
 	cardNetworkController: CardNetworkController;
+	achPaymentEventsController: AchPaymentEventsController;
 	constructor();
 	attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
+	disconnectedCallback(): void;
 	willUpdate(changedProperties: PropertyValues): void;
 	updated(): void;
 	/**
@@ -2683,7 +2712,38 @@ export declare class PrimerCheckoutComponent extends LitElement implements Prime
 	addEventListener<K extends keyof ShadowRootEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: ShadowRootEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
 	addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
 	addEventListener<K extends keyof PrimerEvents>(type: K, listener: (this: PrimerCheckoutComponent, ev: PrimerEvents[K]) => void, options?: boolean | AddEventListenerOptions): void;
+	removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+	removeEventListener<K extends keyof ShadowRootEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: ShadowRootEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+	removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: DocumentEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+	removeEventListener<K extends keyof PrimerEvents>(type: K, listener: (this: PrimerCheckoutComponent, ev: PrimerEvents[K]) => void, options?: boolean | EventListenerOptions): void;
 }
+/**
+ * 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;
 /**
  * Size options for the spinner component
  */
@@ -3106,6 +3166,37 @@ declare global {
 		"primer-error-message": ErrorMessageComponent;
 	}
 }
+declare class PortalComponent extends LitElement {
+	static styles: CSSResult[];
+	id: string;
+	getContainer(): HTMLDivElement;
+	/**
+	 * Proxies the events sent from the portalled content and
+	 * re-dispatches them.
+	 *
+	 * TODO: find a better way to scale to new events instead
+	 * of hardcoding them one by one here.
+	 */
+	private _setupEventListeners;
+	disconnectedCallback(): void;
+	private _handleSlotChange;
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-portal": PortalComponent;
+	}
+}
+declare class DialogComponent extends LitElement {
+	static styles: CSSResult[];
+	private _handleCloseClick;
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-dialog": DialogComponent;
+	}
+}
 /**
  * This component renders Klarna payment method in a card-like (accordion) container with
  * payment categories options to choose from.
@@ -3152,6 +3243,88 @@ declare global {
 		"primer-payment-method": PaymentMethodComponent;
 	}
 }
+export type ClientOptionsContext = PrimerCheckoutOptions | null;
+export type AchField = "firstName" | "lastName" | "emailAddress";
+export interface AchFormState {
+	value: string;
+	error: string;
+	pristine: boolean;
+	touched: boolean;
+	dirty: boolean;
+	valid: boolean;
+}
+export type AchFormStateMap = Record<AchField, AchFormState>;
+export type ValidationFunction = (data: StripeAchCustomerDetails) => Promise<Validation>;
+declare class AchPaymentFormControler implements ReactiveController {
+	host: AchPaymentComponent;
+	validate: ValidationFunction;
+	formState: AchFormStateMap;
+	get hasError(): {
+		firstName: boolean;
+		lastName: boolean;
+		emailAddress: boolean;
+	};
+	get formData(): StripeAchCustomerDetails;
+	constructor(host: AchPaymentComponent, validate: ValidationFunction);
+	setFieldValue(field: AchField, value: string): Promise<void>;
+	setValidation(validation: Validation, submit?: boolean): void;
+	setFieldTouched(field: AchField): void;
+	resetForm(): void;
+	private isValidFieldName;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
+declare class AchPaymentComponent extends LitElement {
+	static styles: CSSResult[];
+	protected readonly formController: AchPaymentFormControler;
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	sdkState: SdkStateContext | undefined;
+	clientOptions: ClientOptionsContext | undefined;
+	screen: "form" | "mandate";
+	private isSubmitting;
+	private _paymentMethodManagerTask;
+	private _handleInput;
+	private _handleBlur;
+	private _handleError;
+	private _handleSubmitButtonClick;
+	private _handleCollectBankAccountDetails;
+	private _handleConfirmMandate;
+	private _handleDeclineMandate;
+	private renderForm;
+	private renderMandate;
+	render(): TemplateResult | typeof nothing | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-ach-payment": AchPaymentComponent;
+	}
+}
+declare class DynamicPaymentComponent extends LitElement {
+	static styles: CSSResult[];
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	sdkState: SdkStateContext;
+	headlessUtils: HeadlessUnitilsContext;
+	open: boolean;
+	private _paymentMethodManagerTask;
+	private _getAssetsTask;
+	/**
+	 * Based on packages/primer-sdk-web/src/payment-methods/Button.tsx
+	 * Should be replaced once we align on a better solution across all platforms.
+	 * TODO: get label from payment config
+	 */
+	private _legacyGetButtonLabel;
+	private _setupTasks;
+	start(): void;
+	renderDialog(): typeof nothing | TemplateResult<1>;
+	render(): symbol | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-dynamic-payment": DynamicPaymentComponent;
+	}
+}
 declare class RedirectPaymentComponent extends LitElement {
 	static styles: CSSResult[];
 	paymentMethod: InitializedPaymentMethod | undefined;
@@ -3674,7 +3847,6 @@ declare global {
 		"primer-input-card-holder-name": InputCardHolderNameComponent;
 	}
 }
-export type ClientOptionsContext = PrimerCheckoutOptions | null;
 /**
  * A form submit button component for card forms.
  * Provides a consistent submit button with translation support.
@@ -4249,33 +4421,6 @@ declare global {
 		"primer-error-message-container": ErrorMessageContainerComponent;
 	}
 }
-/**
- * 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
@@ -4288,11 +4433,14 @@ declare global {
 }
 
 export {
+	AchPaymentComponent as AchPayment,
 	ButtonComponent as Button,
 	CardFormComponent as CardForm,
 	CardFormSubmitComponent as CardFormSubmit,
 	CardNetworkSelectorComponent as CardFormCardNetworkSelector,
 	CollapsableComponent as Collapsable,
+	DialogComponent as Dialog,
+	DynamicPaymentComponent as DynamicPayment,
 	ErrorMessageComponent as ErrorMessage,
 	ErrorMessageContainerComponent as ErrorMessageContainer,
 	InputCardExpiryComponent as CardFormExpiry,
@@ -4305,6 +4453,7 @@ export {
 	InputWrapperComponent as InputWrapper,
 	NativePaymentComponent as NativePayment,
 	PaymentMethodComponent as PaymentMethod,
+	PortalComponent as Portal,
 	PrimerCheckoutCompleteComponent as PrimerCheckoutComplete,
 	PrimerCheckoutErrorComponent as PrimerCheckoutFailure,
 	PrimerCheckoutStateComponent as PrimerCheckoutState,