From 864269d6edc4bfc9b545c9ccf404ce4fc841fcbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Wed, 4 Mar 2026 09:22:01 +0100 Subject: [PATCH 1/7] chore: refactor structure of dc events --- examples/dynamic-checkout/index.html | 87 ++++++++++----- src/dynamic-checkout/clients/apple-pay.ts | 20 ++-- src/dynamic-checkout/clients/google-pay.ts | 16 +-- src/dynamic-checkout/dynamic-checkout.ts | 20 ++-- src/dynamic-checkout/payment-methods/apm.ts | 80 ++++++++++---- src/dynamic-checkout/payment-methods/card.ts | 19 ++-- .../payment-methods/native-apm.ts | 16 ++- .../payment-methods/saved-apm.ts | 47 +++++--- .../payment-methods/saved-card.ts | 21 ++-- src/dynamic-checkout/utils/events.ts | 100 +++++++++++------- src/dynamic-checkout/views/payment-methods.ts | 12 ++- src/processout/processout.ts | 6 +- 12 files changed, 298 insertions(+), 146 deletions(-) diff --git a/examples/dynamic-checkout/index.html b/examples/dynamic-checkout/index.html index e8c126bb..b62b4b25 100644 --- a/examples/dynamic-checkout/index.html +++ b/examples/dynamic-checkout/index.html @@ -10,8 +10,8 @@ diff --git a/src/dynamic-checkout/clients/apple-pay.ts b/src/dynamic-checkout/clients/apple-pay.ts index b22acfa5..f9f849d9 100644 --- a/src/dynamic-checkout/clients/apple-pay.ts +++ b/src/dynamic-checkout/clients/apple-pay.ts @@ -78,12 +78,12 @@ module ProcessOut { merchantApplePayCertificateId: applePayPaymentMethodData.merchant_id, applePaySessionVersion: 14, }, - DynamicCheckoutEventsUtils.dispatchApplePayNewSessionEvent, - DynamicCheckoutEventsUtils.dispatchApplePaySessionError, + () => DynamicCheckoutEventsUtils.dispatchApplePayNewSessionEvent(this.paymentConfig.invoiceId), + (err) => DynamicCheckoutEventsUtils.dispatchApplePaySessionError(this.paymentConfig.invoiceId, err), ) session.onpaymentauthorizedPostprocess = - DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent + () => DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent(this.paymentConfig.invoiceId) return session } @@ -97,7 +97,7 @@ module ProcessOut { card => { session.completePayment(0) - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(card) + DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, card) // The casting is needed since Apple Pay returns card object instead of card token for some reason // You can check the implementation of tokenize function @@ -145,8 +145,8 @@ module ProcessOut { } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ - invoiceId, - returnUrl: this.paymentConfig.invoiceDetails.return_url, + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, }) }, error => { @@ -165,18 +165,20 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) }, undefined, - invoiceId => { + (invoiceId, reason) => { if (this.paymentConfig.showStatusMessage) { getViewContainer().appendChild( new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, ) } - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "apple_pay", + invoice_id: invoiceId, + reason: reason || null, }) }, ) diff --git a/src/dynamic-checkout/clients/google-pay.ts b/src/dynamic-checkout/clients/google-pay.ts index cfcc854a..207bfd5b 100644 --- a/src/dynamic-checkout/clients/google-pay.ts +++ b/src/dynamic-checkout/clients/google-pay.ts @@ -119,7 +119,7 @@ module ProcessOut { paymentToken, {}, token => { - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(token) + DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, token) this.processOutInstance.makeCardPayment( invoiceData.id, @@ -149,8 +149,8 @@ module ProcessOut { } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ - invoiceId, - returnUrl: this.paymentConfig.invoiceDetails.return_url, + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, }) }, error => { @@ -173,18 +173,20 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) }, undefined, - invoiceId => { + (invoiceId, reason) => { if (this.paymentConfig.showStatusMessage) { getViewContainer().appendChild( new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, ) } - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "google_pay", + invoice_id: invoiceId, + reason: reason || null, }) }, ) @@ -195,7 +197,7 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent({ + DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent(this.paymentConfig.invoiceId, { message: `Tokenize payment error: ${JSON.stringify(error, undefined, 2)}`, }) }, diff --git a/src/dynamic-checkout/dynamic-checkout.ts b/src/dynamic-checkout/dynamic-checkout.ts index 4a212c26..8d8487b9 100644 --- a/src/dynamic-checkout/dynamic-checkout.ts +++ b/src/dynamic-checkout/dynamic-checkout.ts @@ -50,7 +50,7 @@ module ProcessOut { this.loadView(paymentMethodsView.element) - DynamicCheckoutEventsUtils.dispatchWidgetReadyEvent() + DynamicCheckoutEventsUtils.dispatchWidgetReadyEvent(this.paymentConfig.invoiceId) } private getInvoiceDetails(onFetch: Function, onSuccess: Function, onError: Function) { @@ -73,7 +73,7 @@ module ProcessOut { private onGetInvoiceLoading() { this.loadView(new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element) - DynamicCheckoutEventsUtils.dispatchWidgetLoadingEvent() + DynamicCheckoutEventsUtils.dispatchWidgetLoadingEvent(this.paymentConfig.invoiceId) } private onGetInvoiceSuccess(data: any) { @@ -82,7 +82,10 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element, ) - return DynamicCheckoutEventsUtils.dispatchInvoiceFetchingErrorEvent(data) + return DynamicCheckoutEventsUtils.dispatchInvoiceFetchingErrorEvent( + this.paymentConfig.invoiceId, + data, + ) } if (!data.invoice.payment_methods) { @@ -95,7 +98,7 @@ module ProcessOut { ) return DynamicCheckoutEventsUtils.dispatchNoDynamicCheckoutConfigurationEvent({ - invoiceId: data.invoice.id, + invoice_id: data.invoice.id, }) } @@ -109,8 +112,8 @@ module ProcessOut { ) return DynamicCheckoutEventsUtils.dispatchTransactionErrorEvent({ - invoiceId: data.invoice.id, - returnUrl: data.invoice.return_url, + invoice_id: data.invoice.id, + return_url: data.invoice.return_url, }) } @@ -129,7 +132,10 @@ module ProcessOut { message: Translator.translateError(errorCode), } - DynamicCheckoutEventsUtils.dispatchInvoiceFetchingErrorEvent(errorData) + DynamicCheckoutEventsUtils.dispatchInvoiceFetchingErrorEvent( + this.paymentConfig.invoiceId, + errorData, + ) this.loadView( new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element, diff --git a/src/dynamic-checkout/payment-methods/apm.ts b/src/dynamic-checkout/payment-methods/apm.ts index 552d79b6..ecd7b552 100644 --- a/src/dynamic-checkout/payment-methods/apm.ts +++ b/src/dynamic-checkout/payment-methods/apm.ts @@ -89,12 +89,17 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: apm.gateway_name, + invoice_id: this.paymentConfig.invoiceId, }) this.processOutInstance.handleAction( apm.redirect_url, paymentToken => { - this.resetContainerHtml().appendChild(new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element) + DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, paymentToken) + + this.resetContainerHtml().appendChild( + new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element, + ) this.processOutInstance.makeCardPayment( this.paymentConfig.invoiceId, @@ -116,7 +121,10 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId) + DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, + }) }, error => { this.resetContainerHtml().appendChild( @@ -124,16 +132,22 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + ) }, requestOptions, - invoiceId => { + (invoiceId, reason) => { this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, + new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) + .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, + invoice_id: invoiceId, + reason: reason || null, }) }, ) @@ -147,6 +161,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ payment_method_name: apm.gateway_name, + invoice_id: this.paymentConfig.invoiceId, }) } else { this.resetContainerHtml().appendChild( @@ -154,7 +169,10 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + ) } }, actionHandlerOptions, @@ -187,17 +205,20 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(data) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, data) return } if (outcome === OUTCOME.Pending && !data.customer_action) { this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, + new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) + .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(this.paymentConfig.invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, + invoice_id: this.paymentConfig.invoiceId, + reason: data?.message || null, }) return @@ -206,7 +227,11 @@ module ProcessOut { this.processOutInstance.handleAction( data.customer_action.value, paymentToken => { - this.resetContainerHtml().appendChild(new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element) + DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, paymentToken) + + this.resetContainerHtml().appendChild( + new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element, + ) this.processOutInstance.makeCardPayment( this.paymentConfig.invoiceId, @@ -232,7 +257,10 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId) + DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, + }) }, error => { if (this.paymentConfig.showStatusMessage) { @@ -254,16 +282,24 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + ) }, requestOptions, - invoiceId => { + (invoiceId, reason) => { this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, + new DynamicCheckoutPaymentPendingView( + this.processOutInstance, + this.paymentConfig, + ).element, ) - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, + invoice_id: invoiceId, + reason: reason || null, }) }, ) @@ -284,7 +320,10 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + ) }, actionHandlerOptions, this.paymentConfig.invoiceId, @@ -306,7 +345,7 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) }, 0, requestOptions, @@ -371,8 +410,9 @@ module ProcessOut { { tagName: "button", classNames: ["dco-payment-method-button-pay-button"], - textContent: this.paymentConfig.payButtonText - || `${Translations.getText( + textContent: + this.paymentConfig.payButtonText || + `${Translations.getText( "continue-with-apm-button", this.paymentConfig.locale, )} ${this.paymentMethod.display.name}`, diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts index be310639..1d4bc99e 100644 --- a/src/dynamic-checkout/payment-methods/card.ts +++ b/src/dynamic-checkout/payment-methods/card.ts @@ -93,6 +93,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: "card", + invoice_id: this.paymentConfig.invoiceId, }) this.procesoutInstance.tokenize( @@ -104,11 +105,13 @@ module ProcessOut { }, this.handleValidationError.bind(this)) }) }, - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent, + (err) => DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, err), ) } private handleTokenizeSuccess(cardToken: string) { + DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, cardToken) + const cardPaymentOptions = { authorize_only: !this.paymentConfig.capturePayments, allow_fallback_to_sale: this.paymentConfig.allowFallbackToSale, @@ -140,7 +143,7 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.procesoutInstance, this.paymentConfig).element, ) - DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent(this.paymentConfig.invoiceId, error) } private handleCardPaymentSuccess(invoiceId: string) { @@ -158,20 +161,22 @@ module ProcessOut { } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ - invoiceId, - returnUrl: this.paymentConfig.invoiceDetails.return_url, + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, }) } - private handleCardPaymentPending(invoiceId: string) { + private handleCardPaymentPending(invoiceId: string, reason: string | null) { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentPendingView(this.procesoutInstance, this.paymentConfig).element, ) } - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "card", + invoice_id: invoiceId, + reason: reason || null, }) } @@ -189,7 +194,7 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) } private getCardFormOptions() { diff --git a/src/dynamic-checkout/payment-methods/native-apm.ts b/src/dynamic-checkout/payment-methods/native-apm.ts index 438a6958..de7a10b5 100644 --- a/src/dynamic-checkout/payment-methods/native-apm.ts +++ b/src/dynamic-checkout/payment-methods/native-apm.ts @@ -9,12 +9,15 @@ module ProcessOut { private resetContainerHtml: () => HTMLElement protected processOutInstance: ProcessOut + private onPaymentSubmit?: () => void + constructor( processOutInstance: ProcessOut, paymentMethod: PaymentMethod, paymentConfig: DynamicCheckoutPaymentConfig, theme: DynamicCheckoutThemeType, resetContainerHtml: () => HTMLElement, + onPaymentSubmit?: () => void, ) { const { display, apm } = paymentMethod const { invoiceId, invoiceDetails } = paymentConfig @@ -25,6 +28,7 @@ module ProcessOut { this.processOutInstance = processOutInstance this.resetContainerHtml = resetContainerHtml this.theme = theme + this.onPaymentSubmit = onPaymentSubmit const wrapper = this.getNativeApmWrapper() super.appendChildren(wrapper) @@ -64,6 +68,12 @@ module ProcessOut { } }) + window.addEventListener(NATIVE_APM_EVENTS.PAYMENT_INIT, () => { + if (this.onPaymentSubmit) { + this.onPaymentSubmit() + } + }) + window.addEventListener(NATIVE_APM_EVENTS.PAYMENT_SUCCESS, () => { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( @@ -80,8 +90,8 @@ module ProcessOut { } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ - invoiceId: this.paymentConfig.invoiceId, - returnUrl: this.paymentConfig.invoiceDetails.return_url, + invoice_id: this.paymentConfig.invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, }) }) @@ -100,7 +110,7 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(e) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, e) }) } diff --git a/src/dynamic-checkout/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts index 9d031a22..175ade08 100644 --- a/src/dynamic-checkout/payment-methods/saved-apm.ts +++ b/src/dynamic-checkout/payment-methods/saved-apm.ts @@ -45,8 +45,9 @@ module ProcessOut { } private getChildrenElement(deleteMode?: boolean) { - const payButtonText = this.paymentConfig.payButtonText - || `${Translations.getText( + const payButtonText = + this.paymentConfig.payButtonText || + `${Translations.getText( "pay-button-text", this.paymentConfig.locale, )} ${this.paymentConfig.invoiceDetails.amount} ${this.paymentConfig.invoiceDetails.currency}` @@ -106,11 +107,14 @@ module ProcessOut { if (apm_customer_token.redirect_url) { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: apm.gateway_name, + invoice_id: invoiceId, }) return this.processOutInstance.handleAction( apm_customer_token.redirect_url, paymentToken => { + DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, paymentToken) + this.processOutInstance.makeCardPayment( invoiceId, paymentToken, @@ -133,7 +137,10 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId) + DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, + }) }, error => { if (this.paymentConfig.showStatusMessage) { @@ -151,18 +158,23 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) }, requestOptions, - invoiceId => { + (invoiceId, reason) => { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, + new DynamicCheckoutPaymentPendingView( + this.processOutInstance, + this.paymentConfig, + ).element, ) } - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, + invoice_id: invoiceId, + reason: reason || null, }) }, ) @@ -173,7 +185,7 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) }, actionHandlerOptions, this.paymentConfig.invoiceId, @@ -197,22 +209,23 @@ module ProcessOut { ) DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ - invoiceId, - returnUrl: this.paymentConfig.invoiceDetails.return_url, + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, }) } - private handlePaymentPending(invoiceId: string) { + private handlePaymentPending(invoiceId: string, reason: string | null) { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, + new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) + .element, ) } - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { - payment_method_name: this.paymentMethod.apm - ? this.paymentMethod.apm.gateway_name - : "apm", + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ + payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + invoice_id: this.paymentConfig.invoiceId, + reason: reason || null, }) } @@ -221,7 +234,7 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) } private setButtonLoading() { diff --git a/src/dynamic-checkout/payment-methods/saved-card.ts b/src/dynamic-checkout/payment-methods/saved-card.ts index d37c81b7..3574a21e 100644 --- a/src/dynamic-checkout/payment-methods/saved-card.ts +++ b/src/dynamic-checkout/payment-methods/saved-card.ts @@ -46,8 +46,9 @@ module ProcessOut { } private getChildrenElement(deleteMode?: boolean) { - const payButtonText = this.paymentConfig.payButtonText - || `${Translations.getText( + const payButtonText = + this.paymentConfig.payButtonText || + `${Translations.getText( "pay-button-text", this.paymentConfig.locale, )} ${this.paymentConfig.invoiceDetails.amount} ${this.paymentConfig.invoiceDetails.currency}` @@ -89,6 +90,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: "card", + invoice_id: this.paymentConfig.invoiceId, }) this.processOutInstance.makeCardPayment( @@ -121,20 +123,23 @@ module ProcessOut { } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ - invoiceId, - returnUrl: this.paymentConfig.invoiceDetails.return_url, + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url, }) } - private handlePaymentPending(invoiceId: string) { + private handlePaymentPending(invoiceId: string, reason: string | null) { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, + new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) + .element, ) } - DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, { + DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "card", + invoice_id: invoiceId, + reason: reason || null, }) } @@ -152,7 +157,7 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) } private setButtonLoading() { diff --git a/src/dynamic-checkout/utils/events.ts b/src/dynamic-checkout/utils/events.ts index 6d85697d..23845fee 100644 --- a/src/dynamic-checkout/utils/events.ts +++ b/src/dynamic-checkout/utils/events.ts @@ -25,36 +25,41 @@ module ProcessOut { } export class DynamicCheckoutEventsUtils { - static dispatchInvoiceFetchingErrorEvent(errorData: any) { + static dispatchInvoiceFetchingErrorEvent(invoiceId: string, errorData: any) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.INVOICE_FETCHING_ERROR, - errorData, + { ...errorData, invoice_id: invoiceId }, ) return window.dispatchEvent(event) } - static dispatchWidgetLoadingEvent() { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING) + static dispatchWidgetLoadingEvent(invoiceId: string) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING, { + invoice_id: invoiceId, + }) return window.dispatchEvent(event) } - static dispatchWidgetReadyEvent() { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_READY) + static dispatchWidgetReadyEvent(invoiceId: string) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_READY, { + invoice_id: invoiceId, + }) return window.dispatchEvent(event) } - static dispatchTokenizePaymentSuccessEvent(token: string) { + static dispatchTokenizePaymentSuccessEvent(invoiceId: string, token: string) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.TOKENIZE_PAYMENT_SUCCESS, { token, + invoice_id: invoiceId, }) return window.dispatchEvent(event) } - static dispatchTokenizePaymentErrorEvent(errorData: any) { + static dispatchTokenizePaymentErrorEvent(invoiceId: string, errorData: any) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.TOKENIZE_PAYMENT_ERROR, - errorData, + { ...errorData, invoice_id: invoiceId }, ) return window.dispatchEvent(event) } @@ -67,64 +72,81 @@ module ProcessOut { return window.dispatchEvent(event) } - static dispatchPaymentErrorEvent(errorData: any) { + static dispatchPaymentErrorEvent(invoiceId: string, errorData: any) { + const normalizedError = + typeof errorData === "object" && errorData !== null + ? errorData + : { message: String(errorData) } + // TODO: Temporary fix until we fix properly the field unavailable error - if (errorData.code === "processout-js.field.unavailable") { + if (normalizedError.code === "processout-js.field.unavailable") { return } - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_ERROR, errorData) + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_ERROR, { + ...normalizedError, + invoice_id: invoiceId, + reason: normalizedError.message || null, + }) return window.dispatchEvent(event) } - static dispatchPaymentSuccessEvent(response: { invoiceId: string; returnUrl: string }) { + static dispatchPaymentSuccessEvent(response: { invoice_id: string; return_url: string }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, response) return window.dispatchEvent(event) } - static dispatchApplePayNewSessionEvent() { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_NEW_SESSION) + static dispatchApplePayNewSessionEvent(invoiceId: string) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_NEW_SESSION, { + invoice_id: invoiceId, + }) return window.dispatchEvent(event) } - static dispatchApplePayAuthorizedPostProcessEvent() { + static dispatchApplePayAuthorizedPostProcessEvent(invoiceId: string) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_AUTHORIZED_POST_PROCESS, + { invoice_id: invoiceId }, ) return window.dispatchEvent(event) } - static dispatchApplePaySessionError(err: any) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_SESSION_ERROR) + static dispatchApplePaySessionError(invoiceId: string, err: any) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_SESSION_ERROR, { + ...err, + invoice_id: invoiceId, + }) return window.dispatchEvent(event) } - static dispatchDeletePaymentMethodEvent() { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD) + static dispatchDeletePaymentMethodEvent(invoiceId: string) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD, { + invoice_id: invoiceId, + }) return window.dispatchEvent(event) } - static dispatchDeletePaymentMethodErrorEvent(err: any) { + static dispatchDeletePaymentMethodErrorEvent(invoiceId: string, err: any) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD_ERROR, - err, + { ...err, invoice_id: invoiceId }, ) return window.dispatchEvent(event) } - static dispatchTransactionErrorEvent(errorData: { invoiceId: string; returnUrl: string }) { + static dispatchTransactionErrorEvent(errorData: { invoice_id: string; return_url: string }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.TRANSACTION_ERROR, errorData) return window.dispatchEvent(event) } - static dispatchGooglePayLoadError(errorData: { invoiceId: string; returnUrl: string }) { + static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: string }) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.GOOGLE_PAY_LOAD_ERROR, errorData, @@ -133,26 +155,30 @@ module ProcessOut { return window.dispatchEvent(event) } - static dispatchPaymentSubmittedEvent(details: { payment_method_name: string }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUBMITTED, { - details, - }) + static dispatchPaymentSubmittedEvent(details: { + payment_method_name: string + invoice_id: string + }) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUBMITTED, details) return window.dispatchEvent(event) } - static dispatchPaymentCancelledEvent(details: { payment_method_name: string }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_CANCELLED, { - details, - }) + + static dispatchPaymentCancelledEvent(details: { + payment_method_name: string + invoice_id: string + }) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_CANCELLED, details) return window.dispatchEvent(event) } - static dispatchPaymentPendingEvent(token: string, details: { payment_method_name: string }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, { - token, - details, - }) + static dispatchPaymentPendingEvent(details: { + payment_method_name: string + invoice_id: string + reason: string | null + }) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, details) return window.dispatchEvent(event) } diff --git a/src/dynamic-checkout/views/payment-methods.ts b/src/dynamic-checkout/views/payment-methods.ts index db423504..c337cc7b 100644 --- a/src/dynamic-checkout/views/payment-methods.ts +++ b/src/dynamic-checkout/views/payment-methods.ts @@ -310,6 +310,12 @@ module ProcessOut { this.paymentConfig, this.theme, this.resetContainerHtml.bind(this), + () => { + DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ + payment_method_name: paymentMethod.apm.gateway_name, + invoice_id: this.paymentConfig.invoiceId, + }) + }, ) return regularPaymentMethods.push(apmPaymentMethod) @@ -379,15 +385,15 @@ module ProcessOut { {}, (data) => { if (resolveOutcome(data) === OUTCOME.Failed) { - DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent(data) + DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent(this.paymentConfig.invoiceId, data) return } this.deletePaymentMethodFromDom(tokenId, isCardToken) - DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodEvent() + DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodEvent(this.paymentConfig.invoiceId) }, err => { - DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent(err) + DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent(this.paymentConfig.invoiceId, err) }, 0, { diff --git a/src/processout/processout.ts b/src/processout/processout.ts index ecdebf62..8c8a1f2b 100644 --- a/src/processout/processout.ts +++ b/src/processout/processout.ts @@ -1569,7 +1569,7 @@ module ProcessOut { success: (data: any) => void, error: (err: Exception) => void, apiRequestOptions?: apiRequestOptions, - pending?: (data: any) => void, + pending?: (resourceId: string, reason: string | null) => void, ): void { this.handleCardActions( "POST", @@ -1720,7 +1720,7 @@ module ProcessOut { success: (data: any) => void, error: (err: Exception) => void, apiRequestOptions?: apiRequestOptions, - pending?: (data: any) => void, + pending?: (resourceId: string, reason: string | null) => void, ): void { // returns this.hppInitialURL only once during the first call from HPP, then returns the endpoint const getEndpoint = (): string => { @@ -1796,7 +1796,7 @@ module ProcessOut { // Otherwise, call the success callback with the resourceID // This is to ensure backward compatibility with old usage of PO.js if (pending) { - pending(resourceID) + pending(resourceID, data?.message || null) } else { success(resourceID) } From 9f77951e081c2bdcb663948c7dc4b8f6595bb549 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Wed, 4 Mar 2026 09:22:35 +0100 Subject: [PATCH 2/7] chore: bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 681d0e0b..ebf02f01 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "processout.js", - "version": "1.7.8", + "version": "1.7.9", "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.", "scripts": { "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js", From 78ba8f5eb039306ec28dfa5cab294755ceff3b7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Thu, 5 Mar 2026 15:36:29 +0100 Subject: [PATCH 3/7] fixes --- examples/dynamic-checkout/index.html | 2 +- src/dynamic-checkout/dynamic-checkout.ts | 8 ++--- .../payment-methods/saved-apm.ts | 18 ++++++++-- .../payment-methods/saved-card.ts | 6 +++- src/dynamic-checkout/utils/events.ts | 33 +++++++++++-------- 5 files changed, 45 insertions(+), 22 deletions(-) diff --git a/examples/dynamic-checkout/index.html b/examples/dynamic-checkout/index.html index b62b4b25..6855f8b1 100644 --- a/examples/dynamic-checkout/index.html +++ b/examples/dynamic-checkout/index.html @@ -11,7 +11,7 @@ document.addEventListener("DOMContentLoaded", function () { // You need to replace these values with your own const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN" - const invoiceId = "iv_3ATNACq6bNNqTo7Fp7Kq1HPjlHpDPsQx" + const invoiceId = "iv_3AWvoCq6bNNqVl8dXb5MFXjdSgviKYfY" const clientSecret = "" const client = new ProcessOut.ProcessOut(projectId) diff --git a/src/dynamic-checkout/dynamic-checkout.ts b/src/dynamic-checkout/dynamic-checkout.ts index 8d8487b9..844ee341 100644 --- a/src/dynamic-checkout/dynamic-checkout.ts +++ b/src/dynamic-checkout/dynamic-checkout.ts @@ -111,10 +111,10 @@ module ProcessOut { ).element, ) - return DynamicCheckoutEventsUtils.dispatchTransactionErrorEvent({ - invoice_id: data.invoice.id, - return_url: data.invoice.return_url, - }) + return DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + data.invoice.id, + { message: "Transaction is not in a waiting state" }, + ) } this.paymentConfig.setInvoiceDetails(data.invoice) diff --git a/src/dynamic-checkout/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts index 175ade08..7bb0330e 100644 --- a/src/dynamic-checkout/payment-methods/saved-apm.ts +++ b/src/dynamic-checkout/payment-methods/saved-apm.ts @@ -108,6 +108,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: apm.gateway_name, invoice_id: invoiceId, + customer_token_id: apm_customer_token.customer_token_id, }) return this.processOutInstance.handleAction( @@ -140,6 +141,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url, + customer_token_id: apm_customer_token.customer_token_id, + payment_method_name: apm.gateway_name, }) }, error => { @@ -158,7 +161,7 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error, apm_customer_token.customer_token_id, apm.gateway_name) }, requestOptions, (invoiceId, reason) => { @@ -175,6 +178,7 @@ module ProcessOut { payment_method_name: apm.gateway_name, invoice_id: invoiceId, reason: reason || null, + customer_token_id: apm_customer_token.customer_token_id, }) }, ) @@ -185,7 +189,7 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error, apm_customer_token.customer_token_id, apm.gateway_name) }, actionHandlerOptions, this.paymentConfig.invoiceId, @@ -211,6 +215,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url, + customer_token_id: this.paymentMethod.apm_customer_token.customer_token_id, + payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", }) } @@ -226,6 +232,7 @@ module ProcessOut { payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", invoice_id: this.paymentConfig.invoiceId, reason: reason || null, + customer_token_id: this.paymentMethod.apm_customer_token.customer_token_id, }) } @@ -234,7 +241,12 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + this.paymentMethod.apm_customer_token.customer_token_id, + this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + ) } private setButtonLoading() { diff --git a/src/dynamic-checkout/payment-methods/saved-card.ts b/src/dynamic-checkout/payment-methods/saved-card.ts index 3574a21e..a75178b6 100644 --- a/src/dynamic-checkout/payment-methods/saved-card.ts +++ b/src/dynamic-checkout/payment-methods/saved-card.ts @@ -91,6 +91,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: "card", invoice_id: this.paymentConfig.invoiceId, + customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, }) this.processOutInstance.makeCardPayment( @@ -125,6 +126,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url, + customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, + payment_method_name: "card", }) } @@ -140,6 +143,7 @@ module ProcessOut { payment_method_name: "card", invoice_id: invoiceId, reason: reason || null, + customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, }) } @@ -157,7 +161,7 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error, this.paymentMethod.card_customer_token.customer_token_id, "card") } private setButtonLoading() { diff --git a/src/dynamic-checkout/utils/events.ts b/src/dynamic-checkout/utils/events.ts index 23845fee..8543dbf8 100644 --- a/src/dynamic-checkout/utils/events.ts +++ b/src/dynamic-checkout/utils/events.ts @@ -12,8 +12,7 @@ module ProcessOut { PAYMENT_ERROR: "processout_dynamic_checkout_payment_error", PAYMENT_SUCCESS: "processout_dynamic_checkout_payment_success", PAYMENT_CANCELLED: "processout_dynamic_checkout_payment_cancelled", - TRANSACTION_ERROR: "processout_dynamic_checkout_transaction_error", - GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error", +GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error", APPLE_PAY_NEW_SESSION: "processout_dynamic_checkout_apple_pay_new_session", APPLE_PAY_SESSION_ERROR: "processout_dynamic_checkout_apple_pay_session_error", APPLE_PAY_AUTHORIZED_POST_PROCESS: @@ -48,9 +47,9 @@ module ProcessOut { return window.dispatchEvent(event) } - static dispatchTokenizePaymentSuccessEvent(invoiceId: string, token: string) { + static dispatchTokenizePaymentSuccessEvent(invoiceId: string, cardId: string) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.TOKENIZE_PAYMENT_SUCCESS, { - token, + card_id: cardId, invoice_id: invoiceId, }) return window.dispatchEvent(event) @@ -72,7 +71,12 @@ module ProcessOut { return window.dispatchEvent(event) } - static dispatchPaymentErrorEvent(invoiceId: string, errorData: any) { + static dispatchPaymentErrorEvent( + invoiceId: string, + errorData: any, + customerTokenId?: string, + paymentMethodName?: string, + ) { const normalizedError = typeof errorData === "object" && errorData !== null ? errorData @@ -87,11 +91,18 @@ module ProcessOut { ...normalizedError, invoice_id: invoiceId, reason: normalizedError.message || null, + ...(customerTokenId && { customer_token_id: customerTokenId }), + ...(paymentMethodName && { payment_method_name: paymentMethodName }), }) return window.dispatchEvent(event) } - static dispatchPaymentSuccessEvent(response: { invoice_id: string; return_url: string }) { + static dispatchPaymentSuccessEvent(response: { + invoice_id: string + return_url: string + customer_token_id?: string + payment_method_name?: string + }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, response) return window.dispatchEvent(event) @@ -140,13 +151,7 @@ module ProcessOut { return window.dispatchEvent(event) } - static dispatchTransactionErrorEvent(errorData: { invoice_id: string; return_url: string }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.TRANSACTION_ERROR, errorData) - - return window.dispatchEvent(event) - } - - static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: string }) { +static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: string }) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.GOOGLE_PAY_LOAD_ERROR, errorData, @@ -158,6 +163,7 @@ module ProcessOut { static dispatchPaymentSubmittedEvent(details: { payment_method_name: string invoice_id: string + customer_token_id?: string }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUBMITTED, details) @@ -177,6 +183,7 @@ module ProcessOut { payment_method_name: string invoice_id: string reason: string | null + customer_token_id?: string }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, details) From 59c4fac1cd55a5917d9edbc8be3881cf8200dbdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Fri, 6 Mar 2026 16:15:47 +0100 Subject: [PATCH 4/7] fixes --- examples/dynamic-checkout/index.html | 20 +- src/dynamic-checkout/clients/apple-pay.ts | 44 +++- src/dynamic-checkout/clients/google-pay.ts | 45 +++- src/dynamic-checkout/dynamic-checkout.ts | 24 +- src/dynamic-checkout/payment-methods/apm.ts | 63 ++++-- src/dynamic-checkout/payment-methods/card.ts | 47 +++- .../payment-methods/native-apm.ts | 37 +++- .../payment-methods/saved-apm.ts | 43 +++- .../payment-methods/saved-card.ts | 15 +- src/dynamic-checkout/utils/events.ts | 205 +++++++++++++----- src/dynamic-checkout/views/payment-methods.ts | 21 +- src/nativeapm/elements/inputs/input.ts | 1 - 12 files changed, 417 insertions(+), 148 deletions(-) diff --git a/examples/dynamic-checkout/index.html b/examples/dynamic-checkout/index.html index 6855f8b1..02208545 100644 --- a/examples/dynamic-checkout/index.html +++ b/examples/dynamic-checkout/index.html @@ -11,8 +11,9 @@ document.addEventListener("DOMContentLoaded", function () { // You need to replace these values with your own const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN" - const invoiceId = "iv_3AWvoCq6bNNqVl8dXb5MFXjdSgviKYfY" - const clientSecret = "" + const invoiceId = "iv_3AZopCq6bNeWzgBIqH7gtCMecS7fU5aW" + const clientSecret = + "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzI4MTE0MjcsImludm9pY2VfaWQiOiJpdl8zQVpsQUNxNmJOQXZGR0tNcDJ2Um52RFZkcGdjUExydSIsImN1c3RvbWVyX2lkIjoiY3VzdF95S0V1SzNBRkEzUkJGQWxCdzg4YnFSMXZocHpKVjNReSJ9.SZ0Ul9OEwl0sVreShh7iWm31Nifofe_IvZ09fmP51F8" const client = new ProcessOut.ProcessOut(projectId) @@ -68,21 +69,6 @@ console.log("DC: Payment cancelled", e.detail) }) - window.addEventListener( - "processout_dynamic_checkout_tokenize_payment_success", - function (e) { - console.log("DC: Tokenize payment success", e.detail) - }, - ) - - window.addEventListener("processout_dynamic_checkout_tokenize_payment_error", function (e) { - console.log("DC: Tokenize payment error", e.detail) - }) - - window.addEventListener("processout_dynamic_checkout_transaction_error", function (e) { - console.log("DC: Transaction error", e.detail) - }) - window.addEventListener("processout_dynamic_checkout_google_pay_load_error", function (e) { console.log("DC: Google Pay load error", e.detail) }) diff --git a/src/dynamic-checkout/clients/apple-pay.ts b/src/dynamic-checkout/clients/apple-pay.ts index f9f849d9..a0f3a660 100644 --- a/src/dynamic-checkout/clients/apple-pay.ts +++ b/src/dynamic-checkout/clients/apple-pay.ts @@ -78,12 +78,25 @@ module ProcessOut { merchantApplePayCertificateId: applePayPaymentMethodData.merchant_id, applePaySessionVersion: 14, }, - () => DynamicCheckoutEventsUtils.dispatchApplePayNewSessionEvent(this.paymentConfig.invoiceId), - (err) => DynamicCheckoutEventsUtils.dispatchApplePaySessionError(this.paymentConfig.invoiceId, err), + () => + DynamicCheckoutEventsUtils.dispatchApplePayNewSessionEvent( + this.paymentConfig.invoiceId, + this.paymentConfig.invoiceDetails.return_url || null, + ), + (err) => + DynamicCheckoutEventsUtils.dispatchApplePaySessionError( + this.paymentConfig.invoiceId, + err, + this.paymentConfig.invoiceDetails.return_url || null, + ), ) session.onpaymentauthorizedPostprocess = - () => DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent(this.paymentConfig.invoiceId) + () => + DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent( + this.paymentConfig.invoiceId, + this.paymentConfig.invoiceDetails.return_url || null, + ) return session } @@ -97,8 +110,6 @@ module ProcessOut { card => { session.completePayment(0) - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, card) - // The casting is needed since Apple Pay returns card object instead of card token for some reason // You can check the implementation of tokenize function const cardToken = (card as unknown as Record).id @@ -112,6 +123,14 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) .element, ) + + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + { message: "Apple Pay tokenization failed" }, + "apple_pay", + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, ) } @@ -146,7 +165,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + payment_method_name: "apple_pay", }) }, error => { @@ -165,10 +185,16 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + "apple_pay", + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, undefined, - (invoiceId, reason) => { + invoiceId => { if (this.paymentConfig.showStatusMessage) { getViewContainer().appendChild( new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, @@ -178,7 +204,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "apple_pay", invoice_id: invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, }) }, ) diff --git a/src/dynamic-checkout/clients/google-pay.ts b/src/dynamic-checkout/clients/google-pay.ts index 207bfd5b..ec43e814 100644 --- a/src/dynamic-checkout/clients/google-pay.ts +++ b/src/dynamic-checkout/clients/google-pay.ts @@ -103,7 +103,13 @@ module ProcessOut { buttonContainer.appendChild(button) } }) - .catch(DynamicCheckoutEventsUtils.dispatchGooglePayLoadError) + .catch(error => + DynamicCheckoutEventsUtils.dispatchGooglePayLoadError( + error, + this.paymentConfig.invoiceId, + this.paymentConfig.invoiceDetails.return_url || null, + ), + ) } private makePayment(invoiceData: Invoice, getViewContainer: () => HTMLElement) { @@ -119,8 +125,6 @@ module ProcessOut { paymentToken, {}, token => { - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, token) - this.processOutInstance.makeCardPayment( invoiceData.id, token, @@ -150,7 +154,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + payment_method_name: "google_pay", }) }, error => { @@ -173,10 +178,16 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + "google_pay", + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, undefined, - (invoiceId, reason) => { + invoiceId => { if (this.paymentConfig.showStatusMessage) { getViewContainer().appendChild( new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, @@ -186,7 +197,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "google_pay", invoice_id: invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, }) }, ) @@ -197,13 +208,25 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent(this.paymentConfig.invoiceId, { - message: `Tokenize payment error: ${JSON.stringify(error, undefined, 2)}`, - }) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + { + message: `Tokenize payment error: ${JSON.stringify(error, undefined, 2)}`, + }, + "google_pay", + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, ) }) - .catch(DynamicCheckoutEventsUtils.dispatchGooglePayLoadError) + .catch(error => + DynamicCheckoutEventsUtils.dispatchGooglePayLoadError( + error, + this.paymentConfig.invoiceId, + this.paymentConfig.invoiceDetails.return_url || null, + ), + ) } private prepareIsReadyToPayRequest(invoiceData: Invoice) { diff --git a/src/dynamic-checkout/dynamic-checkout.ts b/src/dynamic-checkout/dynamic-checkout.ts index 844ee341..5c586513 100644 --- a/src/dynamic-checkout/dynamic-checkout.ts +++ b/src/dynamic-checkout/dynamic-checkout.ts @@ -50,7 +50,7 @@ module ProcessOut { this.loadView(paymentMethodsView.element) - DynamicCheckoutEventsUtils.dispatchWidgetReadyEvent(this.paymentConfig.invoiceId) + DynamicCheckoutEventsUtils.dispatchWidgetReadyEvent(this.paymentConfig.invoiceId, null) } private getInvoiceDetails(onFetch: Function, onSuccess: Function, onError: Function) { @@ -73,7 +73,7 @@ module ProcessOut { private onGetInvoiceLoading() { this.loadView(new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element) - DynamicCheckoutEventsUtils.dispatchWidgetLoadingEvent(this.paymentConfig.invoiceId) + DynamicCheckoutEventsUtils.dispatchWidgetLoadingEvent(this.paymentConfig.invoiceId, null) } private onGetInvoiceSuccess(data: any) { @@ -85,6 +85,7 @@ module ProcessOut { return DynamicCheckoutEventsUtils.dispatchInvoiceFetchingErrorEvent( this.paymentConfig.invoiceId, data, + data.invoice ? data.invoice.return_url || null : null, ) } @@ -97,9 +98,12 @@ module ProcessOut { ).element, ) - return DynamicCheckoutEventsUtils.dispatchNoDynamicCheckoutConfigurationEvent({ - invoice_id: data.invoice.id, - }) + return DynamicCheckoutEventsUtils.dispatchNoDynamicCheckoutConfigurationEvent( + { + invoice_id: data.invoice.id, + }, + data.invoice.return_url || null, + ) } if (data.invoice.transaction.status !== "waiting") { @@ -113,7 +117,14 @@ module ProcessOut { return DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( data.invoice.id, - { message: "Transaction is not in a waiting state" }, + { + error_type: "transaction.invalid-status", + message: "Transaction is not in a waiting state", + transaction_status: data.invoice.transaction.status, + }, + undefined, + undefined, + data.invoice.return_url || null, ) } @@ -135,6 +146,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchInvoiceFetchingErrorEvent( this.paymentConfig.invoiceId, errorData, + null, ) this.loadView( diff --git a/src/dynamic-checkout/payment-methods/apm.ts b/src/dynamic-checkout/payment-methods/apm.ts index ecd7b552..7cebb351 100644 --- a/src/dynamic-checkout/payment-methods/apm.ts +++ b/src/dynamic-checkout/payment-methods/apm.ts @@ -90,13 +90,12 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: apm.gateway_name, invoice_id: this.paymentConfig.invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, }) this.processOutInstance.handleAction( apm.redirect_url, paymentToken => { - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, paymentToken) - this.resetContainerHtml().appendChild( new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element, ) @@ -123,7 +122,9 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + payment_method_name: apm.gateway_name, + customer_token_id: paymentToken, }) }, error => { @@ -135,10 +136,13 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( this.paymentConfig.invoiceId, error, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, ) }, requestOptions, - (invoiceId, reason) => { + invoiceId => { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) .element, @@ -147,7 +151,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, invoice_id: invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, }) }, ) @@ -162,6 +166,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ payment_method_name: apm.gateway_name, invoice_id: this.paymentConfig.invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, }) } else { this.resetContainerHtml().appendChild( @@ -172,6 +177,9 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( this.paymentConfig.invoiceId, error, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, ) } }, @@ -192,6 +200,12 @@ module ProcessOut { source: apm.gateway_configuration_id, } + DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ + payment_method_name: apm.gateway_name, + invoice_id: this.paymentConfig.invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + }) + this.processOutInstance.apiRequest( "POST", `invoices/${this.paymentConfig.invoiceId}/capture`, @@ -205,7 +219,14 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, data) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + data, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + data.customer_token_id, + ) return } @@ -218,7 +239,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, invoice_id: this.paymentConfig.invoiceId, - reason: data?.message || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + customer_token_id: data.customer_token_id, }) return @@ -227,8 +249,6 @@ module ProcessOut { this.processOutInstance.handleAction( data.customer_action.value, paymentToken => { - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, paymentToken) - this.resetContainerHtml().appendChild( new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element, ) @@ -259,7 +279,9 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + payment_method_name: apm.gateway_name, + customer_token_id: data.customer_token_id, }) }, error => { @@ -285,10 +307,14 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( this.paymentConfig.invoiceId, error, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + data.customer_token_id, ) }, requestOptions, - (invoiceId, reason) => { + invoiceId => { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentPendingView( this.processOutInstance, @@ -299,7 +325,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, invoice_id: invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + customer_token_id: data.customer_token_id, }) }, ) @@ -323,6 +350,10 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( this.paymentConfig.invoiceId, error, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + data.customer_token_id, ) }, actionHandlerOptions, @@ -345,7 +376,13 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, 0, requestOptions, diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts index 1d4bc99e..a51c17f2 100644 --- a/src/dynamic-checkout/payment-methods/card.ts +++ b/src/dynamic-checkout/payment-methods/card.ts @@ -8,6 +8,7 @@ module ProcessOut { private theme: DynamicCheckoutThemeType private resetContainerHtml: () => HTMLElement private isCardRestricted: boolean = false + private tokenizedCardId?: string constructor( procesoutInstance: ProcessOut, @@ -90,10 +91,12 @@ module ProcessOut { } this.setButtonLoading() + this.tokenizedCardId = undefined DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: "card", invoice_id: this.paymentConfig.invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, }) this.procesoutInstance.tokenize( @@ -105,12 +108,19 @@ module ProcessOut { }, this.handleValidationError.bind(this)) }) }, - (err) => DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, err), + err => + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + err, + "card", + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ), ) } private handleTokenizeSuccess(cardToken: string) { - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, cardToken) + this.tokenizedCardId = cardToken const cardPaymentOptions = { authorize_only: !this.paymentConfig.capturePayments, @@ -143,10 +153,23 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.procesoutInstance, this.paymentConfig).element, ) - DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + "card", + this.tokenizedCardId, + this.paymentConfig.invoiceDetails.return_url || null, + ) } private handleCardPaymentSuccess(invoiceId: string) { + DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + payment_method_name: "card", + ...(this.tokenizedCardId && { card_id: this.tokenizedCardId }), + }) + if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentSuccessView(this.procesoutInstance, this.paymentConfig).element, @@ -159,14 +182,9 @@ module ProcessOut { new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element, ) } - - DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ - invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, - }) } - private handleCardPaymentPending(invoiceId: string, reason: string | null) { + private handleCardPaymentPending(invoiceId: string) { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentPendingView(this.procesoutInstance, this.paymentConfig).element, @@ -176,7 +194,8 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "card", invoice_id: invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + ...(this.tokenizedCardId && { card_id: this.tokenizedCardId }), }) } @@ -194,7 +213,13 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + "card", + this.tokenizedCardId, + this.paymentConfig.invoiceDetails.return_url || null, + ) } private getCardFormOptions() { diff --git a/src/dynamic-checkout/payment-methods/native-apm.ts b/src/dynamic-checkout/payment-methods/native-apm.ts index de7a10b5..efb05a11 100644 --- a/src/dynamic-checkout/payment-methods/native-apm.ts +++ b/src/dynamic-checkout/payment-methods/native-apm.ts @@ -2,9 +2,12 @@ module ProcessOut { export class NativeApmPaymentMethod extends PaymentMethodButton { + private static activePaymentMethod: NativeApmPaymentMethod | null = null + private nativeApmInstance: NativeApm private paymentConfig: DynamicCheckoutPaymentConfig private isMounted: boolean + private paymentMethodName: string private theme: DynamicCheckoutThemeType private resetContainerHtml: () => HTMLElement protected processOutInstance: ProcessOut @@ -25,6 +28,7 @@ module ProcessOut { super(processOutInstance, display.name, display.logo.dark_url.vector, display.name) this.paymentConfig = paymentConfig + this.paymentMethodName = apm.gateway_name this.processOutInstance = processOutInstance this.resetContainerHtml = resetContainerHtml this.theme = theme @@ -62,6 +66,8 @@ module ProcessOut { private setupEventListeners(wrapper: HTMLElement) { this.element.addEventListener("click", () => { + NativeApmPaymentMethod.activePaymentMethod = this + if (!this.isMounted) { this.nativeApmInstance.mount(wrapper) this.isMounted = true @@ -69,12 +75,20 @@ module ProcessOut { }) window.addEventListener(NATIVE_APM_EVENTS.PAYMENT_INIT, () => { + if (!this.isActivePaymentMethod()) { + return + } + if (this.onPaymentSubmit) { this.onPaymentSubmit() } }) window.addEventListener(NATIVE_APM_EVENTS.PAYMENT_SUCCESS, () => { + if (!this.isActivePaymentMethod()) { + return + } + if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig) @@ -91,11 +105,18 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: this.paymentConfig.invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + payment_method_name: this.paymentMethodName, }) + + NativeApmPaymentMethod.activePaymentMethod = null }) window.addEventListener(NATIVE_APM_EVENTS.PAYMENT_ERROR, e => { + if (!this.isActivePaymentMethod()) { + return + } + if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) @@ -110,10 +131,22 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, e) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + e, + this.paymentMethodName, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) + + NativeApmPaymentMethod.activePaymentMethod = null }) } + private isActivePaymentMethod() { + return NativeApmPaymentMethod.activePaymentMethod === this + } + private getNativeApmWrapper() { const wrapper = HTMLElements.createElement({ tagName: "div", diff --git a/src/dynamic-checkout/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts index 7bb0330e..176cda2d 100644 --- a/src/dynamic-checkout/payment-methods/saved-apm.ts +++ b/src/dynamic-checkout/payment-methods/saved-apm.ts @@ -108,14 +108,13 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: apm.gateway_name, invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: apm_customer_token.customer_token_id, }) return this.processOutInstance.handleAction( apm_customer_token.redirect_url, paymentToken => { - DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(this.paymentConfig.invoiceId, paymentToken) - this.processOutInstance.makeCardPayment( invoiceId, paymentToken, @@ -140,7 +139,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: apm_customer_token.customer_token_id, payment_method_name: apm.gateway_name, }) @@ -161,10 +160,16 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error, apm_customer_token.customer_token_id, apm.gateway_name) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, requestOptions, - (invoiceId, reason) => { + invoiceId => { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentPendingView( @@ -177,7 +182,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: apm.gateway_name, invoice_id: invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: apm_customer_token.customer_token_id, }) }, @@ -189,13 +194,28 @@ module ProcessOut { .element, ) - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error, apm_customer_token.customer_token_id, apm.gateway_name) + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + apm.gateway_name, + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, actionHandlerOptions, this.paymentConfig.invoiceId, ) } + console.log(apm) + + DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ + payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + invoice_id: invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, + customer_token_id: apm_customer_token.customer_token_id, + }) + this.processOutInstance.makeCardPayment( this.paymentConfig.invoiceId, this.paymentMethod.apm_customer_token.customer_token_id, @@ -214,13 +234,13 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: this.paymentMethod.apm_customer_token.customer_token_id, payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", }) } - private handlePaymentPending(invoiceId: string, reason: string | null) { + private handlePaymentPending(invoiceId: string) { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) @@ -231,7 +251,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", invoice_id: this.paymentConfig.invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: this.paymentMethod.apm_customer_token.customer_token_id, }) } @@ -244,8 +264,9 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( this.paymentConfig.invoiceId, error, - this.paymentMethod.apm_customer_token.customer_token_id, this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + undefined, + this.paymentConfig.invoiceDetails.return_url || null, ) } diff --git a/src/dynamic-checkout/payment-methods/saved-card.ts b/src/dynamic-checkout/payment-methods/saved-card.ts index a75178b6..bfac5498 100644 --- a/src/dynamic-checkout/payment-methods/saved-card.ts +++ b/src/dynamic-checkout/payment-methods/saved-card.ts @@ -91,6 +91,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: "card", invoice_id: this.paymentConfig.invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, }) @@ -125,13 +126,13 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, - return_url: this.paymentConfig.invoiceDetails.return_url, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, payment_method_name: "card", }) } - private handlePaymentPending(invoiceId: string, reason: string | null) { + private handlePaymentPending(invoiceId: string) { if (this.paymentConfig.showStatusMessage) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) @@ -142,7 +143,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ payment_method_name: "card", invoice_id: invoiceId, - reason: reason || null, + return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, }) } @@ -161,7 +162,13 @@ module ProcessOut { ) } - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(this.paymentConfig.invoiceId, error, this.paymentMethod.card_customer_token.customer_token_id, "card") + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( + this.paymentConfig.invoiceId, + error, + "card", + undefined, + this.paymentConfig.invoiceDetails.return_url || null, + ) } private setButtonLoading() { diff --git a/src/dynamic-checkout/utils/events.ts b/src/dynamic-checkout/utils/events.ts index 8543dbf8..7b657525 100644 --- a/src/dynamic-checkout/utils/events.ts +++ b/src/dynamic-checkout/utils/events.ts @@ -5,14 +5,12 @@ module ProcessOut { WIDGET_LOADING: "processout_dynamic_checkout_loading", WIDGET_READY: "processout_dynamic_checkout_ready", INVOICE_FETCHING_ERROR: "processout_dynamic_checkout_invoice_fetching_error", - TOKENIZE_PAYMENT_SUCCESS: "processout_dynamic_checkout_tokenize_payment_success", - TOKENIZE_PAYMENT_ERROR: "processout_dynamic_checkout_tokenize_payment_error", NO_DYNAMIC_CHECKOUT_CONFIGURATION: "processout_dynamic_checkout_no_dynamic_checkout_configuration", PAYMENT_ERROR: "processout_dynamic_checkout_payment_error", PAYMENT_SUCCESS: "processout_dynamic_checkout_payment_success", PAYMENT_CANCELLED: "processout_dynamic_checkout_payment_cancelled", -GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error", + GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error", APPLE_PAY_NEW_SESSION: "processout_dynamic_checkout_apple_pay_new_session", APPLE_PAY_SESSION_ERROR: "processout_dynamic_checkout_apple_pay_session_error", APPLE_PAY_AUTHORIZED_POST_PROCESS: @@ -23,50 +21,66 @@ GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error", PAYMENT_PENDING: "processout_dynamic_checkout_payment_pending", } - export class DynamicCheckoutEventsUtils { - static dispatchInvoiceFetchingErrorEvent(invoiceId: string, errorData: any) { - const event = EventsUtils.createEvent( - DYNAMIC_CHECKOUT_EVENTS.INVOICE_FETCHING_ERROR, - { ...errorData, invoice_id: invoiceId }, - ) + interface DynamicCheckoutEventDetail { + payment_method_name: string | null + return_url: string | null + card_id?: string + } - return window.dispatchEvent(event) - } + interface DynamicCheckoutPaymentErrorEventDetail extends DynamicCheckoutEventDetail { + error_type: string | null + error_message: string | null + invoice_id: string + transaction_status?: string + customer_token_id?: string + } - static dispatchWidgetLoadingEvent(invoiceId: string) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING, { + interface DynamicCheckoutPaymentSuccessEventDetail extends DynamicCheckoutEventDetail { + invoice_id: string + customer_token_id?: string + } + + export class DynamicCheckoutEventsUtils { + static dispatchInvoiceFetchingErrorEvent( + invoiceId: string, + errorData: any, + returnUrl: string | null, + ) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.INVOICE_FETCHING_ERROR, { + ...errorData, invoice_id: invoiceId, + payment_method_name: null, + return_url: returnUrl, }) + return window.dispatchEvent(event) } - static dispatchWidgetReadyEvent(invoiceId: string) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_READY, { + static dispatchWidgetLoadingEvent(invoiceId: string, returnUrl: string | null) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING, { invoice_id: invoiceId, + payment_method_name: null, + return_url: returnUrl, }) return window.dispatchEvent(event) } - static dispatchTokenizePaymentSuccessEvent(invoiceId: string, cardId: string) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.TOKENIZE_PAYMENT_SUCCESS, { - card_id: cardId, + static dispatchWidgetReadyEvent(invoiceId: string, returnUrl: string | null) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_READY, { invoice_id: invoiceId, + return_url: returnUrl, }) return window.dispatchEvent(event) } - static dispatchTokenizePaymentErrorEvent(invoiceId: string, errorData: any) { - const event = EventsUtils.createEvent( - DYNAMIC_CHECKOUT_EVENTS.TOKENIZE_PAYMENT_ERROR, - { ...errorData, invoice_id: invoiceId }, - ) - return window.dispatchEvent(event) - } - - static dispatchNoDynamicCheckoutConfigurationEvent(errorData: any) { + static dispatchNoDynamicCheckoutConfigurationEvent(errorData: any, returnUrl: string | null) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.NO_DYNAMIC_CHECKOUT_CONFIGURATION, - errorData, + { + ...errorData, + payment_method_name: null, + return_url: returnUrl, + }, ) return window.dispatchEvent(event) } @@ -74,87 +88,116 @@ GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error", static dispatchPaymentErrorEvent( invoiceId: string, errorData: any, - customerTokenId?: string, paymentMethodName?: string, + cardId?: string, + returnUrl?: string | null, + customerTokenId?: string, ) { const normalizedError = - typeof errorData === "object" && errorData !== null - ? errorData - : { message: String(errorData) } + DynamicCheckoutEventsUtils.normalizePaymentError( + invoiceId, + errorData, + paymentMethodName || null, + cardId, + returnUrl || null, + customerTokenId, + ) // TODO: Temporary fix until we fix properly the field unavailable error - if (normalizedError.code === "processout-js.field.unavailable") { + if (normalizedError.error_type === "processout-js.field.unavailable") { return } - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_ERROR, { - ...normalizedError, - invoice_id: invoiceId, - reason: normalizedError.message || null, - ...(customerTokenId && { customer_token_id: customerTokenId }), - ...(paymentMethodName && { payment_method_name: paymentMethodName }), - }) + const event = EventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.PAYMENT_ERROR, + normalizedError, + ) return window.dispatchEvent(event) } - static dispatchPaymentSuccessEvent(response: { - invoice_id: string - return_url: string - customer_token_id?: string - payment_method_name?: string - }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, response) + static dispatchPaymentSuccessEvent(response: DynamicCheckoutPaymentSuccessEventDetail) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, { + ...response, + payment_method_name: response.payment_method_name || null, + return_url: response.return_url || null, + }) return window.dispatchEvent(event) } - static dispatchApplePayNewSessionEvent(invoiceId: string) { + static dispatchApplePayNewSessionEvent(invoiceId: string, returnUrl: string | null) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_NEW_SESSION, { invoice_id: invoiceId, + payment_method_name: "apple_pay", + return_url: returnUrl, }) return window.dispatchEvent(event) } - static dispatchApplePayAuthorizedPostProcessEvent(invoiceId: string) { + static dispatchApplePayAuthorizedPostProcessEvent(invoiceId: string, returnUrl: string | null) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_AUTHORIZED_POST_PROCESS, - { invoice_id: invoiceId }, + { + invoice_id: invoiceId, + payment_method_name: "apple_pay", + return_url: returnUrl, + }, ) return window.dispatchEvent(event) } - static dispatchApplePaySessionError(invoiceId: string, err: any) { + static dispatchApplePaySessionError(invoiceId: string, err: any, returnUrl: string | null) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_SESSION_ERROR, { ...err, invoice_id: invoiceId, + payment_method_name: "apple_pay", + return_url: returnUrl, }) return window.dispatchEvent(event) } - static dispatchDeletePaymentMethodEvent(invoiceId: string) { + static dispatchDeletePaymentMethodEvent( + invoiceId: string, + paymentMethodName: string | null, + returnUrl: string | null, + ) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD, { invoice_id: invoiceId, + payment_method_name: paymentMethodName, + return_url: returnUrl, }) return window.dispatchEvent(event) } - static dispatchDeletePaymentMethodErrorEvent(invoiceId: string, err: any) { - const event = EventsUtils.createEvent( - DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD_ERROR, - { ...err, invoice_id: invoiceId }, - ) + static dispatchDeletePaymentMethodErrorEvent( + invoiceId: string, + err: any, + paymentMethodName: string | null, + returnUrl: string | null, + ) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD_ERROR, { + ...err, + invoice_id: invoiceId, + payment_method_name: paymentMethodName, + return_url: returnUrl, + }) return window.dispatchEvent(event) } -static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: string }) { + static dispatchGooglePayLoadError(errorData: any, invoiceId: string, returnUrl: string | null) { const event = EventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.GOOGLE_PAY_LOAD_ERROR, - errorData, + { + ...DynamicCheckoutEventsUtils.getEventDetail(errorData), + invoice_id: invoiceId, + return_url: returnUrl, + payment_method_name: "google_pay", + }, ) return window.dispatchEvent(event) @@ -163,6 +206,7 @@ static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: s static dispatchPaymentSubmittedEvent(details: { payment_method_name: string invoice_id: string + return_url: string | null customer_token_id?: string }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUBMITTED, details) @@ -173,6 +217,7 @@ static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: s static dispatchPaymentCancelledEvent(details: { payment_method_name: string invoice_id: string + return_url: string | null }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_CANCELLED, details) @@ -182,7 +227,7 @@ static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: s static dispatchPaymentPendingEvent(details: { payment_method_name: string invoice_id: string - reason: string | null + return_url: string | null customer_token_id?: string }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, details) @@ -190,6 +235,46 @@ static dispatchGooglePayLoadError(errorData: { invoice_id: string; return_url: s return window.dispatchEvent(event) } + private static getEventDetail(data: any) { + if (typeof data === "object" && data !== null && "detail" in data) { + return data.detail + } + + return data + } + + private static normalizePaymentError( + invoiceId: string, + errorData: any, + paymentMethodName: string | null, + cardId?: string, + returnUrl?: string | null, + customerTokenId?: string, + ): DynamicCheckoutPaymentErrorEventDetail { + const normalizedError = DynamicCheckoutEventsUtils.getEventDetail(errorData) + const isObject = typeof normalizedError === "object" && normalizedError !== null + + return { + invoice_id: invoiceId, + payment_method_name: paymentMethodName, + return_url: returnUrl || null, + ...(cardId && { card_id: cardId }), + ...(customerTokenId && { customer_token_id: customerTokenId }), + error_type: isObject + ? normalizedError.error_type || normalizedError.code || null + : null, + error_message: isObject + ? normalizedError.error_message || normalizedError.message || null + : normalizedError == null + ? null + : String(normalizedError), + ...(isObject && + normalizedError.transaction_status && { + transaction_status: normalizedError.transaction_status, + }), + } + } + // IE 11 polyfill static createEvent(eventName: string, data?: any) { if (typeof window.CustomEvent === "function") { diff --git a/src/dynamic-checkout/views/payment-methods.ts b/src/dynamic-checkout/views/payment-methods.ts index c337cc7b..9cdbfd82 100644 --- a/src/dynamic-checkout/views/payment-methods.ts +++ b/src/dynamic-checkout/views/payment-methods.ts @@ -314,6 +314,7 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: paymentMethod.apm.gateway_name, invoice_id: this.paymentConfig.invoiceId, + return_url: this.paymentConfig.invoiceDetails.return_url || null, }) }, ) @@ -385,15 +386,29 @@ module ProcessOut { {}, (data) => { if (resolveOutcome(data) === OUTCOME.Failed) { - DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent(this.paymentConfig.invoiceId, data) + DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent( + this.paymentConfig.invoiceId, + data, + isCardToken ? "card" : paymentMethod.apm.gateway_name, + this.paymentConfig.invoiceDetails.return_url || null, + ) return } this.deletePaymentMethodFromDom(tokenId, isCardToken) - DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodEvent(this.paymentConfig.invoiceId) + DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodEvent( + this.paymentConfig.invoiceId, + isCardToken ? "card" : paymentMethod.apm.gateway_name, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, err => { - DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent(this.paymentConfig.invoiceId, err) + DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent( + this.paymentConfig.invoiceId, + err, + isCardToken ? "card" : paymentMethod.apm.gateway_name, + this.paymentConfig.invoiceDetails.return_url || null, + ) }, 0, { diff --git a/src/nativeapm/elements/inputs/input.ts b/src/nativeapm/elements/inputs/input.ts index 5ceec1ea..df13ed95 100644 --- a/src/nativeapm/elements/inputs/input.ts +++ b/src/nativeapm/elements/inputs/input.ts @@ -68,7 +68,6 @@ module ProcessOut { * This function returns the input value */ public getInputValue() { - console.log(this.inputInstance.getValue()) return this.inputInstance.getValue() } From c47d5ff3c9042c7f3fc998b127c74f6b9ff0f085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Mon, 9 Mar 2026 10:04:03 +0100 Subject: [PATCH 5/7] fixes --- src/dynamic-checkout/payment-methods/apm.ts | 1 - src/dynamic-checkout/payment-methods/card.ts | 3 +- .../payment-methods/saved-apm.ts | 8 +- .../payment-methods/saved-card.ts | 2 - src/dynamic-checkout/utils/events.ts | 89 ++++++++++++++----- src/nativeapm/utils/events.ts | 21 ++++- src/processout/processout.ts | 80 +++++++++-------- 7 files changed, 133 insertions(+), 71 deletions(-) diff --git a/src/dynamic-checkout/payment-methods/apm.ts b/src/dynamic-checkout/payment-methods/apm.ts index 7cebb351..fdf96a17 100644 --- a/src/dynamic-checkout/payment-methods/apm.ts +++ b/src/dynamic-checkout/payment-methods/apm.ts @@ -124,7 +124,6 @@ module ProcessOut { invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, payment_method_name: apm.gateway_name, - customer_token_id: paymentToken, }) }, error => { diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts index a51c17f2..99253d36 100644 --- a/src/dynamic-checkout/payment-methods/card.ts +++ b/src/dynamic-checkout/payment-methods/card.ts @@ -162,12 +162,13 @@ module ProcessOut { ) } - private handleCardPaymentSuccess(invoiceId: string) { + private handleCardPaymentSuccess(invoiceId: string, data?: any) { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, payment_method_name: "card", ...(this.tokenizedCardId && { card_id: this.tokenizedCardId }), + customer_token_id: data?.customer_token_id, }) if (this.paymentConfig.showStatusMessage) { diff --git a/src/dynamic-checkout/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts index 176cda2d..0e825b84 100644 --- a/src/dynamic-checkout/payment-methods/saved-apm.ts +++ b/src/dynamic-checkout/payment-methods/saved-apm.ts @@ -140,7 +140,6 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, - customer_token_id: apm_customer_token.customer_token_id, payment_method_name: apm.gateway_name, }) }, @@ -183,7 +182,6 @@ module ProcessOut { payment_method_name: apm.gateway_name, invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, - customer_token_id: apm_customer_token.customer_token_id, }) }, ) @@ -207,8 +205,6 @@ module ProcessOut { ) } - console.log(apm) - DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", invoice_id: invoiceId, @@ -227,7 +223,7 @@ module ProcessOut { ) } - private handlePaymentSuccess(invoiceId: string) { + private handlePaymentSuccess(invoiceId: string, data) { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig).element, ) @@ -235,7 +231,6 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, - customer_token_id: this.paymentMethod.apm_customer_token.customer_token_id, payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", }) } @@ -252,7 +247,6 @@ module ProcessOut { payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", invoice_id: this.paymentConfig.invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, - customer_token_id: this.paymentMethod.apm_customer_token.customer_token_id, }) } diff --git a/src/dynamic-checkout/payment-methods/saved-card.ts b/src/dynamic-checkout/payment-methods/saved-card.ts index bfac5498..228ab4d4 100644 --- a/src/dynamic-checkout/payment-methods/saved-card.ts +++ b/src/dynamic-checkout/payment-methods/saved-card.ts @@ -127,7 +127,6 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, - customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, payment_method_name: "card", }) } @@ -144,7 +143,6 @@ module ProcessOut { payment_method_name: "card", invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, - customer_token_id: this.paymentMethod.card_customer_token.customer_token_id, }) } diff --git a/src/dynamic-checkout/utils/events.ts b/src/dynamic-checkout/utils/events.ts index 7b657525..e1557f41 100644 --- a/src/dynamic-checkout/utils/events.ts +++ b/src/dynamic-checkout/utils/events.ts @@ -46,27 +46,33 @@ module ProcessOut { errorData: any, returnUrl: string | null, ) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.INVOICE_FETCHING_ERROR, { + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.INVOICE_FETCHING_ERROR, + { ...errorData, invoice_id: invoiceId, payment_method_name: null, return_url: returnUrl, - }) + }, + ) return window.dispatchEvent(event) } static dispatchWidgetLoadingEvent(invoiceId: string, returnUrl: string | null) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING, { + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING, + { invoice_id: invoiceId, payment_method_name: null, return_url: returnUrl, - }) + }, + ) return window.dispatchEvent(event) } static dispatchWidgetReadyEvent(invoiceId: string, returnUrl: string | null) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_READY, { + const event = DynamicCheckoutEventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_READY, { invoice_id: invoiceId, return_url: returnUrl, }) @@ -74,7 +80,7 @@ module ProcessOut { } static dispatchNoDynamicCheckoutConfigurationEvent(errorData: any, returnUrl: string | null) { - const event = EventsUtils.createEvent( + const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.NO_DYNAMIC_CHECKOUT_CONFIGURATION, { ...errorData, @@ -108,7 +114,7 @@ module ProcessOut { return } - const event = EventsUtils.createEvent( + const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.PAYMENT_ERROR, normalizedError, ) @@ -116,7 +122,7 @@ module ProcessOut { } static dispatchPaymentSuccessEvent(response: DynamicCheckoutPaymentSuccessEventDetail) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, { + const event = DynamicCheckoutEventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, { ...response, payment_method_name: response.payment_method_name || null, return_url: response.return_url || null, @@ -126,17 +132,20 @@ module ProcessOut { } static dispatchApplePayNewSessionEvent(invoiceId: string, returnUrl: string | null) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_NEW_SESSION, { + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_NEW_SESSION, + { invoice_id: invoiceId, payment_method_name: "apple_pay", return_url: returnUrl, - }) + }, + ) return window.dispatchEvent(event) } static dispatchApplePayAuthorizedPostProcessEvent(invoiceId: string, returnUrl: string | null) { - const event = EventsUtils.createEvent( + const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_AUTHORIZED_POST_PROCESS, { invoice_id: invoiceId, @@ -149,12 +158,15 @@ module ProcessOut { } static dispatchApplePaySessionError(invoiceId: string, err: any, returnUrl: string | null) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_SESSION_ERROR, { + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_SESSION_ERROR, + { ...err, invoice_id: invoiceId, payment_method_name: "apple_pay", return_url: returnUrl, - }) + }, + ) return window.dispatchEvent(event) } @@ -164,11 +176,14 @@ module ProcessOut { paymentMethodName: string | null, returnUrl: string | null, ) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD, { + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD, + { invoice_id: invoiceId, payment_method_name: paymentMethodName, return_url: returnUrl, - }) + }, + ) return window.dispatchEvent(event) } @@ -179,18 +194,21 @@ module ProcessOut { paymentMethodName: string | null, returnUrl: string | null, ) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD_ERROR, { + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD_ERROR, + { ...err, invoice_id: invoiceId, payment_method_name: paymentMethodName, return_url: returnUrl, - }) + }, + ) return window.dispatchEvent(event) } static dispatchGooglePayLoadError(errorData: any, invoiceId: string, returnUrl: string | null) { - const event = EventsUtils.createEvent( + const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.GOOGLE_PAY_LOAD_ERROR, { ...DynamicCheckoutEventsUtils.getEventDetail(errorData), @@ -209,7 +227,10 @@ module ProcessOut { return_url: string | null customer_token_id?: string }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUBMITTED, details) + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUBMITTED, + details, + ) return window.dispatchEvent(event) } @@ -219,7 +240,10 @@ module ProcessOut { invoice_id: string return_url: string | null }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_CANCELLED, details) + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.PAYMENT_CANCELLED, + details, + ) return window.dispatchEvent(event) } @@ -230,7 +254,10 @@ module ProcessOut { return_url: string | null customer_token_id?: string }) { - const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, details) + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, + details, + ) return window.dispatchEvent(event) } @@ -275,16 +302,32 @@ module ProcessOut { } } + private static sanitizeEventDetail(data?: any) { + if (!data || Object.prototype.toString.call(data) !== "[object Object]") { + return data + } + + return Object.keys(data).reduce((sanitizedData, key) => { + if (data[key] !== null && data[key] !== undefined) { + sanitizedData[key] = data[key] + } + + return sanitizedData + }, {}) + } + // IE 11 polyfill static createEvent(eventName: string, data?: any) { + const sanitizedData = DynamicCheckoutEventsUtils.sanitizeEventDetail(data) + if (typeof window.CustomEvent === "function") { return new CustomEvent(eventName, { bubbles: true, - detail: data, + detail: sanitizedData, }) } else { const event = document.createEvent("CustomEvent") - event.initCustomEvent(eventName, true, false, data) + event.initCustomEvent(eventName, true, false, sanitizedData) return event } } diff --git a/src/nativeapm/utils/events.ts b/src/nativeapm/utils/events.ts index 4cf90208..691097f2 100644 --- a/src/nativeapm/utils/events.ts +++ b/src/nativeapm/utils/events.ts @@ -65,16 +65,33 @@ module ProcessOut { ); return window.dispatchEvent(event); } + + private static sanitizeEventDetail(data?: any) { + if (!data || Object.prototype.toString.call(data) !== "[object Object]") { + return data; + } + + return Object.keys(data).reduce((sanitizedData, key) => { + if (data[key] !== null && data[key] !== undefined) { + sanitizedData[key] = data[key]; + } + + return sanitizedData; + }, {}); + } + // IE 11 polyfill static createEvent(eventName: string, data?: any) { + const sanitizedData = EventsUtils.sanitizeEventDetail(data); + if (typeof window.CustomEvent === "function") { return new CustomEvent(eventName, { bubbles: true, - detail: data, + detail: sanitizedData, }); } else { const event = document.createEvent("CustomEvent"); - event.initCustomEvent(eventName, true, false, data); + event.initCustomEvent(eventName, true, false, sanitizedData); return event; } } diff --git a/src/processout/processout.ts b/src/processout/processout.ts index 8c8a1f2b..049da36b 100644 --- a/src/processout/processout.ts +++ b/src/processout/processout.ts @@ -1,6 +1,5 @@ /// - // declare the IE specific XDomainRequest object declare var XDomainRequest: any @@ -331,8 +330,8 @@ module ProcessOut { if (path.substring(0, 4) != "http" && path[0] != "/") path = this.endpoint("api", "/" + path) - const queryParams = path.indexOf('?') !== -1 ? path.split('?')[1].split('&') : []; - path = path.indexOf('?') !== -1 ? path.split('?')[0] : path + const queryParams = path.indexOf("?") !== -1 ? path.split("?")[1].split("&") : [] + path = path.indexOf("?") !== -1 ? path.split("?")[0] : path var headers = { "Content-Type": "application/json", @@ -356,7 +355,7 @@ module ProcessOut { // We need to hack our project ID in the URL itself so that // ProcessOut's load-balancers and routers can route the request // to the project's region - queryParams.push(`legacyrequest=true&project_id=${this.projectID}`); + queryParams.push(`legacyrequest=true&project_id=${this.projectID}`) } // We also need to hack our request headers for legacy browsers to @@ -367,13 +366,13 @@ module ProcessOut { } for (var k in customHeaders) { - queryParams.push(`x-${k}=${customHeaders[k]}`); + queryParams.push(`x-${k}=${customHeaders[k]}`) headers[`X-${k}`] = customHeaders[k] } if (method == "get") { for (var key in data) { - queryParams.push(`${key}=${encodeURIComponent(data[key])}`); + queryParams.push(`${key}=${encodeURIComponent(data[key])}`) } } @@ -459,20 +458,20 @@ module ProcessOut { form: HTMLElement, options: CardFieldOptions, onSuccess: (form: CardForm) => void, - onError: (err: Exception) => void - ): CardForm; + onError: (err: Exception) => void, + ): CardForm public setupForm( form: HTMLElement, onSuccess: (form: CardForm) => void, - onError: (err: Exception) => void - ): CardForm; + onError: (err: Exception) => void, + ): CardForm public setupForm( form: HTMLElement, optionsOrOnSuccess: CardFieldOptions | ((form: CardForm) => void), onSuccessOrOnError: ((form: CardForm) => void) | ((err: Exception) => void), - onError?: (err: Exception) => void + onError?: (err: Exception) => void, ): CardForm { if (!this.projectID) { throw new Exception( @@ -488,18 +487,18 @@ module ProcessOut { ) } - let options: CardFieldOptions; - let onSuccess: ((form: CardForm) => void); + let options: CardFieldOptions + let onSuccess: (form: CardForm) => void - if (typeof optionsOrOnSuccess === 'function') { + if (typeof optionsOrOnSuccess === "function") { // This is the setupForm(element, onSuccess, onError) signature - options = new CardFieldOptions(""); - onSuccess = optionsOrOnSuccess; - onError = onSuccessOrOnError as (err: Exception) => void; + options = new CardFieldOptions("") + onSuccess = optionsOrOnSuccess + onError = onSuccessOrOnError as (err: Exception) => void } else { // This is the setupForm(element, options, onSuccess, onError) signature - options = optionsOrOnSuccess; - onSuccess = onSuccessOrOnError as (form: CardForm) => void; + options = optionsOrOnSuccess + onSuccess = onSuccessOrOnError as (form: CardForm) => void } return new CardForm(this, form).setup(options, onSuccess, onError) @@ -523,24 +522,23 @@ module ProcessOut { /** * apm */ - public get apm(){ + public get apm() { return { tokenization: (container: Container, options: TokenizationUserOptions) => { return new APMImpl(this, this.telemetryClient, container, { ...options, - flow: 'tokenization', + flow: "tokenization", }) }, authorization: (container: Container, options: AuthorizationUserOptions) => { return new APMImpl(this, this.telemetryClient, container, { ...options, - flow: 'authorization' + flow: "authorization", }) - } + }, } } - /** * SetupDynamicCheckout creates a Dynamic Checkout instance * @param {DynamicCheckoutConfigType} config @@ -1664,7 +1662,7 @@ module ProcessOut { const iin = cardNumber.substring(0, 6) const apiEndpoint = `iins/${iin}` - + this.apiRequest( "GET", apiEndpoint, @@ -1717,7 +1715,7 @@ module ProcessOut { resourceID: string, cardID: string, options: any, - success: (data: any) => void, + success: (resourceId: any, data?: any) => void, error: (err: Exception) => void, apiRequestOptions?: apiRequestOptions, pending?: (resourceId: string, reason: string | null) => void, @@ -1733,7 +1731,7 @@ module ProcessOut { } if (!options) options = {} - + // Validate split_allocations if provided try { this.validateSplitAllocations(options.split_allocations) @@ -1741,7 +1739,7 @@ module ProcessOut { error(validationError) return } - + let source: string = cardID if (options.gatewayRequestSource) source = options.gatewayRequestSource @@ -1798,13 +1796,13 @@ module ProcessOut { if (pending) { pending(resourceID, data?.message || null) } else { - success(resourceID) + success(resourceID, data) } return } if (!data.customer_action) { - success(resourceID) + success(resourceID, data) return } @@ -1923,7 +1921,7 @@ module ProcessOut { } const allowedTypes = ["PURCHASE", "FEE", "VAT", "COMMISSION", "MARKETPLACE", "SHIPPING"] - + splitAllocations.forEach((allocation: any, index: number) => { if (!allocation || typeof allocation !== "object") { throw new Exception("invalid_request", `split_allocations[${index}] must be an object`) @@ -1933,23 +1931,35 @@ module ProcessOut { const requiredFields = ["provider_recipient_reference", "type", "amount", "currency"] requiredFields.forEach(field => { if (!allocation[field]) { - throw new Exception("invalid_request", `split_allocations[${index}].${field} is required`) + throw new Exception( + "invalid_request", + `split_allocations[${index}].${field} is required`, + ) } }) // Validate type field if (allowedTypes.indexOf(allocation.type) === -1) { - throw new Exception("invalid_request", `split_allocations[${index}].type must be one of: ${allowedTypes.join(", ")}`) + throw new Exception( + "invalid_request", + `split_allocations[${index}].type must be one of: ${allowedTypes.join(", ")}`, + ) } // Validate amount is a valid number string if (typeof allocation.amount !== "string" || isNaN(parseFloat(allocation.amount))) { - throw new Exception("invalid_request", `split_allocations[${index}].amount must be a valid number string`) + throw new Exception( + "invalid_request", + `split_allocations[${index}].amount must be a valid number string`, + ) } // Validate currency is a string if (typeof allocation.currency !== "string") { - throw new Exception("invalid_request", `split_allocations[${index}].currency must be a string`) + throw new Exception( + "invalid_request", + `split_allocations[${index}].currency must be a string`, + ) } }) } From ab615bfe73cb72dcf5faeeae65e01c4125c68d13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Mon, 9 Mar 2026 10:51:51 +0100 Subject: [PATCH 6/7] fixes2 --- .../payment-methods/saved-apm.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/dynamic-checkout/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts index 0e825b84..baba7dcd 100644 --- a/src/dynamic-checkout/payment-methods/saved-apm.ts +++ b/src/dynamic-checkout/payment-methods/saved-apm.ts @@ -206,7 +206,9 @@ module ProcessOut { } DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({ - payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + payment_method_name: this.paymentMethod.apm_customer_token + ? this.paymentMethod.apm_customer_token.gateway_name + : "apm", invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, customer_token_id: apm_customer_token.customer_token_id, @@ -231,7 +233,9 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ invoice_id: invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, - payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + payment_method_name: this.paymentMethod.apm_customer_token + ? this.paymentMethod.apm_customer_token.gateway_name + : "apm", }) } @@ -244,7 +248,9 @@ module ProcessOut { } DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({ - payment_method_name: this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + payment_method_name: this.paymentMethod.apm_customer_token + ? this.paymentMethod.apm_customer_token.gateway_name + : "apm", invoice_id: this.paymentConfig.invoiceId, return_url: this.paymentConfig.invoiceDetails.return_url || null, }) @@ -258,7 +264,9 @@ module ProcessOut { DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent( this.paymentConfig.invoiceId, error, - this.paymentMethod.apm ? this.paymentMethod.apm.gateway_name : "apm", + this.paymentMethod.apm_customer_token + ? this.paymentMethod.apm_customer_token.gateway_name + : "apm", undefined, this.paymentConfig.invoiceDetails.return_url || null, ) From 77ad95e34ac60ea788621e61fe8c76f7dc6291d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Mon, 9 Mar 2026 11:23:33 +0100 Subject: [PATCH 7/7] suffix --- src/dynamic-checkout/utils/events.ts | 79 +++++++++++++--------------- 1 file changed, 38 insertions(+), 41 deletions(-) diff --git a/src/dynamic-checkout/utils/events.ts b/src/dynamic-checkout/utils/events.ts index e1557f41..f8098afc 100644 --- a/src/dynamic-checkout/utils/events.ts +++ b/src/dynamic-checkout/utils/events.ts @@ -15,7 +15,7 @@ module ProcessOut { APPLE_PAY_SESSION_ERROR: "processout_dynamic_checkout_apple_pay_session_error", APPLE_PAY_AUTHORIZED_POST_PROCESS: "processout_dynamic_checkout_apple_pay_authorized_post_process", - DELETE_PAYMENT_METHOD: "processout_dynamic_checkout_delete_payment_method", + DELETE_PAYMENT_METHOD: "processout_dynamic_checkout_delete_payment_method_success", DELETE_PAYMENT_METHOD_ERROR: "processout_dynamic_checkout_delete_payment_method_error", PAYMENT_SUBMITTED: "processout_dynamic_checkout_payment_submitted", PAYMENT_PENDING: "processout_dynamic_checkout_payment_pending", @@ -49,10 +49,10 @@ module ProcessOut { const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.INVOICE_FETCHING_ERROR, { - ...errorData, - invoice_id: invoiceId, - payment_method_name: null, - return_url: returnUrl, + ...errorData, + invoice_id: invoiceId, + payment_method_name: null, + return_url: returnUrl, }, ) @@ -60,14 +60,11 @@ module ProcessOut { } static dispatchWidgetLoadingEvent(invoiceId: string, returnUrl: string | null) { - const event = DynamicCheckoutEventsUtils.createEvent( - DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING, - { + const event = DynamicCheckoutEventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.WIDGET_LOADING, { invoice_id: invoiceId, payment_method_name: null, return_url: returnUrl, - }, - ) + }) return window.dispatchEvent(event) } @@ -99,15 +96,14 @@ module ProcessOut { returnUrl?: string | null, customerTokenId?: string, ) { - const normalizedError = - DynamicCheckoutEventsUtils.normalizePaymentError( - invoiceId, - errorData, - paymentMethodName || null, - cardId, - returnUrl || null, - customerTokenId, - ) + const normalizedError = DynamicCheckoutEventsUtils.normalizePaymentError( + invoiceId, + errorData, + paymentMethodName || null, + cardId, + returnUrl || null, + customerTokenId, + ) // TODO: Temporary fix until we fix properly the field unavailable error if (normalizedError.error_type === "processout-js.field.unavailable") { @@ -122,11 +118,14 @@ module ProcessOut { } static dispatchPaymentSuccessEvent(response: DynamicCheckoutPaymentSuccessEventDetail) { - const event = DynamicCheckoutEventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, { - ...response, - payment_method_name: response.payment_method_name || null, - return_url: response.return_url || null, - }) + const event = DynamicCheckoutEventsUtils.createEvent( + DYNAMIC_CHECKOUT_EVENTS.PAYMENT_SUCCESS, + { + ...response, + payment_method_name: response.payment_method_name || null, + return_url: response.return_url || null, + }, + ) return window.dispatchEvent(event) } @@ -135,9 +134,9 @@ module ProcessOut { const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_NEW_SESSION, { - invoice_id: invoiceId, - payment_method_name: "apple_pay", - return_url: returnUrl, + invoice_id: invoiceId, + payment_method_name: "apple_pay", + return_url: returnUrl, }, ) @@ -161,10 +160,10 @@ module ProcessOut { const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.APPLE_PAY_SESSION_ERROR, { - ...err, - invoice_id: invoiceId, - payment_method_name: "apple_pay", - return_url: returnUrl, + ...err, + invoice_id: invoiceId, + payment_method_name: "apple_pay", + return_url: returnUrl, }, ) @@ -179,9 +178,9 @@ module ProcessOut { const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD, { - invoice_id: invoiceId, - payment_method_name: paymentMethodName, - return_url: returnUrl, + invoice_id: invoiceId, + payment_method_name: paymentMethodName, + return_url: returnUrl, }, ) @@ -197,10 +196,10 @@ module ProcessOut { const event = DynamicCheckoutEventsUtils.createEvent( DYNAMIC_CHECKOUT_EVENTS.DELETE_PAYMENT_METHOD_ERROR, { - ...err, - invoice_id: invoiceId, - payment_method_name: paymentMethodName, - return_url: returnUrl, + ...err, + invoice_id: invoiceId, + payment_method_name: paymentMethodName, + return_url: returnUrl, }, ) @@ -287,9 +286,7 @@ module ProcessOut { return_url: returnUrl || null, ...(cardId && { card_id: cardId }), ...(customerTokenId && { customer_token_id: customerTokenId }), - error_type: isObject - ? normalizedError.error_type || normalizedError.code || null - : null, + error_type: isObject ? normalizedError.error_type || normalizedError.code || null : null, error_message: isObject ? normalizedError.error_message || normalizedError.message || null : normalizedError == null