From ce8674381e8bafa0baec7145213ab3058b8d29c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Fri, 27 Feb 2026 10:55:11 +0100 Subject: [PATCH 1/2] fix: another fixes of translations in dc --- examples/dynamic-checkout/index.html | 2 +- src/dynamic-checkout/locales/ja.ts | 4 +- src/dynamic-checkout/locales/ko.ts | 4 +- src/dynamic-checkout/payment-methods/card.ts | 10 +- .../payment-methods/native-apm.ts | 2 + src/nativeapm/config/payment.ts | 6 ++ src/nativeapm/nativeapm.ts | 7 ++ src/nativeapm/utils/text.ts | 93 ++++++++++++++++++- src/nativeapm/views/form.ts | 15 ++- 9 files changed, 129 insertions(+), 14 deletions(-) diff --git a/examples/dynamic-checkout/index.html b/examples/dynamic-checkout/index.html index f42b0b94..e8c126bb 100644 --- a/examples/dynamic-checkout/index.html +++ b/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) diff --git a/src/dynamic-checkout/locales/ja.ts b/src/dynamic-checkout/locales/ja.ts index 8a13753c..f16cd385 100644 --- a/src/dynamic-checkout/locales/ja.ts +++ b/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": "支払い方法を削除", diff --git a/src/dynamic-checkout/locales/ko.ts b/src/dynamic-checkout/locales/ko.ts index 064f220e..7a1797dd 100644 --- a/src/dynamic-checkout/locales/ko.ts +++ b/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": "결제 수단 삭제", diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts index 5e40ced1..fa7518df 100644 --- a/src/dynamic-checkout/payment-methods/card.ts +++ b/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, + ), }, }, { diff --git a/src/dynamic-checkout/payment-methods/native-apm.ts b/src/dynamic-checkout/payment-methods/native-apm.ts index c7354d0f..438a6958 100644 --- a/src/dynamic-checkout/payment-methods/native-apm.ts +++ b/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 = diff --git a/src/nativeapm/config/payment.ts b/src/nativeapm/config/payment.ts index 9c58ff2c..c280c54f 100644 --- a/src/nativeapm/config/payment.ts +++ b/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) { diff --git a/src/nativeapm/nativeapm.ts b/src/nativeapm/nativeapm.ts index 4c65ad2a..9558e0f6 100644 --- a/src/nativeapm/nativeapm.ts +++ b/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() diff --git a/src/nativeapm/utils/text.ts b/src/nativeapm/utils/text.ts index 14158a03..7671cb0d 100644 --- a/src/nativeapm/utils/text.ts +++ b/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" diff --git a/src/nativeapm/views/form.ts b/src/nativeapm/views/form.ts index 5f70cba6..ba19348c 100644 --- a/src/nativeapm/views/form.ts +++ b/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) } From 325d813f413130b51923ddb9ccfaf59629da7305 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= Date: Fri, 27 Feb 2026 10:57:36 +0100 Subject: [PATCH 2/2] version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ef3b1809..095eba5f 100644 --- a/package.json +++ b/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",