@adyen/adyen-web 5.22.0 → 5.24.0

package/dist/types/components/Card/components/ClickToPay/services/sdks/AbstractSrcInitiator.d.ts

@@ -0,0 +1,75 @@
+import { IdentityLookupParams } from '../types';
+import { CustomSdkConfiguration, SrcCheckoutParams, SrciCheckoutResponse, SrciCompleteIdentityValidationResponse, SrciIdentityLookupResponse, SrciInitiateIdentityValidationResponse, SrciIsRecognizedResponse, SrcInitParams, SrcProfile } from './types';
+import { ClickToPayScheme } from '../../../../types';
+export interface ISrcInitiator {
+    schemeName: ClickToPayScheme;
+    loadSdkScript(): Promise<void>;
+    removeSdkScript(): void;
+    init(params: SrcInitParams, srciTransactionId: string): Promise<void>;
+    isRecognized(): Promise<SrciIsRecognizedResponse>;
+    identityLookup(params: IdentityLookupParams): Promise<SrciIdentityLookupResponse>;
+    initiateIdentityValidation(): Promise<SrciInitiateIdentityValidationResponse>;
+    completeIdentityValidation(validationData: string): Promise<SrciCompleteIdentityValidationResponse>;
+    getSrcProfile(idTokens: string[]): Promise<SrcProfile>;
+    checkout(params: SrcCheckoutParams): Promise<SrciCheckoutResponse>;
+    unbindAppInstance(): Promise<void>;
+}
+export default abstract class AbstractSrcInitiator implements ISrcInitiator {
+    schemeSdk: any;
+    abstract readonly schemeName: ClickToPayScheme;
+    protected readonly customSdkConfiguration: CustomSdkConfiguration;
+    private readonly sdkUrl;
+    private scriptElement;
+    protected constructor(sdkUrl: string, customSdkConfiguration: CustomSdkConfiguration);
+    loadSdkScript(): Promise<void>;
+    removeSdkScript(): void;
+    /**
+     * Verifies if SDK is already loaded on the window object.
+     * Example: Merchant can preload the SDK to speed up the loading time
+     */
+    protected abstract isSdkIsAvailableOnWindow(): boolean;
+    /**
+     * Assign SchemeSDK object to 'schemeSdk' property.
+     * Each scheme creates its own object reference on 'window' using different naming,
+     * therefore this method should be implemented by the subclass to assign the property
+     * accordingly
+     */
+    protected abstract assignSdkReference(): void;
+    /**
+     * Initializes the app with common state. The init method must be called before any other methods.
+     */
+    abstract init(params: SrcInitParams, srciTransactionId: string): Promise<void>;
+    /**
+     * This method performs checkout using the specified card. If successful, the
+     * response contains summary checkout information.
+     */
+    checkout(params: SrcCheckoutParams): Promise<SrciCheckoutResponse>;
+    /**
+     * This method disassociates the Consumer application / Consumer Device from the Consumer’s SRC Profile.
+     */
+    unbindAppInstance(): Promise<void>;
+    /**
+     * Determines whether the consumer is recognized, e.g. by detecting the presence of a local cookie in
+     * the browser environment.
+     */
+    isRecognized(): Promise<SrciIsRecognizedResponse>;
+    /**
+     * Sends a validation code to the specified consumer.
+     * This method sends a one-time password (OTP) to the consumer to start validation
+     */
+    initiateIdentityValidation(): Promise<SrciInitiateIdentityValidationResponse>;
+    /**
+     * Obtains the masked card and other account profile data associated with the userId.
+     */
+    getSrcProfile(idTokens: string[]): Promise<any>;
+    /**
+     * Obtains the user account associated with the consumer’s identity (an email address or phone
+     * number).
+     */
+    abstract identityLookup(params: IdentityLookupParams): Promise<SrciIdentityLookupResponse>;
+    /**
+     * This method completes the identity validation by receiving the one-time password (OTP) sent to the
+     * consumer to start validation.
+     */
+    abstract completeIdentityValidation(otp: string): Promise<SrciCompleteIdentityValidationResponse>;
+}

package/dist/types/components/Card/components/ClickToPay/services/sdks/MastercardSdk.d.ts

@@ -0,0 +1,13 @@
+import { IdentityLookupParams } from '../types';
+import AbstractSrcInitiator from './AbstractSrcInitiator';
+import { CustomSdkConfiguration, SrciCompleteIdentityValidationResponse, SrciIdentityLookupResponse, SrcInitParams } from './types';
+declare class MastercardSdk extends AbstractSrcInitiator {
+    readonly schemeName = "mc";
+    constructor(environment: string, customSdkConfig: CustomSdkConfiguration);
+    protected isSdkIsAvailableOnWindow(): boolean;
+    protected assignSdkReference(): void;
+    init(params: SrcInitParams, srciTransactionId: string): Promise<void>;
+    identityLookup(params: IdentityLookupParams): Promise<SrciIdentityLookupResponse>;
+    completeIdentityValidation(otp: string): Promise<SrciCompleteIdentityValidationResponse>;
+}
+export default MastercardSdk;

package/dist/types/components/Card/components/ClickToPay/services/sdks/SrcSdkLoader.d.ts

@@ -0,0 +1,15 @@
+import { ISrcInitiator } from './AbstractSrcInitiator';
+export interface ISrcSdkLoader {
+    load(environment: string): Promise<ISrcInitiator[]>;
+    schemes: string[];
+}
+declare class SrcSdkLoader implements ISrcSdkLoader {
+    readonly schemes: string[];
+    private readonly customSdkConfiguration;
+    constructor(schemes: string[], { dpaLocale, dpaPresentationName }: {
+        dpaLocale?: string;
+        dpaPresentationName?: string;
+    });
+    load(environment: string): Promise<ISrcInitiator[]>;
+}
+export default SrcSdkLoader;

package/dist/types/components/Card/components/ClickToPay/services/sdks/SrciError.d.ts

@@ -0,0 +1,16 @@
+declare type MastercardError = {
+    message: string;
+    reason: string;
+};
+declare type VisaError = {
+    error: {
+        message: string;
+        reason: string;
+    };
+};
+declare class SrciError extends Error {
+    reason: string;
+    message: string;
+    constructor(schemeError: VisaError | MastercardError);
+}
+export default SrciError;

package/dist/types/components/Card/components/ClickToPay/services/sdks/VisaSdk.d.ts

@@ -0,0 +1,13 @@
+import { IdentityLookupParams } from '../types';
+import AbstractSrcInitiator from './AbstractSrcInitiator';
+import { CustomSdkConfiguration, SrciCompleteIdentityValidationResponse, SrciIdentityLookupResponse, SrcInitParams } from './types';
+declare class VisaSdk extends AbstractSrcInitiator {
+    readonly schemeName = "visa";
+    constructor(environment: string, customSdkConfig: CustomSdkConfiguration);
+    protected isSdkIsAvailableOnWindow(): boolean;
+    protected assignSdkReference(): void;
+    init(params: SrcInitParams, srciTransactionId: string): Promise<void>;
+    identityLookup(params: IdentityLookupParams): Promise<SrciIdentityLookupResponse>;
+    completeIdentityValidation(otp: string): Promise<SrciCompleteIdentityValidationResponse>;
+}
+export default VisaSdk;

package/dist/types/components/Card/components/ClickToPay/services/sdks/config.d.ts

@@ -0,0 +1,31 @@
+import { CustomSdkConfiguration } from './types';
+declare const VISA_SDK_TEST = "https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/src-i-adapter/visaSdk.js";
+declare const VISA_SDK_PROD = "https://assets.secure.checkout.visa.com/checkout-widget/resources/js/src-i-adapter/visaSdk.js";
+declare const MC_SDK_TEST = "https://sandbox.src.mastercard.com/sdk/srcsdk.mastercard.js";
+declare const MC_SDK_PROD = "https://src.mastercard.com/sdk/srcsdk.mastercard.js";
+declare const getVisaSetttings: ({ dpaLocale, dpaPresentationName }: CustomSdkConfiguration) => {
+    dpaTransactionOptions: {
+        dpaLocale: string;
+        payloadTypeIndicator: string;
+    };
+    dpaData: {
+        dpaPresentationName: string;
+    };
+};
+declare const getMastercardSettings: ({ dpaLocale, dpaPresentationName }: CustomSdkConfiguration) => {
+    dpaTransactionOptions: {
+        dpaLocale: string;
+        paymentOptions: {
+            dynamicDataType: string;
+        };
+        consumerNameRequested: boolean;
+        customInputData: {
+            'com.mastercard.dcfExperience': string;
+        };
+        confirmPayment: boolean;
+    };
+    dpaData: {
+        dpaPresentationName: string;
+    };
+};
+export { VISA_SDK_TEST, VISA_SDK_PROD, MC_SDK_TEST, MC_SDK_PROD, getVisaSetttings, getMastercardSettings };

package/dist/types/components/Card/components/ClickToPay/services/sdks/types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Type that represent the object which contains the customizable properties of the SDK initialization
+ */
+export declare type CustomSdkConfiguration = {
+    dpaLocale: string;
+    dpaPresentationName: string;
+};
+/**
+ * Types used to define the interface with the SRCi SDK
+ */
+export declare type SrciInitiateIdentityValidationResponse = {
+    maskedValidationChannel: string;
+};
+export declare type SrciCompleteIdentityValidationResponse = {
+    idToken: string;
+};
+export declare type SrciIsRecognizedResponse = {
+    recognized: boolean;
+    idTokens?: string[];
+};
+export declare type SrciCheckoutResponse = {
+    dcfActionCode: string;
+    encryptedPayload?: string;
+    idToken?: string;
+};
+export declare type SrciIdentityLookupResponse = {
+    consumerPresent: boolean;
+};
+export declare type SrcProfile = {
+    profiles: Array<{
+        maskedCards: SrcCard[];
+    }>;
+    srcCorrelationId: string;
+};
+export declare type SrcCard = {
+    srcDigitalCardId: string;
+    panLastFour: string;
+    dateOfCardLastUsed: string;
+    paymentCardDescriptor: string;
+    digitalCardData: {
+        descriptorName: string;
+        artUri: string;
+    };
+    tokenId?: string;
+};
+export declare type SrcCheckoutParams = {
+    srcCorrelationId: string;
+    srcDigitalCardId: string;
+};
+export interface SrcInitParams {
+    srcInitiatorId: string;
+    srciDpaId: string;
+}

package/dist/types/components/Card/components/ClickToPay/services/sdks/utils.d.ts

@@ -0,0 +1,5 @@
+declare const SchemeNames: {
+    mc: string;
+    visa: string;
+};
+export { SchemeNames };

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

@@ -0,0 +1,40 @@
+import { CtpState } from './ClickToPayService';
+import { SrcProfile } from './sdks/types';
+import { ClickToPayScheme } from '../../../types';
+import ShopperCard from '../models/ShopperCard';
+export interface IClickToPayService {
+    state: CtpState;
+    shopperCards: ShopperCard[];
+    shopperValidationContact: string;
+    schemes: string[];
+    initialize(): Promise<void>;
+    checkout(card: ShopperCard): Promise<ClickToPayCheckoutPayload>;
+    logout(): Promise<void>;
+    verifyIfShopperIsEnrolled(value: string, type?: string): Promise<{
+        isEnrolled: boolean;
+    }>;
+    subscribeOnStateChange(callback: CallbackStateSubscriber): void;
+    startIdentityValidation(): Promise<void>;
+    finishIdentityValidation(otpCode: string): Promise<void>;
+}
+export declare type CallbackStateSubscriber = (state: CtpState) => void;
+export interface IdentityLookupParams {
+    value: string;
+    type?: 'email' | 'mobilePhone';
+}
+declare type MastercardCheckout = {
+    srcDigitalCardId: string;
+    srcCorrelationId: string;
+    srcScheme: string;
+};
+declare type VisaCheckout = {
+    srcCheckoutPayload?: string;
+    srcTokenReference?: string;
+    srcCorrelationId: string;
+    srcScheme: string;
+};
+export interface SrcProfileWithScheme extends SrcProfile {
+    scheme: ClickToPayScheme;
+}
+export declare type ClickToPayCheckoutPayload = VisaCheckout | MastercardCheckout;
+export {};

package/dist/types/components/Card/components/ClickToPay/services/utils.d.ts

@@ -0,0 +1,9 @@
+import { ClickToPayCheckoutPayload, SrcProfileWithScheme } from './types';
+import { SrciCheckoutResponse } from './sdks/types';
+import ShopperCard from '../models/ShopperCard';
+/**
+ * Creates the payload for the /payments call
+ */
+declare function createCheckoutPayloadBasedOnScheme(card: ShopperCard, checkoutResponse: SrciCheckoutResponse, environment: string): ClickToPayCheckoutPayload;
+declare function createShopperCardsList(srcProfiles: SrcProfileWithScheme[]): ShopperCard[];
+export { createShopperCardsList, createCheckoutPayloadBasedOnScheme };

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

@@ -0,0 +1,7 @@
+import { IClickToPayService } from './services/types';
+import { CardConfiguration, ClickToPayConfiguration } from '../../types';
+/**
+ * Creates the Click to Pay service in case the required configuration is provided
+ */
+declare function createClickToPayService(configuration: CardConfiguration, clickToPayConfiguration: ClickToPayConfiguration | undefined, environment: string): IClickToPayService | null;
+export { createClickToPayService };

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

@@ -12,6 +12,15 @@ export interface CardElementProps extends UIElementProps {
      * Configuration specific to brands
      */
     brandsConfiguration?: CardBrandsConfiguration;
+    /**
+     * Flag indicating if merchant really intent to use Click to Pay
+     * Will be removed when we Click to Pay goes live
+     */
+    useClickToPay: boolean;
+    /**
+     * Configuration for Click to Pay
+     */
+    clickToPayConfiguration?: ClickToPayConfiguration;
     /**
      * type will always be "card" (generic card, stored card)
      * except for a single branded card when it will be the same as the brand prop
@@ -80,9 +89,30 @@ export interface CardElementProps extends UIElementProps {
     onBinLookup?: (event: CbObjOnBinLookup) => void;
     [key: string]: any;
 }
+export declare type ClickToPayScheme = 'mc' | 'visa';
+export declare type ClickToPayConfiguration = {
+    shopperIdentityValue: string;
+    shopperIdentityType?: 'email' | 'mobilePhone';
+    /**
+     * Used to display the merchant name in case the DCF appears (ex: first time doing transaction in the device),
+     */
+    merchantDisplayName: string;
+    /**
+     * Used to ensure the correct language and user experience if DCF screen is displayed. As a fallback, it uses the main locale
+     * defined during the creation of the Checkout.
+     * Format: ISO language_country pair (e.g., en_US )
+     *
+     * @default en_US
+     */
+    locale?: string;
+};
 export declare type SocialSecurityMode = 'show' | 'hide' | 'auto';
 /** If the merchant wishes to set any of these properties in their local config they should do so via a "configuration" object */
 export interface CardConfiguration {
+    visaSrciDpaId?: string;
+    visaSrcInitiatorId?: string;
+    mcSrcClientId?: string;
+    mcDpaId?: string;
     merchantIdentifier?: string;
     merchantOrigin?: string;
     gatewayMerchantId?: string;

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

@@ -35,6 +35,7 @@ export declare class DragonpayElement extends UIElement<DragonpayElementProps> {
         name?: string;
         icon?: string;
         amount?: import("../../types").PaymentAmount;
+        secondaryAmount?: import("../../types").PaymentAmountExtended;
         showPayButton?: boolean;
         setStatusAutomatically?: boolean;
         payButton?: (options: import("../types").PayButtonFunctionProps) => h.JSX.Element;

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

@@ -60,6 +60,7 @@ declare class DropinElement extends UIElement<DropinElementProps> {
         name?: string;
         icon?: string;
         amount?: import("../../types").PaymentAmount;
+        secondaryAmount?: import("../../types").PaymentAmountExtended;
         showPayButton?: boolean;
         setStatusAutomatically?: boolean;
         payButton?: (options: import("../types").PayButtonFunctionProps) => h.JSX.Element;

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

@@ -37,6 +37,7 @@ declare class PixElement extends QRLoaderContainer<PixProps> {
         name?: string;
         icon?: string;
         amount?: import("../../types").PaymentAmount;
+        secondaryAmount?: import("../../types").PaymentAmountExtended;
         showPayButton?: boolean;
         setStatusAutomatically?: boolean;
         payButton?: (options: import("../types").PayButtonFunctionProps) => h.JSX.Element;

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

@@ -25,6 +25,7 @@ declare class SwishElement extends QRLoaderContainer {
         name?: string;
         icon?: string;
         amount?: import("../../types").PaymentAmount;
+        secondaryAmount?: import("../../types").PaymentAmountExtended;
         showPayButton?: boolean;
         setStatusAutomatically?: boolean;
         payButton?: (options: import("../types").PayButtonFunctionProps) => import("preact").JSX.Element;

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

@@ -18,6 +18,7 @@ export declare class UIElement<P extends UIElementProps = any> extends BaseEleme
      */
     submit(): void;
     showValidation(): this;
+    setElementStatus(status: UIElementStatus, props?: any): this;
     setStatus(status: UIElementStatus, props?: any): this;
     private submitPayment;
     private submitAdditionalDetails;

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

@@ -25,6 +25,7 @@ declare class WeChatPayElement extends QRLoaderContainer {
         name?: string;
         icon?: string;
         amount?: import("../../types").PaymentAmount;
+        secondaryAmount?: import("../../types").PaymentAmountExtended;
         showPayButton?: boolean;
         setStatusAutomatically?: boolean;
         payButton?: (options: import("../types").PayButtonFunctionProps) => import("preact").JSX.Element;

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

@@ -101,6 +101,7 @@ declare const componentsMap: {
     doku_wallet: typeof Doku;
     donation: typeof Donation;
     dotpay: typeof Dotpay;
+    onlineBanking: typeof Dotpay;
     dragonpay_ebanking: typeof Dragonpay;
     dragonpay_otc_banking: typeof Dragonpay;
     dragonpay_otc_non_banking: typeof Dragonpay;

package/dist/types/components/internal/Button/types.d.ts

@@ -1,12 +1,14 @@
+export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'action';
 export interface ButtonProps {
     status?: string;
     /**
      * Class name modifiers will be used as: `adyen-checkout__image--${modifier}`
      */
     classNameModifiers?: string[];
-    variant: 'primary' | 'secondary' | 'ghost' | 'action';
+    variant?: ButtonVariant;
     disabled?: boolean;
     label?: string;
+    secondaryLabel?: string;
     icon?: string;
     inline?: boolean;
     href?: string;

package/dist/types/components/internal/ContentSeparator/ContentSeparator.d.ts

@@ -2,6 +2,7 @@ import { h } from 'preact';
 import './ContentSeparator.scss';
 interface ContentSeparatorProps {
     label?: string;
+    classNames?: string[];
 }
-declare function ContentSeparator({ label }: ContentSeparatorProps): h.JSX.Element;
+declare function ContentSeparator({ label, classNames }: ContentSeparatorProps): h.JSX.Element;
 export default ContentSeparator;

package/dist/types/components/internal/FormFields/Field/types.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentChildren } from 'preact';
+import { h, Component, ComponentChildren } from 'preact';
 export interface FieldProps {
     className?: string;
     classNameModifiers?: string[];
@@ -12,6 +12,7 @@ export interface FieldProps {
     isLoading?: boolean;
     isValid?: boolean;
     label?: string | Component;
+    labelEndAdornment?: string | h.JSX.Element;
     onBlur?: any;
     onFocus?: any;
     onFocusField?: any;

package/dist/types/components/internal/FormFields/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { SelectProps } from './types';
 import './Select.scss';
-declare function Select({ items, className, classNameModifiers, filterable, readonly, onChange, selected, name, isInvalid, isValid, placeholder, uniqueId, isCollatingErrors }: SelectProps): h.JSX.Element;
+declare function Select({ items, className, classNameModifiers, filterable, readonly, onChange, selected, name, isInvalid, isValid, placeholder, uniqueId, isCollatingErrors, isIconOnLeftSide }: SelectProps): h.JSX.Element;
 declare namespace Select {
     var defaultProps: {
         className: string;

package/dist/types/components/internal/FormFields/Select/components/SelectListItem.d.ts

@@ -1,4 +1,4 @@
 import { h } from 'preact';
 import { SelectItemProps } from '../types';
-declare const SelectListItem: ({ item, selected, ...props }: SelectItemProps) => h.JSX.Element;
+declare const SelectListItem: ({ item, selected, isIconOnLeftSide, ...props }: SelectItemProps) => h.JSX.Element;
 export default SelectListItem;

package/dist/types/components/internal/FormFields/Select/types.d.ts

@@ -19,6 +19,7 @@ export interface SelectProps {
     selected: string;
     uniqueId?: string;
     isCollatingErrors: boolean;
+    isIconOnLeftSide?: boolean;
 }
 export interface SelectButtonProps {
     active: SelectItem;
@@ -36,6 +37,7 @@ export interface SelectButtonProps {
     toggleList: (e: Event) => void;
     id?: string;
     ariaDescribedBy: string;
+    isIconOnLeftSide: boolean;
 }
 export interface SelectListProps {
     active: SelectItem;
@@ -46,10 +48,12 @@ export interface SelectListProps {
     selectListRef: any;
     showList: boolean;
     textFilter: string;
+    isIconOnLeftSide: boolean;
 }
 export interface SelectItemProps {
     item: SelectItem;
     selected: boolean;
+    isIconOnLeftSide: boolean;
     onKeyDown: (e: KeyboardEvent) => void;
     onSelect: (e: Event) => void;
 }

package/dist/types/components/internal/Icon/Icon.d.ts

@@ -3,6 +3,8 @@ interface IconProps {
     type: string;
     className?: string;
     alt?: string;
+    height?: number;
+    width?: number;
 }
-declare const Icon: ({ type, className, alt }: IconProps) => h.JSX.Element;
+declare const Icon: ({ type, className, alt, height, width }: IconProps) => h.JSX.Element;
 export default Icon;

package/dist/types/components/internal/PayButton/PayButton.d.ts

@@ -1,19 +1,20 @@
 import { h } from 'preact';
-import { PaymentAmount } from '../../../types';
-import Language from '../../../language/Language';
-export interface PayButtonProps {
+import { ButtonProps } from '../Button/types';
+import { payAmountLabel } from './utils';
+import { PaymentAmountExtended } from '../../../types';
+export interface PayButtonProps extends ButtonProps {
     /**
      * Class name modifiers will be used as: `adyen-checkout__image--${modifier}`
      */
     classNameModifiers?: string[];
     label?: string;
-    amount: PaymentAmount;
+    amount: PaymentAmountExtended;
+    secondaryAmount?: PaymentAmountExtended;
     status?: string;
     disabled?: boolean;
     icon?: string;
     onClick?(): void;
 }
-declare const payAmountLabel: (i18n: Language, amount: any) => string;
-declare const PayButton: ({ amount, classNameModifiers, label, ...props }: PayButtonProps) => h.JSX.Element;
+declare const PayButton: ({ amount, secondaryAmount, classNameModifiers, label, ...props }: PayButtonProps) => h.JSX.Element;
 export default PayButton;
 export { payAmountLabel };

package/dist/types/components/internal/PayButton/components/SecondaryButtonLabel.d.ts

@@ -0,0 +1,6 @@
+import { h } from 'preact';
+import './SecondaryButtonLabel.scss';
+declare const SecondaryButtonLabel: ({ label }: {
+    label: any;
+}) => h.JSX.Element;
+export default SecondaryButtonLabel;

package/dist/types/components/internal/PayButton/utils.d.ts

@@ -0,0 +1,7 @@
+import Language from '../../../language';
+import { PaymentAmountExtended } from '../../../types';
+export declare const PAY_BTN_DIVIDER = "/ ";
+declare const amountLabel: (i18n: any, amount: PaymentAmountExtended) => any;
+declare const payAmountLabel: (i18n: Language, amount: PaymentAmountExtended) => string;
+declare const secondaryAmountLabel: (i18n: Language, secondaryAmount: PaymentAmountExtended) => string;
+export { payAmountLabel, amountLabel, secondaryAmountLabel };

package/dist/types/components/internal/SecuredFields/SFP/SecuredFieldsProvider.d.ts

@@ -7,8 +7,10 @@ import { BinLookupResponse } from '../../../Card/types';
  * Initialises & handles the client-side part of SecuredFields
  */
 declare class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
-    private invalidOriginErrorTimeout;
-    private invalidOriginTimeoutMS;
+    private csfLoadFailTimeout;
+    private csfLoadFailTimeoutMS;
+    private csfConfigFailTimeout;
+    private csfConfigFailTimeoutMS;
     private numCharsInField;
     private rootNode;
     private numDateFields;

package/dist/types/components/internal/SecuredFields/SFP/SecuredFieldsProviderHandlers.d.ts

@@ -1,7 +1,7 @@
 import { CbObjOnError, CbObjOnFocus, CbObjOnBrand, CbObjOnAllValid, CbObjOnFieldValid, CbObjOnAutoComplete, CbObjOnConfigSuccess, CbObjOnLoad } from '../lib/types';
 /**
- * Emits the onLoad  event
- * Here we can assume CSF is loaded and ready to be used
+ * Emits the onLoad event
+ * Here we can assume all securedFields iframes have fired their 'load' event
  */
 declare function handleOnLoad(cbObj: CbObjOnLoad): void;
 /**

package/dist/types/components/internal/SecuredFields/lib/configuration/constants.d.ts

@@ -11,7 +11,7 @@ export declare const ENCRYPTED_BANK_LOCATION_FIELD = "encryptedBankLocationId";
 export declare const ENCRYPTED_SECURITY_CODE_3_DIGITS = "encryptedSecurityCode3digits";
 export declare const ENCRYPTED_SECURITY_CODE_4_DIGITS = "encryptedSecurityCode4digits";
 export declare const GIFT_CARD = "giftcard";
-export declare const SF_VERSION = "4.1.1";
+export declare const SF_VERSION = "4.2.1";
 export declare const DEFAULT_CARD_GROUP_TYPES: string[];
 export declare const NON_CREDIT_CARD_TYPE_SECURED_FIELDS: string[];
 export declare const CREDIT_CARD_SF_FIELDS: string[];

package/dist/types/components/internal/SecuredFields/lib/securedField/AbstractSecuredField.d.ts

@@ -66,10 +66,12 @@ export interface AriaConfigObject {
 }
 declare abstract class AbstractSecuredField {
     config: SFInternalConfig;
-    protected fieldType: string;
+    fieldType: string;
     protected iframeSrc: string;
     protected loadingContext: string;
     protected holderEl: HTMLElement;
+    protected iframeRef: HTMLElement;
+    loadToConfigTimeout: number;
     protected _errorType: string;
     protected _hasError: boolean;
     protected _isValid: boolean;

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

@@ -1,4 +1,4 @@
-import { Order, PaymentAction, PaymentAmount } from '../types';
+import { Order, PaymentAction, PaymentAmount, PaymentAmountExtended } from '../types';
 import UIElement from './UIElement';
 import Core from '../core';
 import Analytics from '../core/Analytics';
@@ -30,6 +30,7 @@ export interface IUIElement {
     type: string;
     elementRef: any;
     submit(): void;
+    setElementStatus(status: UIElementStatus, props: any): UIElement;
     setStatus(status: UIElementStatus, props?: {
         message?: string;
         [key: string]: any;
@@ -56,6 +57,7 @@ export interface UIElementProps extends BaseElementProps {
     name?: string;
     icon?: string;
     amount?: PaymentAmount;
+    secondaryAmount?: PaymentAmountExtended;
     /**
      * Show/Hide pay button
      * @defaultValue true

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

@@ -1,3 +1,3 @@
-import { PaymentResponse, RawPaymentResponse } from './types';
+import { PaymentResponse, RawPaymentResponse, UIElementStatus } from './types';
 export declare function getSanitizedResponse(response: RawPaymentResponse): PaymentResponse;
-export declare function resolveFinalResult(result: PaymentResponse): string[];
+export declare function resolveFinalResult(result: PaymentResponse): [status: UIElementStatus, statusProps?: any];