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/apm.ts b/src/dynamic-checkout/payment-methods/apm.ts index 1c8bdaa..c4c3a91 100644 --- a/src/dynamic-checkout/payment-methods/apm.ts +++ b/src/dynamic-checkout/payment-methods/apm.ts @@ -177,10 +177,12 @@ module ProcessOut { }, error => { if (error.code === "customer.canceled") { - this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig) - .element, - ) + if (this.paymentConfig.showStatusMessage) { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig) + .element, + ) + } DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ payment_method_name: apm.gateway_name, @@ -365,12 +367,14 @@ module ProcessOut { }, error => { if (error.code === "customer.canceled") { - this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentCancelledView( - this.processOutInstance, - this.paymentConfig, - ).element, - ) + if (this.paymentConfig.showStatusMessage) { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentCancelledView( + this.processOutInstance, + this.paymentConfig, + ).element, + ) + } DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ payment_method_name: apm.gateway_name, 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/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts index efb0998..c037418 100644 --- a/src/dynamic-checkout/payment-methods/saved-apm.ts +++ b/src/dynamic-checkout/payment-methods/saved-apm.ts @@ -162,12 +162,14 @@ module ProcessOut { }, error => { if (error.code === "customer.canceled") { - this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentCancelledView( - this.processOutInstance, - this.paymentConfig, - ).element, - ) + if (this.paymentConfig.showStatusMessage) { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentCancelledView( + this.processOutInstance, + this.paymentConfig, + ).element, + ) + } DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ payment_method_name: apm_customer_token.gateway_name, @@ -256,10 +258,12 @@ module ProcessOut { private handlePaymentError(error) { if (error.code === "customer.canceled") { - this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig) - .element, - ) + if (this.paymentConfig.showStatusMessage) { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig) + .element, + ) + } DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ payment_method_name: this.paymentMethod.apm_customer_token diff --git a/src/dynamic-checkout/payment-methods/saved-card.ts b/src/dynamic-checkout/payment-methods/saved-card.ts index 8a9e068..6d7ec1d 100644 --- a/src/dynamic-checkout/payment-methods/saved-card.ts +++ b/src/dynamic-checkout/payment-methods/saved-card.ts @@ -108,10 +108,12 @@ module ProcessOut { private handlePaymentError(error) { if (error.code === "customer.canceled") { - this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig) - .element, - ) + if (this.paymentConfig.showStatusMessage) { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig) + .element, + ) + } DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ payment_method_name: "card", 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 + } } }