processout · jakubjasinsky · Dec 4, 2025 · Dec 4, 2025
diff --git 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_36LHtCq6bNj5JR3yggvgO4cSjR6XGBNB"
+        const invoiceId = "iv_36NWNCq6bNv4SIQ0vHjXXXpZIuMKb0sM"
         const clientSecret = ""
 
         const client = new ProcessOut.ProcessOut(projectId)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "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",

diff --git a/src/dynamic-checkout/clients/apple-pay.ts b/src/dynamic-checkout/clients/apple-pay.ts
@@ -134,6 +134,11 @@ module ProcessOut {
               new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig)
                 .element,
             )
+          } else {
+            getViewContainer().appendChild(
+              new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                .element,
+            )
           }
 
           DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
@@ -147,6 +152,11 @@ module ProcessOut {
               new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
                 .element,
             )
+          } else {
+            getViewContainer().appendChild(
+              new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                .element,
+            )
           }
 
           DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)

diff --git a/src/dynamic-checkout/clients/google-pay.ts b/src/dynamic-checkout/clients/google-pay.ts
@@ -136,6 +136,13 @@ module ProcessOut {
                         this.paymentConfig,
                       ).element,
                     )
+                  } else {
+                    getViewContainer().appendChild(
+                      new DynamicCheckoutPaymentInfoView(
+                        this.processOutInstance,
+                        this.paymentConfig,
+                      ).element,
+                    )
                   }
 
                   DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
@@ -151,6 +158,13 @@ module ProcessOut {
                         this.paymentConfig,
                       ).element,
                     )
+                  } else {
+                    getViewContainer().appendChild(
+                      new DynamicCheckoutPaymentInfoView(
+                        this.processOutInstance,
+                        this.paymentConfig,
+                      ).element,
+                    )
                   }
 
                   DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)

diff --git a/src/dynamic-checkout/config/payment-config.ts b/src/dynamic-checkout/config/payment-config.ts
@@ -30,7 +30,6 @@ module ProcessOut {
 
     constructor(config: DynamicCheckoutPublicConfigType) {
       this.setInitialConfig(config)
-      console.log(this.showStatusMessage)
     }
 
     public getConfig(): DynamicCheckoutPublicConfigType & DynamicCheckoutInternalConfigType {

diff --git a/src/dynamic-checkout/locales/en.ts b/src/dynamic-checkout/locales/en.ts
@@ -20,6 +20,7 @@ module ProcessOut {
     "other-payment-methods-header": "Other payment methods",
     "select-payment-method-label": "Select payment method",
     "payment-success-message": "This payment is completed.",
+    "payment-info-message": "We are processing your payment. You can now close this window.",
     "payment-error-generic-message": "We were unable to process your payment.",
     "street1-label": "Address line 1",
     "street2-label": "Address line 2",

diff --git a/src/dynamic-checkout/locales/es.ts b/src/dynamic-checkout/locales/es.ts
@@ -20,6 +20,7 @@ module ProcessOut {
     "other-payment-methods-header": "Otros métodos de pago",
     "select-payment-method-label": "Seleccionar método de pago",
     "payment-success-message": "Este pago se ha completado.",
+    "payment-info-message": "Estamos procesando su pago. Puede cerrar esta ventana.",
     "payment-error-generic-message": "No pudimos procesar su pago.",
     "street1-label": "Dirección, línea 1",
     "street2-label": "Dirección, línea 2",

diff --git a/src/dynamic-checkout/locales/fr.ts b/src/dynamic-checkout/locales/fr.ts
@@ -20,6 +20,8 @@ module ProcessOut {
     "other-payment-methods-header": "Autres méthodes de paiement",
     "select-payment-method-label": "Sélectionner un méthode de paiement",
     "payment-success-message": "Ce paiement a été effectué avec succès.",
+    "payment-info-message":
+      "Nous travaillons sur votre paiement. Vous pouvez maintenant fermer cette fenêtre.",
     "payment-error-generic-message": "Nous n'avons pas pu traiter votre paiement.",
     "street1-label": "Adresse, ligne 1",
     "street2-label": "Adresse, ligne 2",

diff --git a/src/dynamic-checkout/locales/pl.ts b/src/dynamic-checkout/locales/pl.ts
@@ -20,6 +20,7 @@ module ProcessOut {
     "other-payment-methods-header": "Inne metody płatności",
     "select-payment-method-label": "Wybierz metodę płatności",
     "payment-success-message": "Płatność została zakończona pomyślnie.",
+    "payment-info-message": "Przetwarzamy Twoją płatność. Możesz teraz zamknąć tę okno.",
     "payment-error-generic-message": "Nie udało nam się przetworzyć Twojej płatności.",
     "street1-label": "Adres, linia 1",
     "street2-label": "Adres, linia 2",

diff --git a/src/dynamic-checkout/locales/pt.ts b/src/dynamic-checkout/locales/pt.ts
@@ -20,6 +20,8 @@ module ProcessOut {
     "other-payment-methods-header": "Outros métodos de pagamento",
     "select-payment-method-label": "Selecionar método de pagamento",
     "payment-success-message": "Este pagamento foi concluído.",
+    "payment-info-message":
+      "Estamos processando seu pagamento. Você pode agora fechar esta janela.",
     "payment-error-generic-message": "Não conseguimos processar o seu pagamento.",
     "street1-label": "Endereço, linha 1",
     "street2-label": "Endereço, linha 2",

diff --git a/src/dynamic-checkout/payment-methods/apm.ts b/src/dynamic-checkout/payment-methods/apm.ts
@@ -110,6 +110,11 @@ module ProcessOut {
                   new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig)
                     .element,
                 )
+              } else {
+                this.resetContainerHtml().appendChild(
+                  new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                    .element,
+                )
               }
 
               DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId)
@@ -183,6 +188,13 @@ module ProcessOut {
                         this.paymentConfig,
                       ).element,
                     )
+                  } else {
+                    this.resetContainerHtml().appendChild(
+                      new DynamicCheckoutPaymentInfoView(
+                        this.processOutInstance,
+                        this.paymentConfig,
+                      ).element,
+                    )
                   }
 
                   DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId)
@@ -195,6 +207,13 @@ module ProcessOut {
                         this.paymentConfig,
                       ).element,
                     )
+                  } else {
+                    this.resetContainerHtml().appendChild(
+                      new DynamicCheckoutPaymentInfoView(
+                        this.processOutInstance,
+                        this.paymentConfig,
+                      ).element,
+                    )
                   }
 
                   DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
@@ -208,6 +227,11 @@ module ProcessOut {
                   new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
                     .element,
                 )
+              } else {
+                this.resetContainerHtml().appendChild(
+                  new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                    .element,
+                )
               }
 
               DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
@@ -222,6 +246,11 @@ module ProcessOut {
               new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
                 .element,
             )
+          } else {
+            this.resetContainerHtml().appendChild(
+              new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                .element,
+            )
           }
 
           DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)

diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts
@@ -146,6 +146,10 @@ module ProcessOut {
         this.resetContainerHtml().appendChild(
           new DynamicCheckoutPaymentSuccessView(this.procesoutInstance, this.paymentConfig).element,
         )
+      } else {
+        this.resetContainerHtml().appendChild(
+          new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element,
+        )
       }
 
       DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
@@ -159,6 +163,10 @@ module ProcessOut {
         this.resetContainerHtml().appendChild(
           new DynamicCheckoutPaymentErrorView(this.procesoutInstance, this.paymentConfig).element,
         )
+      } else {
+        this.resetContainerHtml().appendChild(
+          new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element,
+        )
       }
 
       DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)

diff --git a/src/dynamic-checkout/payment-methods/native-apm.ts b/src/dynamic-checkout/payment-methods/native-apm.ts
@@ -68,6 +68,10 @@ module ProcessOut {
             new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig)
               .element,
           )
+        } else {
+          this.resetContainerHtml().appendChild(
+            new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element,
+          )
         }
 
         DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
@@ -82,6 +86,10 @@ module ProcessOut {
             new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
               .element,
           )
+        } else {
+          this.resetContainerHtml().appendChild(
+            new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element,
+          )
         }
 
         DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(e)

diff --git a/src/dynamic-checkout/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts
@@ -125,6 +125,11 @@ module ProcessOut {
                       this.paymentConfig,
                     ).element,
                   )
+                } else {
+                  this.resetContainerHtml().appendChild(
+                    new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                      .element,
+                  )
                 }
 
                 DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId)
@@ -135,6 +140,11 @@ module ProcessOut {
                     new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
                       .element,
                   )
+                } else {
+                  this.resetContainerHtml().appendChild(
+                    new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                      .element,
+                  )
                 }
 
                 DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)

diff --git a/src/dynamic-checkout/payment-methods/saved-card.ts b/src/dynamic-checkout/payment-methods/saved-card.ts
@@ -109,6 +109,10 @@ module ProcessOut {
           new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig)
             .element,
         )
+      } else {
+        this.resetContainerHtml().appendChild(
+          new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element,
+        )
       }
 
       DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
@@ -122,6 +126,10 @@ module ProcessOut {
         this.resetContainerHtml().appendChild(
           new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element,
         )
+      } else {
+        this.resetContainerHtml().appendChild(
+          new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element,
+        )
       }
 
       DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)

diff --git a/src/dynamic-checkout/references.ts b/src/dynamic-checkout/references.ts
@@ -5,6 +5,7 @@
 /// <reference path="config/theme.ts" />
 /// <reference path="views/payment-methods.ts" />
 /// <reference path="views/payment-success.ts" />
+/// <reference path="views/payment-info.ts" />
 /// <reference path="views/invoice-loading.ts" />
 /// <reference path="elements/payment-method-button.ts" />
 /// <reference path="elements/payment-methods-manager.ts" />

diff --git a/src/dynamic-checkout/views/payment-info.ts b/src/dynamic-checkout/views/payment-info.ts
@@ -0,0 +1,25 @@
+/// <reference path="../references.ts" />
+
+module ProcessOut {
+  export class DynamicCheckoutPaymentInfoView {
+    public element: Element
+
+    constructor(processOutInstance: ProcessOut, paymentConfig: DynamicCheckoutPaymentConfig) {
+      const [element, message] = HTMLElements.createMultipleElements([
+        {
+          tagName: "div",
+          classNames: ["dco-card-payment-success"],
+        },
+        {
+          tagName: "p",
+          classNames: ["dco-card-payment-success-text"],
+          textContent: Translations.getText("payment-info-message", paymentConfig.locale),
+        },
+      ])
+
+      HTMLElements.appendChildren(element, [message])
+
+      this.element = element
+    }
+  }
+}