feat: accessibility, translations and other improvements

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_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN"
-        const invoiceId = "iv_39bZyCq6bNxAWSl9DA6PXGt63mEi952M"
+        const invoiceId = "iv_39vI9Cq6bN1LV3k0Xh7bSIxV0ICdFwHu"
         const clientSecret = ""
 
         const client = new ProcessOut.ProcessOut(projectId)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "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/config/billing-address.ts

@@ -978,7 +978,7 @@ module ProcessOut {
       name: "United States",
       postcodeUnit: "zip",
       stateUnit: "state",
-      units: ["state"],
+      units: ["street1", "street2", "city", "state", "postcode"],
       states: [
         {
           abbreviation: "AL",

src/dynamic-checkout/config/payment-config.ts

@@ -9,6 +9,7 @@ module ProcessOut {
     capturePayments?: boolean
     allowFallbackToSale?: boolean
     showStatusMessage?: boolean
+    payButtonText?: string
   }
 
   export type DynamicCheckoutInternalConfigType = {
@@ -26,6 +27,7 @@ module ProcessOut {
     capturePayments: DynamicCheckoutPublicConfigType["capturePayments"] = false
     allowFallbackToSale: DynamicCheckoutPublicConfigType["allowFallbackToSale"] = false
     showStatusMessage: DynamicCheckoutPublicConfigType["showStatusMessage"] = true
+    payButtonText: DynamicCheckoutPublicConfigType["payButtonText"] = ""
     invoiceDetails: DynamicCheckoutInternalConfigType["invoiceDetails"]
 
     constructor(config: DynamicCheckoutPublicConfigType) {
@@ -61,6 +63,7 @@ module ProcessOut {
       this.locale = config.locale || "en"
       this.capturePayments = config.capturePayments || false
       this.allowFallbackToSale = config.allowFallbackToSale || false
+      this.payButtonText = config.payButtonText || ""
 
       if (config.showStatusMessage !== undefined && config.showStatusMessage !== null) {
         this.showStatusMessage = config.showStatusMessage

src/dynamic-checkout/dynamic-checkout.ts

@@ -71,7 +71,7 @@ module ProcessOut {
     }
 
     private onGetInvoiceLoading() {
-      this.loadView(new DynamicCheckoutInvoiceLoadingView().element)
+      this.loadView(new DynamicCheckoutInvoiceLoadingView(this.paymentConfig.locale).element)
 
       DynamicCheckoutEventsUtils.dispatchWidgetLoadingEvent()
     }

src/dynamic-checkout/elements/payment-method-button.ts

@@ -14,6 +14,7 @@ module ProcessOut {
       deleteMode: boolean = false,
       deletingAllowed: boolean = false,
       handleDeletePaymentMethod?: () => void,
+      locale: string = "en",
     ) {
       this.processOutInstance = processOutInstance
 
@@ -25,6 +26,7 @@ module ProcessOut {
         deletingAllowed,
         rightContent,
         handleDeletePaymentMethod,
+        locale,
       )
     }
 
@@ -36,6 +38,7 @@ module ProcessOut {
       deletingAllowed: boolean,
       rightContent?: HTMLElement,
       handleDeletePaymentMethod?: () => void,
+      locale: string = "en",
     ) {
       const [
         element,
@@ -56,6 +59,7 @@ module ProcessOut {
           ],
           attributes: {
             "data-id": id,
+            for: `payment-method-${id}`,
           },
         },
         {
@@ -88,17 +92,23 @@ module ProcessOut {
           attributes: {
             type: "radio",
             name: "payment-method",
+            id: `payment-method-${id}`,
+            value: id,
           },
         },
         {
           tagName: "button",
           classNames: ["dco-delete-payment-method-button"],
+          attributes: {
+            "aria-label": Translations.getText("delete-payment-method-label", locale),
+          },
         },
         {
           tagName: "img",
           classNames: ["dco-delete-payment-method-icon"],
           attributes: {
             src: this.processOutInstance.endpoint("js", TRASH_ICON),
+            alt: "",
           },
         },
       ])

src/dynamic-checkout/elements/payment-methods-manager.ts

@@ -25,12 +25,19 @@ module ProcessOut {
           {
             tagName: "button",
             classNames: ["dco-express-checkout-header-settings-button"],
+            attributes: {
+              "aria-label": Translations.getText(
+                "settings-button-label",
+                this.paymentConfig.locale,
+              ),
+            },
           },
           {
             tagName: "img",
             classNames: ["dco-express-checkout-cog-icon"],
             attributes: {
               src: this.processOutInstance.endpoint("js", COG_ICON),
+              alt: "",
             },
           },
         ])
@@ -58,6 +65,9 @@ module ProcessOut {
               stickyFooter: true,
               closeMethods: ["overlay", "button", "escape"],
               closeLabel: closeLabel,
+              onClose: () => {
+                this.element.focus()
+              },
             })
           : null
 

src/dynamic-checkout/locales/de.ts

@@ -0,0 +1,47 @@
+module ProcessOut {
+  export const de = {
+    "apm-redirect-message": "Sie werden zur Zahlungsbestätigung weitergeleitet.",
+    "save-for-future-label": "Für zukünftige Zahlungen speichern",
+    "continue-with-apm-button": "Weiter mit",
+    "pay-button-text": "Bezahlen",
+    "card-details-section-title": "Kartendetails",
+    "cardholder-name-label": "Name des Karteninhabers",
+    "billing-address-section-title": "Rechnungsadresse",
+    "country-label": "Land",
+    "select-country-placeholder": "Land auswählen",
+    "select-state-placeholder": "Bundesland auswählen",
+    "card-number-error-message": "Kartennummer ist ungültig",
+    "expiry-date-error-message": "Ablaufdatum ist ungültig",
+    "cvc-error-message": "CVC ist ungültig",
+    "cardholder-name-error-message": "Name des Karteninhabers ist ungültig",
+    "payment-error-message": "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.",
+    "payment-cancelled-message": "Die Zahlung wurde storniert.",
+    "express-checkout-header": "Express-Checkout",
+    "other-payment-methods-header": "Weitere Zahlungsmethoden",
+    "select-payment-method-label": "Zahlungsmethode auswählen",
+    "payment-success-message": "Diese Zahlung wurde abgeschlossen.",
+    "payment-info-message":
+      "Wir verarbeiten Ihre Zahlung. Sie können dieses Fenster jetzt schließen.",
+    "payment-error-generic-message": "Wir konnten Ihre Zahlung nicht verarbeiten.",
+    "street1-label": "Adresszeile 1",
+    "street2-label": "Adresszeile 2",
+    "city-label": "Stadt",
+    "postcode-label": "Postleitzahl",
+    "state-label": "Bundesland",
+    "payments-manager-header": "Gespeicherte Zahlungsmethoden verwalten",
+    "payments-manager-close-button": "Schließen",
+    "no-saved-payment-methods-header": "Keine gespeicherten Zahlungsmethoden",
+    "no-saved-payment-methods-message":
+      "Wenn Sie das nächste Mal eine Zahlungsmethode speichern, wird sie hier angezeigt.",
+    "card-number-label": "Kartennummer",
+    "expiry-date-label": "Ablaufdatum",
+    "cvc-label": "CVC",
+    "card-not-supported-error-message": "Diese Karte wird nicht unterstützt",
+    "card-label": "Karte",
+    "delete-payment-method-label": "Zahlungsmethode löschen",
+    "settings-button-label": "Gespeicherte Zahlungsmethoden verwalten",
+    "loading-label": "Laden",
+    "processing-payment-label": "Zahlung wird verarbeitet",
+    "card-form-label": "Kartenzahlungsformular",
+  }
+}

src/dynamic-checkout/locales/en.ts

@@ -32,7 +32,15 @@ module ProcessOut {
     "no-saved-payment-methods-header": "No saved payment methods",
     "no-saved-payment-methods-message":
       "The next time you save a payment method, it will appear here.",
+    "card-number-label": "Card number",
+    "expiry-date-label": "Expiry date",
+    "cvc-label": "CVC",
     "card-not-supported-error-message": "This card is not supported",
     "card-label": "Card",
+    "delete-payment-method-label": "Delete payment method",
+    "settings-button-label": "Manage saved payment methods",
+    "loading-label": "Loading",
+    "processing-payment-label": "Processing payment",
+    "card-form-label": "Card payment form",
   }
 }

src/dynamic-checkout/locales/es.ts

@@ -32,7 +32,15 @@ module ProcessOut {
     "no-saved-payment-methods-header": "No hay métodos de pago guardados",
     "no-saved-payment-methods-message":
       "La próxima vez que guardes un método de pago, aparecerá aquí.",
+    "card-number-label": "Número de tarjeta",
+    "expiry-date-label": "Fecha de vencimiento",
+    "cvc-label": "CVC",
     "card-not-supported-error-message": "Esta tarjeta no es compatible",
     "card-label": "Tarjeta bancaria",
+    "delete-payment-method-label": "Eliminar método de pago",
+    "settings-button-label": "Administrar métodos de pago guardados",
+    "loading-label": "Cargando",
+    "processing-payment-label": "Procesando pago",
+    "card-form-label": "Formulario de pago con tarjeta",
   }
 }

src/dynamic-checkout/locales/fr.ts

@@ -33,7 +33,15 @@ module ProcessOut {
     "no-saved-payment-methods-header": "Aucune méthode de paiement enregistrée",
     "no-saved-payment-methods-message":
       "La prochaine fois que vous enregistrez une méthode de paiement, elle apparaîtra ici.",
+    "card-number-label": "Numéro de carte",
+    "expiry-date-label": "Date d'expiration",
+    "cvc-label": "CVC",
     "card-not-supported-error-message": "Cette carte n'est pas acceptée",
     "card-label": "Carte",
+    "delete-payment-method-label": "Supprimer le moyen de paiement",
+    "settings-button-label": "Gérer les moyens de paiement enregistrés",
+    "loading-label": "Chargement",
+    "processing-payment-label": "Traitement du paiement",
+    "card-form-label": "Formulaire de paiement par carte",
   }
 }

src/dynamic-checkout/locales/it.ts

@@ -0,0 +1,47 @@
+module ProcessOut {
+  export const it = {
+    "apm-redirect-message": "Verrai reindirizzato per completare il pagamento.",
+    "save-for-future-label": "Salva per pagamenti futuri",
+    "continue-with-apm-button": "Continua con",
+    "pay-button-text": "Paga",
+    "card-details-section-title": "Dettagli della carta",
+    "cardholder-name-label": "Nome del titolare della carta",
+    "billing-address-section-title": "Indirizzo di fatturazione",
+    "country-label": "Paese",
+    "select-country-placeholder": "Seleziona paese",
+    "select-state-placeholder": "Seleziona provincia",
+    "card-number-error-message": "Il numero della carta non è valido",
+    "expiry-date-error-message": "La data di scadenza non è valida",
+    "cvc-error-message": "Il CVC non è valido",
+    "cardholder-name-error-message": "Il nome del titolare della carta non è valido",
+    "payment-error-message": "Si è verificato un errore. Riprova.",
+    "payment-cancelled-message": "Il pagamento è stato annullato.",
+    "express-checkout-header": "Checkout rapido",
+    "other-payment-methods-header": "Altri metodi di pagamento",
+    "select-payment-method-label": "Seleziona metodo di pagamento",
+    "payment-success-message": "Il pagamento è stato completato.",
+    "payment-info-message":
+      "Stiamo elaborando il tuo pagamento. Ora puoi chiudere questa finestra.",
+    "payment-error-generic-message": "Non è stato possibile elaborare il pagamento.",
+    "street1-label": "Indirizzo riga 1",
+    "street2-label": "Indirizzo riga 2",
+    "city-label": "Città",
+    "postcode-label": "Codice postale",
+    "state-label": "Provincia",
+    "payments-manager-header": "Gestisci metodi di pagamento salvati",
+    "payments-manager-close-button": "Chiudi",
+    "no-saved-payment-methods-header": "Nessun metodo di pagamento salvato",
+    "no-saved-payment-methods-message":
+      "La prossima volta che salvi un metodo di pagamento, apparirà qui.",
+    "card-number-label": "Numero della carta",
+    "expiry-date-label": "Data di scadenza",
+    "cvc-label": "CVC",
+    "card-not-supported-error-message": "Questa carta non è supportata",
+    "card-label": "Carta",
+    "delete-payment-method-label": "Elimina metodo di pagamento",
+    "settings-button-label": "Gestisci metodi di pagamento salvati",
+    "loading-label": "Caricamento",
+    "processing-payment-label": "Elaborazione del pagamento",
+    "card-form-label": "Modulo di pagamento con carta",
+  }
+}

src/dynamic-checkout/locales/ja.ts

@@ -0,0 +1,47 @@
+module ProcessOut {
+  export const ja = {
+    "apm-redirect-message": "お支払いを完了するためにリダイレクトされます。",
+    "save-for-future-label": "今後の支払いのために保存",
+    "continue-with-apm-button": "で続行",
+    "pay-button-text": "支払う",
+    "card-details-section-title": "カード情報",
+    "cardholder-name-label": "カード名義人",
+    "billing-address-section-title": "請求先住所",
+    "country-label": "国",
+    "select-country-placeholder": "国を選択",
+    "select-state-placeholder": "都道府県を選択",
+    "card-number-error-message": "カード番号が無効です",
+    "expiry-date-error-message": "有効期限が無効です",
+    "cvc-error-message": "CVCが無効です",
+    "cardholder-name-error-message": "カード名義人が無効です",
+    "payment-error-message": "エラーが発生しました。もう一度お試しください。",
+    "payment-cancelled-message": "お支払いがキャンセルされました。",
+    "express-checkout-header": "エクスプレスチェックアウト",
+    "other-payment-methods-header": "その他の支払い方法",
+    "select-payment-method-label": "支払い方法を選択",
+    "payment-success-message": "お支払いが完了しました。",
+    "payment-info-message":
+      "お支払いを処理しています。このウィンドウを閉じていただいて構いません。",
+    "payment-error-generic-message": "お支払いを処理できませんでした。",
+    "street1-label": "住所1",
+    "street2-label": "住所2",
+    "city-label": "市区町村",
+    "postcode-label": "郵便番号",
+    "state-label": "都道府県",
+    "payments-manager-header": "保存済みの支払い方法を管理",
+    "payments-manager-close-button": "閉じる",
+    "no-saved-payment-methods-header": "保存済みの支払い方法はありません",
+    "no-saved-payment-methods-message":
+      "次回支払い方法を保存すると、ここに表示されます。",
+    "card-number-label": "カード番号",
+    "expiry-date-label": "有効期限",
+    "cvc-label": "CVC",
+    "card-not-supported-error-message": "このカードはサポートされていません",
+    "card-label": "カード",
+    "delete-payment-method-label": "支払い方法を削除",
+    "settings-button-label": "保存済みの支払い方法を管理",
+    "loading-label": "読み込み中",
+    "processing-payment-label": "支払いを処理中",
+    "card-form-label": "カード決済フォーム",
+  }
+}

src/dynamic-checkout/locales/ko.ts

@@ -0,0 +1,47 @@
+module ProcessOut {
+  export const ko = {
+    "apm-redirect-message": "결제를 완료하기 위해 리디렉션됩니다.",
+    "save-for-future-label": "향후 결제를 위해 저장",
+    "continue-with-apm-button": "계속하기",
+    "pay-button-text": "결제",
+    "card-details-section-title": "카드 정보",
+    "cardholder-name-label": "카드 소유자 이름",
+    "billing-address-section-title": "청구지 주소",
+    "country-label": "국가",
+    "select-country-placeholder": "국가 선택",
+    "select-state-placeholder": "시/도 선택",
+    "card-number-error-message": "카드 번호가 유효하지 않습니다",
+    "expiry-date-error-message": "만료일이 유효하지 않습니다",
+    "cvc-error-message": "CVC가 유효하지 않습니다",
+    "cardholder-name-error-message": "카드 소유자 이름이 유효하지 않습니다",
+    "payment-error-message": "오류가 발생했습니다. 다시 시도해 주세요.",
+    "payment-cancelled-message": "결제가 취소되었습니다.",
+    "express-checkout-header": "빠른 결제",
+    "other-payment-methods-header": "기타 결제 수단",
+    "select-payment-method-label": "결제 수단 선택",
+    "payment-success-message": "결제가 완료되었습니다.",
+    "payment-info-message":
+      "결제를 처리하고 있습니다. 이 창을 닫으셔도 됩니다.",
+    "payment-error-generic-message": "결제를 처리할 수 없습니다.",
+    "street1-label": "주소 1",
+    "street2-label": "주소 2",
+    "city-label": "시/군/구",
+    "postcode-label": "우편번호",
+    "state-label": "시/도",
+    "payments-manager-header": "저장된 결제 수단 관리",
+    "payments-manager-close-button": "닫기",
+    "no-saved-payment-methods-header": "저장된 결제 수단 없음",
+    "no-saved-payment-methods-message":
+      "다음에 결제 수단을 저장하면 여기에 표시됩니다.",
+    "card-number-label": "카드 번호",
+    "expiry-date-label": "만료일",
+    "cvc-label": "CVC",
+    "card-not-supported-error-message": "이 카드는 지원되지 않습니다",
+    "card-label": "카드",
+    "delete-payment-method-label": "결제 수단 삭제",
+    "settings-button-label": "저장된 결제 수단 관리",
+    "loading-label": "로딩 중",
+    "processing-payment-label": "결제 처리 중",
+    "card-form-label": "카드 결제 양식",
+  }
+}