chore: refactor dc events payload

examples/dynamic-checkout/index.html

@@ -10,9 +10,10 @@
     <script>
       document.addEventListener("DOMContentLoaded", function () {
         // You need to replace these values with your own
-        const projectId = "test-proj_zkSfc1Cz6vPjhcLkapSpO7UtmCeYuavb"
-        const invoiceId = "iv_3AFPfYuavbUBf4rerB2VMHKUnmQjke59"
-        const clientSecret = ""
+        const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN"
+        const invoiceId = "iv_3AZopCq6bNeWzgBIqH7gtCMecS7fU5aW"
+        const clientSecret =
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzI4MTE0MjcsImludm9pY2VfaWQiOiJpdl8zQVpsQUNxNmJOQXZGR0tNcDJ2Um52RFZkcGdjUExydSIsImN1c3RvbWVyX2lkIjoiY3VzdF95S0V1SzNBRkEzUkJGQWxCdzg4YnFSMXZocHpKVjNReSJ9.SZ0Ul9OEwl0sVreShh7iWm31Nifofe_IvZ09fmP51F8"
 
         const client = new ProcessOut.ProcessOut(projectId)
 
@@ -21,63 +22,85 @@
           clientSecret,
           capturePayments: false,
           allowFallbackToSale: false,
-          showStatusMessage: false,
-          locale: "de",
+          showStatusMessage: true,
+          locale: "en",
+          payButtonText: undefined,
         })
 
         dynamicCheckout.mount("#dynamic-cko-container")
 
-        // Dynamic Checkout widget dispatches event on every major action. Here are event handlers to test them
+        // Dynamic Checkout events
         window.addEventListener("processout_dynamic_checkout_loading", function (e) {
-          console.log("Widget loading")
+          console.log("DC: Widget loading", e.detail)
         })
 
         window.addEventListener("processout_dynamic_checkout_ready", function (e) {
-          console.log("Widget Ready")
+          console.log("DC: Widget ready", e.detail)
         })
 
         window.addEventListener("processout_dynamic_checkout_invoice_fetching_error", function (e) {
-          console.log("Invoice fetching error")
-        })
-
-        window.addEventListener("processout_dynamic_checkout_apm_payment_submitted", function (e) {
-          console.log("Apm payment submitted", e)
-        })
-
-        window.addEventListener("processout_dynamic_checkout_apm_payment_pending", function (e) {
-          console.log("Apm payment pending", e)
+          console.log("DC: Invoice fetching error", e.detail)
         })
 
         window.addEventListener(
-          "processout_dynamic_checkout_tokenize_payment_success",
+          "processout_dynamic_checkout_no_dynamic_checkout_configuration",
           function (e) {
-            console.log("Tokenize payment success")
+            console.log("DC: No dynamic checkout configuration", e.detail)
           },
         )
 
-        window.addEventListener("processout_dynamic_checkout_tokenize_payment_error", function (e) {
-          console.log("Tokenize payment error")
+        window.addEventListener("processout_dynamic_checkout_payment_submitted", function (e) {
+          console.log("DC: Payment submitted", e.detail)
+        })
+
+        window.addEventListener("processout_dynamic_checkout_payment_pending", function (e) {
+          console.log("DC: Payment pending", e.detail)
         })
 
         window.addEventListener("processout_dynamic_checkout_payment_success", function (e) {
-          console.log("Payment success", e)
+          console.log("DC: Payment success", e.detail)
         })
 
         window.addEventListener("processout_dynamic_checkout_payment_error", function (e) {
-          console.log("Payment Error", e)
+          console.log("DC: Payment error", e.detail)
         })
 
-        window.addEventListener("processout_native_apm_payment_success", function (e) {
-          console.log("Payment Status (outside widget): Payment success", e)
+        window.addEventListener("processout_dynamic_checkout_payment_cancelled", function (e) {
+          console.log("DC: Payment cancelled", e.detail)
         })
 
-        window.addEventListener("processout_dynamic_checkout_transaction_error", function (e) {
-          console.log("Payment Status (outside widget): Transaction error", e)
+        window.addEventListener("processout_dynamic_checkout_google_pay_load_error", function (e) {
+          console.log("DC: Google Pay load error", e.detail)
         })
 
-        window.addEventListener("processout_dynamic_checkout_google_pay_load_error", function (e) {
-          console.log("Payment Status (outside widget): Google Pay load error", e)
+        window.addEventListener("processout_dynamic_checkout_apple_pay_new_session", function (e) {
+          console.log("DC: Apple Pay new session", e.detail)
         })
+
+        window.addEventListener(
+          "processout_dynamic_checkout_apple_pay_session_error",
+          function (e) {
+            console.log("DC: Apple Pay session error", e.detail)
+          },
+        )
+
+        window.addEventListener(
+          "processout_dynamic_checkout_apple_pay_authorized_post_process",
+          function (e) {
+            console.log("DC: Apple Pay authorized post process", e.detail)
+          },
+        )
+
+        window.addEventListener("processout_dynamic_checkout_delete_payment_method", function (e) {
+          console.log("DC: Delete payment method", e.detail)
+        })
+
+        window.addEventListener(
+          "processout_dynamic_checkout_delete_payment_method_error",
+          function (e) {
+            console.log("DC: Delete payment method error", e.detail)
+          },
+        )
       })
     </script>
   </body>

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",

src/dynamic-checkout/clients/apple-pay.ts

@@ -78,12 +78,25 @@ module ProcessOut {
           merchantApplePayCertificateId: applePayPaymentMethodData.merchant_id,
           applePaySessionVersion: 14,
         },
-        DynamicCheckoutEventsUtils.dispatchApplePayNewSessionEvent,
-        DynamicCheckoutEventsUtils.dispatchApplePaySessionError,
+        () =>
+          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
+        () =>
+          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(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<string, any>).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,
+          )
         },
       )
     }
@@ -145,8 +164,9 @@ module ProcessOut {
           }
 
           DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
-            invoiceId,
-            returnUrl: this.paymentConfig.invoiceDetails.return_url,
+            invoice_id: invoiceId,
+            return_url: this.paymentConfig.invoiceDetails.return_url || null,
+            payment_method_name: "apple_pay",
           })
         },
         error => {
@@ -165,7 +185,13 @@ module ProcessOut {
             )
           }
 
-          DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
+          DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(
+            this.paymentConfig.invoiceId,
+            error,
+            "apple_pay",
+            undefined,
+            this.paymentConfig.invoiceDetails.return_url || null,
+          )
         },
         undefined,
         invoiceId => {
@@ -175,8 +201,10 @@ module ProcessOut {
             )
           }
 
-          DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, {
+          DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({
             payment_method_name: "apple_pay",
+            invoice_id: invoiceId,
+            return_url: this.paymentConfig.invoiceDetails.return_url || null,
           })
         },
       )

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(token)
-
               this.processOutInstance.makeCardPayment(
                 invoiceData.id,
                 token,
@@ -149,8 +153,9 @@ module ProcessOut {
                   }
 
                   DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
-                    invoiceId,
-                    returnUrl: this.paymentConfig.invoiceDetails.return_url,
+                    invoice_id: invoiceId,
+                    return_url: this.paymentConfig.invoiceDetails.return_url || null,
+                    payment_method_name: "google_pay",
                   })
                 },
                 error => {
@@ -173,7 +178,13 @@ module ProcessOut {
                     )
                   }
 
-                  DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
+                  DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(
+                    this.paymentConfig.invoiceId,
+                    error,
+                    "google_pay",
+                    undefined,
+                    this.paymentConfig.invoiceDetails.return_url || null,
+                  )
                 },
                 undefined,
                 invoiceId => {
@@ -183,8 +194,10 @@ module ProcessOut {
                     )
                   }
 
-                  DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, {
+                  DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent({
                     payment_method_name: "google_pay",
+                    invoice_id: invoiceId,
+                    return_url: this.paymentConfig.invoiceDetails.return_url || null,
                   })
                 },
               )
@@ -195,13 +208,25 @@ module ProcessOut {
                   .element,
               )
 
-              DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent({
-                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) {