feat: add apm additional data to dc

examples/dynamic-checkout/index.html

@@ -10,8 +10,8 @@
     <script>
       document.addEventListener("DOMContentLoaded", function () {
         // You need to replace these values with your own
-        const projectId = "test-proj_zkSfc1Cz6vPjhcLkapSpO7UtmCeYuavb"
-        const invoiceId = "iv_3AFPfYuavbUBf4rerB2VMHKUnmQjke59"
+        const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN"
+        const invoiceId = "iv_3ATdtCq6bNZf0KiXoF8x0F5t48HlHlmC"
         const clientSecret = ""
 
         const client = new ProcessOut.ProcessOut(projectId)
@@ -22,7 +22,10 @@
           capturePayments: false,
           allowFallbackToSale: false,
           showStatusMessage: false,
-          locale: "de",
+          locale: "en",
+          additionalData: {
+            issuer_id: "1234",
+          },
         })
 
         dynamicCheckout.mount("#dynamic-cko-container")

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/config/payment-config.ts

@@ -10,6 +10,7 @@ module ProcessOut {
     allowFallbackToSale?: boolean
     showStatusMessage?: boolean
     payButtonText?: string
+    additionalData?: Record<string, string>
   }
 
   export type DynamicCheckoutInternalConfigType = {
@@ -28,6 +29,7 @@ module ProcessOut {
     allowFallbackToSale: DynamicCheckoutPublicConfigType["allowFallbackToSale"] = false
     showStatusMessage: DynamicCheckoutPublicConfigType["showStatusMessage"] = true
     payButtonText: DynamicCheckoutPublicConfigType["payButtonText"] = ""
+    additionalData: DynamicCheckoutPublicConfigType["additionalData"] = {}
     invoiceDetails: DynamicCheckoutInternalConfigType["invoiceDetails"]
 
     constructor(config: DynamicCheckoutPublicConfigType) {
@@ -43,6 +45,7 @@ module ProcessOut {
         capturePayments: this.capturePayments,
         allowFallbackToSale: this.allowFallbackToSale,
         showStatusMessage: this.showStatusMessage,
+        additionalData: this.additionalData,
       }
     }
 
@@ -64,6 +67,7 @@ module ProcessOut {
       this.capturePayments = config.capturePayments || false
       this.allowFallbackToSale = config.allowFallbackToSale || false
       this.payButtonText = config.payButtonText || ""
+      this.additionalData = config.additionalData || {}
 
       if (config.showStatusMessage !== undefined && config.showStatusMessage !== null) {
         this.showStatusMessage = config.showStatusMessage

src/dynamic-checkout/payment-methods/apm.ts

@@ -86,15 +86,22 @@ module ProcessOut {
       requestOptions: RequestOptions,
     ) {
       const { apm } = this.paymentMethod
+      const { additionalData } = this.paymentConfig
+
+      const redirectUrl = additionalData
+        ? this.processOutInstance.appendAdditionalDataToUrl(apm.redirect_url, additionalData)
+        : apm.redirect_url
 
       DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({
         payment_method_name: apm.gateway_name,
       })
 
       this.processOutInstance.handleAction(
-        apm.redirect_url,
+        redirectUrl,
         paymentToken => {
-          this.resetContainerHtml().appendChild(new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element)
+          this.resetContainerHtml().appendChild(
+            new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element,
+          )
 
           this.processOutInstance.makeCardPayment(
             this.paymentConfig.invoiceId,
@@ -129,7 +136,8 @@ module ProcessOut {
             requestOptions,
             invoiceId => {
               this.resetContainerHtml().appendChild(
-                new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element,
+                new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig)
+                  .element,
               )
 
               DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, {
@@ -193,7 +201,8 @@ module ProcessOut {
 
           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, {
@@ -206,7 +215,9 @@ module ProcessOut {
           this.processOutInstance.handleAction(
             data.customer_action.value,
             paymentToken => {
-              this.resetContainerHtml().appendChild(new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element)
+              this.resetContainerHtml().appendChild(
+                new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element,
+              )
 
               this.processOutInstance.makeCardPayment(
                 this.paymentConfig.invoiceId,
@@ -259,7 +270,10 @@ module ProcessOut {
                 requestOptions,
                 invoiceId => {
                   this.resetContainerHtml().appendChild(
-                    new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element,
+                    new DynamicCheckoutPaymentPendingView(
+                      this.processOutInstance,
+                      this.paymentConfig,
+                    ).element,
                   )
 
                   DynamicCheckoutEventsUtils.dispatchPaymentPendingEvent(invoiceId, {
@@ -371,8 +385,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}`,

src/dynamic-checkout/payment-methods/saved-apm.ts

@@ -104,12 +104,18 @@ module ProcessOut {
       this.setButtonLoading()
 
       if (apm_customer_token.redirect_url) {
+        const { additionalData } = this.paymentConfig
+
+        const redirectUrl = additionalData
+          ? this.processOutInstance.appendAdditionalDataToUrl(apm_customer_token.redirect_url, additionalData)
+          : apm_customer_token.redirect_url
+
         DynamicCheckoutEventsUtils.dispatchPaymentSubmittedEvent({
           payment_method_name: apm.gateway_name,
         })
 
         return this.processOutInstance.handleAction(
-          apm_customer_token.redirect_url,
+          redirectUrl,
           paymentToken => {
             this.processOutInstance.makeCardPayment(
               invoiceId,

src/processout/processout.ts

@@ -1007,6 +1007,31 @@ module ProcessOut {
       })
     }
 
+    public appendAdditionalDataToUrl(url: string, additionalData: any): string {
+      if (!additionalData || Object.keys(additionalData).length === 0) {
+        return url
+      }
+
+      var query = this.buildAdditionalDataQuery(additionalData)
+
+      if (!query) {
+        return url
+      }
+
+      var separator = url.includes("?") ? "&" : "?"
+      return url + separator + query.substring(1)
+    }
+
+    public buildAdditionalDataQuery(additionalData: any): string {
+      var query = "?"
+
+      for (var key in additionalData) {
+        query += `${encodeURIComponent(`additional_data[${key}]`)}=${encodeURIComponent(additionalData[key])}&`
+      }
+
+      return query.substring(0, query.length - 1)
+    }
+
     /**
      * Returns the invoice action URL.
      * @param {InvoiceActionUrlProps} config
@@ -1022,17 +1047,10 @@ module ProcessOut {
         )
       }
 
-      var suffix = "?"
-      var additionalData = config.additionalData
-      for (var key in additionalData) {
-        suffix += `additional_data[${key}]=${encodeURI(additionalData[key])}&`
-      }
+      var suffix = this.buildAdditionalDataQuery(config.additionalData)
 
       var tokenSuffix = config.customerTokenId ? `/tokenized/${config.customerTokenId}` : ""
-      var path = `/${this.getProjectID()}/${invoiceId}/redirect/${gatewayConfID}${tokenSuffix}${suffix.substring(
-        0,
-        suffix.length - 1,
-      )}`
+      var path = `/${this.getProjectID()}/${invoiceId}/redirect/${gatewayConfID}${tokenSuffix}${suffix}`
       return this.endpoint("checkout", path)
     }
 
@@ -1265,17 +1283,11 @@ module ProcessOut {
         )
       }
 
-      var suffix = "?"
-      for (var key in additionalData) {
-        suffix += `additional_data[${key}]=${encodeURI(additionalData[key])}&`
-      }
+      var suffix = this.buildAdditionalDataQuery(additionalData)
 
       return this.endpoint(
         "checkout",
-        `/${this.getProjectID()}/${customerID}/${tokenID}/redirect/${gatewayConfID}${suffix.substring(
-          0,
-          suffix.length - 1,
-        )}`,
+        `/${this.getProjectID()}/${customerID}/${tokenID}/redirect/${gatewayConfID}${suffix}`,
       )
     }