UNPKG

@atlas-kitchen/adyen-web

Version:
1,679 lines (1,641 loc) 243 kB
/// <reference types="applepayjs" /> /// <reference types="googlepay" /> import * as preact from 'preact'; import { h, ComponentChild, Ref, FunctionComponent } from 'preact'; /** * Holds the result of a validation */ declare class ValidationRuleResult { private readonly shouldValidate; isValid: boolean; errorMessage: string | ErrorMessageObject; constructor(rule: ValidatorRule, value: string, mode: ValidatorMode, context: any); /** * Whether the validation is considered an error. * A field is only considered to be an error if the validation rule applies to the current mode i.e. 'blur' or 'input'. * Also, if a validation function returns a null value e.g. when the field is empty, then the field will not be considered to be in error * unless the whole form is being validated */ hasError(isValidatingForm?: boolean): boolean; } type ValidatorMode = 'blur' | 'input'; type ErrorMessageObject = { translationKey: string; translationObject: any; }; type ValidateFunction = (value: string, context: any) => boolean; interface ValidatorRule { validate: ValidateFunction; errorMessage?: string | ErrorMessageObject; modes: ValidatorMode[]; } type OnAddressLookupType = (value: string, actions: { resolve: (value: Array<AddressLookupItem>) => void; reject: (reason?: any) => void; }) => Promise<void>; type StringObject = { [key: string]: string; }; interface AddressLookupItem extends AddressData { id: string; name: string; } type AddressFieldsGroup = [AddressField, number][]; type AddressSchema = (AddressField | AddressFieldsGroup)[]; interface AddressSpecifications { [key: string]: { hasDataset?: boolean; labels?: StringObject; optionalFields?: AddressField[]; placeholders?: StringObject; schema?: AddressSchema; }; } declare const ADDRESS_SCHEMA: readonly ["street", "houseNumberOrName", "postalCode", "city", "stateOrProvince", "country"]; type CustomTranslations = { [locale: string]: Translations; }; type Translations = { [translationKey: string]: string; }; interface LanguageOptions { locale: string; translations: Translations; customTranslations?: CustomTranslations; } declare class Language { readonly locale: string; readonly languageCode: string; private readonly translations; private readonly customTranslations; readonly timeFormatOptions: Intl.DateTimeFormatOptions; readonly timeAndDateFormatOptions: Intl.DateTimeFormatOptions; readonly timeAndDateFormatter: Intl.DateTimeFormat; constructor(props: LanguageOptions); /** * Returns a translated string from a key in the current {@link Language.locale} * @param key - Translation key * @param options - Translation options * @returns Translated string */ get(key: string, options?: any): string; /** * Returns a localized string for an amount * @param amount - Amount to be converted * @param currencyCode - Currency code of the amount * @param options - Options for String.prototype.toLocaleString */ amount(amount: number, currencyCode: string, options?: object): string; /** * Returns a localized string for a date * @param date - Date to be localized * @param options - Options for {@link Date.toLocaleDateString} */ date(date: string, options?: object): string; /** * Returns a localized string for a date and time * @param date - Date to be localized */ dateTime(date: string): string; } interface ImageOptions { extension?: string; imageFolder?: string; resourceContext?: string; name?: string; parentFolder?: string; size?: string; subFolder?: string; svgOptions?: string; type?: string; } type GetImageFnType = (name: any) => string; declare class Resources { private readonly resourceContext; constructor(cdnContext: string); private returnImage; private getImageUrl; getImage(props?: ImageOptions): GetImageFnType; } type GiftcardFieldsProps = { setRootNode: (input: HTMLElement) => void; i18n: Language; pinRequired: boolean; sfpState: SFPState; getCardErrorMessage: any; focusedElement: any; setFocusOn: any; label?: string; }; interface SFPState { status?: string; brand?: string; errors?: object; valid: SFPValid; data: object; cvcPolicy?: CVCPolicyType; isSfpValid?: boolean; autoCompleteName?: string; billingAddress?: AddressData; detectedUnsupportedBrands?: string[]; hasKoreanFields?: boolean; showSocialSecurityNumber?: boolean; expiryDatePolicy?: DatePolicyType; socialSecurityNumber?: string; } interface SFPValid { encryptedCardNumber?: boolean; encryptedExpiryMonth?: boolean; encryptedExpiryYear?: boolean; encryptedSecurityCode?: boolean; encryptedPassword?: boolean; encryptedPin?: boolean; encryptedBankAccountNumber?: boolean; encryptedBankLocationId?: boolean; } declare const REQUIRED = "required"; declare const OPTIONAL = "optional"; declare const HIDDEN = "hidden"; declare global { interface Window { _b$dl: boolean; mockBinCount: number; } } interface StylesObject { base?: StyleDefinitions; error?: StyleDefinitions; validated?: StyleDefinitions; placeholder?: StyleDefinitions; } interface StyleDefinitions { background?: string; caretColor?: string; color?: string; display?: string; font?: string; fontFamily?: string; fontSize?: string; fontSizeAdjust?: string; fontSmoothing?: string; fontStretch?: string; fontStyle?: string; fontVariant?: string; fontVariantAlternates?: string; fontVariantCaps?: string; fontVariantEastAsian?: string; fontVariantLigatures?: string; fontVariantNumeric?: string; fontWeight?: string; letterSpacing?: string; lineHeight?: string; mozOsxFontSmoothing?: string; mozTransition?: string; outline?: string; opacity?: string; padding?: string; textAlign?: string; textShadow?: string; transition?: string; webkitFontSmoothing?: string; webkitTransition?: string; wordSpacing?: string; } interface CardAllValidData { type: string; allValid: boolean; rootNode: HTMLElement; } interface CardAutoCompleteData { fieldType: string; name: string; value: string; action: string; } interface CardBinLookupData { type?: string; detectedBrands?: string[]; supportedBrands?: string[]; brands?: string[]; issuingCountryCode?: string; supportedBrandsRaw?: BrandObject[]; rootNode?: HTMLElement; isReset?: boolean; } interface CardBinValueData { type: string; binValue: string; uuid?: string; encryptedBin?: string; } interface CardBrandData { type: string; rootNode: HTMLElement; brand: string; cvcPolicy: CVCPolicyType; expiryDatePolicy?: DatePolicyType; cvcText: string; showSocialSecurityNumber?: boolean; brandImageUrl?: string; } interface CardConfigSuccessData { iframesConfigured: boolean; type: string; rootNode: HTMLElement; } interface CardErrorData { fieldType: string; error: string; type: string; rootNode?: HTMLElement; detectedBrands?: string[]; errorI18n?: string; errorText?: string; } interface CardFieldValidData { fieldType: string; encryptedFieldName: string; uid: string; valid: boolean; type: string; rootNode: HTMLElement; blob?: string; endDigits?: string; expiryDate?: string; issuerBin?: number; } interface CardFocusData { action: string; focus: boolean; numChars: number; fieldType: string; rootNode: HTMLElement; type: string; currentFocusObject: string; } interface CardLoadData { iframesLoaded: boolean; } type CVCPolicyType = typeof REQUIRED | typeof OPTIONAL | typeof HIDDEN; type DatePolicyType = typeof REQUIRED | typeof OPTIONAL | typeof HIDDEN; interface TimeoutErrorProps { source: string; scheme: string; isTimeoutTriggeredBySchemeSdk: boolean; } declare class TimeoutError extends Error { scheme: string; source: string; isTimeoutTriggeredBySchemeSdk: boolean; /** Currently populated only by Visa SDK if available */ correlationId?: string; constructor(options: TimeoutErrorProps); setCorrelationId(correlationId: string): void; toString(): string; } type ClickToPayProps = { /** * Shopper email used to be recognized with the Network schemes */ shopperEmail?: string; /** * Shopper telephone number used to be recognized with the Network schemes */ telephoneNumber?: string; /** * 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 ) * * @defaultValue en_US */ locale?: string; /** * Disable autofocus on the One Time Password input field when it is either displayed or when the OTP is resent * @defaultValue false */ disableOtpAutoFocus?: boolean; /** * Callback triggered when the Click to Pay component is ready to be used */ onReady?(): void; /** * Callback triggered when a timeout happens within Click to Pay service. * Ex: Network schemes took too long to initialize */ onTimeout?(error: TimeoutError): void; }; type ClickToPayScheme = 'mc' | 'visa'; interface DisclaimerMsgObject { message: string; linkText: string; link: string; } interface RiskModuleOptions { enabled: boolean; onComplete?: (data: any) => void; onError?: (error: any) => void; node?: string; } interface RiskModuleProps extends BaseElementProps { risk: RiskModuleOptions; loadingContext: string; } declare class RiskElement extends BaseElement<RiskModuleProps> { static type: string; static defaultProps: { risk: { enabled: boolean; onComplete: () => void; onError: () => void; node: string; }; }; private nodeRiskContainer; constructor(checkout: ICore, props?: any); formatProps(props: any): any; onComplete: (result: any) => void; onError: (error: any) => void; get isValid(): any; get data(): any; get enabled(): boolean; cleanUp: () => void; componentWillUnmount(): void; render(): h.JSX.Element; } /** * PayPal Fastlane Reference: * https://developer.paypal.com/docs/checkout/fastlane/reference/#link-customizeyourintegration */ /** * Fastlane object available in the window */ interface FastlaneWindowInstance { identity: { lookupCustomerByEmail: (email: string) => Promise<{ customerContextId: string; }>; triggerAuthenticationFlow: (customerContextId: string, options?: AuthenticationFlowOptions) => Promise<FastlaneAuthenticatedCustomerResult>; getSession: () => Promise<{ sessionId: string; }>; }; profile: { showShippingAddressSelector: () => Promise<FastlaneShippingAddressSelectorResult>; }; setLocale: (locale: string) => void; ConsentComponent: () => Promise<{ getRenderState: () => Promise<FastlaneConsentRenderState>; }>; FastlaneWatermarkComponent: (options: { includeAdditionalInfo: boolean; }) => Promise<{ render: (container: any) => null; }>; } interface FastlaneConsentRenderState { showConsent: boolean; defaultToggleState?: boolean; termsAndConditionsLink?: string; termsAndConditionsVersion?: string; privacyPolicyLink?: string; } interface FastlaneOptions { intendedExperience: 'externalProcessorCustomConsent'; metadata?: { geoLocOverride?: string; }; } interface AuthenticationFlowOptions { } interface CardPaymentSource { brand: string; expiry: string; lastDigits: string; name: string; billingAddress: FastlaneAddress; } /** * External types */ interface FastlaneShippingAddressSelectorResult { selectionChanged: boolean; selectedAddress: FastlaneShipping; } interface FastlaneAuthenticatedCustomerSucceeded { authenticationState: 'succeeded'; profileData: FastlaneProfile; } interface FastlaneAuthenticatedCustomerFailed { authenticationState: 'failed' | 'canceled' | 'not_found'; profileData: undefined; } type FastlaneAuthenticatedCustomerResult = FastlaneAuthenticatedCustomerSucceeded | FastlaneAuthenticatedCustomerFailed; interface FastlaneAddress { addressLine1: string; addressLine2: string; adminArea1: string; adminArea2: string; postalCode: string; countryCode: string; phone: { nationalNumber: string; countryCode: string; }; } interface FastlaneShipping { name: { firstName: string; lastName: string; fullName: string; }; address: FastlaneAddress; phoneNumber: { nationalNumber: string; countryCode: string; }; } interface FastlaneProfile { name: { firstName: string; lastName: string; fullName: string; }; shippingAddress: FastlaneShipping; card?: { id: string; paymentSource: { card: CardPaymentSource; }; }; } type FastlaneComponentConfiguration = { paymentType: 'fastlane'; configuration: { fastlaneSessionId: string; email: string; tokenId: string; lastFour: string; brand: string; }; }; type FastlaneCardComponentConfiguration = { paymentType: 'card'; configuration: { fastlaneConfiguration: FastlaneSignupConfiguration; }; }; type FastlaneSignupConfiguration = FastlaneConsentRenderState & { fastlaneSessionId?: string; telephoneNumber?: string; }; type FastlanePaymentMethodConfiguration = FastlaneComponentConfiguration | FastlaneCardComponentConfiguration; interface FastlaneSDKConfiguration { clientKey: string; environment: CoreConfiguration['environment']; locale?: 'en-US' | 'es-US' | 'fr-RS' | 'zh-US'; /** * Used to force the Fastlane SDK to return the consent details in case the shopper is not recognized. * Use-case: Developer is testing the flow in another country outside US, which would not get consent details. * * This configuration should not be used for 'live' environment */ forceConsentDetails?: boolean; } interface FastlaneConfiguration extends UIElementProps { /** * Card token ID, used to process the payment */ tokenId: string; /** * Fastlane session ID */ fastlaneSessionId: string; /** * Initial last four digits displayed once the Component is rendered */ lastFour: string; /** * Initial brand displayed once the Component is rendered */ brand: string; /** * Shopper's email (it will be used in the future to re-authenticate using Fastlane SDK within the Component) */ email: string; /** * Used internally by Drop-in. Displays the brand images inside the Drop-in payment method header * @internal */ keepBrandsVisible?: boolean; /** * Property returned by the backend. Contains the list of brands supported by Fastlane component * @internal */ brands?: string[]; } declare abstract class AnalyticsEvent { timestamp: string; id: string; component: string; abstract getEventCategory(): string; constructor(); } interface SFError { isValid?: boolean; errorMessage?: string; errorI18n?: string; error: string; rootNode: HTMLElement; detectedBrands?: string[]; } interface ValidationRuleErrorObj { [key: string]: ValidationRuleResult; } interface AriaAttributes { 'aria-relevant'?: 'additions' | 'all' | 'removals' | 'text' | 'additions text'; 'aria-live'?: 'off' | 'polite' | 'assertive'; 'aria-atomic'?: 'true' | 'false'; } interface SRPanelProps extends BaseElementProps { enabled?: boolean; node?: string; showPanel?: boolean; moveFocus?: boolean; id?: string; ariaAttributes?: AriaAttributes; } type SRPanelConfig = Pick<SRPanelProps, 'enabled' | 'node' | 'showPanel' | 'moveFocus' | 'id' | 'ariaAttributes'>; interface GenericError { isValid: boolean; errorMessage: string; error: string; } /** * A panel meant to hold messages that will be read out by ScreenReaders on an aria-live="polite" basis * Expects a string or string array of message to add to the panel to be read out * For testing purposes can be made visible */ declare class SRPanel extends BaseElement<SRPanelProps> { static type: string; static defaultProps: Partial<SRPanelProps>; private readonly srPanelContainer; private readonly id; private readonly showPanel; private readonly _enabled; private readonly _moveFocus; private componentRef; constructor(checkout: ICore, props?: SRPanelProps); setComponentRef: (ref: any) => void; get enabled(): boolean; get moveFocus(): boolean; setAriaProps(ariaAttributes: AriaAttributes): void; setMessages: (messages: string[] | string) => void; render(): h.JSX.Element; } interface BaseElementProps { order?: Order; modules?: { srPanel?: SRPanel; analytics?: AnalyticsModule; resources?: Resources; risk?: RiskElement; }; isDropin?: boolean; } interface IBaseElement { data: object; state: any; props: any; _id: string; _component: any; render(): ComponentChild | Error; mount(domNode: HTMLElement | string): IBaseElement; update(props: any): IBaseElement; unmount(): IBaseElement; remove(): void; activate(): void; } type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'action' | 'link'; interface ButtonProps { status?: string; /** * Class name modifiers will be used as: `adyen-checkout__button--${modifier}` */ classNameModifiers?: string[]; variant?: ButtonVariant; disabled?: boolean; label?: string | h.JSX.Element; ariaLabel?: string; secondaryLabel?: string; icon?: string; inline?: boolean; href?: string; target?: string; rel?: string; onClick?: (e: any, callbacks: any) => void; onKeyDown?: (event: KeyboardEvent) => void; buttonRef?: Ref<HTMLButtonElement>; } interface PayButtonProps extends ButtonProps { /** * Class name modifiers will be used as: `adyen-checkout__image--${modifier}` */ classNameModifiers?: string[]; label?: string; amount: PaymentAmountExtended; secondaryAmount?: PaymentAmountExtended; status?: string; disabled?: boolean; icon?: string; onClick?(): void; } type PayButtonFunctionProps = Omit<PayButtonProps, 'amount'>; type CoreCallbacks$1 = Pick<CoreConfiguration, 'beforeRedirect' | 'beforeSubmit' | 'onSubmit' | 'onAdditionalDetails' | 'onPaymentFailed' | 'onPaymentCompleted' | 'onOrderUpdated' | 'onPaymentMethodsRequest' | 'onChange' | 'onActionHandled' | 'onError' | 'onEnterKeyPressed'>; type StatusFromAction = 'redirect' | 'loading' | 'custom'; type UIElementProps = BaseElementProps & CoreCallbacks$1 & { environment?: string; session?: Session; onComplete?: (state: any, element: UIElement) => void; isInstantPayment?: boolean; /** * Flags if the element is Stored payment method * @internal */ isStoredPaymentMethod?: boolean; /** * Flag if the element is Stored payment method. * Perhaps can be deprecated and we use the one above? * @internal */ oneClick?: boolean; /** * Stored payment method id * @internal */ storedPaymentMethodId?: string; /** * Status set when creating the Component from action * @internal */ statusType?: StatusFromAction; type?: string; name?: string; icon?: string; amount?: PaymentAmount; secondaryAmount?: PaymentAmountExtended; /** * Show/Hide pay button * @defaultValue true */ showPayButton?: boolean; /** @internal */ payButton?: (options: PayButtonFunctionProps) => h.JSX.Element; /** @internal */ loadingContext?: string; /** @internal */ createFromAction?: (action: PaymentAction, props: object) => UIElement; /** @internal */ clientKey?: string; /** @internal */ elementRef?: any; /** @internal */ i18n?: Language; /** * The shopper’s issuer account label. It can be available for stored payment method * @internal */ label?: string; /** * Returned after the payments call, when an action is returned. It represents the payment method tx variant * that was used for the payment * @internal */ paymentMethodType?: string; /** * Reference to the action object found in a /payments response. This, in most cases, is passed on to the onActionHandled callback */ originalAction?: PaymentAction; }; type UIElementStatus = 'ready' | 'loading' | 'error' | 'success'; interface ComponentMethodsRef { showValidation?: () => void; setStatus?(status: UIElementStatus): void; } type PlaceholderKeys = 'holderName' | 'cardNumber' | 'expiryDate' | 'expiryMonth' | 'expiryYear' | 'securityCodeThreeDigits' | 'securityCodeFourDigits' | 'password'; type CardPlaceholders = Partial<Record<PlaceholderKeys, string>>; interface CardConfiguration extends UIElementProps { /** * Automatically shift the focus from one field to another. Usually happens from a valid Expiry Date field to the Security Code field, * but some BINS also allow us to know that the PAN is complete, in which case we can shift focus to the date field * @defaultValue `true` * * - merchant set config option */ autoFocus?: boolean; /** * Config t olimit the countries that will show in the country dropdown * - merchant set config option */ billingAddressAllowedCountries?: string[]; /** * If billingAddressRequired is set to true, you can set this to partial to require the shopper's postal code instead of the full address. * @defaultValue full * * - merchant set config option */ billingAddressMode?: 'full' | 'partial' | 'none'; /** * Show Address fields * @defaultValue `false` * * - merchant set config option */ billingAddressRequired?: boolean; /** * Config to specify which address field are required * - merchant set config option */ billingAddressRequiredFields?: string[]; /** * Only set for a stored card, * brand is never set for a generic card component OR a single-branded card * @internal */ brand?: string; /** * List of brands accepted by the component * @internal * - but can also be overwritten by merchant config option */ brands?: string[]; /** * Configuration specific to brands * - merchant set config option */ brandsConfiguration?: CardBrandsConfiguration; /** * Defines the size of the challenge Component * * 01: [250px, 400px] * 02: [390px, 400px] * 03: [500px, 600px] * 04: [600px, 400px] * 05: [100%, 100%] * * @defaultValue '02' * * - merchant set config option */ challengeWindowSize?: '01' | '02' | '03' | '04' | '05'; /** * Configuration for Click to Pay * - merchant set config option */ clickToPayConfiguration?: ClickToPayProps; /** * Configuration for displaying the Fastlane consent UI. */ fastlaneConfiguration?: FastlaneSignupConfiguration; /** * An object sent in the /paymentMethods response * @internal */ configuration?: CardBackendConfiguration; /** * Mostly used in relation to KCP cards * @internal */ countryCode?: string; /** * Object that contains placeholder information that you can use to prefill fields. * - merchant set config option */ data?: { holderName?: string; billingAddress?: Partial<AddressData>; }; /** * Disable Click to Pay for testing purposes * @defaultValue false * @internal */ _disableClickToPay?: boolean; /** * Turn on the procedure to force the arrow keys on an iOS soft keyboard to always be disabled * @defaultValue `false` * * - merchant set config option */ disableIOSArrowKeys?: boolean; /** * Object to configure the message and text for a disclaimer message, added after the Card input fields * - merchant set config option */ disclaimerMessage?: DisclaimerMsgObject; /** * Allow binLookup process to occur * @defaultValue `true` * * - merchant set config option */ doBinLookup?: boolean; /** * Config option related to whether we set storePaymentMethod in the card data, and showing/hiding the "store details" checkbox * - merchant set config option */ enableStoreDetails?: boolean; /** * Comes from Stored payment method object * @internal */ expiryMonth?: string; /** * Allows SF to return an unencrypted expiryDate * - merchant set config option */ exposeExpiryDate?: boolean; /** * Force securedFields to use the 'compat' version of JWE. (Use case: running custom http:// test environment * - merchant set config option */ forceCompat?: boolean; /** * Funding source field populated when 'splitCardFundingSources' is used * @internal */ fundingSource?: 'debit' | 'credit'; /** * Decides whether the CVC (Security Code) component will even be rendered. * Always true except when hideCVC set to false by merchant OR in the case of a *stored* BCMC card. * (For the Bancontact card comp this is set to true since dual-branding possibilities mean the BCMC card can now end up needing to show a CVC field) * @internal */ hasCVC?: boolean; /** * Show/hide the card holder name field * - merchant set config option */ hasHolderName?: boolean; /** * holderName coming from a stored card in /paymentMethods response * @internal */ holderName?: string; /** * Show/hide the Security Code field * - merchant set config option */ hideCVC?: boolean; /** * Whether the card holder name field will be required * - merchant set config option */ holderNameRequired?: boolean; /** * Relates to storedCards * @internal */ id?: string; /** * Configure the installment options for the card * - merchant set config option */ installmentOptions?: InstallmentOptions; /** * Implements a workaround for iOS/Safari bug where keypad doesn't retract when SF paymentMethod is no longer active * @defaultValue `true` * * - merchant set config option */ keypadFix?: boolean; /** * Related to storedCards - this information comes from the storedCardData once we process it * @internal */ lastFour?: string; /** * For some scenarios make the card input fields (PAN, Expiry Date, Security Code) have type="tel" rather than type="text" inputmode="numeric" * @defaultValue `false` * * - merchant set config option */ legacyInputMode?: boolean; /** * Adds type="password" to the Security code input field, causing its value to be masked * @defaultValue `false` * * - merchant set config option */ maskSecurityCode?: boolean; /** * Specify the minimum expiry date that will be considered valid * * - merchant set config option */ minimumExpiryDate?: string; /** * When in Dropin this is the name shown in the paymentMethods list * @defaultValue - derived from PaymentMethods response * @internal - but can also be overwritten by merchant config option */ name?: string; /** * Function used to perform 3rd party Address lookup * - merchant set config option */ onAddressLookup?: OnAddressLookupType; /** * After binLookup call - provides the brand(s) we detect the user is entering, and if we support the brand(s) * - merchant set config option */ onBinLookup?: (event: CardBinLookupData) => void; /** * Provides the BIN Number of the card (up to 6 digits), called as the user types in the PAN. * - merchant set config option */ onBinValue?: (event: CardBinValueData) => void; /** * Called when a field loses focus. * - merchant set config option */ onBlur?: (event: CardFocusData | ComponentFocusObject) => void; /** * Called once we detect the card brand. * - merchant set config option */ onBrand?: (event: CardBrandData) => void; /** * Called once the card input fields are ready to use. * - merchant set config option */ onConfigSuccess?: (event: CardConfigSuccessData) => void; /** * Called when *all* the securedFields becomes valid * Also called again if one of the fields moves out of validity. */ onAllValid?: (event: CardAllValidData) => void; /** * Called when a field becomes valid and also if a valid field changes and becomes invalid. * For the card number field, it returns the last 4 digits of the card number. * - merchant set config option */ onFieldValid?: (event: CardFieldValidData) => void; /** * Called when a field gains focus. * - merchant set config option */ onFocus?: (event: CardFocusData | ComponentFocusObject) => void; /** * Called once all the card input fields have been created but are not yet ready to use. * - merchant set config option */ onLoad?: (event: CardLoadData) => void; /** * Configure placeholder text for holderName, cardNumber, expirationDate, securityCode and password. * - merchant set config option */ placeholders?: CardPlaceholders; /** * Position holder name above card number field (instead of having it after the security code field) * @defaultValue `false` * * - merchant set config option */ positionHolderNameOnTop?: boolean; /** * Show/hide the brand logo when the card brand has been recognized * @defaultValue `true` * * - merchant set config option */ showBrandIcon?: boolean; /** * Show/hide the contextual text under each form field. The contextual text is to assist shoppers filling in the payment form. * @defaultValue `true` * * - merchant set config option */ showContextualElement?: boolean; /** * Set whether to show installments broken down into amounts or months * @defaultValue `true` * * - merchant set config option */ showInstallmentAmounts?: boolean; /** * Related to storedCards - this information comes from the storedCardData once we process it * @internal */ storedPaymentMethodId?: string; /** * Show/hide the "store details" checkbox * @internal */ showStoreDetailsCheckbox?: boolean; /** * Object to configure the styling of the inputs in the iframes that are used to present the PAN, Expiry Date & Security Code fields * - merchant set config option */ styles?: StylesObject; /** * Relates to storedCards and the type of interactions they support e.g. "Ecommerce", "ContAuth" etc * @internal */ supportedShopperInteractions?: string[]; /** * 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 * @internal */ type?: string; } 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 */ interface CardBackendConfiguration { visaSrciDpaId?: string; visaSrcInitiatorId?: string; mcSrcClientId?: string; mcDpaId?: string; merchantIdentifier?: string; merchantOrigin?: string; gatewayMerchantId?: string; publicKeyId?: string; region?: string; merchantName?: string; merchantId?: string; intent?: string; koreanAuthenticationRequired?: boolean; socialSecurityNumberMode?: SocialSecurityMode; icon?: string; brandsConfiguration?: CardBrandsConfiguration; } interface BrandConfiguration { name?: string; icon?: string; } interface CardBrandsConfiguration { [key: string]: BrandConfiguration; } interface CardPaymentMethodData { type: string; brand?: string; storedPaymentMethodId?: string; fundingSource?: 'debit' | 'credit'; holderName?: string; encryptedCardNumber?: string; encryptedExpiryMonth?: string; encryptedExpiryYear?: string; encryptedSecurityCode?: string; } interface CardElementData { paymentMethod: CardPaymentMethodData; billingAddress?: AddressData; installments?: { value: number; }; storePaymentMethod?: boolean; browserInfo: BrowserInfo; origin?: string; } interface BrandObject { brand: string; localeBrand?: string; cvcPolicy: CVCPolicyType; enableLuhnCheck: boolean; showExpiryDate?: boolean; expiryDatePolicy?: DatePolicyType; showSocialSecurityNumber?: boolean; supported: boolean; brandImageUrl?: string; panLength?: number; paymentMethodVariant?: string; } interface BinLookupResponseRaw { requestId: string; issuingCountryCode?: string; brands?: BrandObject[]; showSocialSecurityNumber?: boolean; status: number; errorCode: string; message: string; errorType: string; } /** * Mapped & simplified version of BinLookupResponseRaw */ interface BinLookupResponse { issuingCountryCode: string; showSocialSecurityNumber?: boolean; supportedBrands?: BrandObject[]; } interface DualBrandSelectElement { id: string; brandObject: BrandObject; } interface InstallmentOptions { [key: string]: { values: number[]; plans?: string[]; preselectedValue?: number; }; } type CheckoutSession = { id: string; sessionData: string; shopperLocale?: string; shopperEmail?: string; telephoneNumber?: string; }; type SessionConfiguration = { installmentOptions?: InstallmentOptions; enableStoreDetails?: boolean; }; type CheckoutSessionSetupResponse = { id: string; sessionData: string; countryCode?: string; amount: PaymentAmount; expiresAt: string; paymentMethods: any; returnUrl: string; configuration: SessionConfiguration; /** * 'shopperLocale' set during session creation. * @defaultValue en-US */ shopperLocale: string; }; type CheckoutSessionPaymentResponse = { sessionData: string; sessionResult: string; status?: string; resultCode: ResultCode; action?: PaymentAction; }; type CheckoutSessionDetailsResponse = { sessionData: string; sessionResult: string; resultCode: ResultCode; status?: string; action?: PaymentAction; }; type CheckoutSessionBalanceResponse = { sessionData: string; balance?: PaymentAmount; transactionLimit?: PaymentAmount; }; type CheckoutSessionOrdersResponse = { sessionData: string; orderData: string; pspReference: string; }; type SetupSessionOptions = { browserInfo?: BrowserInfo; order?: Order; }; type NewableComponent = new (checkout: ICore, props?: any) => UIElement; interface IRegistry { add(...items: NewableComponent[]): void; getComponent(type: string): NewableComponent | undefined; } interface CompanyDetailsSchema { name?: string; registrationNumber?: string; } type OpenInvoiceAddressSpecification = AddressSpecifications & { allowedCountries?: string[]; }; interface OpenInvoiceVisibility { companyDetails?: FieldsetVisibility; personalDetails?: FieldsetVisibility; billingAddress?: FieldsetVisibility; deliveryAddress?: FieldsetVisibility; bankAccount?: FieldsetVisibility; } interface BankDetailsSchema { countryCode?: string; ibanNumber?: any; ownerName?: string; } interface OpenInvoiceProps extends UIElementProps { allowedCountries?: string[]; consentCheckboxLabel: any; countryCode?: string; data: { companyDetails?: CompanyDetailsSchema; personalDetails?: PersonalDetailsSchema; billingAddress?: AddressData; deliveryAddress?: AddressData; bankAccount?: BankDetailsSchema; }; onChange: (state: any, element?: UIElement) => void; payButton: any; visibility?: OpenInvoiceVisibility; personalDetailsRequiredFields?: string[]; billingAddressRequiredFields?: string[]; billingAddressSpecification?: OpenInvoiceAddressSpecification; deliveryAddressRequiredFields?: string[]; deliveryAddressSpecification?: OpenInvoiceAddressSpecification; setComponentRef?: (ref: any) => void; } interface OpenInvoiceStateData { companyDetails?: CompanyDetailsSchema; personalDetails?: PersonalDetailsSchema; billingAddress?: AddressData; deliveryAddress?: AddressData; bankAccount?: BankDetailsSchema; consentCheckbox?: boolean; } interface OpenInvoiceStateError { consentCheckbox?: boolean | GenericError; companyDetails?: boolean | ValidationRuleErrorObj; billingAddress?: boolean | ValidationRuleErrorObj; deliveryAddress?: boolean | ValidationRuleErrorObj; personalDetails?: boolean | ValidationRuleErrorObj; bankAccount?: boolean | object; } interface OpenInvoiceStateValid { consentCheckbox?: boolean; companyDetails?: boolean; billingAddress?: boolean; deliveryAddress?: boolean; personalDetails?: boolean; bankAccount?: boolean; } interface OpenInvoiceActiveFieldsets { companyDetails: boolean; personalDetails: boolean; billingAddress: boolean; deliveryAddress: boolean; bankAccount: boolean; } interface OpenInvoiceFieldsetsRefs { companyDetails?: any; personalDetails?: any; billingAddress?: any; deliveryAddress?: any; bankAccount?: any; } interface OpenInvoiceConfiguration extends Partial<OpenInvoiceProps> { consentCheckboxLabel?: h.JSX.Element; billingAddressRequiredFields?: string[]; billingAddressSpecification?: AddressSpecifications; } declare class OpenInvoiceContainer extends UIElement<OpenInvoiceConfiguration> { protected static defaultProps: Partial<OpenInvoiceConfiguration>; /** * Returns whether the component state is valid or not */ get isValid(): boolean; /** * Formats props on construction time */ formatProps(props: any): any; /** * Formats the component data output */ formatData(): any; render(): h.JSX.Element; } declare enum TxVariants { /** internal */ address = "address", bankTransfer_IBAN = "bankTransfer_IBAN", donation = "donation", personal_details = "personal_details", dropin = "dropin", /** internal */ /** Card */ bcmc = "bcmc", card = "card", scheme = "scheme", storedCard = "storedCard", customCard = "customcard", /** Card */ /** ThreeDS */ threeDS2Challenge = "threeDS2Challenge", threeDS2Fingerprint = "threeDS2Fingerprint", threeDS2DeviceFingerprint = "threeDS2DeviceFingerprint", /** ThreeDS */ /** Direct debit */ ach = "ach", directdebit_GB = "directdebit_GB", sepadirectdebit = "sepadirectdebit", /** Direct debit */ /** Open Invoice */ affirm = "affirm", afterpay = "afterpay", afterpay_default = "afterpay_default", afterpay_b2b = "afterpay_b2b", atome = "atome", facilypay_3x = "facilypay_3x", facilypay_4x = "facilypay_4x", facilypay_6x = "facilypay_6x", facilypay_10x = "facilypay_10x", facilypay_12x = "facilypay_12x", ratepay = "ratepay", ratepay_directdebit = "ratepay_directdebit", /** Open Invoice */ /** Wallets */ amazonpay = "amazonpay", applepay = "applepay", cashapp = "cashapp", clicktopay = "clicktopay", googlepay = "googlepay", paypal = "paypal", fastlane = "fastlane", paywithgoogle = "paywithgoogle", /** Wallets */ /** Voucher */ boletobancario = "boletobancario", boletobancario_itau = "boletobancario_itau", boletobancario_santander = "boletobancario_santander", primeiropay_boleto = "primeiropay_boleto", doku = "doku", doku_alfamart = "doku_alfamart", doku_permata_lite_atm = "doku_permata_lite_atm", doku_indomaret = "doku_indomaret", doku_atm_mandiri_va = "doku_atm_mandiri_va", doku_sinarmas_va = "doku_sinarmas_va", doku_mandiri_va = "doku_mandiri_va", doku_cimb_va = "doku_cimb_va", doku_danamon_va = "doku_danamon_va", doku_bri_va = "doku_bri_va", doku_bni_va = "doku_bni_va", doku_bca_va = "doku_bca_va", doku_wallet = "doku_wallet", oxxo = "oxxo", /** Voucher */ /** issuerList */ billdesk_online = "billdesk_online", billdesk_wallet = "billdesk_wallet", dotpay = "dotpay", eps = "eps", molpay_ebanking_fpx_MY = "molpay_ebanking_fpx_MY", molpay_ebanking_TH = "molpay_ebanking_TH", molpay_ebanking_VN = "molpay_ebanking_VN", onlineBanking_CZ = "onlineBanking_CZ", onlinebanking_IN = "onlinebanking_IN", onlineBanking_PL = "onlineBanking_PL", onlineBanking_SK = "onlineBanking_SK", paybybank = "paybybank", payu_IN_cashcard = "payu_IN_cashcard", payu_IN_nb = "payu_IN_nb", wallet_IN = "wallet_IN", /** issuerList */ /** Dragonpay */ dragonpay = "dragonpay", dragonpay_ebanking = "dragonpay_ebanking", dragonpay_otc_banking = "dragonpay_otc_banking", dragonpay_otc_non_banking = "dragonpay_otc_non_banking", dragonpay_otc_philippines = "dragonpay_otc_philippines", /** Dragonpay */ /** Econtext */ econtext = "econtext", econtext_atm = "econtext_atm", econtext_online = "econtext_online", econtext_seven_eleven = "econtext_seven_eleven", econtext_stores = "econtext_stores", /** Econtext */ /** Redirect */ giropay = "giropay", multibanco = "multibanco", redirect = "redirect", twint = "twint", vipps = "vipps", trustly = "trustly", paybybank_AIS_DD = "paybybank_AIS_DD", riverty = "riverty", paybybank_pix = "paybybank_pix", /** Redirect */ /** Klarna */ klarna = "klarna", klarna_account = "klarna_account", klarna_paynow = "klarna_paynow", klarna_b2b = "klarna_b2b", /** Klarna */ /** QRLoader */ bcmc_mobile = "bcmc_mobile", bcmc_mobile_QR = "bcmc_mobile_QR", pix = "pix", swish = "swish", wechatpay = "wechatpay", wechatpayQR = "wechatpayQR", promptpay = "promptpay", paynow = "paynow", duitnow = "duitnow", /** QRLoader */ /** Await */ blik = "blik", mbway = "mbway", ancv = "ancv", payto = "payto", upi = "upi",// also QR upi_qr = "upi_qr",// also QR upi_collect = "upi_collect",// also QR upi_intent = "upi_intent",// also QR /** Await */ /** Giftcard */ giftcard = "giftcard", mealVoucher_FR = "mealVoucher_FR", mealVoucher_FR_natixis = "mealVoucher_FR_natixis", mealVoucher_FR_sodexo = "mealVoucher_FR_sodexo", mealVoucher_FR_groupeup = "mealVoucher_FR_groupeup" /** Giftcard */ } declare class AfterPay extends OpenInvoiceContainer { static type: TxVariants; static txVariants: TxVariants[]; formatProps(props: any): any; } declare class AfterPayB2B extends OpenInvoiceContainer { static type: TxVariants; protected static defaultProps: Partial<OpenInvoiceConfiguration>; formatProps(props: any): any; } declare const SUPPORTED_LOCALES_EU: readonly ["en_GB", "de_DE", "fr_FR", "it_IT", "es_ES"]; declare const SUPPORTED_LOCALES_US: readonly ["en_US"]; declare global { interface Window { amazon: object; } } type ButtonColor = 'Gold' | 'LightGray' | 'DarkGray'; type Placement = 'Home' | 'Product' | 'Cart' | 'Checkout' | 'Other'; type ProductType = 'PayOnly' | 'PayAndShip'; type ChargePermissionType = 'OneTime' | 'Recurring'; type FrequencyUnit = 'Year' | 'Month' | 'Week' | 'Day' | 'Variable'; type Currency = 'EUR' | 'GBP' | 'USD'; type Region = 'EU' | 'UK' | 'US'; type SupportedLocale = (typeof SUPPORTED_LOCALES_EU)[number] | (typeof SUPPORTED_LOCALES_US)[number]; interface RecurringMetadata { frequency: { unit: string; value: FrequencyUnit; }; amount: { amount: string; currencyCode: Currency; }; } interface AmazonPayBackendConfiguration { merchantId?: string; publicKeyId?: string; region?: Region; storeId?: string; } interface AmazonPayConfiguration extends UIElementProps { addressDetails?: AddressDetails; amazonPayToken?: string; amazonCheckoutSessionId?: string; amount?: PaymentAmount; buttonColor?: ButtonColor; cancelUrl?: string; chargePermissionType?: ChargePermissionType; clientKey?: string; configuration?: AmazonPayBackendConfiguration; currency?: Currency; deliverySpecifications?: DeliverySpecifications; environment?: string; loadingContext?: string; locale?: string; merchantMetadata?: MerchantMetadata; onSubmit?(state: any, element: AmazonPayElement, actions: { resolve: (response: CheckoutAdvancedFlowResponse) => void; reject: () => void; }): void; payButton?: any; placement?: Placement; productType?: ProductType; recurringMetadata?: RecurringMetadata; returnUrl?: string; showChangePaymentDetailsButton?: boolean; showOrderButton?: boolean; showSignOutButton?: boolean; signature?: string; onClick?: (resolve: any, reject: any) => Promise<void>; onError?: (error: any, component: any) => void; onSignOut?: (resolve: any, reject: any) => Promise<void>; /** * Used for analytics */ expressPage?: 'cart' | 'minicart' | 'pdp' | 'checkout'; /** * Used for analytics * @defaultValue false */ isExpress?: boolean; } interface AmazonPayComponentProps extends AmazonPayConfiguration { showSignOutButton?: boolean; amazonCheckoutSessionId?: string; showOrderButton?: boolean; showChangePaymentDetailsButton?: boolean; onClick: (resolve: any, reject: any) => Promise<void>; onError: (error: any, component: any) => void; onSignOut: (resolve: any, reject: any) => Promise<void>; ref: any; } interface AmazonPayButtonProps { amount?: PaymentAmount; amazonRef: any; buttonColor?: ButtonColor; cancelUrl?: string; chargePermissionType?: ChargePermissionType; clientKey?: string; configuration?: AmazonPayBackendConfiguration; currency?: Currency; deliverySpecifications?: DeliverySpecifications; design?: string; environment?: string; locale?: string; onClick: (resolve: any, reject: any) => Promise<void>; onError: (error: any, component: any) => void; placement?: Placement; productType?: ProductType; recurringMetadata?: RecurringMetadata; ref: any; returnUrl?: string; showPayButton: boolean; } interface SignOutButtonProps { amazonRef: any; onSignOut: (resolve: any, reject: any) => Promise<void>; } interface ChangePaymentDetailsButtonProps { amazonCheckoutSessionId: string; amazonRef: any; } interface ChangeActionOptions { amazonCheckoutSessionId: string; changeAction: 'changeAddress' | 'changePayment'; } interface OrderButtonProps { amazonCheckoutSessionId: string; amount: PaymentAmount; clientKey: string; chargePermissionType?: ChargePermissionType; onError: (error: any, component: any) => void; recurringMetadata: RecurringMetadata; ref: any; region: Region; returnUrl: string; publicKeyId: string; } interface AmazonPayElementData { paymentMethod: { type: string; checkoutSessionId?: string; }; browserInfo: BrowserInfo; } interface AmazonPayButtonSettings { buttonColor?: ButtonColor; design?: string; /** * Amazon Pay merchant account identifier */ merchantId: string; /** * Sets button to Sandbox environment */ sandbox: boolean; /** * Product type selected for checkout */ productType: ProductType; /** * Placement of the Amazon Pay button on your website */ placement: Placement; /** * Language used to render the button and text on Amazon Pay hosted pages. Please note that supported language(s) is dependent on the region that your Amazon Pay account was registered for */ checkoutLanguage: SupportedLocale; /** * Ledger currency provided during registration for the given merchant identifier */ ledgerCurrency: Currency; } interface MerchantMetadata { customInformation?: string; merchantReferenceId?: string; merchantStoreName?: string; noteToBuyer?: string; } interface AddressDetails { name?: string; addressLine1?: string; addressLine2?: string; addressLine3?: string; city?: string; districtOrCounty?: string; stateOrRegion?: string; postalCode?: string; coun