fix: add rtl layout support to card form fields in dc

Author: jakubjasinsky

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "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/dynamic-checkout.ts

@@ -162,7 +162,7 @@ module ProcessOut {
       this.widgetWrapper = document.createElement("div")
       this.widgetWrapper.setAttribute("class", "dynamic-checkout-widget-wrapper")
 
-      if (this.paymentConfig.locale === "ar") {
+      if (Translations.isRtlLocale(this.paymentConfig.locale)) {
         this.widgetWrapper.setAttribute("dir", "rtl")
       }
 

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

@@ -250,6 +250,12 @@ module ProcessOut {
         fontSize: "14px",
       }
 
+      if (Translations.isRtlLocale(this.paymentConfig.locale)) {
+        // Hosted field iframes don't inherit the widget's dir="rtl",
+        // so the direction has to be passed to them explicitly
+        options.style.direction = "rtl"
+      }
+
       options.placeholder = ""
       options.expiryAutoNext = false
       options.cardNumberAutoNext = true

src/dynamic-checkout/styles/default.ts

@@ -937,7 +937,7 @@ const defaultStyles = `
   }
 
   .dynamic-checkout-widget-wrapper[dir="rtl"] .dco-payment-method-card-form-input-cvc {
-    padding-right: 0;
+    padding-right: 8px;
     padding-left: 40px;
   }
 

src/dynamic-checkout/utils/translations.ts

@@ -19,11 +19,17 @@ module ProcessOut {
       vi: vi,
     }
 
+    static rtlLocales = ["ar"]
+
     static getText(key: string, locale: string) {
       const keys =
         Translations.localeTranslationsMap[locale] || Translations.localeTranslationsMap.en
 
       return keys[key] || ""
     }
+
+    static isRtlLocale(locale: string) {
+      return Translations.rtlLocales.indexOf(locale) !== -1
+    }
   }
 }