@primer-io/primer-js 0.3.11 → 0.3.12

package/dist/jsx/index.d.ts

@@ -333,17 +333,6 @@ export type PrimerKlarnaComponentProps = {
   toggleExpand?: string;
 };
 
-export type NativePaymentComponentProps = {
-  /**  */
-  paymentMethod?: InitializedPaymentMethod | undefined;
-  /**  */
-  paymentManagers?: InitializedManagersMap;
-  /**  */
-  computedStyles?: CSSStyleDeclaration | null;
-  /**  */
-  disabled?: boolean;
-};
-
 export type PaymentMethodComponentProps = {
   /**  */
   type?: PaymentMethodType | undefined;
@@ -539,6 +528,33 @@ Falls back to localized default if not explicitly set. */
   cardFormContext?: CardFormContext | null;
 };
 
+export type ApplePayComponentProps = {
+  /**  */
+  paymentMethod?: InitializedPaymentMethod | undefined;
+  /**  */
+  paymentManagers?: InitializedManagersMap;
+  /**  */
+  disabled?: boolean;
+};
+
+export type GooglePayComponentProps = {
+  /**  */
+  paymentMethod?: InitializedPaymentMethod | undefined;
+  /**  */
+  paymentManagers?: InitializedManagersMap;
+  /**  */
+  disabled?: boolean;
+};
+
+export type PayPalComponentProps = {
+  /**  */
+  paymentMethod?: InitializedPaymentMethod | undefined;
+  /**  */
+  paymentManagers?: InitializedManagersMap;
+  /**  */
+  disabled?: boolean;
+};
+
 export type PaymentMethodContentComponentProps = {
   /** The asset configuration containing icon and display data */
   assetConfig?: AssetConfig | null;
@@ -876,14 +892,6 @@ export type CustomElements = {
    */
   "primer-klarna": Partial<PrimerKlarnaComponentProps & BaseProps & BaseEvents>;
 
-  /**
-   * Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)
-   * with proper height calculations based on design system variables.
-   * ---
-   *
-   */
-  "primer-native-payment": Partial<NativePaymentComponentProps & BaseProps & BaseEvents>;
-
   /**
    *
    * ---
@@ -1035,6 +1043,45 @@ export type CustomElements = {
    */
   "primer-input-cvv": Partial<InputCvvComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   * Apple Pay component with standard button container rendering.
+   *
+   * Apple Pay uses the standard button container approach:
+   * - Renders to a button container div (not shadow root)
+   * - Passes buttonHeight in render options
+   * - Uses updateOverlayForContainer for disabled state
+   * - Simpler than Google Pay's shadow root approach
+   * ---
+   *
+   */
+  "primer-apple-pay": Partial<ApplePayComponentProps & BaseProps & BaseEvents>;
+
+  /**
+   * Google Pay component with shadow root rendering for full-width button support.
+   *
+   * Google Pay requires special rendering logic:
+   * - Renders directly to shadow root (not button container)
+   * - Does NOT render .native-button-container div
+   * - Passes shadowRoot: true in render options
+   * - Requires retry logic for async button rendering
+   * ---
+   *
+   */
+  "primer-google-pay": Partial<GooglePayComponentProps & BaseProps & BaseEvents>;
+
+  /**
+   * PayPal component with standard button container rendering.
+   *
+   * PayPal uses the standard button container approach:
+   * - Renders to a button container div (not shadow root)
+   * - Passes buttonHeight in render options with PayPal SDK constraints (25-55px)
+   * - Uses updateOverlayForContainer for disabled state
+   * - Warns if height exceeds maximum allowed by PayPal SDK
+   * ---
+   *
+   */
+  "primer-paypal": Partial<PayPalComponentProps & BaseProps & BaseEvents>;
+
   /**
    * PaymentMethodContentComponent - renders payment method information with icon and details
    * This component encapsulates the display logic and styles for payment method content

package/dist/primer-loader.d.ts

@@ -2191,6 +2191,86 @@ declare global {
 	}
 }
 export type PaymentMethodsContextType = InitializedPayments | null;
+/**
+ * Google Pay component with shadow root rendering for full-width button support.
+ *
+ * Google Pay requires special rendering logic:
+ * - Renders directly to shadow root (not button container)
+ * - Does NOT render .native-button-container div
+ * - Passes shadowRoot: true in render options
+ * - Requires retry logic for async button rendering
+ */
+declare class GooglePayComponent extends LitElement {
+	static styles: import("lit").CSSResult[];
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	disabled: boolean;
+	private loadManagerTask;
+	private renderButtonTask;
+	constructor();
+	attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+	protected updated(changedProperties: PropertyValues): void;
+	render(): symbol;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-google-pay": GooglePayComponent;
+	}
+}
+/**
+ * Apple Pay component with standard button container rendering.
+ *
+ * Apple Pay uses the standard button container approach:
+ * - Renders to a button container div (not shadow root)
+ * - Passes buttonHeight in render options
+ * - Uses updateOverlayForContainer for disabled state
+ * - Simpler than Google Pay's shadow root approach
+ */
+declare class ApplePayComponent extends LitElement {
+	static styles: import("lit").CSSResult[];
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	disabled: boolean;
+	private buttonContainerRef;
+	private loadManagerTask;
+	private renderButtonTask;
+	constructor();
+	attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+	protected updated(changedProperties: PropertyValues): void;
+	render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-apple-pay": ApplePayComponent;
+	}
+}
+/**
+ * PayPal component with standard button container rendering.
+ *
+ * PayPal uses the standard button container approach:
+ * - Renders to a button container div (not shadow root)
+ * - Passes buttonHeight in render options with PayPal SDK constraints (25-55px)
+ * - Uses updateOverlayForContainer for disabled state
+ * - Warns if height exceeds maximum allowed by PayPal SDK
+ */
+declare class PayPalComponent extends LitElement {
+	static styles: import("lit").CSSResult[];
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	disabled: boolean;
+	private buttonContainerRef;
+	private loadManagerTask;
+	private renderButtonTask;
+	constructor();
+	attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+	protected updated(changedProperties: PropertyValues): void;
+	render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-paypal": PayPalComponent;
+	}
+}
 declare class PaymentMethodComponent extends LitElement {
 	static styles: import("lit").CSSResult[];
 	type: PaymentMethodType | undefined;
@@ -3435,45 +3515,6 @@ declare global {
 		"primer-show-other-payments": ShowOtherPaymentsComponent;
 	}
 }
-/**
- * Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)
- * with proper height calculations based on design system variables.
- */
-declare class NativePaymentComponent extends LitElement {
-	static styles: import("lit").CSSResult[];
-	paymentMethod: InitializedPaymentMethod | undefined;
-	paymentManagers: InitializedManagersMap;
-	computedStyles: CSSStyleDeclaration | null;
-	disabled: boolean;
-	private _buttonId;
-	private loadManagerTask;
-	private nativeButtonTask;
-	constructor();
-	attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-	/**
-	 * Calculates the button height by reading the computed height from the element.
-	 * The CSS already calculates the correct height using CSS variables,
-	 * so we just read the browser's computed value (which handles rem/em/% conversions).
-	 */
-	private calculateButtonHeight;
-	/**
-	 * Creates render options with appropriate styles based on payment method type
-	 */
-	private createRenderOptions;
-	protected updated(changedProperties: PropertyValues): void;
-	/**
-	 * Updates the disabled overlay based on the current disabled state
-	 */
-	private updateDisabledOverlay;
-	private updateGooglePayOverlay;
-	private updateRegularOverlay;
-	render(): symbol | import("lit-html").TemplateResult<1> | undefined;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-native-payment": NativePaymentComponent;
-	}
-}
 declare class PrimerCheckoutCompleteComponent extends LitElement {
 	render(): import("lit-html").TemplateResult<1>;
 }
@@ -3546,6 +3587,7 @@ export declare function loadPrimer(): void;
 
 export {
 	AchPaymentComponent as AchPayment,
+	ApplePayComponent as ApplePay,
 	ButtonComponent as Button,
 	CardFormComponent as CardForm,
 	CardFormSubmitComponent as CardFormSubmit,
@@ -3555,6 +3597,7 @@ export {
 	DynamicPaymentComponent as DynamicPayment,
 	ErrorMessageComponent as ErrorMessage,
 	ErrorMessageContainerComponent as ErrorMessageContainer,
+	GooglePayComponent as GooglePay,
 	InputCardExpiryComponent as CardFormExpiry,
 	InputCardHolderNameComponent as CardFormName,
 	InputCardNumberComponent as CardFormCardNumber,
@@ -3563,7 +3606,7 @@ export {
 	InputErrorComponent as CardFormError,
 	InputLabelComponent as InputLabel,
 	InputWrapperComponent as InputWrapper,
-	NativePaymentComponent as NativePayment,
+	PayPalComponent as PayPal,
 	PaymentMethodComponent as PaymentMethod,
 	PaymentMethodContainerComponent as PaymentMethodContainer,
 	PortalComponent as Portal,