Skip to content

fix: fix inconsistency in cancelled events in dc #266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jakubjasinsky wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: fix inconsistency in cancelled events in dc #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2dca291
fix: fix inconsistency in cancelled events in dc
jakubjasinsky Jun 17, 2026
28d5b66
bump version
jakubjasinsky Jun 17, 2026
bcbc9f1
after review
jakubjasinsky Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "processout.js",
"version": "1.9.6",
"version": "1.9.7",
"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",
Expand Down
48 changes: 33 additions & 15 deletions src/dynamic-checkout/payment-methods/card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

module ProcessOut {
export class CardPaymentMethod extends PaymentMethodButton {
private procesoutInstance: ProcessOut
private paymentMethod: PaymentMethod
private paymentMethodDisplayName: string
private paymentConfig: DynamicCheckoutPaymentConfig
Expand All @@ -12,7 +11,7 @@ module ProcessOut {
private tokenizedCardId?: string

constructor(
procesoutInstance: ProcessOut,
processOutInstance: ProcessOut,
paymentMethod: PaymentMethod,
paymentConfig: DynamicCheckoutPaymentConfig,
theme: DynamicCheckoutThemeType,
Expand All @@ -26,14 +25,13 @@ module ProcessOut {
})

super(
procesoutInstance,
processOutInstance,
Translations.getText("card-label", paymentConfig.locale),
display.logo.light_url.vector,
display.name,
rightContent,
)

this.procesoutInstance = procesoutInstance
this.paymentMethod = paymentMethod
this.paymentMethodDisplayName = display.name
this.paymentConfig = paymentConfig
Expand All @@ -47,7 +45,7 @@ module ProcessOut {
}

private setupCardForm(form: HTMLElement): void {
this.procesoutInstance.setupForm(
this.processOutInstance.setupForm(
form,
this.getCardFormOptions(),
cardForm => {
Expand All @@ -64,7 +62,7 @@ module ProcessOut {

cardSchemeLogo.setAttribute(
"src",
this.procesoutInstance.endpoint("js", CARD_SCHEMES_ASSETS[scheme]),
this.processOutInstance.endpoint("js", CARD_SCHEMES_ASSETS[scheme]),
)
} else {
cardSchemeLogo.setAttribute("hidden", "true")
Expand Down Expand Up @@ -102,7 +100,7 @@ module ProcessOut {
return_url: this.paymentConfig.invoiceDetails.return_url || null,
})

this.procesoutInstance.tokenize(
this.processOutInstance.tokenize(
cardForm,
this.getAdditionalFormValues(form),
this.handleTokenizeSuccess.bind(this),
Expand Down Expand Up @@ -146,7 +144,7 @@ module ProcessOut {
cardPaymentOptions["save_source"] = saveForFutureCheckbox.checked
}

this.procesoutInstance.makeCardPayment(
this.processOutInstance.makeCardPayment(
this.paymentConfig.invoiceId,
cardToken,
cardPaymentOptions,
Expand All @@ -161,7 +159,7 @@ module ProcessOut {

private handleTokenizeError(error) {
this.resetContainerHtml().appendChild(
new DynamicCheckoutPaymentErrorView(this.procesoutInstance, this.paymentConfig).element,
new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element,
)

DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(
Expand All @@ -188,7 +186,7 @@ module ProcessOut {

if (this.paymentConfig.showStatusMessage) {
this.resetContainerHtml().appendChild(
new DynamicCheckoutPaymentSuccessView(this.procesoutInstance, this.paymentConfig).element,
new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig).element,
)
} else if (
!this.paymentConfig.showStatusMessage &&
Expand All @@ -203,7 +201,7 @@ module ProcessOut {
private handleCardPaymentPending(invoiceId: string, _reason: string | null, data?: any) {
if (this.paymentConfig.showStatusMessage) {
this.resetContainerHtml().appendChild(
new DynamicCheckoutPaymentPendingView(this.procesoutInstance, this.paymentConfig).element,
new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element,
)
}

Expand All @@ -218,9 +216,29 @@ module ProcessOut {
}

private handleCardPaymentError(error) {
if (error.code === "customer.canceled") {
this.resetContainerHtml().appendChild(
new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
.element,
)
Comment thread
jakubjasinsky marked this conversation as resolved.

DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
payment_method_name: "card",
payment_method_display_name: this.paymentMethodDisplayName,
invoice_id: this.paymentConfig.invoiceId,
return_url: this.paymentConfig.invoiceDetails.return_url || null,
// Card 3DS challenges run in an iframe overlay (no tab/window).
// The SDK can still report iframe closes as reason "tab_closed", but we treat this as an in-overlay cancel.
// For event reporting we therefore force `tab_closed: false` below.
tab_closed: false,
})

return
}

if (this.paymentConfig.showStatusMessage) {
this.resetContainerHtml().appendChild(
new DynamicCheckoutPaymentErrorView(this.procesoutInstance, this.paymentConfig).element,
new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element,
)
} else if (
!this.paymentConfig.showStatusMessage &&
Expand Down Expand Up @@ -512,7 +530,7 @@ module ProcessOut {
tagName: "img",
classNames: ["dco-card-cvc-icon"],
attributes: {
src: this.procesoutInstance.endpoint("js", CARD_CVC_ICON),
src: this.processOutInstance.endpoint("js", CARD_CVC_ICON),
alt: "",
"aria-hidden": "true",
},
Expand Down Expand Up @@ -562,7 +580,7 @@ module ProcessOut {
tagName: "img",
classNames: ["dco-card-scheme-logo"],
attributes: {
src: this.procesoutInstance.endpoint("js", CARD_SCHEMES_ASSETS.visa),
src: this.processOutInstance.endpoint("js", CARD_SCHEMES_ASSETS.visa),
hidden: "true",
},
},
Expand Down Expand Up @@ -624,7 +642,7 @@ module ProcessOut {

// ProcessOut inputs doesn't have onChange event, so we need to listen to messages from the iframe
window.addEventListener("message", e => {
if (e.origin === this.procesoutInstance.endpoint("js", "")) {
if (e.origin === this.processOutInstance.endpoint("js", "")) {
const eventData = e.data ? JSON.parse(e.data) : {}

if (eventData.action === "inputEvent") {
Expand Down
5 changes: 4 additions & 1 deletion src/dynamic-checkout/payment-methods/saved-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,10 @@ module ProcessOut {
payment_method_display_name: this.paymentMethodDisplayName,
invoice_id: this.paymentConfig.invoiceId,
return_url: this.paymentConfig.invoiceDetails.return_url || null,
tab_closed: error.metadata?.reason === "tab_closed",
// Card 3DS challenges run in an iframe overlay (no tab/window).
// The SDK can still report iframe closes as reason "tab_closed", but we treat this as an in-overlay cancel.
// For event reporting we therefore force `tab_closed: false` below.
tab_closed: false,
})
} else {
if (this.paymentConfig.showStatusMessage) {
Expand Down
Loading