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/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",
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)
}