chore: update paypal components

johnayeni · johnayeni · commit fb3978f245b5 · 2026-08-07T11:42:35.000+02:00
diff --git a/packages/lib/src/components/PayPal/Paypal.test.tsx b/packages/lib/src/components/PayPal/Paypal.test.tsx
@@ -478,9 +478,8 @@ describe('Paypal', () => {
         describe('constructor', () => {
             test('should create the SDK loader and PayPal service and initialize it when usePayPalV6 is set', () => {
                 new Paypal(core, {
-                    usePayPalV6: { vault: true, nonce: 'test-nonce' },
+                    usePayPalV6: { vault: true, nonce: 'test-nonce', countryCode: 'US' },
                     configuration: { merchantId: 'merchant-1' },
-                    countryCode: 'US',
                     amount: { value: 1000, currency: 'USD' }
                 });
 
diff --git a/packages/lib/src/components/PayPal/PaypalCredit.tsx b/packages/lib/src/components/PayPal/PaypalCredit.tsx
@@ -14,7 +14,7 @@ class PaypalCreditElement extends BasePaypalElement<BasePayPalConfiguration> {
     protected override elementName: string = 'PayPalCredit';
 
     public override get icon(): string {
-        return this.resources.getImage()('paypal');
+        return this.resources.getImage()(TxVariants.paypal);
     }
 
     protected override componentToRender(): h.JSX.Element | null {
diff --git a/packages/lib/src/components/PayPal/PaypalPaylater.tsx b/packages/lib/src/components/PayPal/PaypalPaylater.tsx
@@ -15,7 +15,7 @@ class PaypalPaylaterElement extends BasePaypalElement<PayPalPayLaterConfiguratio
     protected override elementName: string = 'PayPalPaylater';
 
     public override get icon(): string {
-        return this.resources.getImage()('paypal');
+        return this.resources.getImage()(TxVariants.paypal);
     }
 
     protected override get paypalComponents(): PayPalComponents {
@@ -38,6 +38,7 @@ class PaypalPaylaterElement extends BasePaypalElement<PayPalPayLaterConfiguratio
                 commit={this.props.commit}
                 presentationModeOptions={this.props.presentationModeOptions}
                 hidePayPalMessaging={this.props.hidePayPalMessaging}
+                messagingContentOptions={this.props.messagingContentOptions}
                 countryCode={this.props.countryCode}
                 onSubmit={this.handleSubmit}
                 onApprove={this.handleOnApprove}
diff --git a/packages/lib/src/components/PayPal/components/PayPalButton.tsx b/packages/lib/src/components/PayPal/components/PayPalButton.tsx
@@ -1,15 +1,14 @@
 import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
 
-import type { PayPalButtonStyle } from '../types';
-import type { PayPalComponentV6Props } from './types';
+import type { PayPalButtonStyle, PayPalComponentV6Props } from './types';
 import { usePayPalSessionOptions } from '../hooks/usePayPalSessionOptions';
 import { useCreateOrder } from '../hooks/useCreateOrder';
 import { useCreateVaultSetupToken } from '../hooks/useCreateVaultSetupToken';
 import { useAmount } from '../../../core/Context/AmountProvider';
 import { usePayPalOneTimeSession } from '../hooks/usePayPalOneTimeSession';
 import { usePayPalSaveSession } from '../hooks/usePayPalSaveSession';
 import { usePayPalButtonEligibility } from '../hooks/usePayPalButtonEligibility';
-import { useMemo } from 'preact/hooks';
 
 export const PayPalButton = ({
     paypalService,
diff --git a/packages/lib/src/components/PayPal/components/PayPalMessaging.tsx b/packages/lib/src/components/PayPal/components/PayPalMessaging.tsx
@@ -3,17 +3,22 @@ import { useMemo, useEffect, useRef } from 'preact/hooks';
 
 import { PayPalService } from '../services/PayPalService';
 import { useAmount } from '../../../core/Context/AmountProvider';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import type { PayPalFetchContentOptions, PayPalMessageElement } from '../paypal-js-types';
 
 export const PayPalMessaging = ({
     paypalService,
-    countryCode
+    countryCode,
+    messagingContentOptions
 }: Readonly<{
     paypalService: PayPalService;
     countryCode?: string;
+    messagingContentOptions?: Pick<PayPalFetchContentOptions, 'logoType' | 'logoPosition' | 'textColor'>;
 }>) => {
     const payPalSDKInstance = useMemo(() => paypalService.getInstance(), [paypalService]);
-    const messageElementRef = useRef<HTMLElement | null>(null);
+    const messageElementRef = useRef<PayPalMessageElement | null>(null);
     const { amount } = useAmount();
+    const { i18n } = useCoreContext();
 
     useEffect(() => {
         const fetchMessageContent = async (): Promise<void> => {
@@ -22,13 +27,18 @@ export const PayPalMessaging = ({
                 currencyCode: amount.currency
             });
 
+            const amountString = i18n.amount(amount.value, amount.currency, {
+                style: 'decimal',
+                minimumFractionDigits: 0,
+                signDisplay: 'never'
+            });
+
             await messagesInstance.fetchContent({
-                textColor: 'BLACK',
-                logoPosition: 'LEFT',
-                logoType: 'TEXT',
-                amount: String(amount.value / 100),
+                textColor: messagingContentOptions?.textColor ?? 'BLACK',
+                logoPosition: messagingContentOptions?.logoPosition ?? 'LEFT',
+                logoType: messagingContentOptions?.logoType ?? 'TEXT',
+                amount: amountString,
                 onReady: content => {
-                    // @ts-ignore - messageElement is guaranteed to be a PayPalMessageElement
                     messageElementRef.current?.setContent(content);
                 }
             });
diff --git a/packages/lib/src/components/PayPal/components/PaypalPaylaterComponent.tsx b/packages/lib/src/components/PayPal/components/PaypalPaylaterComponent.tsx
@@ -6,12 +6,14 @@ import { PayPalPayLaterButton } from './PayPalPayLaterButton';
 import { PayPalProcessingSpinner } from './PayPalProcessingSpinner';
 import { PayPalSpinner } from './PayPalSpinner';
 import { PayPalComponentV6Props } from './types';
+import { PayPalFetchContentOptions } from '../paypal-js-types';
 
 export const PayPalPaylaterComponent = ({
     paypalService,
     commit = true,
     presentationModeOptions,
     hidePayPalMessaging,
+    messagingContentOptions,
     countryCode,
     onSubmit,
     onApprove,
@@ -24,6 +26,7 @@ export const PayPalPaylaterComponent = ({
     Omit<PayPalComponentV6Props, 'style' | 'vault'> & {
         hidePayPalMessaging?: boolean;
         countryCode?: string;
+        messagingContentOptions?: Pick<PayPalFetchContentOptions, 'logoType' | 'logoPosition' | 'textColor'>;
     }
 >) => {
     const { status, handleOnApprove } = usePayPalStatus({
@@ -50,7 +53,9 @@ export const PayPalPaylaterComponent = ({
 
     return (
         <div className="adyen-checkout__paypal" data-testid="paypal-paylater-component">
-            {!hidePayPalMessaging && <PayPalMessaging paypalService={paypalService} countryCode={countryCode} />}
+            {!hidePayPalMessaging && (
+                <PayPalMessaging paypalService={paypalService} countryCode={countryCode} messagingContentOptions={messagingContentOptions} />
+            )}
             <PayPalPayLaterButton
                 paypalService={paypalService}
                 presentationModeOptions={presentationModeOptions}
diff --git a/packages/lib/src/components/PayPal/components/VenmoButton.tsx b/packages/lib/src/components/PayPal/components/VenmoButton.tsx
@@ -1,7 +1,7 @@
-import { useMemo } from 'preact/hooks';
 import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
 
-import type { PayPalVenmoButtonStyle } from '../types';
+import type { PayPalVenmoButtonStyle } from './types';
 import type { PayPalComponentV6Props } from './types';
 import { usePayPalSessionOptions } from '../hooks/usePayPalSessionOptions';
 import { useCreateOrder } from '../hooks/useCreateOrder';
diff --git a/packages/lib/src/components/PayPal/components/VenmoComponent.tsx b/packages/lib/src/components/PayPal/components/VenmoComponent.tsx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-import { PayPalVenmoButtonStyle } from '../../types';
+import { PayPalVenmoButtonStyle } from './types';
 import { usePayPalStatus } from '../hooks/usePayPalStatus';
 import { PayPalProcessingSpinner } from './PayPalProcessingSpinner';
 import { PayPalSpinner } from './PayPalSpinner';
diff --git a/packages/lib/src/components/PayPal/components/types.ts b/packages/lib/src/components/PayPal/components/types.ts
@@ -6,6 +6,11 @@ import type {
     PayPalOnApproveData,
     PayPalOnShippingAddressChangeData,
     PayPalOnShippingOptionsChangeData,
+    PayPalPresentationModeOptionsForAuto,
+    PayPalPresentationModeOptionsForModal,
+    PayPalPresentationModeOptionsForPaymentHandler,
+    PayPalPresentationModeOptionsForPopup,
+    PayPalPresentationModeOptionsForRedirect,
     PayPalV6OnApproveData,
     PayPalV6OnShippingAddressChangeData,
     PayPalV6OnShippingOptionsChangeData
@@ -53,3 +58,44 @@ export type PayPalComponentV6Props = Pick<
     onError: (error: Error) => void;
     setComponentRef: (ref: ComponentMethodsRef) => void;
 };
+
+/**
+ * @internal
+ */
+export type PayPalButtonType = 'pay' | 'checkout' | 'buynow' | 'subscribe';
+
+/**
+ * @internal
+ */
+export type PayPalButtonClass = 'paypal-gold' | 'paypal-blue' | 'paypal-white' | 'paypal-black';
+
+/**
+ * @internal
+ */
+export type VenmoButtonClass = 'venmo-blue' | 'venmo-black';
+
+/**
+ * @internal
+ */
+export type PayPalButtonStyle = {
+    type?: PayPalButtonType;
+    class?: PayPalButtonClass;
+};
+
+/**
+ * @internal
+ */
+export type PayPalVenmoButtonStyle = {
+    type?: PayPalButtonType;
+    class?: VenmoButtonClass;
+};
+
+/**
+ * @internal
+ */
+export type PayPalPresentationModeOptions =
+    | PayPalPresentationModeOptionsForPopup
+    | PayPalPresentationModeOptionsForModal
+    | PayPalPresentationModeOptionsForRedirect
+    | PayPalPresentationModeOptionsForPaymentHandler
+    | PayPalPresentationModeOptionsForAuto;
diff --git a/packages/lib/src/components/PayPal/hooks/usePayPalOneTimeSession.test.ts b/packages/lib/src/components/PayPal/hooks/usePayPalOneTimeSession.test.ts
@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/preact-hooks';
 import { usePayPalOneTimeSession } from './usePayPalOneTimeSession';
 import type { PayPalOneTimePaymentSession } from '../paypal-js-types';
-import type { PayPalPresentationModeOptions } from '../types';
+import type { PayPalPresentationModeOptions } from '../components/types';
 
 describe('usePayPalOneTimeSession', () => {
     const presentationModeOptions: PayPalPresentationModeOptions = { presentationMode: 'auto' };
diff --git a/packages/lib/src/components/PayPal/hooks/usePayPalOneTimeSession.ts b/packages/lib/src/components/PayPal/hooks/usePayPalOneTimeSession.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { PayPalOneTimePaymentSession } from '../paypal-js-types';
-import { PayPalPresentationModeOptions } from '../types';
+import { PayPalPresentationModeOptions } from '../components/types';
 import { DEFAULT_PAYMENT_SESSION_OPTIONS } from '../config';
 
 export const usePayPalOneTimeSession = ({
diff --git a/packages/lib/src/components/PayPal/hooks/usePayPalSaveSession.test.ts b/packages/lib/src/components/PayPal/hooks/usePayPalSaveSession.test.ts
@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/preact-hooks';
 import { usePayPalSaveSession } from './usePayPalSaveSession';
 import type { PayPalSavePaymentSession } from '../paypal-js-types';
-import type { PayPalPresentationModeOptions } from '../types';
+import type { PayPalPresentationModeOptions } from '../components/types';
 
 describe('usePayPalSaveSession', () => {
     const presentationModeOptions: PayPalPresentationModeOptions = { presentationMode: 'auto' };
diff --git a/packages/lib/src/components/PayPal/hooks/usePayPalSaveSession.ts b/packages/lib/src/components/PayPal/hooks/usePayPalSaveSession.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { PayPalSavePaymentSession } from '../paypal-js-types';
-import { PayPalPresentationModeOptions } from '../types';
+import { PayPalPresentationModeOptions } from '../components/types';
 import { DEFAULT_PAYMENT_SESSION_OPTIONS } from '../config';
 
 export const usePayPalSaveSession = ({
diff --git a/packages/lib/src/components/PayPal/paypal-js-types.ts b/packages/lib/src/components/PayPal/paypal-js-types.ts
@@ -21,7 +21,10 @@ import type {
     OneTimePaymentSession,
     SavePaymentSession,
     VenmoSavePaymentSessionOptions,
-    PageTypes
+    PageTypes,
+    FetchContentOptions,
+    PayPalMessagesSession,
+    PayPalMessageElement as PayPalMessageElementV6
 } from '@paypal/paypal-js/sdk-v6';
 
 export type { PayPalOneTimePaymentSessionOptions, PayPalMessagesOptions, PayPalMessagesSession } from '@paypal/paypal-js/sdk-v6';
@@ -57,6 +60,15 @@ export type PayPalSavePaymentSessionOptions = SavePaymentSessionOptions;
 export type PayPalOneTimePaymentSession = OneTimePaymentSession;
 export type PayPalSavePaymentSession = SavePaymentSession;
 export type PayPalVenmoSavePaymentSessionOptions = VenmoSavePaymentSessionOptions;
+export type PayPalFetchContentOptions = FetchContentOptions;
+export type PayPalMessageContent = NonNullable<Awaited<ReturnType<PayPalMessagesSession['fetchContent']>>>;
+/**
+ * The `<paypal-message>` custom element. The PayPal SDK types omit the `setContent` method,
+ * which is the method used to render the content resolved by `fetchContent` into the element.
+ */
+export type PayPalMessageElement = PayPalMessageElementV6 & {
+    setContent(content: PayPalMessageContent): void;
+};
 export type PayPalPresentationModeOptionsForPopup = {
     presentationMode: 'popup';
     fullPageOverlay?: { enabled: boolean };
diff --git a/packages/lib/src/components/PayPal/stories/PayPal.stories.tsx b/packages/lib/src/components/PayPal/stories/PayPal.stories.tsx
@@ -4,6 +4,7 @@ import { PaymentMethodStoryProps } from '../../../../storybook/types';
 import { ComponentContainer } from '../../../../storybook/components/ComponentContainer';
 import Paypal from '..';
 import type { PayPalConfiguration } from '../types';
+import type { PayPalMessageElement } from '../paypal-js-types';
 import { Checkout } from '../../../../storybook/components/Checkout';
 import { DEFAULT_COUNTRY_CODE } from '../../../../storybook/config/commonConfig';
 
@@ -109,16 +110,15 @@ export const PaypalV6Messaging: Story = {
                                             buyerCountry: componentConfiguration.countryCode,
                                             currencyCode: componentConfiguration.amount.currency
                                         });
-                                        const messageElement = document.querySelector('#paypal-message');
+                                        const messageElement = document.querySelector<PayPalMessageElement>('#paypal-message');
 
                                         const content = await messagesInstance.fetchContent({
                                             textColor: 'MONOCHROME',
                                             logoPosition: 'LEFT',
                                             logoType: 'NONE',
                                             amount: '100',
                                             onReady: content => {
-                                                // @ts-ignore - messageElement is guaranteed to be a PayPalMessageElement
-                                                messageElement.setContent(content);
+                                                messageElement?.setContent(content);
                                             }
                                         });
 
diff --git a/packages/lib/src/components/PayPal/types.ts b/packages/lib/src/components/PayPal/types.ts
@@ -1,20 +1,17 @@
 import { AddressData } from '../../types/global-types';
 import { UIElementProps } from '../internal/UIElement/types';
+import { PayPalButtonStyle, PayPalVenmoButtonStyle, PayPalPresentationModeOptions } from './components/types';
 import { BasePaypalElement } from './models/BasePaypalElement';
 import PaypalElement from './Paypal';
 import type {
+    PayPalFetchContentOptions,
     PayPalMessagesOptions,
     PayPalMessagesSession,
     PayPalOnInitActions,
     PayPalOnShippingAddressChangeData,
     PayPalOnShippingOptionsChangeData,
     PayPalOrderResponseBody,
     PayPalPageTypes,
-    PayPalPresentationModeOptionsForAuto,
-    PayPalPresentationModeOptionsForModal,
-    PayPalPresentationModeOptionsForPaymentHandler,
-    PayPalPresentationModeOptionsForPopup,
-    PayPalPresentationModeOptionsForRedirect,
     PayPalV6OnShippingAddressChangeData,
     PayPalV6OnShippingOptionsChangeData
 } from './paypal-js-types';
@@ -362,6 +359,11 @@ export type PayPalPayLaterConfiguration = Omit<BasePayPalConfiguration, 'vault'>
      * @returns
      */
     onCreatePayPalMessages?: (createPayPalMessages: (messagesOptions?: PayPalMessagesOptions) => PayPalMessagesSession) => void;
+    /**
+     * Options for fetching PayPal messages content
+     * @see {@link https://docs.paypal.ai/reference/sdk/js/v6/reference#messagesinstance-fetchcontent-options}
+     */
+    messagingContentOptions?: Pick<PayPalFetchContentOptions, 'logoType' | 'logoPosition' | 'textColor'>;
 };
 
 export type VenmoConfiguration = Omit<
@@ -383,44 +385,3 @@ export type SupportedPayPalFundingSources = 'paypal' | 'credit' | 'paylater' | '
  * @deprecated Use {@link SupportedPayPalFundingSources} instead
  */
 export type FundingSource = SupportedPayPalFundingSources;
-
-/**
- * @internal
- */
-export type PayPalButtonType = 'pay' | 'checkout' | 'buynow' | 'subscribe';
-
-/**
- * @internal
- */
-export type PayPalButtonClass = 'paypal-gold' | 'paypal-blue' | 'paypal-white' | 'paypal-black';
-
-/**
- * @internal
- */
-export type VenmoButtonClass = 'venmo-blue' | 'venmo-black';
-
-/**
- * @internal
- */
-export type PayPalButtonStyle = {
-    type?: PayPalButtonType;
-    class?: PayPalButtonClass;
-};
-
-/**
- * @internal
- */
-export type PayPalVenmoButtonStyle = {
-    type?: PayPalButtonType;
-    class?: VenmoButtonClass;
-};
-
-/**
- * @internal
- */
-export type PayPalPresentationModeOptions =
-    | PayPalPresentationModeOptionsForPopup
-    | PayPalPresentationModeOptionsForModal
-    | PayPalPresentationModeOptionsForRedirect
-    | PayPalPresentationModeOptionsForPaymentHandler
-    | PayPalPresentationModeOptionsForAuto;
diff --git a/packages/lib/src/components/internal/PayButton/utils.ts b/packages/lib/src/components/internal/PayButton/utils.ts
@@ -3,7 +3,7 @@ import type { PaymentAmount } from '../../../types/global-types';
 
 export const PAY_BTN_DIVIDER = '/ ';
 
-const amountLabel = (i18n, amount: PaymentAmount) =>
+const amountLabel = (i18n: Language, amount: PaymentAmount) =>
     !!amount?.value && !!amount?.currency ? i18n.amount(amount.value, amount.currency, { currencyDisplay: amount.currencyDisplay || 'symbol' }) : '';
 
 const isAmountFirstFormat = (i18n: Language): boolean => {
diff --git a/packages/lib/src/types/custom.d.ts b/packages/lib/src/types/custom.d.ts

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ class PaypalCreditElement extends BasePaypalElement<BasePayPalConfiguration> {`
`14`	`14`	`protected override elementName: string = 'PayPalCredit';`
`15`	`15`
`16`	`16`	`public override get icon(): string {`
`17`		`- return this.resources.getImage()('paypal');`
	`17`	`+ return this.resources.getImage()(TxVariants.paypal);`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`protected override componentToRender(): h.JSX.Element \| null {`