feat: dc - delete saved methods, widget api, logos fix

examples/dynamic-checkout/index.html

@@ -11,15 +11,17 @@
       document.addEventListener("DOMContentLoaded", function () {
         // You need to replace these values with your own
         const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN"
-        const invoiceId = "iv_cJXSDBgjJFcFBtzLJWcDoQ3ZcEqaJCEU"
-        const clientSecret = "client-secret"
+        const invoiceId = "iv_fbzOpNMPAuIQjy1mGVjJG7htCw7mNYkY"
+        const clientSecret = ""
 
         const client = new ProcessOut.ProcessOut(projectId)
 
         const dynamicCheckout = client.setupDynamicCheckout({
           invoiceId,
-          projectId,
           clientSecret,
+          capturePayments: false,
+          allowFallbackToSale: false,
+          locale: "en",
         })
 
         dynamicCheckout.mount("#dynamic-cko-container")

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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

@@ -16,35 +16,31 @@ module ProcessOut {
       getViewContainer: () => HTMLElement,
     ) {
       const applePayScript = document.createElement("script")
-      const initializeApplePay = this.initializeApplePay.bind(this)
-
       applePayScript.src = applePaySdkUrl
       applePayScript.onload = () => {
         buttonContainer.innerHTML = `<apple-pay-button buttonstyle="black" type="plain" locale="en-US"></apple-pay-button>`
-        initializeApplePay(invoiceData, buttonContainer, getViewContainer)
+        this.initializeApplePay(invoiceData, buttonContainer, getViewContainer)
       }
 
       document.head.appendChild(applePayScript)
     }
 
     private initializeApplePay(
       invoiceData: Invoice,
-      buttonContainer: HTMLDivElement,
+      buttonContainer: HTMLElement,
       getViewContainer: () => HTMLElement,
     ) {
-      const tokenizeApplePay = this.tokenizeApplePay.bind(this)
-
       const applePayPaymentMethodData = this.getApplePayPaymentMethodData(invoiceData)
 
       this.processOutInstance.applePay.checkAvailability(
-        function (err) {
+        err => {
           if (err) {
             console.log(err)
           } else {
             buttonContainer.classList.add("visible")
 
             document.querySelector("apple-pay-button").addEventListener("click", () => {
-              tokenizeApplePay(invoiceData, getViewContainer)
+              this.tokenizeApplePay(invoiceData, getViewContainer)
             })
           }
         },
@@ -53,10 +49,9 @@ module ProcessOut {
     }
 
     private getSupportedNetworks(invoiceData: Invoice) {
-      let supportedNetworks = []
-
       const applePayPaymentMethodData = this.getApplePayPaymentMethodData(invoiceData)
 
+      let supportedNetworks = []
       applePayPaymentMethodData.supported_networks.forEach(network => {
         if (networksMap[network]) {
           supportedNetworks.push(networksMap[network])
@@ -67,9 +62,8 @@ module ProcessOut {
     }
 
     private createApplePaySession(invoiceData: Invoice) {
-      const supportedNetworks = this.getSupportedNetworks(invoiceData)
-
       const applePayPaymentMethodData = this.getApplePayPaymentMethodData(invoiceData)
+      const supportedNetworks = this.getSupportedNetworks(invoiceData)
 
       const session = this.processOutInstance.applePay.newSession(
         {
@@ -96,7 +90,6 @@ module ProcessOut {
 
     private tokenizeApplePay(invoiceData: Invoice, getViewContainer: () => HTMLElement) {
       const session = this.createApplePaySession(invoiceData)
-      const makeApplePayPayment = this.makeApplePayPayment.bind(this)
 
       this.processOutInstance.tokenize(
         session,
@@ -110,13 +103,11 @@ module ProcessOut {
           // You can check the implementation of tokenize function
           const cardToken = (card as unknown as Record<string, any>).id
 
-          makeApplePayPayment(cardToken, invoiceData, getViewContainer)
+          this.makeApplePayPayment(cardToken, invoiceData, getViewContainer)
         },
-        err => {
+        () => {
           session.completePayment(1)
 
-          DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent(err)
-
           getViewContainer().appendChild(
             new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
               .element,
@@ -142,6 +133,7 @@ module ProcessOut {
             new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig)
               .element,
           )
+
           DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
             invoiceId,
             returnUrl: this.paymentConfig.invoiceDetails.return_url,
@@ -152,6 +144,7 @@ module ProcessOut {
             new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
               .element,
           )
+
           DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
         },
       )

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

@@ -1,55 +1,58 @@
 /// <reference path="../references.ts" />
 
 module ProcessOut {
-  export class GooglePayClient {
-    googleClient: any
-    processOutInstance: ProcessOut
-    paymentConfig: DynamicCheckoutPaymentConfig
-    isReadyToPayRequest: {
-      apiVersion: number
-      apiVersionMinor: number
-      allowedPaymentMethods: {
+  interface IsReadyToPayRequest {
+    apiVersion: number
+    apiVersionMinor: number
+    allowedPaymentMethods: {
+      type: string
+      parameters: {
+        allowedAuthMethods: string[]
+        allowedCardNetworks: string[]
+      }
+      tokenizationSpecification: {
         type: string
         parameters: {
-          allowedAuthMethods: string[]
-          allowedCardNetworks: string[]
-        }
-        tokenizationSpecification: {
-          type: string
-          parameters: {
-            gateway: string
-            gatewayMerchantId: string
-          }
+          gateway: string
+          gatewayMerchantId: string
         }
-      }[]
-    }
+      }
+    }[]
+  }
 
-    paymentRequest: {
-      apiVersion: number
-      apiVersionMinor: number
-      allowedPaymentMethods: {
+  interface PaymentRequest {
+    apiVersion: number
+    apiVersionMinor: number
+    allowedPaymentMethods: {
+      type: string
+      parameters: {
+        allowedAuthMethods: string[]
+        allowedCardNetworks: string[]
+      }
+      tokenizationSpecification: {
         type: string
         parameters: {
-          allowedAuthMethods: string[]
-          allowedCardNetworks: string[]
-        }
-        tokenizationSpecification: {
-          type: string
-          parameters: {
-            gateway: string
-            gatewayMerchantId: string
-          }
+          gateway: string
+          gatewayMerchantId: string
         }
-      }[]
-      transactionInfo: {
-        totalPriceStatus: string
-        totalPrice: string
-        currencyCode: string
-      }
-      merchantInfo: {
-        merchantName: string
       }
+    }[]
+    transactionInfo: {
+      totalPriceStatus: string
+      totalPrice: string
+      currencyCode: string
+    }
+    merchantInfo: {
+      merchantName: string
+      merchantId: string
     }
+  }
+  export class GooglePayClient {
+    googleClient: any
+    processOutInstance: ProcessOut
+    paymentConfig: DynamicCheckoutPaymentConfig
+    isReadyToPayRequest: IsReadyToPayRequest
+    paymentRequest: PaymentRequest
 
     constructor(processOutInstance: ProcessOut, paymentConfig: DynamicCheckoutPaymentConfig) {
       this.processOutInstance = processOutInstance
@@ -62,7 +65,6 @@ module ProcessOut {
       getViewContainer: () => HTMLElement,
     ) {
       const googleClientScript = document.createElement("script")
-
       googleClientScript.src = googlePaySdkUrl
       googleClientScript.onload = () => {
         this.googleClient =
@@ -113,15 +115,13 @@ module ProcessOut {
             JSON.parse(paymentData.paymentMethodData.tokenizationData.token),
           )
 
-          const processOutInstance = this.processOutInstance
-
-          processOutInstance.tokenize(
+          this.processOutInstance.tokenize(
             paymentToken,
             {},
             token => {
               DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(token)
 
-              processOutInstance.makeCardPayment(
+              this.processOutInstance.makeCardPayment(
                 invoiceData.id,
                 token,
                 {
@@ -135,6 +135,7 @@ module ProcessOut {
                       this.paymentConfig,
                     ).element,
                   )
+
                   DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
                     invoiceId,
                     returnUrl: this.paymentConfig.invoiceDetails.return_url,
@@ -145,17 +146,19 @@ module ProcessOut {
                     new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
                       .element,
                   )
+
                   DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
                 },
               )
             },
-            err => {
+            error => {
               getViewContainer().appendChild(
                 new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
                   .element,
               )
+
               DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent({
-                message: `Tokenize payment error: ${JSON.stringify(err, undefined, 2)}`,
+                message: `Tokenize payment error: ${JSON.stringify(error, undefined, 2)}`,
               })
             },
           )
@@ -225,6 +228,7 @@ module ProcessOut {
         },
         merchantInfo: {
           merchantName: invoiceData.name,
+          merchantId: googlePayMethod.googlepay.gateway_merchant_id,
         },
       }
     }

src/dynamic-checkout/config/assets.ts

@@ -4,11 +4,17 @@ module ProcessOut {
     mastercard: "/images/schemes/rectangle/mastercard.svg",
     amex: "/images/schemes/rectangle/americanexpress.svg",
     unionpay: "/images/schemes/rectangle/unionpay.svg",
-  };
+  }
 
-  export const PAYMENT_SUCCESS_IMAGE_ASSET =
-    "/images/dynamic-checkout-assets/payment-success.svg";
+  export const PAYMENT_SUCCESS_IMAGE_ASSET = "/images/dynamic-checkout-assets/payment-success.svg"
 
-  export const PAYMENT_ERROR_IMAGE_ASSET =
-    "/images/dynamic-checkout-assets/payment-error.svg";
+  export const PAYMENT_ERROR_IMAGE_ASSET = "/images/dynamic-checkout-assets/payment-error.svg"
+
+  export const COG_ICON = "/images/dynamic-checkout-assets/cog-icon.svg"
+
+  export const TRASH_ICON = "/images/dynamic-checkout-assets/trash-icon.svg"
+
+  export const CREDIT_CARD_ICON = "/images/dynamic-checkout-assets/credit-card.svg"
+
+  export const REDIRECT_ARROW_ICON = "/images/dynamic-checkout-assets/apm-redirect-arrow.svg"
 }

src/dynamic-checkout/config/billing-address.ts

@@ -1,5 +1,5 @@
 module ProcessOut {
-  export const billingAddressUnitsData = (paymentConfig: DynamicCheckoutPublicConfig) => {
+  export const billingAddressUnitsData = (paymentConfig: DynamicCheckoutPaymentConfig) => {
     return {
       street1: {
         unit: "street1",

src/dynamic-checkout/config/card-networks-map.ts

@@ -22,5 +22,5 @@ module ProcessOut {
     "private label": "privateLabel",
     visa: "visa",
     vpay: "vpay",
-  };
+  }
 }

src/dynamic-checkout/config/external-libraries.ts

@@ -1,6 +1,5 @@
 module ProcessOut {
-  export const applePaySdkUrl =
-    "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
-
-  export const googlePaySdkUrl = "https://pay.google.com/gp/p/js/pay.js";
+  export const applePaySdkUrl = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"
+  export const googlePaySdkUrl = "https://pay.google.com/gp/p/js/pay.js"
+  export const tingleLibrary = "/js/libraries/tingle.min.js"
 }