feat: dc - scheme selection (#234)

Author: jakubjasinsky

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "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/payment-methods/card.ts

@@ -50,20 +50,22 @@ module ProcessOut {
         cardForm => {
           this.getCardDetailsSectionEventListeners()
 
-          // Dynamically change scheme logo based on the card number
           cardForm.getNumberField().addEventListener("input", e => {
-            const scheme = e.schemes[0]
-            const cardSchemeLogo = document.querySelector(".dco-card-scheme-logo")
-
-            if (scheme && CARD_SCHEMES_ASSETS[scheme]) {
-              cardSchemeLogo.removeAttribute("hidden")
-
-              cardSchemeLogo.setAttribute(
-                "src",
-                this.procesoutInstance.endpoint("js", CARD_SCHEMES_ASSETS[scheme]),
-              )
-            } else {
-              cardSchemeLogo.setAttribute("hidden", "true")
+            if (!this.paymentMethod.card.scheme_selection_enabled) {
+              // Dynamically change scheme logo based on the card number
+              const scheme = e.schemes[0]
+              const cardSchemeLogo = document.querySelector(".dco-card-scheme-logo")
+
+              if (scheme && CARD_SCHEMES_ASSETS[scheme]) {
+                cardSchemeLogo.removeAttribute("hidden")
+
+                cardSchemeLogo.setAttribute(
+                  "src",
+                  this.procesoutInstance.endpoint("js", CARD_SCHEMES_ASSETS[scheme]),
+                )
+              } else {
+                cardSchemeLogo.setAttribute("hidden", "true")
+              }
             }
 
             this.validateCardRestrictions(e.schemes || [])
@@ -193,6 +195,8 @@ module ProcessOut {
       options.expiryAutoNext = false
       options.cardNumberAutoNext = true
       options.requireCVC = this.paymentMethod.card.cvc_required
+      options.enableCardSchemeSelection = this.paymentMethod.card.scheme_selection_enabled
+      options.preferredSchemes = this.paymentMethod.card.scheme_selection_default_order
 
       return options
     }
@@ -434,7 +438,9 @@ module ProcessOut {
         },
       ])
 
-      HTMLElements.appendChildren(cardNumberInput, [cardSchemeLogo])
+      if (!this.paymentMethod.card.scheme_selection_enabled) {
+        HTMLElements.appendChildren(cardNumberInput, [cardSchemeLogo])
+      }
 
       HTMLElements.appendChildren(cardNumberInputWrapper, [
         cardNumberInput,
@@ -722,23 +728,17 @@ module ProcessOut {
       if (!restrictToIins || restrictToIins.length === 0 || !data) {
         return
       }
+
       const iin = data.card_iin || ""
 
       if (iin.length === 0) {
         this.setCardRestrictionState(false)
         return
       }
 
-      var isBlockedIin = false
+      const isAllowedIin = restrictToIins.indexOf(iin) !== -1
 
-      restrictToIins.forEach(function (blockedIin) {
-        if (blockedIin === iin) {
-          isBlockedIin = true
-          return
-        }
-      })
-
-      this.setCardRestrictionState(isBlockedIin)
+      this.setCardRestrictionState(!isAllowedIin)
     }
 
     private validateCardRestrictions(schemes: string[]) {
@@ -753,18 +753,15 @@ module ProcessOut {
         return
       }
 
-      var isBlockedScheme = false
+      var hasAllowedScheme = false
 
-      restrictToSchemes.forEach(function (blockedScheme) {
-        schemes.forEach(function (scheme) {
-          if (blockedScheme === scheme) {
-            isBlockedScheme = true
-            return
-          }
-        })
+      schemes.forEach(function (scheme) {
+        if (restrictToSchemes.indexOf(scheme) !== -1) {
+          hasAllowedScheme = true
+        }
       })
 
-      this.setCardRestrictionState(isBlockedScheme)
+      this.setCardRestrictionState(!hasAllowedScheme)
     }
 
     private setCardRestrictionState(isRestricted: boolean) {

src/dynamic-checkout/types/api.ts

@@ -73,6 +73,8 @@ type Card = {
   cvc_required: boolean
   cardholder_name_required: boolean
   scheme_selection_allowed: boolean
+  scheme_selection_enabled: boolean
+  scheme_selection_default_order: string[]
   saving_allowed: boolean
   billing_address: BillingAddress
   restrict_to_iins: string[] | null