diff --git a/package.json b/package.json index 01c213d..24836bc 100644 --- a/package.json +++ b/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", diff --git a/src/dynamic-checkout/dynamic-checkout.ts b/src/dynamic-checkout/dynamic-checkout.ts index 07a356a..2d4cf89 100644 --- a/src/dynamic-checkout/dynamic-checkout.ts +++ b/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") } diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts index 3e8c199..652d1d4 100644 --- a/src/dynamic-checkout/payment-methods/card.ts +++ b/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 diff --git a/src/dynamic-checkout/styles/default.ts b/src/dynamic-checkout/styles/default.ts index 4900e42..7570da0 100644 --- a/src/dynamic-checkout/styles/default.ts +++ b/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; } diff --git a/src/dynamic-checkout/utils/translations.ts b/src/dynamic-checkout/utils/translations.ts index 06edbce..f5ba0aa 100644 --- a/src/dynamic-checkout/utils/translations.ts +++ b/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 + } } }