processout · jakubjasinsky · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026
diff --git a/examples/dynamic-checkout/index.html b/examples/dynamic-checkout/index.html
diff --git a/examples/dynamic-checkout/styles.css b/examples/dynamic-checkout/styles.css
@@ -3,16 +3,172 @@ html {
 }
 
 body {
+  margin: 0;
+  background: #f5f7fa;
+  color: #242c38;
+  font-family: Arial, sans-serif;
+}
+
+h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+p,
+pre {
+  margin: 0;
+}
+
+textarea,
+input,
+button {
+  font: inherit;
+}
+
+pre {
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.example-layout {
+  box-sizing: border-box;
+  display: grid;
+  gap: 24px;
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 32px 20px;
+}
+
+.example-panel {
+  background: #ffffff;
+  border: 1px solid #d9e0e8;
+  border-radius: 16px;
+  box-shadow: 0 12px 32px rgba(36, 44, 56, 0.08);
+  padding: 24px;
+}
+
+.example-panel-sidebar {
+  display: grid;
+  gap: 24px;
+}
+
+.example-section {
+  display: grid;
+  gap: 16px;
+}
+
+.dynamic-checkout-form {
+  display: grid;
+  gap: 20px;
+}
+
+.form-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.form-field {
+  display: grid;
+  gap: 8px;
+}
+
+.form-field span {
+  font-weight: 700;
+}
+
+.form-field input,
+.form-field textarea {
+  box-sizing: border-box;
   width: 100%;
-  font-family: "Arial";
-  display: flex;
-  justify-content: center;
+  background: #f5f7fa;
+  border: 1px solid #cbd5e1;
+  border-radius: 12px;
+  color: inherit;
+  padding: 12px;
+}
+
+.form-field textarea {
+  min-height: 112px;
+  resize: vertical;
+}
+
+.form-field-toggle {
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 12px;
+}
+
+.form-field-toggle input {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+}
+
+.form-actions {
+  display: grid;
+  gap: 12px;
+}
+
+.form-actions button {
+  border: 0;
+  border-radius: 999px;
+  background: #242c38;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 12px 18px;
+}
+
+.form-error {
+  color: #b42318;
+  line-height: 1.5;
+}
+
+.event-log {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+  display: grid;
+  gap: 12px;
+  max-height: 420px;
+  overflow-y: auto;
+}
+
+.event-log li {
+  display: grid;
+  gap: 8px;
+  background: #f5f7fa;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.event-log-time {
+  color: #526173;
+  font-size: 12px;
 }
 
-h1 {
-  margin-bottom: 50px;
+.event-log pre {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 10px;
 }
 
 #dynamic-cko-container {
-  width: 400px;
+  width: 100%;
+  max-width: 420px;
+}
+
+@media (min-width: 960px) {
+  .example-layout {
+    grid-template-columns: minmax(420px, 460px) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .form-field-full {
+    grid-column: 1 / -1;
+  }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "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/config/assets.ts b/src/dynamic-checkout/config/assets.ts
@@ -18,9 +18,13 @@ module ProcessOut {
     rupay: "/images/schemes/rectangle/rupay.svg",
   }
 
-  export const PAYMENT_SUCCESS_IMAGE_ASSET = "/images/dynamic-checkout-assets/payment-success.svg"
+  export const PAYMENT_SUCCESS_IMAGE_ASSET = "/images/dynamic-checkout-assets/check-icon.svg"
 
-  export const PAYMENT_ERROR_IMAGE_ASSET = "/images/dynamic-checkout-assets/payment-error.svg"
+  export const PAYMENT_ERROR_IMAGE_ASSET = "/images/dynamic-checkout-assets/x-icon.svg"
+
+  export const PAYMENT_PENDING_IMAGE_ASSET = "/images/dynamic-checkout-assets/clock-icon.svg"
+
+  export const CARD_CVC_ICON = "/images/dynamic-checkout-assets/cvc-icon.svg"
 
   export const COG_ICON = "/images/dynamic-checkout-assets/cog-icon.svg"
 

diff --git a/src/dynamic-checkout/config/payment-config.ts b/src/dynamic-checkout/config/payment-config.ts
@@ -12,9 +12,13 @@ module ProcessOut {
     clientSecret?: string
     capturePayments?: boolean
     allowFallbackToSale?: boolean
+    enforceSafePaymentMethod?: boolean
+    hideSavedPaymentMethods?: boolean
     showStatusMessage?: boolean
     payButtonText?: string
     additionalData?: DynamicCheckoutAdditionalDataByGateway
+    cvcLabel?: string
+    cvcPlaceholder?: string
   }
 
   export type DynamicCheckoutInternalConfigType = {
@@ -31,9 +35,13 @@ module ProcessOut {
     locale: DynamicCheckoutPublicConfigType["locale"] = "en"
     capturePayments: DynamicCheckoutPublicConfigType["capturePayments"] = false
     allowFallbackToSale: DynamicCheckoutPublicConfigType["allowFallbackToSale"] = false
+    enforceSafePaymentMethod: DynamicCheckoutPublicConfigType["enforceSafePaymentMethod"] = false
+    hideSavedPaymentMethods: DynamicCheckoutPublicConfigType["hideSavedPaymentMethods"] = false
     showStatusMessage: DynamicCheckoutPublicConfigType["showStatusMessage"] = true
     payButtonText: DynamicCheckoutPublicConfigType["payButtonText"] = ""
     additionalData: DynamicCheckoutPublicConfigType["additionalData"] = {}
+    cvcLabel: DynamicCheckoutPublicConfigType["cvcLabel"] = ""
+    cvcPlaceholder: DynamicCheckoutPublicConfigType["cvcPlaceholder"] = ""
     invoiceDetails: DynamicCheckoutInternalConfigType["invoiceDetails"]
 
     constructor(config: DynamicCheckoutPublicConfigType) {
@@ -48,8 +56,13 @@ module ProcessOut {
         invoiceDetails: this.invoiceDetails,
         capturePayments: this.capturePayments,
         allowFallbackToSale: this.allowFallbackToSale,
+        enforceSafePaymentMethod: this.enforceSafePaymentMethod,
+        hideSavedPaymentMethods: this.hideSavedPaymentMethods,
         showStatusMessage: this.showStatusMessage,
         additionalData: this.additionalData,
+        payButtonText: this.payButtonText,
+        cvcLabel: this.cvcLabel,
+        cvcPlaceholder: this.cvcPlaceholder,
       }
     }
 
@@ -74,8 +87,12 @@ module ProcessOut {
       this.locale = config.locale || "en"
       this.capturePayments = config.capturePayments || false
       this.allowFallbackToSale = config.allowFallbackToSale || false
+      this.enforceSafePaymentMethod = config.enforceSafePaymentMethod || false
+      this.hideSavedPaymentMethods = config.hideSavedPaymentMethods || false
       this.payButtonText = config.payButtonText || ""
       this.additionalData = config.additionalData || {}
+      this.cvcLabel = config.cvcLabel || ""
+      this.cvcPlaceholder = config.cvcPlaceholder || ""
 
       if (config.showStatusMessage !== undefined && config.showStatusMessage !== null) {
         this.showStatusMessage = config.showStatusMessage

diff --git a/src/dynamic-checkout/locales/de.ts b/src/dynamic-checkout/locales/de.ts
@@ -12,7 +12,7 @@ module ProcessOut {
     "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",
+    "cvc-error-message": "Sicherheitscode 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.",
@@ -36,7 +36,8 @@ module ProcessOut {
       "Wenn Sie das nächste Mal eine Zahlungsmethode speichern, wird sie hier angezeigt.",
     "card-number-label": "Kartennummer",
     "expiry-date-label": "Ablaufdatum",
-    "cvc-label": "CVC",
+    "cvc-label": "Sicherheitscode",
+    "cvc-placeholder": "CVC/CVV",
     "card-not-supported-error-message": "Diese Karte wird nicht unterstützt",
     "card-label": "Karte",
     "delete-payment-method-label": "Zahlungsmethode löschen",

diff --git a/src/dynamic-checkout/locales/en.ts b/src/dynamic-checkout/locales/en.ts
@@ -12,7 +12,7 @@ module ProcessOut {
     "select-state-placeholder": "Select state",
     "card-number-error-message": "Card number is invalid",
     "expiry-date-error-message": "Expiry date is invalid",
-    "cvc-error-message": "CVC is invalid",
+    "cvc-error-message": "Security code is invalid",
     "cardholder-name-error-message": "Cardholder name is invalid",
     "payment-error-message": "Something went wrong. Please try again.",
     "payment-cancelled-message": "Payment has been cancelled.",
@@ -35,7 +35,8 @@ module ProcessOut {
       "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",
+    "cvc-label": "Security code",
+    "cvc-placeholder": "CVC/CVV",
     "card-not-supported-error-message": "This card is not supported",
     "card-label": "Card",
     "delete-payment-method-label": "Delete payment method",

diff --git a/src/dynamic-checkout/locales/es.ts b/src/dynamic-checkout/locales/es.ts
@@ -12,7 +12,7 @@ module ProcessOut {
     "select-state-placeholder": "Seleccionar estado",
     "card-number-error-message": "El número de tarjeta es inválido",
     "expiry-date-error-message": "La fecha de vencimiento es inválida",
-    "cvc-error-message": "El CVC es inválido",
+    "cvc-error-message": "El código de seguridad es inválido",
     "cardholder-name-error-message": "El nombre del titular de la tarjeta es inválido",
     "payment-error-message": "Algo salió mal. Por favor, inténtalo de nuevo.",
     "payment-cancelled-message": "El pago ha sido cancelado.",
@@ -35,7 +35,8 @@ module ProcessOut {
       "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",
+    "cvc-label": "Código de seguridad",
+    "cvc-placeholder": "CVC/CVV",
     "card-not-supported-error-message": "Esta tarjeta no es compatible",
     "card-label": "Tarjeta bancaria",
     "delete-payment-method-label": "Eliminar método de pago",

diff --git a/src/dynamic-checkout/locales/fr.ts b/src/dynamic-checkout/locales/fr.ts
@@ -12,7 +12,7 @@ module ProcessOut {
     "select-state-placeholder": "Sélectionner un état",
     "card-number-error-message": "Le numéro de carte est invalide",
     "expiry-date-error-message": "La date d'expiration est invalide",
-    "cvc-error-message": "Le CVC est invalide",
+    "cvc-error-message": "Le code de sécurité est invalide",
     "cardholder-name-error-message": "Le nom du titulaire de la carte est invalide",
     "payment-error-message": "Quelque chose a mal tourné. Veuillez réessayer.",
     "payment-cancelled-message": "Le paiement a été annulé.",
@@ -36,7 +36,8 @@ module ProcessOut {
       "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",
+    "cvc-label": "Code de sécurité",
+    "cvc-placeholder": "CVC/CVV",
     "card-not-supported-error-message": "Cette carte n'est pas acceptée",
     "card-label": "Carte",
     "delete-payment-method-label": "Supprimer le moyen de paiement",

diff --git a/src/dynamic-checkout/locales/it.ts b/src/dynamic-checkout/locales/it.ts
@@ -12,7 +12,7 @@ module ProcessOut {
     "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",
+    "cvc-error-message": "Il codice di sicurezza 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.",
@@ -36,7 +36,8 @@ module ProcessOut {
       "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",
+    "cvc-label": "Codice di sicurezza",
+    "cvc-placeholder": "CVC/CVV",
     "card-not-supported-error-message": "Questa carta non è supportata",
     "card-label": "Carta",
     "delete-payment-method-label": "Elimina metodo di pagamento",

diff --git a/src/dynamic-checkout/locales/ja.ts b/src/dynamic-checkout/locales/ja.ts
@@ -32,11 +32,11 @@ module ProcessOut {
     "payments-manager-header": "保存済みの支払い方法を管理",
     "payments-manager-close-button": "閉じる",
     "no-saved-payment-methods-header": "保存済みの支払い方法はありません",
-    "no-saved-payment-methods-message":
-      "次回支払い方法を保存すると、ここに表示されます。",
+    "no-saved-payment-methods-message": "次回支払い方法を保存すると、ここに表示されます。",
     "card-number-label": "カード番号",
     "expiry-date-label": "有効期限",
     "cvc-label": "セキュリティコード",
+    "cvc-placeholder": "CVC/CVV",
     "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
@@ -20,8 +20,7 @@ module ProcessOut {
     "other-payment-methods-header": "기타 결제 수단",
     "select-payment-method-label": "결제 수단 선택",
     "payment-success-message": "결제가 완료되었습니다.",
-    "payment-info-message":
-      "결제를 처리하고 있습니다. 이 창을 닫으셔도 됩니다.",
+    "payment-info-message": "결제를 처리하고 있습니다. 이 창을 닫으셔도 됩니다.",
     "payment-pending-message": "결제가 대기 중입니다.",
     "payment-error-generic-message": "결제를 처리할 수 없습니다.",
     "street1-label": "주소 1",
@@ -32,11 +31,11 @@ module ProcessOut {
     "payments-manager-header": "저장된 결제 수단 관리",
     "payments-manager-close-button": "닫기",
     "no-saved-payment-methods-header": "저장된 결제 수단 없음",
-    "no-saved-payment-methods-message":
-      "다음에 결제 수단을 저장하면 여기에 표시됩니다.",
+    "no-saved-payment-methods-message": "다음에 결제 수단을 저장하면 여기에 표시됩니다.",
     "card-number-label": "카드 번호",
     "expiry-date-label": "만료일",
     "cvc-label": "보안 코드",
+    "cvc-placeholder": "CVC/CVV",
     "card-not-supported-error-message": "이 카드는 지원되지 않습니다",
     "card-label": "카드",
     "delete-payment-method-label": "결제 수단 삭제",