import EventEmitter from 'events'; import * as CSS from 'csstype'; interface PayComScriptQueryParameters { identifier: string sandbox?: boolean debug?: boolean } interface PayComScriptOptions extends PayComScriptQueryParameters { sdkUrlOverride?: string live?: boolean } type PayCustomPseudos = ':error' type PayCssConfig = Partial< Record > & CSS.Properties interface CheckoutStyles { base?: PayCssConfig number?: PayCssConfig cvv?: PayCssConfig expiry?: PayCssConfig name?: PayCssConfig checkboxes?: { buttonBackground?: string labelColor?: string } submit?: PayCssConfig } interface CheckoutFieldConfig { label?: string labelStyle?: PayCssConfig errorMessageStyle?: PayCssConfig inputSize?: 'small' | 'medium' | 'large' placeholder?: string style?: PayCssConfig } interface CheckoutFormConfig { base?: { inputSpacing?: string formTitle?: string titleStyles?: PayCssConfig style?: PayCssConfig } number?: CheckoutFieldConfig cvv?: CheckoutFieldConfig expiry?: CheckoutFieldConfig name?: CheckoutFieldConfig } interface CheckoutToggles { /** * If false, the form will render without a submission button. * @default true */ submitButton?: boolean /** * If false, the form will render without a title. * @default true */ withTitle?: boolean /** * If false, the form will render without a card holder name. * @default true */ withCardHolderName?: boolean /** * If false, the wrapping element of the form will be a div instead of a form. * Good for when the form is embedded inside a larger form. * @default true */ formWrapper?: boolean /** * If true, will display save for future use checkbox under the form. * @default false */ saveSourceForFutureUseCheckbox?: boolean /** * If true, will display our accept T&A checkbox under the form. * @default false */ acceptTermsAndConditionsCheckbox?: boolean /** * If true, won't display required additional fields, such as email for EU 3ds. * @default false */ disableAdditionalFields?: boolean /** * If true, will render native browser checkboxes instead of ours. * @default false */ nativeCheckboxes?: boolean /** * If true, on mobile view all fields will be in one column. * @default false */ mobileColumn?: boolean /** * If true, will render credit card brand on number input * @default false */ withCardNumberBrand?: boolean /** * If true, will render a tooltip on the card CVV input * @default false */ withCvvTooltip?: boolean /** * If true, will use payout-able existing sources * @default false */ payout?: boolean } /** * [Styling options](https://developer.paypal.com/docs/business/checkout/reference/style-guide/#customize-the-payment-buttons) for customizing the button appearance. */ type PaypalButtonStyle = { color?: 'gold' | 'blue' | 'silver' | 'white' | 'black' height?: number label?: | 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment' | 'subscribe' | 'donate' layout?: 'vertical' | 'horizontal' shape?: 'rect' | 'pill' tagline?: boolean } interface PaypalOpts { container: string onClickValidation?: () => Promise style?: PaypalButtonStyle } interface RenderOpts { container: string button?: boolean toggles?: CheckoutToggles formConfig?: CheckoutFormConfig localizations?: { [language: string]: LanguageLocalizationOverride } style?: CheckoutStyles } interface UniversalToggles { /** * If false, the form will render without a submission button. * @default true */ submitButton?: boolean /** * If false, the default suppoerted brands footer will not appear. * @default true */ withCardBrandsFooterLogos?: boolean /** * If true, displays the card bin as well as last 4. * @default false */ savedCardsBins?: boolean | 2 | 3 | 4 | 5 | 6 /** * If true, the CVV in saved payment method will be inline * @default false */ savedPaymentMethodInlineCvv?: boolean /** * A title to display above the Universal form. */ title?: string /** * If true, only user's saved sources will displayed. * @default false */ allowOnlyExistingPaymentMethods?: boolean /** * If true, user will not be able the pay with saved source. * @default false */ newCardOnly?: boolean /** * If true, user will not be able to remove saved source. * @default false */ disablePaymentMethodDeletion?: boolean /** * If true, the submit button will be disabled while form invalid. * @default false */ disableSubmitUntilFormIsValid?: boolean /** * If true, shows a Debit/Credit/Prepaid funding-type tag on saved cards. * @default false */ savedCardsFundingType?: boolean } type LanguageLocalizationOverride = { cardForm?: { nameOnCard?: string cardNumber?: string cvv?: string expiryDate?: string title?: string checkboxes?: { saveCardForFutureUse?: string agreeToTermsAndConditions?: string } submit?: { pay?: string save_card?: string DEPOSIT?: string } } existingSource?: { delete?: string } dividers?: { myPaymentMethods?: string otherPaymentMethods?: string showOtherWaysToPay?: string payWithCard?: string payWith?: string savedPaymentMethods?: string } } interface DividerStyles { text?: PayCssConfig divider?: { marginBottom?: PayCssConfig['marginBottom'] color?: PayCssConfig['color'] height?: PayCssConfig['height'] ':disabled'?: { color?: PayCssConfig['color'] height?: PayCssConfig['height'] } } } type ExpandablePaymentMethods = 'upi' | 'netbanking' interface ApmStyle { divider?: DividerStyles input?: PayCssConfig } type JssObject = { [K in keyof PayCssConfig]?: PayCssConfig[K] } & { [selector: `& ${string}`]: JssObject | string | number | undefined } type CheckboxStyleOverrides = { ':selected'?: CSS.Properties } & CSS.Properties type DynamicFieldStyles = { label?: CSS.Properties input?: CSS.Properties date?: CSS.Properties select?: JssObject radio?: { color?: CSS.Properties['color'] label?: CSS.Properties } checkbox?: CheckboxStyleOverrides } type OnValidateSessionFn = (data: { paymentMethodType: string fundingType?: CardFunding }) => Promise interface UniversalOpts { container: string cardForm?: Omit toggles?: UniversalToggles selectedPaymentMethod?: string apmsOnClickValidation?: () => Promise onValidateSession?: onValidateSessionFn localizations?: { [language: string]: LanguageLocalizationOverride } style?: { cardForm?: CheckoutStyles base?: PayCssConfig submit?: PayCssConfig savedPaymentMethods?: PayCssConfig expressCheckout?: PayCssConfig apmButtons?: PayCssConfig apms?: Partial> dividers?: { showOtherWaysToPay?: DividerStyles payWith?: DividerStyles savedPaymentMethods?: DividerStyles } existingSource?: { deleteText?: PayCssConfig fundingTag?: PayCssConfig cvv?: { style?: PayCssConfig labelStyle?: PayCssConfig errorMessageStyle?: PayCssConfig } icons?: { delete?: PayCssConfig confirmDeletion?: PayCssConfig cancelDeletion?: PayCssConfig } base?: PayCssConfig & { ':selected'?: PayCssConfig } radioButton?: { color?: PayCssConfig['color'] ':selected'?: { color?: PayCssConfig['color'] } } } ctp?: CTPStyles paymentMethodFields?: DynamicFieldStyles } paymentMethods?: Array alternatives?: 'button' | 'radio' } interface SubmitOpts { token?: string } type FailureError = { message: string data?: Record } type Mode = 'integrated' | 'modal' type Locale = | 'en-US' | 'en-GB' | 'ro-RO' | 'zh-CN' | 'cs-CZ' | 'da-DK' | 'nl-NL' | 'de-DE' | 'fr-FR' | 'fi-FI' | 'el-GR' | 'hu-HU' | 'id-ID' | 'it-IT' | 'ja-JP' | 'ko-KR' | 'ko-KP' | 'nb-NO' | 'pl-PL' | 'pt-PT' | 'pt-BR' | 'ru-RU' | 'es-ES' | 'se-SE' | 'se-FI' | 'se-NO' | 'tr-TR' | 'vi-VN' interface CheckoutOpts { /** * @deprecated Got replaced by clientSecret */ token?: string | (() => Promise) clientSecret?: string | (() => Promise) currency?: string amount?: string onSuccess?: (payment: Record) => void onFailure?: (error: FailureError) => void onPending?: (payment: Record) => void mode?: Mode throwOnSubmitFailure?: boolean paymentFailurePopupConfig?: { sessionExpiredPopupText?: string maxAttemptsReachedPopupText?: string style?: PayCssConfig } toggles?: { displayFailureMessages: boolean displayEndOfSessionFailureMessages?: boolean disableAdditionalFields?: boolean whiteLabel?: boolean disableSetupFutureUsageCheckbox?: boolean } locale?: Locale /** * If true, will use payout-able existing sources * @default false */ payout?: boolean } interface PayComOpts { identifier?: string riskIdentifier?: string sandbox?: boolean debug?: boolean } enum EVENT_TYPES { THREE_DS_INIT = 'three_ds_init', THREE_DS_CHALLENGE = 'three_ds_challenge', THREE_DS_DONE = 'three_ds_done', CONTENT_READY = 'content_ready', PAYMENT_SUCCESS = 'payment_success', SETUP_SUCCESS = 'setup_success', PAYMENT_FAILURE = 'payment_failure', SETUP_FAILURE = 'setup_failure', PAYMENT_PROCESSING = 'payment_processing', SETUP_PROCESSING = 'setup_processing', SESSION_EXPIRED = 'session_expired', MAX_ATTEMPTS_REACHED = 'max_attempts_reached', PAYMENT_PENDING = 'payment_pending', PAYMENT_PENDING_APPROVAL = 'payment_pending_approval', SET_DISABLE_UI = 'set_disable_ui', HEADLESS_READY = 'headless_ready', FORM_VALIDATION_UPDATED = 'form_validation_update', CARD_FUNDING_TYPE_UPDATE = 'card_funding_type_update' } type ListenerFn = ( eventName: EVENT_TYPES, // eslint-disable-next-line @typescript-eslint/no-explicit-any callback: (...params: any[]) => void ) => EventEmitter type ValidationResponse = { valid: boolean invalidFields: string[] } enum ELEMENT_TYPES { CHECKOUT = 'checkout', UNIVERSAL = 'universal', PAYPAL = 'paypal' // UNIVERSAL_V2 = 'universal-v2' } enum TransactionStatusEnum { APPROVED = 'APPROVED', PENDING = 'PENDING', DECLINED = 'DECLINED', ERROR = 'ERROR', EXPIRED = 'EXPIRED', CANCELLED = 'CANCELLED', CREATED = 'CREATED' } type SubmitResponse = { transactionStatus: TransactionStatusEnum transactionId: string transactionDateTime: string sourceId: string consumerId: string } type ValidateResponse = { valid: boolean invalidFields: string[] paymentMethodDetails?: { type: string card?: { bin: string last4: string name: string expirationMonth: string expirationYear: string } } } type RenderFn = (renderOpts: RenderOpts) => Promise type PaypalFn = (paypalOpts: PaypalOpts) => Promise type BlurFn = () => void type UniversalFn = (universalOpts: UniversalOpts) => Promise type SubmitFn = ( opts?: SubmitOpts, frameType?: ELEMENT_TYPES ) => Promise> interface UpdateOpts { amount: number currency?: string } type UpdateFn = (updateOpts: UpdateOpts) => Promise type ValidateFn = ( frameType?: ELEMENT_TYPES ) => Promise type ResetFn = (frameType?: ELEMENT_TYPES) => Promise type UpdateTransactionDetailsOpts = { successUrl?: string failureUrl?: string consumer?: { firstName?: string lastName?: string name?: string email?: string phone?: string } billing?: { addressLine: string addressLine2?: string zip: string city: string state?: string countryAlpha2: string } shipping?: { addressLine: string addressLine2?: string zip: string city: string state?: string countryAlpha2: string } customFieldsValues?: Record } type PayOpts = { source: string cvv?: string } type PayFn = (Opts: PayOpts) => Promise type UpdateTransactionDetailsFn = ( config: UpdateTransactionDetailsOpts ) => Promise type ResyncFn = () => Promise type AddressType = { line1: string line2?: string city: string state?: string country: string postalCode: string } type HeadlessPaymentOptions = { saveSourceForFutureUse?: boolean onValidateSession?: OnValidateSessionFn } type HeadlessFn = ( method: string, paymentMethodData?: unknown, billingDetails?: AddressType, options?: HeadlessPaymentOptions ) => Promise type CanMakePaymentsFn = () => Promise type InitHeadlessCtpParams = { emailInputRef?: HTMLDivElement | string email?: string containers: { mainWidget: HTMLDivElement | string linkNewCard?: HTMLDivElement | string } style?: CTPStyles toggles?: { openOTPFrameOnInit?: boolean showOnlyForRecognizedUsers?: boolean } } type CTPStyles = Partial<{ mainWidgetContainer: PayCssConfig linkNewCardContainer: PayCssConfig }> enum CTP_EVENTS { VALIDATION_CHANGED = 'validation-changed', AUTHENTICATED = 'authenticated' } declare enum CtpCompletePaymentStatus { success = 'SUCCESS', declined = 'DECLINED' } type CheckoutCTPBillingDetails = { address: { addressLine: string addressLine2?: string zip: string city: string state?: string countryAlpha2: string } name: string phone: string } type HeadlessCtpObject = { on: Listener once: Listener removeListener: Listener validate: () => Promise<{ valid: boolean }> completePayment: (status: CtpCompletePaymentStatus) => Promise updateBillingDetails: ( params: Partial ) => Promise STATUS_SUCCESS: CtpCompletePaymentStatus.success STATUS_DECLINED: CtpCompletePaymentStatus.declined } type CustomFieldType = 'input' | 'date' | 'checkbox' | 'radio' | 'select' type CustomFieldsOptions = { label: string value: string } type CustomField = { id: string placeholder?: string label?: string type?: CustomFieldType inputType?: string options?: CustomFieldsOptions[] description?: string validation?: CustomFieldsValidation } type CustomFieldsValidation = { required?: boolean max?: number min?: number maxLength?: number minLength?: number pattern?: string } type CardBrand = | 'visa' | 'mastercard' | 'amex' | 'discover' | 'jcl' | 'unionpay' type PaymentMethod = { paymentMethodType: string name: string redirect?: boolean fields?: CustomField[] supportedCardBrands?: CardBrand[] } type CardFunding = 'prepaid' | 'debit' | 'credit' | 'charge' type ExistingCard = { bin: string brand: CardBrand cardholderCurrency: string country: string issuerName: string expMonth: string expYear: string last4: string fingerprint: string funding: CardFunding network: CardBrand payout: string cvvExists?: boolean } type ExistingBankAccount = { country: string last4: string fingerprint: string source: string currency: string accountHolderName?: string accountHolderType?: string accountType?: string bankName?: string routingNumber?: string swiftBic?: string sortCode?: string details?: Record } type ExistingSource = { id: string type: string card?: ExistingCard bank_account?: ExistingBankAccount } interface CvvToggles { /** * If false, the form will render without a submission button. * @default true */ submitButton?: boolean /** * If true, will render a tooltip on the CVV input * @default false */ withCvvTooltip?: boolean } interface CvvOpts { container: string /** * The saved source (token or id) to collect the CVV for. * The rendered form is bound to this source only. */ token: string toggles?: CvvToggles onValidateSession?: OnValidateSessionFn style?: { base?: PayCssConfig cvv?: { style?: PayCssConfig labelStyle?: PayCssConfig errorMessage?: PayCssConfig } submit?: PayCssConfig existingSource?: PayCssConfig } } type CvvObject = { setDisabled: (disabled: boolean) => void } type CvvFn = (cvvOpts: CvvOpts) => CvvObject type CheckoutObject = { on: ListenerFn once: ListenerFn removeListener: ListenerFn EVENT_TYPES: typeof EVENT_TYPES ELEMENT_TYPES: typeof ELEMENT_TYPES render: RenderFn paypal: PaypalFn universal: UniversalFn blur: BlurFn update: UpdateFn updateTransactionDetails: UpdateTransactionDetailsFn submit: SubmitFn resync: ResyncFn canMakePayments: CanMakePaymentsFn validate: ValidateFn reset: ResetFn pay: PayFn headless: HeadlessFn cvv: CvvFn ctp: (params: InitHeadlessCtpParams) => Promise getPaymentMethods: () => Promise getExistingSources: () => Promise getPayoutSources: () => Promise refreshClientSecret: (clientSecret: string) => Promise } type CheckoutFunction = (opts: CheckoutOpts) => CheckoutObject type PayComFunction = (opts: PayComOpts) => Promise<{ checkout: CheckoutFunction }> interface PayComNamespace { com: PayComFunction riskIdentifier: string } declare module '@pay-com/js' { export function loadScript( options: PayComScriptOptions, PromisePonyfill?: PromiseConstructor ): Promise export function loadCustomScript(options: { url: string attributes?: Record PromisePonyfill?: PromiseConstructor }): Promise export const version: string } declare global { interface Window { Pay?: PayComNamespace } } declare const _default: { com: (options: PayComScriptOptions, PromisePonyfill?: PromiseConstructor) => Promise<{ checkout: CheckoutFunction; }>; }; export { ApmStyle, CheckoutFunction, CheckoutObject, CheckoutOpts, CheckoutToggles, DividerStyles, ELEMENT_TYPES, EVENT_TYPES, ExpandablePaymentMethods, FailureError, LanguageLocalizationOverride, ListenerFn, PayComFunction, PayComNamespace, PayFn, PayOpts, PaypalOpts, RenderOpts, SubmitOpts, SubmitResponse, UniversalOpts, UniversalToggles, UpdateTransactionDetailsFn, UpdateTransactionDetailsOpts, ValidationResponse, _default as default };