@adyen/adyen-web

/// <reference types="applepayjs" /> /// <reference types="googlepay" /> import * as preact from 'preact'; import { h, Ref, Component, FunctionComponent, ComponentChild, RefObject } 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 ValidatorRules = { [field: string]: ValidatorRule | ValidatorRule[]; }; type OnAddressLookupType = (value: string, actions: { resolve: (value: Array<AddressLookupItem>) => void; reject: (reason?: any) => void; }) => Promise<void>; type OnAddressSelectedType = (value: AddressLookupItem, actions: { resolve: (value: AddressLookupItem) => void; reject: (reason?: any) => void; }) => Promise<void>; type StringObject = { [key: string]: string; }; interface AddressProps { allowedCountries?: string[]; countryCode?: string; data?: object; label?: string; onChange: (newState: any) => void; onAddressLookup?: OnAddressLookupType; onAddressSelected?: OnAddressSelectedType; addressSearchDebounceMs?: number; requiredFields?: string[]; ref?: any; specifications?: AddressSpecifications; validationRules?: ValidatorRules; visibility?: string; overrideSchema?: AddressSpecifications; iOSFocusedField?: string; payButton?: (obj: any) => {}; setComponentRef?: (ref: any) => void; showContextualElement?: boolean; onFieldFocusAnalytics?: (who: string, event: Event) => void; onFieldBlurAnalytics?: (who: string, event: Event) => void; } 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 PaymentMethod = RawPaymentMethod & { /** * Internal ID generated when parsing the payment method list */ _id: string; }; type StoredPaymentMethod = RawStoredPaymentMethod & { /** * A unique identifier of this stored payment method. Mapped from 'storedPaymentMethod.id' * @internal */ storedPaymentMethodId?: string; /** * Internal flag * @internal */ isStoredPaymentMethod?: boolean; }; declare class PaymentMethods$1 { paymentMethods: PaymentMethod[]; storedPaymentMethods: StoredPaymentMethod[]; constructor(response: PaymentMethodsResponse, options?: {}); private mapCreatedComponentType; has(paymentMethod: string): boolean; find(paymentMethod: string): PaymentMethod; /** * Finds a payment method matching both type and funding source. * Used when `splitCardFundingSources` is enabled, which results in multiple payment methods * of the same type but with different fundingSource values (e.g. credit, debit, prepaid). * Falls back to the first match by type if no funding source match is found. */ findByFundingSource(paymentMethod: string, fundingSource: string): PaymentMethod; findById(paymentMethodId: string): PaymentMethod; findStoredPaymentMethod(storedPaymentMethodId: string): StoredPaymentMethod; } 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; } interface CheckoutErrorOptions { cause?: any; code?: string; } declare class AdyenCheckoutError extends Error { protected static readonly errorTypes: { /** Network error. */ NETWORK_ERROR: string; /** Shopper canceled the current transaction. */ CANCEL: string; /** Implementation error. The method or parameter are incorrect or are not supported. */ IMPLEMENTATION_ERROR: string; /** API error. The API has not returned the expected data */ API_ERROR: string; /** Generic error. */ ERROR: string; /** Script error. The browser failed to load 3rd party script */ SCRIPT_ERROR: string; /** Something has gone wrong internally */ SDK_ERROR: string; }; cause: unknown; options: CheckoutErrorOptions; constructor(type: keyof typeof AdyenCheckoutError.errorTypes, message?: string, options?: CheckoutErrorOptions); } type InstallmentPlan = 'revolving' | 'bonus' | 'regular'; interface InstallmentOption { values: number[]; plans?: InstallmentPlan[]; preselectedValue?: number; } interface InstallmentOptions { [key: string]: InstallmentOption; } 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: Omit<PaymentAmount, 'currencyDisplay'>; 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 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 Intl.DateTimeFormatOptions} */ date(date: string, options?: Intl.DateTimeFormatOptions): string; /** * Returns a localized string for a date and time * @param date - Date to be localized */ dateTime(date: string): string; } type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'action' | 'link' | 'iconOnly'; 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; onClickCompletedLabel?: string | h.JSX.Element; ariaLabel?: string; ariaDescribedBy?: string; secondaryLabel?: string; icon?: string; onClickCompletedIcon?: string; inline?: boolean; href?: string; target?: string; rel?: string; onClick?: (e: h.JSX.TargetedMouseEvent<HTMLButtonElement | HTMLAnchorElement>, callbacks?: { complete?: () => void; }) => void; onKeyDown?: (event: KeyboardEvent) => void; onKeyPress?: (event: KeyboardEvent) => void; buttonRef?: Ref<HTMLButtonElement>; onMouseEnter?: (event: MouseEvent) => void; onMouseLeave?: (event: MouseEvent) => void; onFocus?: (event: FocusEvent) => void; onBlur?: (event: FocusEvent) => void; } interface PayButtonProps extends ButtonProps { /** * Class name modifiers will be used as: `adyen-checkout__image--${modifier}` */ classNameModifiers?: string[]; /** * Custom amount that can be passed to the button. * This is useful when the amount is not available in the amount provider, such as Giftcard scenario where * we need to display the remaining amount */ customAmount?: PaymentAmount; label?: string; status?: string; disabled?: boolean; icon?: string; } type AchForm = { selectedAccountType: string; ownerName: string; routingNumber: string; accountNumber: string; accountNumberVerification: string; }; type AchFormPrefillData = Partial<Pick<AchForm, 'ownerName'>>; interface AchConfiguration extends UIElementProps { /** * Pre-fill ACH form with shopper data */ data?: AchFormPrefillData; /** * Adds placeholder text to the input fields */ placeholders?: AchPlaceholders; /** * Set to false to hide the "Account Holder Name" field if you want to pass the data yourself * @default true */ hasHolderName?: boolean; /** * Enables storing the payment method using the Checkbox * @default false */ enableStoreDetails?: boolean; /** * storedPaymentMethodId coming from a stored ACH in /paymentMethods response * @internal */ storedPaymentMethodId?: string; /** * bankAccountNumber coming from a stored ACH in /paymentMethods response * @internal */ bankAccountNumber?: string; } interface AchPlaceholders { accountTypeSelector?: string; ownerName?: string; routingNumber?: string; accountNumber?: string; accountNumberVerification?: string; } 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 enum TxVariants { /** internal */ address = "address", bankTransfer_IBAN = "bankTransfer_IBAN", bankTransfer_BE = "bankTransfer_BE", bankTransfer_NL = "bankTransfer_NL", bankTransfer_PL = "bankTransfer_PL", bankTransfer_FR = "bankTransfer_FR", bankTransfer_CH = "bankTransfer_CH", bankTransfer_IE = "bankTransfer_IE", bankTransfer_GB = "bankTransfer_GB", bankTransfer_DE = "bankTransfer_DE", bankTransfer_AE = "bankTransfer_AE", bankTransfer_AT = "bankTransfer_AT", bankTransfer_AU = "bankTransfer_AU", bankTransfer_BG = "bankTransfer_BG", bankTransfer_CA = "bankTransfer_CA", bankTransfer_EE = "bankTransfer_EE", bankTransfer_ES = "bankTransfer_ES", bankTransfer_FI = "bankTransfer_FI", bankTransfer_HK = "bankTransfer_HK", bankTransfer_HU = "bankTransfer_HU", bankTransfer_IT = "bankTransfer_IT", bankTransfer_JP = "bankTransfer_JP", bankTransfer_LU = "bankTransfer_LU", bankTransfer_NZ = "bankTransfer_NZ", bankTransfer_PT = "bankTransfer_PT", bankTransfer_SG = "bankTransfer_SG", bankTransfer_SK = "bankTransfer_SK", bankTransfer_US = "bankTransfer_US", 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", eft_directdebit_CA = "eft_directdebit_CA", /** 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", iris = "iris", 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_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 AmazonPayElement extends UIElement<AmazonPayConfiguration> { static readonly type = TxVariants.amazonpay; protected static readonly defaultProps: Partial<AmazonPayConfiguration>; formatProps(props: any): any; /** * Formats the component data output */ formatData(): AmazonPayElementData; protected beforeRender(configSetByMerchant?: AmazonPayConfiguration): void; getShopperDetails(): void | Promise<any>; handleDeclineFlow(): void; get isValid(): boolean; get browserInfo(): BrowserInfo; submit(): void; protected componentToRender(): h.JSX.Element; } 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?: (props: PayButtonProps) => h.JSX.Element; 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 { 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; 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; countryCode?: string; phoneNumber?: string; } interface ChargeAmount { amount: string; currencyCode: Currency; } type LedgerCurrencies = { [key in Region]: Currency; }; interface PayloadJSON { addressDetails?: AddressDetails; chargePermissionType?: ChargePermissionType; deliverySpecifications?: DeliverySpecifications; merchantMetadata?: MerchantMetadata; paymentDetails?: { chargeAmount: ChargeAmount; paymentIntent: 'Confirm'; presentmentCurrency: Currency; totalOrderAmount: ChargeAmount; }; recurringMetadata?: RecurringMetadata; storeId: string; webCheckoutDetails: { checkoutCancelUrl?: string; checkoutMode?: 'ProcessOrder'; checkoutResultReturnUrl?: string; checkoutReviewReturnUrl?: string; }; } interface CheckoutDetailsRequest { checkoutSessionId: string; getDeliveryAddress?: boolean; getDeclineFlowUrl?: boolean; publicKeyId: string; region: Region; } interface UpdateAmazonCheckoutSessionRequest { amount: PaymentAmount; chargePermissionType?: ChargePermissionType; checkoutCancelUrl?: string; checkoutResultReturnUrl: string; checkoutSessionId: string; publicKeyId: string; recurringMetadata?: RecurringMetadata; region: Region; } interface CheckoutSessionConfig { payloadJSON: string; signature: string; publicKeyId: string; } interface DeliverySpecifications { specialRestrictions?: string[]; addressRestrictions?: AddressRestrictions; } interface AddressRestrictions { type?: 'Allowed' | 'NotAllowed'; restrictions?: Restrictions; } interface Restrictions { [key: string]: { zipCodes?: string[]; statesOrRegions?: string[]; }; } interface ANCVConfiguration extends UIElementProps { paymentData?: any; data: ANCVDataState; onOrderRequest?: any; onOrderUpdated?: any; } interface ANCVDataState { beneficiaryId: string; } type Initiative = 'web' | 'messaging'; type ApplePayPaymentOrderDetails = { orderTypeIdentifier: string; orderIdentifier: string; webServiceURL: string; authenticationToken: string; }; type ApplePayPaymentAuthorizationResult = ApplePayJS.ApplePayPaymentAuthorizationResult & { orderDetails?: ApplePayPaymentOrderDetails; }; type ApplePayButtonType = 'add-money' | 'book' | 'buy' | 'check-out' | 'continue' | 'contribute' | 'donate' | 'order' | 'pay' | 'plain' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up'; type ApplePayButtonStyle = 'black' | 'white' | 'white-outline'; interface ApplePayConfiguration extends UIElementProps { /** * Enables the ApplePay Express Flow & also used for analytics * @defaultValue false */ isExpress?: boolean; /** * Used for analytics */ expressPage?: 'cart' | 'minicart' | 'pdp' | 'checkout'; /** * The Apple Pay version number your website supports. * @default highest supported version by the shopper device * @see {@link https://developer.apple.com/documentation/applepayontheweb/apple-pay-on-the-web-version-history Apple Pay on the Web Version History} */ version?: number; /** * Part of the 'ApplePayLineItem' object, which sets the label of the payment request * @see {@link https://developer.apple.com/documentation/applepayontheweb/applepaylineitem ApplePayLineItem docs} */ totalPriceLabel?: string; /** * @default 'final' */ totalPriceStatus?: ApplePayJS.ApplePayLineItemType; /** * ApplePay configuration sent by the /paymentMethods response */ configuration?: { merchantName?: string; merchantId?: string; }; /** * Used to override the domain name for the Apple Pay button. Useful when using ApplePay within cross-domain iframe * For more context: https://github.com/Adyen/adyen-web/pull/3340 */ domainName?: string; clientKey?: string; initiative?: Initiative; /** * A set of line items that explain recurring payments and/or additional charges. */ lineItems?: ApplePayJS.ApplePayLineItem[]; /** * The payment capabilities supported by the merchant. * The value must at least contain ApplePayMerchantCapability.supports3DS. * @default ['supports3DS'] */ merchantCapabilities?: ApplePayJS.ApplePayMerchantCapability[]; /** * A value that indicates whether the shipping mode prevents the user from editing the shipping address. * {@link https://developer.apple.com/documentation/applepayontheweb/applepaypaymentrequest/shippingcontacteditingmode} */ shippingContactEditingMode?: ApplePayJS.ApplePayShippingContactEditingMode; /** * A set of shipping method objects that describe the available shipping methods. */ shippingMethods?: ApplePayJS.ApplePayShippingMethod[]; /** * How the items are to be shipped. */ shippingType?: ApplePayJS.ApplePayShippingType; /** * A list of ISO 3166 country codes for limiting payments to cards from specific countries. */ supportedCountries?: string[]; /** * The payment networks supported by the merchant. */ supportedNetworks?: string[]; /** * ApplePayRecurringPaymentRequest - Represents a request to set up a recurring payment, typically a subscription. * {@link https://developer.apple.com/documentation/applepayontheweb/applepayrecurringpaymentrequest} */ recurringPaymentRequest?: ApplePayJS.ApplePayRecurringPaymentRequest; /** * The billing information that you require from the user in order to process the transaction. */ requiredBillingContactFields?: ApplePayJS.ApplePayContactField[]; /** * The shipping information that you require from the user in order to fulfill the order. */ requiredShippingContactFields?: ApplePayJS.ApplePayContactField[]; /** * Billing contact information for the user. */ billingContact?: ApplePayJS.ApplePayPaymentContact; /** * Shipping contact information for the user. */ shippingContact?: ApplePayJS.ApplePayPaymentContact; /** * It can be used to render the Apple Pay Code in a new window rather than as an overlay modal * Recommended to be used in case of using Apple Pay within an iframe, where the modal may not be presented correctly over the parent website * * @defaultValue 'modal' */ renderApplePayCodeAs?: ApplePayWebConfiguration['renderApplePayCodeAs']; /** * Optional user-defined data. */ applicationData?: string; /** * Called when the shopper clicks the Apple Pay button * @param resolve - Must be called if the button should be displayed * @param reject - Must be called if the button should not be displayed * @returns */ onClick?: (resolve: () => void, reject: () => void) => void; /** * A callback function the Apple Pay SDK calls when the Apple Pay code modal or window closes. */ onApplePayCodeClose?: ApplePayWebConfiguration['onApplePayCodeClose']; /** * Callback called when ApplePay authorize the payment. * Must be resolved/rejected with the action object. * * @param data - Authorization event from ApplePay, along with formatted billingAddress and deliveryAddress * @param actions - Object to continue/stop with the payment flow * * @remarks * If actions.resolve() is called, the payment flow will be triggered. * If actions.reject() is called, the overlay will display an error */ onAuthorized?: (data: { authorizedEvent: ApplePayJS.ApplePayPaymentAuthorizedEvent; billingAddress?: Partial<AddressData>; deliveryAddress?: Partial<AddressData>; }, actions: { resolve: () => void; reject: (error?: ApplePayJS.ApplePayError) => void; }) => void; /** * Collect the order tracking details if available. * This callback is invoked when a successfull payment is resolved * * {@link https://developer.apple.com/documentation/applepayontheweb/applepaypaymentorderdetails} * @param resolve - Must be called with the orderDetails fields * @param reject - Must be called if something failed during the order creation. Calling 'reject' won't cancel the payment flow */ onOrderTrackingRequest?: (resolve: (orderDetails: ApplePayPaymentOrderDetails) => void, reject: () => void) => void; /** * An event handler the system calls when it displays the payment sheet * * {@link https://developer.apple.com/documentation/applepayontheweb/applepaysession/onvalidatemerchant} * @param resolve - Must be called with an opaque message session object * @param reject - Must be called if something failed during the merchant validation * @param validationURL - The URL your server must use to validate itself and obtain a merchant session object. */ onValidateMerchant?: (resolve: (merchantSession: any) => void, reject: (error?: string) => void, validationURL: string) => Promise<void>; /** * An event handler to call when the user selects a new payment method. * * {@link https://developer.apple.com/documentation/applepayontheweb/applepaysession/onpaymentmethodselected} * @param resolve - Completes the selection of a payment method with an update. * @param reject - Completes the selection of a payment method with no update. * @param event - The event parameter contains the paymentMethod attribute. */ onPaymentMethodSelected?: (resolve: (paymentMethodUpdate: ApplePayJS.ApplePayPaymentMethodUpdate) => void, reject: (paymentMethodUpdate: ApplePayJS.ApplePayPaymentMethodUpdate) => void, event: ApplePayJS.ApplePayPaymentMethodSelectedEvent) => void; /** * An event handler to call when the user selects a shipping contact in the payment sheet. * * {@link https://developer.apple.com/documentation/applepayontheweb/applepaysession/onshippingcontactselected} * @param resolve - Completes the selection of a shipping contact with an update. * @param reject - Completes the selection of a shipping contact with no update. * @param event - The event parameter contains the shippingContact attribute. */ onShippingContactSelected?: (resolve: (shippingContactUpdate: ApplePayJS.ApplePayShippingContactUpdate) => void, reject: (shippingContactUpdate: ApplePayJS.ApplePayShippingContactUpdate) => void, event: ApplePayJS.ApplePayShippingContactSelectedEvent) => void; /** * Completes the selection of a shipping method with an update. * * {@link https://developer.apple.com/documentation/applepayontheweb/applepaysession/completeshippingmethodselection} * @param resolve - Completes the selection of a shipping method with an update. * @param reject - Completes the selection of a shipping method with no update. * @param event - The event parameter contains the shippingMethod attribute. */ onShippingMethodSelected?: (resolve: (shippingMethodUpdate: ApplePayJS.ApplePayShippingMethodUpdate) => void, reject: (shippingMethodUpdate: ApplePayJS.ApplePayShippingMethodUpdate) => void, event: ApplePayJS.ApplePayShippingMethodSelectedEvent) => void; /** * The initial coupon code for the payment request. * @see {@link https://developer.apple.com/documentation/applepayontheweb/applepaypaymentrequest/couponcode couponCode docs} */ couponCode?: ApplePayJS.ApplePayPaymentRequest['couponCode']; /** * A Boolean value that determines whether the payment sheet displays the coupon code field. * @see {@link https://developer.apple.com/documentation/applepayontheweb/applepaypaymentrequest/supportscouponcode supportsCouponCode docs} */ supportsCouponCode?: ApplePayJS.ApplePayPaymentRequest['supportsCouponCode']; /** * An event handler called by the system when the user enters or updates a coupon code. * * {@link https://developer.apple.com/documentation/applepayontheweb/applepaysession/oncouponcodechanged} * @param resolve - Completes the change of a coupon code with an update. * @param reject - Completes the change of a coupon code with no update. * @param event - The event parameter contains the couponCode attribute. */ onCouponCodeChanged?: (resolve: (update: ApplePayJS.ApplePayCouponCodeUpdate) => void, reject: (update: ApplePayJS.ApplePayCouponCodeUpdate) => void, event: ApplePayJS.ApplePayCouponCodeChangedEvent) => void; buttonColor?: ApplePayButtonStyle; buttonType?: ApplePayButtonType; /** * Used to tweak the text of the button types that contain text ('Continue with', 'Book with', etc) */ buttonLocale?: string; } interface ApplePayElementData { paymentMethod: { type: string; applePayToken: string; isExpress?: boolean; }; billingAddress?: AddressData; deliveryAddress?: AddressData; } interface ApplePaySessionRequest { displayName: string; domainName: string; initiative: Initiative; merchantIdentifier: string; } interface ApplePayWebConfiguration { renderApplePayCodeAs?: 'modal' | 'window'; onApplePayCodeClose?(): void; } interface BankTransferResultProps { paymentMethodType?: string; reference?: string; totalAmount?: { value: number; currency: string; }; beneficiary?: string; iban?: string; bic?: string; accountNumber?: string; sortCode?: string; routingNumber?: string; branchCode?: string; bankCode?: string; onActionHandled?: (actionHandledObj: ActionHandledReturnObject) => void; } type BankTransferConfiguration = UIElementProps & BankTransferResultProps & { /** * Show/hide email address field * @default true */ showEmailAddress?: boolean; }; interface BankTransferState extends UIElementProps { data: { shopperEmail?: string; }; isValid: boolean; } interface BankTransferSchema { shopperEmail?: string; } interface VoucherDetail { label: string; value: string; } interface VoucherProps { /** * Payment method used to generate the voucher. */ paymentMethodType: string; /** * Payment method image to be displayed on the voucher. */ imageUrl?: string; /** * If applicable, it will render an issuer image next to the payment method image. */ issuerImageUrl?: string; /** * Voucher instructions URL. */ instructionsUrl?: string; /** * Download URL for the voucher. It will display a button allowing the shopper to download it. */ downloadUrl?: string; /** * Text that will be displayed on the above Download button. */ downloadButtonText?: string; /** * Introduction text on the voucher. */ introduction?: string; /** * Payment reference. */ reference?: string; /** * URL to a barcode image representing the payment reference. */ barcode?: string; /** * Total amount displayed on the voucher. */ amount?: string; /** * Any additional surcharge to the amount. */ surcharge?: any; /** * List of details that will be rendered on the voucher. */ voucherDetails?: VoucherDetail[]; /** * Additional CSS classes. */ className?: string; /** * Show/Hide a button to copy the payment reference. It will only show if a reference is available. */ copyBtn?: boolean; /** * Show/Hide payment reference value. * @default true */ showReferenceValue?: boolean; /** * Label for the payment reference. */ paymentReferenceLabel?: string; onActionHandled?: (rtnObj: ActionHandledReturnObject) => void; } interface VoucherConfiguration extends UIElementProps { reference?: string; url?: string; paymentMethodType?: string; } type CommonVoucherProps = Pick<VoucherProps, 'paymentMethodType' | 'introduction' | 'imageUrl' | 'amount' | 'reference' | 'onActionHandled'>; interface BoletoConfiguration extends VoucherConfiguration { /** * Set to false if you have already collected the shopper's first name, last name, and CPF/CNPJ (socialSecurityNumber). * @default true */ personalDetailsRequired?: boolean; /** * Set this to false if you have already collected the shopper's street, house number or name, city, postal code, and state or province. * @default true */ billingAddressRequired?: boolean; /** * Set this to false if you have already collected the shopper's email address. * @default true */ showEmailAddress?: boolean; /** * Object to pre-fill shopper details on the form */ data?: BoletoInputDataState; } interface BoletoElementProps { type: string; i18n: Language; loadingContext: string; reference?: string; } interface BoletoInputDataState { firstName?: string; lastName?: string; billingAddress?: AddressData; socialSecurityNumber?: string; shopperEmail?: string; } interface BoletoInputValidState { firstName?: boolean; lastName?: boolean; shopperEmail?: boolean; socialSecurityNumber?: boolean; billingAddress?: boolean; } interface BoletoInputErrorState { firstName?: boolean; lastName?: boolean; shopperEmail?: boolean; socialSecurityNumber?: boolean; } interface CashAppPayConfiguration extends UIElementProps { /** * Indicates that the payment must be stored (Ex: in case there is no checkbox but merchant wants to store it) */ storePaymentMethod?: boolean; /** * Enables storing the payment method using the Checkbox */ enableStoreDetails?: boolean; /** * Callback triggered before starting the CashAppPay flow. Use case: Validate customer data, check product availability */ onClick?(actions: { resolve: () => void; reject: () => void; }): void; /** * A reference to your system (for example, a cart or checkout identifier). Maximum length 1024 characters. * https://developers.cash.app/docs/api/technical-documentation/sdks/pay-kit/technical-reference#parameters-3 */ referenceId?: string; /** * The destination for the customer after approving (or declining) in Cash App for mobile redirect flow. * https://developers.cash.app/docs/api/technical-documentation/sdks/pay-kit/technical-reference#customerrequest * @defaultValue window.location.ref */ redirectURL?: string; /** * Button customization * https://developers.cash.app/docs/api/technical-documentation/sdks/pay-kit/use-cases#customize-the-cash-app-pay-button */ button?: { shape?: 'semiround' | 'round'; size?: 'medium' | 'small'; theme?: 'dark' | 'light'; width?: 'static' | 'full'; }; /** * CashAppPay configuration sent by the /paymentMethods response */ configuration?: { clientId: string; scopeId: string; }; /** * If payment is tokenized, then API will return its ID * @internal */ storedPaymentMethodId?: string; /** * If payment is tokenized, then API will return this value * @internal */ cashtag?: string; } type CashAppPayElementData = { paymentMethod: { type: string; grantId?: string; storedPaymentMethodId?: string; }; storePaymentMethod?: boolean; }; type CashAppPayEventData = { cashTag?: string; customerId?: string; grantId?: string; onFileGrantId?: string; }; 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'; declare enum AnalyticsEventCategory { info = "info", error = "error", log = "log" } declare abstract class AbstractAnalyticsEvent { private readonly timestamp; private readonly id; /** * Component tx variant or identifier * @private */ private readonly component; abstract getEventCategory(): AnalyticsEventCategory; protected constructor(component: string); } interface AnalyticsOptions { /** * Enable/Disable all analytics */ enabled?: boolean; /** * A wrapper to pass data needed when analytics is setup */ analyticsData?: { /** * Relates to PMs used within Plugins * https://docs.adyen.com/development-resources/application-information/?tab=integrator_built_2#application-information-fields * @internal */ applicationInfo?: ApplicationInfo; /** * Use a checkoutAttemptId from a previous page */ checkoutAttemptId?: string; }; } interface ApplicationInfo { externalPlatform: { name: string; version: string; integrator: string; }; merchantApplication: { name: string; version: string; }; merchantDevice?: { os: string; osVersion: string; }; } interface IAnalytics { checkoutAttemptId?: string; setUp({ sessionId, checkoutStage, locale }: { sessionId?: string; checkoutStage?: 'precheckout' | 'checkout'; locale?: string; }): Promise<void>; sendFlavor(flavor: 'dropin' | 'components'): Promise<void>; sendAnalytics(event: AbstractAnalyticsEvent): void; flush(): void; } type MastercardCheckout = { srcDigitalCardId: string; srcCorrelationId: string; srcScheme: string; }; type VisaCheckout = { srcCheckoutPayload?: string; srcTokenReference?: string; srcCorrelationId: string; srcScheme: string; }; type ClickToPayCheckoutPayload = VisaCheckout | MastercardCheckout; type ClickToPayConfiguration = UIElementProps & ClickToPayProps & { /** * ClickToPay configuration sent by the /paymentMethods response */ configuration?: { mcDpaId?: string; mcSrcClientId?: string; visaSrcInitiatorId?: string; visaSrciDpaId?: string; }; }; type ClickToPayPaymentData = { paymentMethod: ClickToPayCheckoutPayload & { type: string; }; origin: string; browserInfo: BrowserInfo; }; interface TouchStartEventObj { fieldType: string; name?: string; } type PlaceholderKeys$1 = 'cardNumber' | 'securityCode' | 'expiryDate'; type Placeholders$1 = Partial<Record<PlaceholderKeys$1, string>>; type GiftcardFieldsProps = { setRootNode: (input: HTMLElement) => void; i18n: Language; pinRequired: boolean; sfpState: SFPState; getCardErrorMessage: any; focusedElement: any; setFocusOn: any; label?: string; }; /** * SecuredFieldsProvider: * Initialises & handles the client-side part of SecuredFields */ declare class SecuredFieldsProvider extends Component<SFPProps, SFPState> { private csfLoadFailTimeout; private csfLoadFailTimeoutMS; private csfConfigFailTimeout; private csfConfigFailTimeoutMS; private numCharsInField; private rootNode; private numDateFields; private csf; private handleOnLoad; private handleOnConfigSuccess; private handleOnFieldValid; private handleOnAllValid; private handleOnBrand; private handleFocus; private handleOnError; private handleOnAutoComplete; private handleOnNoDataRequired; private handleOnTouchstartIOS; private handleKeyPressed; state: SFPState; props: any; private issuingCountryCode; constructor(props: SFPProps); static readonly defaultProps: { type: string; keypadFix: boolean; rootNode: any; loadingContext: any; brands: any[]; showWarnings: boolean; autoFocus: boolean; trimTrailingSeparator: boolean; onChange: () => void; onLoad: () => void; onConfigSuccess: () => void; onAllValid: () => void; onFieldValid: () => void; onBrand: () => void; onError: () => void; onBinValue: () => void; onFocus: () => void; onAutoComplete: () => void; handleKeyPress: () => void; styles: {}; }; componentDidMount(): void; componentDidUpdate(): void; componentWillUnmount(): void; private initializeCSF; private checkForKCPFields; getChildContext(): object; handleUnsupportedCard(errObj: CardErrorData): boolean; setFocusOn(frame: string): void; updateStyles(stylesObj: StylesObject): void;