@adyen/adyen-web 5.58.0 → 5.59.0

package/dist/types/components/Card/Card.d.ts

@@ -126,6 +126,11 @@ export declare class CardElement extends UIElement<CardElementProps> {
     private handleClickToPaySubmit;
     onBinLookup(obj: CbObjOnBinLookup): void;
     onBinValue: (callbackObj: import("../internal/SecuredFields/lib/types").CbObjOnBinValue) => void;
+    get storePaymentMethodPayload(): {
+        storePaymentMethod?: undefined;
+    } | {
+        storePaymentMethod: boolean;
+    };
     get isValid(): boolean;
     get icon(): string;
     get brands(): {

package/dist/types/components/PayPal/Paypal.d.ts

@@ -6,19 +6,25 @@ import './Paypal.scss';
 declare class PaypalElement extends UIElement<PayPalElementProps> {
     static type: string;
     static subtype: string;
-    private paymentData;
+    paymentData: string;
     private resolve;
     private reject;
     protected static defaultProps: PayPalElementProps;
     constructor(props: any);
     formatProps(props: PayPalElementProps): PayPalElementProps;
     submit: () => void;
+    /**
+     * Updates the paymentData value. It must be used in the PayPal Express flow, when patching the amount
+     * @param paymentData - Payment data value
+     */
+    updatePaymentData(paymentData: string): void;
     /**
      * Formats the component data output
      */
     protected formatData(): {
         paymentMethod: {
             type: string;
+            userAction: "continue" | "pay";
             subtype: string;
         };
     };
@@ -36,6 +42,24 @@ declare class PaypalElement extends UIElement<PayPalElementProps> {
     handleResolve(token: string): void;
     handleReject(errorMessage: string): void;
     private handleSubmit;
+    /**
+     * If the merchant provides the 'onShippingAddressChange' callback, then this method is used as a wrapper to it, in order
+     * to expose to the merchant the 'component' instance. The merchant needs the 'component' in order to manipulate the
+     * paymentData
+     *
+     * @param data - PayPal data
+     * @param actions - PayPal actions.
+     */
+    private handleOnShippingAddressChange;
+    /**
+     * If the merchant provides the 'onShippingOptionsChange' callback, then this method is used as a wrapper to it, in order
+     * to expose to the merchant the 'component' instance. The merchant needs the 'component' in order to manipulate the
+     * paymentData
+     *
+     * @param data - PayPal data
+     * @param actions - PayPal actions.
+     */
+    private handleOnShippingOptionsChange;
     render(): h.JSX.Element;
 }
 export default PaypalElement;

package/dist/types/components/PayPal/components/PaypalButtons.d.ts

@@ -1,3 +1,3 @@
 import { h } from 'preact';
 import { PayPalButtonsProps } from '../types';
-export default function PaypalButtons({ onInit, onApprove, onClick, onCancel, onError, onShippingChange, onSubmit, isProcessingPayment, paypalRef, style, ...props }: PayPalButtonsProps): h.JSX.Element;
+export default function PaypalButtons({ onInit, onApprove, onClick, onCancel, onError, onShippingChange, onShippingAddressChange, onShippingOptionsChange, onSubmit, isProcessingPayment, paypalRef, style, ...props }: PayPalButtonsProps): h.JSX.Element;

package/dist/types/components/PayPal/types.d.ts

@@ -2,6 +2,7 @@ import { PaymentAmount, PaymentMethod, ShopperDetails } from '../../types';
 import UIElement from '../UIElement';
 import { UIElementProps } from '../types';
 import { SUPPORTED_LOCALES } from './config';
+import PaypalElement from './Paypal';
 declare global {
     interface Window {
         paypal: object;
@@ -114,8 +115,23 @@ interface PayPalCommonProps {
     onClick?: () => void;
     /**
      * @see {@link https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#onshippingchange}
+     * @deprecated - Use 'onShippingAddressChange' instead, as described in the PayPal docs
      */
     onShippingChange?: (data: any, actions: any) => void;
+    /**
+     * While the buyer is on the PayPal site, you can update their shopping cart to reflect the shipping address they chose on PayPal
+     * @see {@link https://developer.paypal.com/sdk/js/reference/#onshippingaddresschange}
+     */
+    onShippingAddressChange?: (data: any, actions: {
+        reject: (reason?: string) => Promise<void>;
+    }) => Promise<void>;
+    /**
+     * While the buyer is on the PayPal site, you can update their shopping cart to reflect the shipping options they chose on PayPal
+     * @see {@link https://developer.paypal.com/sdk/js/reference/#onshippingoptionschange}
+     */
+    onShippingOptionsChange?: (data: any, actions: {
+        reject: (reason?: string) => Promise<void>;
+    }) => Promise<void>;
     /**
      *  Identifies if the payment is Express.
      *  @defaultValue false
@@ -132,12 +148,39 @@ export interface PayPalConfig {
      */
     intent?: Intent;
 }
-export interface PayPalElementProps extends PayPalCommonProps, UIElementProps {
+export interface PayPalElementProps extends Omit<PayPalCommonProps, 'onShippingAddressChange' | 'onShippingOptionsChange'>, UIElementProps {
     onSubmit?: (state: any, element: UIElement) => void;
     onComplete?: (state: any, element?: UIElement) => void;
     onAdditionalDetails?: (state: any, element: UIElement) => void;
     onCancel?: (state: any, element: UIElement) => void;
     onError?: (state: any, element?: UIElement) => void;
+    /**
+     * While the buyer is on the PayPal site, you can update their shopping cart to reflect the shipping address they chose on PayPal
+     * @see {@link https://developer.paypal.com/sdk/js/reference/#onshippingaddresschange}
+     *
+     * @param data - PayPal data object
+     * @param actions - Used to reject the address change in case the address is invalid
+     * @param component - Adyen instance of its PayPal implementation. It must be used to manipulate the 'paymentData' in order to apply the amount patch correctly
+     */
+    onShippingAddressChange?: (data: any, actions: {
+        reject: (reason?: string) => Promise<void>;
+    }, component: PaypalElement) => Promise<void>;
+    /**
+     * This callback is triggered any time the user selects a new shipping option.
+     * @see {@link https://developer.paypal.com/sdk/js/reference/#onshippingoptionschange}
+     *
+     * @param data - An PayPal object containing the payer’s selected shipping option
+     * @param actions - Used to indicates to PayPal that you will not support the shipping method selected by the buyer
+     * @param component - Adyen instance of its PayPal implementation. It must be used to manipulate the 'paymentData' in order to apply the amount patch correctly
+     */
+    onShippingOptionsChange?: (data: any, actions: {
+        reject: (reason?: string) => Promise<void>;
+    }, component: PaypalElement) => Promise<void>;
+    /**
+     * If set to 'continue' , the button inside the lightbox will display the 'Continue' button
+     * @default pay
+     */
+    userAction?: 'continue' | 'pay';
     onShopperDetails?(shopperDetails: ShopperDetails, rawData: any, actions: {
         resolve: () => void;
         reject: () => void;

package/package.json

@@ -25,7 +25,7 @@
         "./dist/es/adyen.css": "./dist/es/adyen.css",
         "./package.json": "./package.json"
     },
-    "version": "5.58.0",
+    "version": "5.59.0",
     "license": "MIT",
     "homepage": "https://docs.adyen.com/checkout",
     "repository": "github:Adyen/adyen-web",