fix: another fixes of translations in dc

examples/dynamic-checkout/index.html

@@ -11,7 +11,7 @@
       document.addEventListener("DOMContentLoaded", function () {
         // You need to replace these values with your own
         const projectId = "test-proj_zkSfc1Cz6vPjhcLkapSpO7UtmCeYuavb"
-        const invoiceId = "iv_3AF4jYuavbFxrwAkKGMKbWjiOoPwUKxW"
+        const invoiceId = "iv_3AFPfYuavbUBf4rerB2VMHKUnmQjke59"
         const clientSecret = ""
 
         const client = new ProcessOut.ProcessOut(projectId)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "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/locales/ja.ts

@@ -12,7 +12,7 @@ module ProcessOut {
     "select-state-placeholder": "都道府県を選択",
     "card-number-error-message": "カード番号が無効です",
     "expiry-date-error-message": "有効期限が無効です",
-    "cvc-error-message": "CVCが無効です",
+    "cvc-error-message": "セキュリティコードが無効です",
     "cardholder-name-error-message": "カード名義人が無効です",
     "payment-error-message": "エラーが発生しました。もう一度お試しください。",
     "payment-cancelled-message": "お支払いがキャンセルされました。",
@@ -35,7 +35,7 @@ module ProcessOut {
       "次回支払い方法を保存すると、ここに表示されます。",
     "card-number-label": "カード番号",
     "expiry-date-label": "有効期限",
-    "cvc-label": "CVC",
+    "cvc-label": "セキュリティコード",
     "card-not-supported-error-message": "このカードはサポートされていません",
     "card-label": "カード",
     "delete-payment-method-label": "支払い方法を削除",

src/dynamic-checkout/locales/ko.ts

@@ -12,7 +12,7 @@ module ProcessOut {
     "select-state-placeholder": "시/도 선택",
     "card-number-error-message": "카드 번호가 유효하지 않습니다",
     "expiry-date-error-message": "만료일이 유효하지 않습니다",
-    "cvc-error-message": "CVC가 유효하지 않습니다",
+    "cvc-error-message": "보안 코드가 유효하지 않습니다",
     "cardholder-name-error-message": "카드 소유자 이름이 유효하지 않습니다",
     "payment-error-message": "오류가 발생했습니다. 다시 시도해 주세요.",
     "payment-cancelled-message": "결제가 취소되었습니다.",
@@ -35,7 +35,7 @@ module ProcessOut {
       "다음에 결제 수단을 저장하면 여기에 표시됩니다.",
     "card-number-label": "카드 번호",
     "expiry-date-label": "만료일",
-    "cvc-label": "CVC",
+    "cvc-label": "보안 코드",
     "card-not-supported-error-message": "이 카드는 지원되지 않습니다",
     "card-label": "카드",
     "delete-payment-method-label": "결제 수단 삭제",

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

@@ -224,8 +224,9 @@ module ProcessOut {
     }
 
     private getChildrenElement() {
-      const payButtonText = this.paymentConfig.payButtonText
-        || `${Translations.getText(
+      const payButtonText =
+        this.paymentConfig.payButtonText ||
+        `${Translations.getText(
           "pay-button-text",
           this.paymentConfig.locale,
         )} ${this.paymentConfig.invoiceDetails.amount} ${this.paymentConfig.invoiceDetails.currency}`
@@ -420,7 +421,10 @@ module ProcessOut {
           ],
           attributes: {
             "data-processout-input": "cc-cvc",
-            "data-processout-placeholder": "CVC",
+            "data-processout-placeholder": Translations.getText(
+              "cvc-label",
+              this.paymentConfig.locale,
+            ),
           },
         },
         {

src/dynamic-checkout/payment-methods/native-apm.ts

@@ -33,6 +33,8 @@ module ProcessOut {
         invoiceId,
         gatewayConfigurationId: apm.gateway_configuration_id,
         returnUrl: invoiceDetails.return_url,
+        payButtonText: paymentConfig.payButtonText,
+        locale: paymentConfig.locale,
       })
 
       const backgroundColor =

src/nativeapm/config/payment.ts

@@ -5,6 +5,8 @@ type NativeApmPaymentConfigType = {
   invoiceId: string;
   returnUrl?: string;
   pollingMaxTimeout?: number;
+  payButtonText?: string;
+  locale?: string;
 };
 
 module ProcessOut {
@@ -13,6 +15,8 @@ module ProcessOut {
     invoiceId: NativeApmPaymentConfigType["invoiceId"];
     pollingMaxTimeout: NativeApmPaymentConfigType["pollingMaxTimeout"];
     returnUrl?: NativeApmPaymentConfigType["returnUrl"];
+    payButtonText?: NativeApmPaymentConfigType["payButtonText"];
+    locale?: NativeApmPaymentConfigType["locale"];
 
     constructor(config: NativeApmPaymentConfigType) {
       this.setConfig(config);
@@ -39,6 +43,8 @@ module ProcessOut {
       this.invoiceId = config.invoiceId;
       this.returnUrl = config.returnUrl;
       this.pollingMaxTimeout = config.pollingMaxTimeout || 180;
+      this.payButtonText = config.payButtonText;
+      this.locale = config.locale;
     }
 
     private isValidConfig(config: NativeApmPaymentConfigType) {

src/nativeapm/nativeapm.ts

@@ -110,6 +110,11 @@ module ProcessOut {
       this.processOutInstance = processOutInstance
       this.paymentConfig = new NativeApmPaymentConfig(paymentConfig)
       this.theme = new NativeApmThemeConfig()
+
+      if (this.paymentConfig.locale) {
+        TextUtils.setLocale(this.paymentConfig.locale)
+      }
+
       this.loadMarkdownLibrary()
       this.loadQrCodesLibrary()
       this.loadPhoneNumberInputLibrary()
@@ -184,6 +189,7 @@ module ProcessOut {
           this.proceedPayment.bind(this),
           this.theme,
           this.prefilledData,
+          this.paymentConfig.payButtonText,
         )
 
         EventsUtils.dispatchWidgetReadyEvent()
@@ -297,6 +303,7 @@ module ProcessOut {
           this.proceedPayment.bind(this),
           this.theme,
           this.prefilledData,
+          this.paymentConfig.payButtonText,
         )
 
         EventsUtils.dispatchPaymentAdditionalInputEvent()

src/nativeapm/utils/text.ts

@@ -73,13 +73,104 @@ module ProcessOut {
       paymentTimeout:
         "Le paiement n'a pas été confirmé à temps dans l'application bancaire. Veuillez réessayer.",
     },
+    es: {
+      invalidCode: "El código no es válido.",
+      invalidPhoneNumber: "El número de teléfono no es válido.",
+      invalidCountryCode: "Debe seleccionar un país.",
+      selectCountryPlaceholder: "Seleccionar país",
+      countryCodePlaceholder: "+34",
+      invalidTextValue: "El valor no es válido.",
+      invalidEmail: "El correo electrónico no es válido.",
+      phoneNumberPlaceholder: "Ingrese su número de teléfono",
+      phoneNumberLabel: "Número de teléfono",
+      emailPlaceholder: "nombre@ejemplo.es",
+      submitButtonText: "Pagar",
+      paymentSuccessMessage: "¡Éxito!\nPago aprobado.",
+      genericError: "Algo salió mal, por favor inténtelo de nuevo.",
+      paymentTimeout:
+        "El pago no fue confirmado a tiempo en la aplicación bancaria. Por favor, inténtelo de nuevo.",
+    },
+    ja: {
+      invalidCode: "コードが無効です。",
+      invalidPhoneNumber: "電話番号が無効です。",
+      invalidCountryCode: "国を選択してください。",
+      selectCountryPlaceholder: "国を選択",
+      countryCodePlaceholder: "+81",
+      invalidTextValue: "値が無効です。",
+      invalidEmail: "メールアドレスが無効です。",
+      phoneNumberPlaceholder: "電話番号を入力",
+      phoneNumberLabel: "電話番号",
+      emailPlaceholder: "name@example.jp",
+      submitButtonText: "支払う",
+      paymentSuccessMessage: "成功！\nお支払いが承認されました。",
+      genericError: "エラーが発生しました。もう一度お試しください。",
+      paymentTimeout:
+        "銀行アプリで支払いが時間内に確認されませんでした。もう一度お試しください。",
+    },
+    ko: {
+      invalidCode: "코드가 유효하지 않습니다.",
+      invalidPhoneNumber: "전화번호가 유효하지 않습니다.",
+      invalidCountryCode: "국가를 선택해 주세요.",
+      selectCountryPlaceholder: "국가 선택",
+      countryCodePlaceholder: "+82",
+      invalidTextValue: "값이 유효하지 않습니다.",
+      invalidEmail: "이메일 주소가 유효하지 않습니다.",
+      phoneNumberPlaceholder: "전화번호를 입력하세요",
+      phoneNumberLabel: "전화번호",
+      emailPlaceholder: "name@example.kr",
+      submitButtonText: "결제",
+      paymentSuccessMessage: "성공!\n결제가 승인되었습니다.",
+      genericError: "문제가 발생했습니다. 다시 시도해 주세요.",
+      paymentTimeout:
+        "은행 앱에서 결제가 시간 내에 확인되지 않았습니다. 다시 시도해 주세요.",
+    },
+    de: {
+      invalidCode: "Der Code ist ungültig.",
+      invalidPhoneNumber: "Die Telefonnummer ist ungültig.",
+      invalidCountryCode: "Bitte wählen Sie ein Land aus.",
+      selectCountryPlaceholder: "Land auswählen",
+      countryCodePlaceholder: "+49",
+      invalidTextValue: "Der Wert ist ungültig.",
+      invalidEmail: "Die E-Mail-Adresse ist ungültig.",
+      phoneNumberPlaceholder: "Telefonnummer eingeben",
+      phoneNumberLabel: "Telefonnummer",
+      emailPlaceholder: "name@beispiel.de",
+      submitButtonText: "Bezahlen",
+      paymentSuccessMessage: "Erfolg!\nZahlung genehmigt.",
+      genericError: "Etwas ist schiefgelaufen, bitte versuchen Sie es erneut.",
+      paymentTimeout:
+        "Die Zahlung wurde in der Banking-App nicht rechtzeitig bestätigt. Bitte versuchen Sie es erneut.",
+    },
+    it: {
+      invalidCode: "Il codice non è valido.",
+      invalidPhoneNumber: "Il numero di telefono non è valido.",
+      invalidCountryCode: "Devi selezionare un paese.",
+      selectCountryPlaceholder: "Seleziona paese",
+      countryCodePlaceholder: "+39",
+      invalidTextValue: "Il valore non è valido.",
+      invalidEmail: "L'indirizzo e-mail non è valido.",
+      phoneNumberPlaceholder: "Inserisci il numero di telefono",
+      phoneNumberLabel: "Numero di telefono",
+      emailPlaceholder: "nome@esempio.it",
+      submitButtonText: "Paga",
+      paymentSuccessMessage: "Successo!\nPagamento approvato.",
+      genericError: "Qualcosa è andato storto, riprova.",
+      paymentTimeout:
+        "Il pagamento non è stato confermato in tempo nell'app bancaria. Riprova.",
+    },
   }
   /**
    * ProcessOut Native APM class to handle event dispatching
    */
   export class TextUtils {
+    private static localeOverride?: string
+
+    static setLocale(locale: string) {
+      this.localeOverride = locale
+    }
+
     static getText(key: string) {
-      const locale = Translator.getLocale()
+      const locale = this.localeOverride || Translator.getLocale()
 
       const supportedLocale = texts.hasOwnProperty(locale) ? locale : "en"
 

src/nativeapm/views/form.ts

@@ -65,6 +65,12 @@ module ProcessOut {
      */
     processOut: ProcessOut
 
+    /**
+     * Custom pay button text override
+     * @type {string}
+     */
+    payButtonText?: string
+
     /**
      * Native APM Form constructor
      */
@@ -74,6 +80,7 @@ module ProcessOut {
       onSubmitHandler: Function,
       theme: NativeApmThemeConfigType,
       prefilledData: PrefilledData,
+      payButtonText?: string,
     ) {
       if (!formData) {
         throw new Exception(
@@ -86,6 +93,7 @@ module ProcessOut {
       this.processOut = processOut
       this.prefilledData = prefilledData
       this.formData = formData
+      this.payButtonText = payButtonText
       this.onSubmitHandler = onSubmitHandler
       this.formInputs = this.createFormInputs()
       this.submitButton = this.createSubmitButton()
@@ -140,11 +148,8 @@ module ProcessOut {
      * This function creates the submit button of the form
      */
     private createSubmitButton() {
-      const buttonText = `
-      ${TextUtils.getText("submitButtonText")} 
-      ${this.formData.invoice.amount} 
-      ${this.formData.invoice.currency_code}
-      `
+      const buttonText = this.payButtonText
+        || `${TextUtils.getText("submitButtonText")} ${this.formData.invoice.amount} ${this.formData.invoice.currency_code}`
 
       return new NativeApmButton(buttonText, this.theme)
     }