From 79eea6cb6b2b415633d4178d720d88e9580d3f7f Mon Sep 17 00:00:00 2001
From: franciscoemanuel-clk <francisco.pereira@clicksign.com>
Date: Fri, 15 May 2026 19:08:51 -0300
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20atualiza=20p=C3=A1gina=20de=20teste?=
 =?UTF-8?q?=20para=20o=20Verify=20com=20novos=20ambientes=20e=20configura?=
 =?UTF-8?q?=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v3/verify/index.html | 144 +++++++++++++++++++++++++++++++------------
 v3/verify/style.css  |  18 +++++-
 2 files changed, 121 insertions(+), 41 deletions(-)

diff --git a/v3/verify/index.html b/v3/verify/index.html
index 2b4313f..57ae0d5 100644
--- a/v3/verify/index.html
+++ b/v3/verify/index.html
@@ -21,42 +21,49 @@ <h1>🔐 SDK de Autenticações </h1>
           <h2>⚙️ Configuração</h2>
           
           <div class="info-box">
-            <h3>Sobre este SDK</h3>
-            <p>Este widget permite verificação segura de identidade através de detecção biométrica de prova de vida. Os casos de uso incluem:</p>
-            <ul>
-              <li>Autenticação para assinatura de documentos</li>
-              <li>Verificação de identidade</li>
-              <li>Validação antifraude</li>
-              <li>Controle de acesso seguro</li>
-              <li><a href="https://github.com/clicksign/embedded?tab=readme-ov-file#autenticações-v3-beta" target="_blank">Documentação</a></li>
-            </ul>
+            <h3>Como usar</h3>
+            <ol>
+              <li>Insira seu token de acesso da API</li>
+              <li>Selecione o ambiente desejado</li>
+              <li>Edite o corpo da requisição se necessário</li>
+              <li>Clique em "Nova captura" para criar uma transação e iniciar a verificação</li>
+            </ol>
+            <p><a href="https://github.com/clicksign/embedded?tab=readme-ov-file#autenticações-v3-beta" target="_blank">Documentação</a></p>
           </div>
 
           <div class="form-group">
-            <label for="transaction_key">Chave da Transação</label>
+            <label for="api_token">Token de Acesso da API</label>
             <input 
-              type="text" 
-              id="transaction_key" 
-              placeholder="Insira a chave da transação aqui..."
+              type="password" 
+              id="api_token" 
+              placeholder="Insira seu token de acesso aqui..."
               value="" 
             />
-            <small>Obtenha esta chave da sua transação</small>
+            <small>Token de autenticação para criar transações</small>
           </div>
 
           <div class="form-group">
             <label for="endpoint_select">Ambiente</label>
             <select id="endpoint_select">
-              <option value="https://1.clicksign.dev/app/verify">Staging 1</option>
-              <option value="https://3.clicksign.dev/app/verify">Staging 3</option>
-              <option value="https://20.clicksign.dev/app/verify">Staging 20</option>
-              <option value="http://localhost:3200">Local</option>
+              <option value="https://1.clicksign.dev" data-api="https://api-verify-6.clicksign.dev">Staging 1</option>
+              <option value="https://3.clicksign.dev" data-api="https://api-verify-6.clicksign.dev">Staging 3</option>
+              <option value="https://20.clicksign.dev" data-api="https://api-verify-6.clicksign.dev">Staging 20</option>
+              <option value="http://localhost:3200" data-api="http://127.0.0.1:8081">Local</option>
+              <option value="https://sandbox.clicksign.com" data-api="https://api-verify-sandbox.clicksign.com" selected>Sandbox</option>
+              <option value="https://app.clicksign.com" data-api="https://api-verify.clicksign.com">Production</option>
             </select>
             <small>Selecione o ambiente de destino para o widget</small>
           </div>
 
+          <div class="form-group">
+            <label for="request_body">Corpo da Requisição</label>
+            <textarea id="request_body" rows="8"></textarea>
+            <small>JSON enviado no POST /api/v1/transactions</small>
+          </div>
+
           <div class="button-group">
-            <button id="setButton" class="button primary" onclick="setWidget()">
-              ▶️ Carregar Widget
+            <button id="setButton" class="button primary">
+              Nova captura
             </button>
           </div>
         </div>
@@ -93,9 +100,17 @@ <h2>📡 Monitor de Eventos do SDK</h2>
     </div>
 
     <script type="text/javascript">
+      const DEFAULT_REQUEST_BODY = JSON.stringify({
+        authentication: 'liveness',
+        metadata: {
+          person_name: '',
+          person_documentation: ''
+        }
+      }, null, 2);
+
       let transaction,
-        transaction_key_element = document.getElementById('transaction_key'),
         endpoint_select = document.getElementById('endpoint_select'),
+        request_body_element = document.getElementById('request_body'),
         modal_overlay = document.getElementById('modalOverlay'),
         modal_loading = document.getElementById('modalLoading'),
         modal_close = document.getElementById('modalClose'),
@@ -105,10 +120,36 @@ <h2>📡 Monitor de Eventos do SDK</h2>
 
       let eventCount = 0;
       const BUTTON_TEXT = {
-        default: '▶️ Carregar Widget',
-        loading: '⏳ Inicializando...'
+        default: 'Nova captura',
+        loading: 'Criando transação...'
       };
 
+      // --- localStorage restore ---
+      const savedEnv = localStorage.getItem('verify_environment');
+      if (savedEnv) {
+        const match = Array.from(endpoint_select.options).find(o => o.value === savedEnv);
+        if (match) endpoint_select.value = savedEnv;
+      }
+
+      const savedBody = localStorage.getItem('verify_request_body');
+      request_body_element.value = savedBody || DEFAULT_REQUEST_BODY;
+
+      // --- localStorage persist ---
+      endpoint_select.addEventListener('change', function() {
+        localStorage.setItem('verify_environment', endpoint_select.value);
+      });
+
+      request_body_element.addEventListener('input', function() {
+        try {
+          JSON.parse(request_body_element.value);
+          localStorage.setItem('verify_request_body', request_body_element.value);
+        } catch (e) {
+          // only persist valid JSON
+        }
+      });
+
+      load_button.addEventListener('click', () => setWidget());
+
       function setButtonLoading(isLoading) {
         if (isLoading) {
           load_button.textContent = BUTTON_TEXT.loading;
@@ -204,31 +245,58 @@ <h2>📡 Monitor de Eventos do SDK</h2>
         }
       });
 
-      function setWidget() {
-        let transaction_key = transaction_key_element.value;
-        let endpoint = endpoint_select.value;
+      async function setWidget() {
+        const apiToken = document.getElementById('api_token').value;
+        const selected = endpoint_select.options[endpoint_select.selectedIndex];
+        const apiUrl = selected.dataset.api;
+        const widgetUrl = selected.value;
+        const bodyText = request_body_element.value;
 
-        if (!transaction_key || transaction_key.trim() === '') {
-          alert('Por favor, insira uma chave de sessão de autenticação');
-          logEvent('Erro de Validação', { message: 'Chave de sessão é obrigatória' }, 'error');
+        if (!apiToken || apiToken.trim() === '') {
+          alert('Por favor, insira o token de acesso da API');
+          logEvent('Erro de Validação', { message: 'Token de acesso é obrigatório' }, 'error');
+          return;
+        }
+
+        let body;
+        try {
+          body = JSON.parse(bodyText);
+        } catch (e) {
+          alert('JSON do corpo da requisição é inválido');
+          logEvent('Erro de Validação', { message: 'JSON inválido' }, 'error');
           return;
         }
 
         try {
           setButtonLoading(true);
-          updateStatus('Inicializando...', 'loading');
-          logEvent('Inicialização da Verificação', {
-            key: transaction_key.substring(0, 20) + '...',
-            endpoint: endpoint
-          }, 'info');
+          updateStatus('Criando transação...', 'loading');
+          logEvent('Criando Transação', { endpoint: apiUrl }, 'info');
+
+          const response = await fetch(`${apiUrl}/api/v1/transactions`, {
+            method: 'POST',
+            headers: {
+              'Authorization': `Bearer ${apiToken}`,
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(body)
+          });
+
+          if (!response.ok) {
+            throw new Error(`API retornou status ${response.status}`);
+          }
+
+          const data = await response.json();
+          const transactionKey = data.id;
+
+          logEvent('Transação Criada', { id: transactionKey }, 'success');
 
           if (transaction) {
             transaction.unmount();
             logEvent('Verificação Anterior Removida', null, 'info');
           }
 
-          transaction = new Verify(transaction_key);
-          transaction.endpoint = endpoint;
+          transaction = new Verify(transactionKey);
+          transaction.endpoint = widgetUrl;
 
           transaction.on('loaded', function(event) {
             debugEvent({ name: 'loaded', data: event }, 'success');
@@ -269,10 +337,8 @@ <h2>📡 Monitor de Eventos do SDK</h2>
           console.error('Erro:', error);
           setButtonLoading(false);
           updateStatus('Erro', 'error');
-          logEvent('Erro ao Montar', { error: error.message }, 'error');
-          return;
+          logEvent('Erro', { message: error.message }, 'error');
         }
-
       }
 
       function removeWidget() {
diff --git a/v3/verify/style.css b/v3/verify/style.css
index cded4df..2209527 100644
--- a/v3/verify/style.css
+++ b/v3/verify/style.css
@@ -124,7 +124,8 @@ h3 {
   color: #4a5568;
 }
 
-.info-box ul {
+.info-box ul,
+.info-box ol {
   margin: 0;
   padding-left: 20px;
   font-size: 14px;
@@ -148,6 +149,8 @@ label {
 }
 
 input[type=text],
+input[type=password],
+textarea,
 select {
   background: white;
   border: 2px solid #e2e8f0;
@@ -160,16 +163,27 @@ select {
 }
 
 input[type=text]:focus,
+input[type=password]:focus,
+textarea:focus,
 select:focus {
   outline: none;
   border-color: #f25924;
   box-shadow: 0 0 0 3px rgba(242, 89, 36, 0.1);
 }
 
-input[type=text]::placeholder {
+input[type=text]::placeholder,
+input[type=password]::placeholder,
+textarea::placeholder {
   color: #a0aec0;
 }
 
+textarea {
+  resize: vertical;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
 select {
   cursor: pointer;
   appearance: none;

From b111a2d097eb25734c711927b13110b3bd4417e6 Mon Sep 17 00:00:00 2001
From: franciscoemanuel-clk <francisco.pereira@clicksign.com>
Date: Fri, 15 May 2026 20:12:13 -0300
Subject: [PATCH 2/6] =?UTF-8?q?refactor:=20reverte=20altera=C3=A7=C3=A3o?=
 =?UTF-8?q?=20de=20criar=20transaction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v3/verify/index.html | 105 +++++++++----------------------------------
 v3/verify/style.css  |  15 +------
 2 files changed, 21 insertions(+), 99 deletions(-)

diff --git a/v3/verify/index.html b/v3/verify/index.html
index 57ae0d5..f8be8cc 100644
--- a/v3/verify/index.html
+++ b/v3/verify/index.html
@@ -23,23 +23,23 @@ <h2>⚙️ Configuração</h2>
           <div class="info-box">
             <h3>Como usar</h3>
             <ol>
-              <li>Insira seu token de acesso da API</li>
+              <li>Crie uma transação via API</li>
+              <li>Insira o ID da transação abaixo</li>
               <li>Selecione o ambiente desejado</li>
-              <li>Edite o corpo da requisição se necessário</li>
-              <li>Clique em "Nova captura" para criar uma transação e iniciar a verificação</li>
+              <li>Clique em "Carregar Widget" para iniciar a verificação</li>
             </ol>
             <p><a href="https://github.com/clicksign/embedded?tab=readme-ov-file#autenticações-v3-beta" target="_blank">Documentação</a></p>
           </div>
 
           <div class="form-group">
-            <label for="api_token">Token de Acesso da API</label>
+            <label for="transaction_key">Chave da Transação</label>
             <input 
-              type="password" 
-              id="api_token" 
-              placeholder="Insira seu token de acesso aqui..."
+              type="text" 
+              id="transaction_key" 
+              placeholder="Insira a chave da transação aqui..."
               value="" 
             />
-            <small>Token de autenticação para criar transações</small>
+            <small>Obtenha esta chave da sua transação</small>
           </div>
 
           <div class="form-group">
@@ -55,15 +55,9 @@ <h3>Como usar</h3>
             <small>Selecione o ambiente de destino para o widget</small>
           </div>
 
-          <div class="form-group">
-            <label for="request_body">Corpo da Requisição</label>
-            <textarea id="request_body" rows="8"></textarea>
-            <small>JSON enviado no POST /api/v1/transactions</small>
-          </div>
-
           <div class="button-group">
-            <button id="setButton" class="button primary">
-              Nova captura
+            <button id="setButton" class="button primary" onclick="setWidget()">
+              ▶️ Carregar Widget
             </button>
           </div>
         </div>
@@ -88,9 +82,6 @@ <h2>📡 Monitor de Eventos do SDK</h2>
 
     <div class="modal-overlay" id="modalOverlay" style="display: none;">
       <div class="modal-container">
-        <button class="modal-close" id="modalClose" onclick="closeModal()">
-          <span>✕</span>
-        </button>
         <div class="modal-loading" id="modalLoading">
           <div class="spinner"></div>
           <p>Carregando widget de autenticação...</p>
@@ -100,56 +91,31 @@ <h2>📡 Monitor de Eventos do SDK</h2>
     </div>
 
     <script type="text/javascript">
-      const DEFAULT_REQUEST_BODY = JSON.stringify({
-        authentication: 'liveness',
-        metadata: {
-          person_name: '',
-          person_documentation: ''
-        }
-      }, null, 2);
-
       let transaction,
         endpoint_select = document.getElementById('endpoint_select'),
-        request_body_element = document.getElementById('request_body'),
+        transaction_key_element = document.getElementById('transaction_key'),
         modal_overlay = document.getElementById('modalOverlay'),
         modal_loading = document.getElementById('modalLoading'),
-        modal_close = document.getElementById('modalClose'),
         container_element = document.getElementById('widget'),
         event_log = document.getElementById('eventLog'),
         load_button = document.getElementById('setButton');
 
       let eventCount = 0;
       const BUTTON_TEXT = {
-        default: 'Nova captura',
-        loading: 'Criando transação...'
+        default: '▶️ Carregar Widget',
+        loading: 'Carregando...'
       };
 
-      // --- localStorage restore ---
       const savedEnv = localStorage.getItem('verify_environment');
       if (savedEnv) {
         const match = Array.from(endpoint_select.options).find(o => o.value === savedEnv);
         if (match) endpoint_select.value = savedEnv;
       }
 
-      const savedBody = localStorage.getItem('verify_request_body');
-      request_body_element.value = savedBody || DEFAULT_REQUEST_BODY;
-
-      // --- localStorage persist ---
       endpoint_select.addEventListener('change', function() {
         localStorage.setItem('verify_environment', endpoint_select.value);
       });
 
-      request_body_element.addEventListener('input', function() {
-        try {
-          JSON.parse(request_body_element.value);
-          localStorage.setItem('verify_request_body', request_body_element.value);
-        } catch (e) {
-          // only persist valid JSON
-        }
-      });
-
-      load_button.addEventListener('click', () => setWidget());
-
       function setButtonLoading(isLoading) {
         if (isLoading) {
           load_button.textContent = BUTTON_TEXT.loading;
@@ -245,50 +211,19 @@ <h2>📡 Monitor de Eventos do SDK</h2>
         }
       });
 
-      async function setWidget() {
-        const apiToken = document.getElementById('api_token').value;
-        const selected = endpoint_select.options[endpoint_select.selectedIndex];
-        const apiUrl = selected.dataset.api;
-        const widgetUrl = selected.value;
-        const bodyText = request_body_element.value;
+      function setWidget() {
+        const transactionKey = transaction_key_element.value;
+        const widgetUrl = endpoint_select.value;
 
-        if (!apiToken || apiToken.trim() === '') {
-          alert('Por favor, insira o token de acesso da API');
-          logEvent('Erro de Validação', { message: 'Token de acesso é obrigatório' }, 'error');
-          return;
-        }
-
-        let body;
-        try {
-          body = JSON.parse(bodyText);
-        } catch (e) {
-          alert('JSON do corpo da requisição é inválido');
-          logEvent('Erro de Validação', { message: 'JSON inválido' }, 'error');
+        if (!transactionKey || transactionKey.trim() === '') {
+          alert('Por favor, insira a chave da transação');
+          logEvent('Erro de Validação', { message: 'Chave da transação é obrigatória' }, 'error');
           return;
         }
 
         try {
           setButtonLoading(true);
-          updateStatus('Criando transação...', 'loading');
-          logEvent('Criando Transação', { endpoint: apiUrl }, 'info');
-
-          const response = await fetch(`${apiUrl}/api/v1/transactions`, {
-            method: 'POST',
-            headers: {
-              'Authorization': `Bearer ${apiToken}`,
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(body)
-          });
-
-          if (!response.ok) {
-            throw new Error(`API retornou status ${response.status}`);
-          }
-
-          const data = await response.json();
-          const transactionKey = data.id;
-
-          logEvent('Transação Criada', { id: transactionKey }, 'success');
+          logEvent('Carregando Widget', { endpoint: widgetUrl, key: transactionKey }, 'info');
 
           if (transaction) {
             transaction.unmount();
diff --git a/v3/verify/style.css b/v3/verify/style.css
index 2209527..0f893d9 100644
--- a/v3/verify/style.css
+++ b/v3/verify/style.css
@@ -149,8 +149,6 @@ label {
 }
 
 input[type=text],
-input[type=password],
-textarea,
 select {
   background: white;
   border: 2px solid #e2e8f0;
@@ -163,27 +161,16 @@ select {
 }
 
 input[type=text]:focus,
-input[type=password]:focus,
-textarea:focus,
 select:focus {
   outline: none;
   border-color: #f25924;
   box-shadow: 0 0 0 3px rgba(242, 89, 36, 0.1);
 }
 
-input[type=text]::placeholder,
-input[type=password]::placeholder,
-textarea::placeholder {
+input[type=text]::placeholder {
   color: #a0aec0;
 }
 
-textarea {
-  resize: vertical;
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
 select {
   cursor: pointer;
   appearance: none;

From 244dc11744eb834f32deb0a7e247997f262a87cd Mon Sep 17 00:00:00 2001
From: franciscoemanuel-clk <francisco.pereira@clicksign.com>
Date: Fri, 15 May 2026 20:25:53 -0300
Subject: [PATCH 3/6] feat: ajustes visuais

---
 v3/verify/index.html | 103 ++++++++++++++++++++++++++++++++++++-------
 v3/verify/style.css  |  53 ++++++++++++++++++++--
 2 files changed, 138 insertions(+), 18 deletions(-)

diff --git a/v3/verify/index.html b/v3/verify/index.html
index f8be8cc..34a17da 100644
--- a/v3/verify/index.html
+++ b/v3/verify/index.html
@@ -57,7 +57,7 @@ <h3>Como usar</h3>
 
           <div class="button-group">
             <button id="setButton" class="button primary" onclick="setWidget()">
-              ▶️ Carregar Widget
+              Carregar Widget
             </button>
           </div>
         </div>
@@ -82,10 +82,6 @@ <h2>📡 Monitor de Eventos do SDK</h2>
 
     <div class="modal-overlay" id="modalOverlay" style="display: none;">
       <div class="modal-container">
-        <div class="modal-loading" id="modalLoading">
-          <div class="spinner"></div>
-          <p>Carregando widget de autenticação...</p>
-        </div>
         <div class="modal-content" id="widget"></div>
       </div>
     </div>
@@ -95,14 +91,13 @@ <h2>📡 Monitor de Eventos do SDK</h2>
         endpoint_select = document.getElementById('endpoint_select'),
         transaction_key_element = document.getElementById('transaction_key'),
         modal_overlay = document.getElementById('modalOverlay'),
-        modal_loading = document.getElementById('modalLoading'),
         container_element = document.getElementById('widget'),
         event_log = document.getElementById('eventLog'),
         load_button = document.getElementById('setButton');
 
       let eventCount = 0;
       const BUTTON_TEXT = {
-        default: '▶️ Carregar Widget',
+        default: 'Carregar Widget',
         loading: 'Carregando...'
       };
 
@@ -135,6 +130,77 @@ <h2>📡 Monitor de Eventos do SDK</h2>
         return now.toLocaleTimeString('pt-BR', { hour12: false });
       }
 
+      function decodeJwt(token) {
+        try {
+          const parts = token.split('.');
+          if (parts.length !== 3) return null;
+          const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
+          return { header: JSON.parse(atob(parts[0].replace(/-/g, '+').replace(/_/g, '/'))), payload };
+        } catch (e) {
+          return null;
+        }
+      }
+
+      function isJwt(value) {
+        return typeof value === 'string' && /^[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+$/.test(value.trim());
+      }
+
+      function findJwtValues(data) {
+        const tokens = [];
+        if (isJwt(data)) {
+          tokens.push(data);
+        } else if (data && typeof data === 'object') {
+          for (const value of Object.values(data)) {
+            if (isJwt(value)) tokens.push(value);
+          }
+        }
+        return tokens;
+      }
+
+      function createJwtDecode(token) {
+        const decoded = decodeJwt(token);
+        if (!decoded) return null;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jwt-preview';
+
+        const toggle = document.createElement('button');
+        toggle.className = 'button small secondary jwt-toggle';
+        toggle.textContent = 'Decodificar JWT';
+        wrapper.appendChild(toggle);
+
+        const details = document.createElement('div');
+        details.className = 'jwt-details';
+        details.style.display = 'none';
+
+        const headerSection = document.createElement('div');
+        headerSection.className = 'jwt-section';
+        headerSection.innerHTML = '<span class="jwt-label">Header</span>';
+        const headerValue = document.createElement('pre');
+        headerValue.className = 'jwt-payload';
+        headerValue.textContent = JSON.stringify(decoded.header, null, 2);
+        headerSection.appendChild(headerValue);
+        details.appendChild(headerSection);
+
+        const payloadSection = document.createElement('div');
+        payloadSection.className = 'jwt-section';
+        payloadSection.innerHTML = '<span class="jwt-label">Payload</span>';
+        const payloadValue = document.createElement('pre');
+        payloadValue.className = 'jwt-payload';
+        payloadValue.textContent = JSON.stringify(decoded.payload, null, 2);
+        payloadSection.appendChild(payloadValue);
+        details.appendChild(payloadSection);
+
+        toggle.addEventListener('click', function() {
+          const isOpen = details.style.display !== 'none';
+          details.style.display = isOpen ? 'none' : 'block';
+          toggle.textContent = isOpen ? 'Decodificar JWT' : 'Recolher JWT';
+        });
+
+        wrapper.appendChild(details);
+        return wrapper;
+      }
+
       function logEvent(eventName, eventData, type = 'info') {
         eventCount++;
         
@@ -157,6 +223,12 @@ <h2>📡 Monitor de Eventos do SDK</h2>
           dataDiv.className = 'event-data';
           dataDiv.textContent = JSON.stringify(eventData, null, 2);
           eventItem.appendChild(dataDiv);
+
+          const jwtTokens = findJwtValues(eventData);
+          for (const token of jwtTokens) {
+            const jwtDecode = createJwtDecode(token);
+            if (jwtDecode) eventItem.appendChild(jwtDecode);
+          }
         }
         
         const placeholder = event_log.querySelector('.info');
@@ -199,8 +271,6 @@ <h2>📡 Monitor de Eventos do SDK</h2>
           transaction.unmount();
         }
         modal_overlay.style.display = 'none';
-        modal_loading.style.display = 'flex';
-        container_element.style.display = 'none';
         document.body.style.overflow = 'auto';
         updateStatus('Não Carregado', 'info');
       }
@@ -233,15 +303,12 @@ <h2>📡 Monitor de Eventos do SDK</h2>
           transaction = new Verify(transactionKey);
           transaction.endpoint = widgetUrl;
 
+          openModal();
+
           transaction.on('loaded', function(event) {
             debugEvent({ name: 'loaded', data: event }, 'success');
             setButtonLoading(false);
-            updateStatus('Carregado - Abrindo Modal', 'success');
-
-            openModal();
-            modal_loading.style.display = 'none';
-            container_element.style.display = 'block';
-            updateStatus('Modal Aberto', 'success');
+            updateStatus('Carregado', 'success');
           });
 
           transaction.on('success', function(event) {
@@ -256,6 +323,12 @@ <h2>📡 Monitor de Eventos do SDK</h2>
             closeModal();
           });
 
+          transaction.on('finished', function(event) {
+            debugEvent({ name: 'finished', data: event }, 'info');
+            updateStatus('Finalizado', 'info');
+            closeModal();
+          });
+
           transaction.on('error', function(event) {
             debugEvent({ name: 'error', data: event }, 'error');
             setButtonLoading(false);
diff --git a/v3/verify/style.css b/v3/verify/style.css
index 0f893d9..f960fc0 100644
--- a/v3/verify/style.css
+++ b/v3/verify/style.css
@@ -392,6 +392,54 @@ button[disabled] {
   word-break: break-word;
 }
 
+.jwt-preview {
+  margin-top: 8px;
+}
+
+.jwt-toggle {
+  width: auto;
+}
+
+.jwt-details {
+  margin-top: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.jwt-section {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.jwt-section:last-child {
+  border-bottom: none;
+}
+
+.jwt-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #718096;
+  margin-bottom: 6px;
+}
+
+.jwt-payload {
+  margin: 0;
+  font-size: 11px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  color: #2d3748;
+  background: #f7fafc;
+  padding: 10px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
 .status-badge {
   padding: 6px 16px;
   border-radius: 20px;
@@ -453,7 +501,7 @@ iframe {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.85);
+  background-color: #191826;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -477,7 +525,7 @@ iframe {
   height: 100%;
   max-width: 100vw;
   max-height: 100vh;
-  background: white;
+  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -535,7 +583,6 @@ iframe {
 .modal-content {
   width: 100%;
   height: 100%;
-  display: none;
 }
 
 .modal-content iframe {

From 77fef98ee27c0d4aed0c1b0715b9492d0f968c8a Mon Sep 17 00:00:00 2001
From: franciscoemanuel-clk <francisco.pereira@clicksign.com>
Date: Fri, 15 May 2026 20:32:16 -0300
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20mant=C3=A9m=20apenas=20o=20log=20de?=
 =?UTF-8?q?=20eventos=20do=20SDK?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v3/verify/index.html | 37 +++++++++++++++++--
 v3/verify/style.css  | 84 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 119 insertions(+), 2 deletions(-)

diff --git a/v3/verify/index.html b/v3/verify/index.html
index 34a17da..49b0462 100644
--- a/v3/verify/index.html
+++ b/v3/verify/index.html
@@ -80,6 +80,8 @@ <h2>📡 Monitor de Eventos do SDK</h2>
       </main>
     </div>
 
+    <div id="toastContainer"></div>
+
     <div class="modal-overlay" id="modalOverlay" style="display: none;">
       <div class="modal-container">
         <div class="modal-content" id="widget"></div>
@@ -201,7 +203,40 @@ <h2>📡 Monitor de Eventos do SDK</h2>
         return wrapper;
       }
 
+      const toast_container = document.getElementById('toastContainer');
+      const MAX_TOASTS = 5;
+      const TOAST_DURATION = 4000;
+
+      function showToast(eventName, type) {
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'toast-name';
+        nameSpan.textContent = eventName;
+
+        const timeSpan = document.createElement('span');
+        timeSpan.className = 'toast-time';
+        timeSpan.textContent = formatTime();
+
+        toast.appendChild(nameSpan);
+        toast.appendChild(timeSpan);
+        toast_container.appendChild(toast);
+
+        while (toast_container.children.length > MAX_TOASTS) {
+          toast_container.removeChild(toast_container.firstChild);
+        }
+
+        setTimeout(function() {
+          toast.classList.add('toast-out');
+          toast.addEventListener('animationend', function() {
+            toast.remove();
+          });
+        }, TOAST_DURATION);
+      }
+
       function logEvent(eventName, eventData, type = 'info') {
+        showToast(eventName, type);
         eventCount++;
         
         const eventItem = document.createElement('div');
@@ -293,11 +328,9 @@ <h2>📡 Monitor de Eventos do SDK</h2>
 
         try {
           setButtonLoading(true);
-          logEvent('Carregando Widget', { endpoint: widgetUrl, key: transactionKey }, 'info');
 
           if (transaction) {
             transaction.unmount();
-            logEvent('Verificação Anterior Removida', null, 'info');
           }
 
           transaction = new Verify(transactionKey);
diff --git a/v3/verify/style.css b/v3/verify/style.css
index f960fc0..8701e33 100644
--- a/v3/verify/style.css
+++ b/v3/verify/style.css
@@ -589,3 +589,87 @@ iframe {
   width: 100%;
   height: 100%;
 }
+
+#toastContainer {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: 12px;
+  border-left: 4px solid #cbd5e0;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  font-family: 'DM Sans', sans-serif;
+  animation: toastIn 0.3s ease;
+  min-width: 240px;
+  max-width: 360px;
+}
+
+.toast-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #2d3748;
+}
+
+.toast-time {
+  font-size: 12px;
+  font-weight: 500;
+  color: #718096;
+  font-family: 'Monaco', 'Menlo', monospace;
+  white-space: nowrap;
+}
+
+.toast.info {
+  border-left-color: #406bbf;
+  background: #eaf0fb;
+}
+
+.toast.success {
+  border-left-color: #3fa64d;
+  background: #ebf8ed;
+}
+
+.toast.error,
+.toast.failed {
+  border-left-color: #d02525;
+  background: #fceaea;
+}
+
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.toast-out {
+  animation: toastOut 0.3s ease forwards;
+}
+
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}

From 514d5b18b6a835d8cb532ca6c1ca24b635210502 Mon Sep 17 00:00:00 2001
From: franciscoemanuel-clk <francisco.pereira@clicksign.com>
Date: Mon, 25 May 2026 19:24:58 -0300
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20adiciona=20modal=20de=20configura?=
 =?UTF-8?q?=C3=A7=C3=A3o=20para=20o=20embedded=20do=20verify?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v3/verify/index.html | 162 ++++++++++++++++++++++++++++++++++++++++++-
 v3/verify/style.css  |  78 ++++++++++++++++++++-
 2 files changed, 235 insertions(+), 5 deletions(-)

diff --git a/v3/verify/index.html b/v3/verify/index.html
index 49b0462..0e4e0e4 100644
--- a/v3/verify/index.html
+++ b/v3/verify/index.html
@@ -59,6 +59,9 @@ <h3>Como usar</h3>
             <button id="setButton" class="button primary" onclick="setWidget()">
               Carregar Widget
             </button>
+            <button id="configButton" class="button secondary" onclick="openConfigModal()">
+              Configurar
+            </button>
           </div>
         </div>
 
@@ -88,11 +91,28 @@ <h2>📡 Monitor de Eventos do SDK</h2>
       </div>
     </div>
 
+    <div class="modal-overlay config-modal-overlay" id="configModalOverlay" style="display: none;">
+      <div class="config-modal" role="dialog" aria-modal="true" aria-labelledby="configModalTitle">
+        <h3 id="configModalTitle">Configuração customizada do Verify</h3>
+        <p class="config-modal-help">
+          Use JSON válido. Todos os campos são opcionais e serão aplicados ao carregar o widget.
+        </p>
+        <textarea id="configTextarea" spellcheck="false"></textarea>
+        <div class="config-modal-actions">
+          <button class="button secondary" onclick="closeConfigModal()">Cancelar</button>
+          <button class="button secondary" onclick="resetConfigDraft()">Reset</button>
+          <button class="button primary" onclick="saveConfig()">Salvar</button>
+        </div>
+      </div>
+    </div>
+
     <script type="text/javascript">
       let transaction,
         endpoint_select = document.getElementById('endpoint_select'),
         transaction_key_element = document.getElementById('transaction_key'),
         modal_overlay = document.getElementById('modalOverlay'),
+        config_modal_overlay = document.getElementById('configModalOverlay'),
+        config_textarea = document.getElementById('configTextarea'),
         container_element = document.getElementById('widget'),
         event_log = document.getElementById('eventLog'),
         load_button = document.getElementById('setButton');
@@ -102,6 +122,21 @@ <h2>📡 Monitor de Eventos do SDK</h2>
         default: 'Carregar Widget',
         loading: 'Carregando...'
       };
+      const VERIFY_CONFIG_STORAGE_KEY = 'verify_custom_config';
+      const DEFAULT_VERIFY_CONFIG_TEMPLATE = JSON.stringify(
+        {
+          locale: 'pt-BR',
+          custom: {
+            backgroundColor: '',
+            textColor: '',
+            buttonTextColor: '',
+            buttonBackgroundColor: '',
+            ellipseBorderColor: ''
+          }
+        },
+        null,
+        2
+      );
 
       const savedEnv = localStorage.getItem('verify_environment');
       if (savedEnv) {
@@ -113,6 +148,105 @@ <h2>📡 Monitor de Eventos do SDK</h2>
         localStorage.setItem('verify_environment', endpoint_select.value);
       });
 
+      function parseConfigText(configText) {
+        const parsed = JSON.parse(configText);
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+          throw new Error('A configuração deve ser um objeto JSON');
+        }
+        return parsed;
+      }
+
+      function getStoredVerifyConfig() {
+        const raw = localStorage.getItem(VERIFY_CONFIG_STORAGE_KEY);
+        if (!raw) return null;
+        return parseConfigText(raw);
+      }
+
+      function buildVerifyOptions(rawConfig) {
+        if (!rawConfig || typeof rawConfig !== 'object') return null;
+
+        const options = {};
+        if (typeof rawConfig.locale === 'string' && rawConfig.locale.trim() !== '') {
+          options.locale = rawConfig.locale.trim();
+        }
+
+        const customSource = rawConfig.custom;
+        const allowedCustomKeys = [
+          'backgroundColor',
+          'textColor',
+          'buttonTextColor',
+          'buttonBackgroundColor',
+          'ellipseBorderColor'
+        ];
+
+        if (customSource && typeof customSource === 'object' && !Array.isArray(customSource)) {
+          const custom = {};
+
+          for (const key of allowedCustomKeys) {
+            const value = customSource[key];
+            if (typeof value === 'string' && value.trim() !== '') {
+              custom[key] = value.trim();
+            }
+          }
+
+          if (Object.keys(custom).length > 0) {
+            options.custom = custom;
+          }
+        }
+
+        return Object.keys(options).length > 0 ? options : null;
+      }
+
+      function ensureValidStoredConfig() {
+        const raw = localStorage.getItem(VERIFY_CONFIG_STORAGE_KEY);
+        if (!raw) return;
+
+        try {
+          parseConfigText(raw);
+        } catch (error) {
+          localStorage.setItem(VERIFY_CONFIG_STORAGE_KEY, DEFAULT_VERIFY_CONFIG_TEMPLATE);
+        }
+      }
+
+      function openConfigModal() {
+        config_textarea.value = localStorage.getItem(VERIFY_CONFIG_STORAGE_KEY) || DEFAULT_VERIFY_CONFIG_TEMPLATE;
+        config_modal_overlay.style.display = 'flex';
+        document.body.style.overflow = 'hidden';
+        config_textarea.focus();
+      }
+
+      function hasUnsavedChanges() {
+        const stored = localStorage.getItem(VERIFY_CONFIG_STORAGE_KEY) || DEFAULT_VERIFY_CONFIG_TEMPLATE;
+        return config_textarea.value.trim() !== stored.trim();
+      }
+
+      function closeConfigModal(forceClose = false) {
+        if (!forceClose && hasUnsavedChanges()) {
+          const confirmed = window.confirm('Você tem alterações não salvas. Deseja descartar?');
+          if (!confirmed) return;
+        }
+        config_modal_overlay.style.display = 'none';
+        document.body.style.overflow = modal_overlay.style.display === 'flex' ? 'hidden' : 'auto';
+      }
+
+      function resetConfigDraft() {
+        config_textarea.value = DEFAULT_VERIFY_CONFIG_TEMPLATE;
+      }
+
+      function saveConfig() {
+        try {
+          const parsed = parseConfigText(config_textarea.value);
+          localStorage.setItem(VERIFY_CONFIG_STORAGE_KEY, JSON.stringify(parsed, null, 2));
+          closeConfigModal(true);
+          return true;
+        } catch (error) {
+          alert(`JSON inválido: ${error.message}`);
+          return false;
+        }
+      }
+
+      ensureValidStoredConfig();
+
       function setButtonLoading(isLoading) {
         if (isLoading) {
           load_button.textContent = BUTTON_TEXT.loading;
@@ -311,6 +445,11 @@ <h2>📡 Monitor de Eventos do SDK</h2>
       }
 
       document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && config_modal_overlay.style.display === 'flex') {
+          closeConfigModal();
+          return;
+        }
+
         if (e.key === 'Escape' && modal_overlay.style.display === 'flex') {
           closeModal();
         }
@@ -322,18 +461,31 @@ <h2>📡 Monitor de Eventos do SDK</h2>
 
         if (!transactionKey || transactionKey.trim() === '') {
           alert('Por favor, insira a chave da transação');
-          logEvent('Erro de Validação', { message: 'Chave da transação é obrigatória' }, 'error');
           return;
         }
 
         try {
           setButtonLoading(true);
 
+          let verifyOptions = null;
+          const rawStoredConfig = localStorage.getItem(VERIFY_CONFIG_STORAGE_KEY);
+          if (rawStoredConfig) {
+            try {
+              const storedConfig = getStoredVerifyConfig();
+              verifyOptions = buildVerifyOptions(storedConfig);
+            } catch (configError) {
+              setButtonLoading(false);
+              alert(`JSON inválido na configuração: ${configError.message}`);
+              openConfigModal();
+              return;
+            }
+          }
+
           if (transaction) {
             transaction.unmount();
           }
 
-          transaction = new Verify(transactionKey);
+          transaction = verifyOptions ? new Verify(transactionKey, verifyOptions) : new Verify(transactionKey);
           transaction.endpoint = widgetUrl;
 
           openModal();
@@ -385,6 +537,12 @@ <h2>📡 Monitor de Eventos do SDK</h2>
       function removeWidget() {
         closeModal();
       }
+
+      config_modal_overlay.addEventListener('click', function(event) {
+        if (event.target === config_modal_overlay) {
+          closeConfigModal();
+        }
+      });
     </script>
   </body>
 </html>
diff --git a/v3/verify/style.css b/v3/verify/style.css
index 8701e33..9333b14 100644
--- a/v3/verify/style.css
+++ b/v3/verify/style.css
@@ -221,12 +221,13 @@ button.primary:hover {
 }
 
 button.secondary {
-  background: #e2e8f0;
-  color: #4a5568;
+  background: transparent;
+  color: #f25924;
+  border: 2px solid #f25924;
 }
 
 button.secondary:hover {
-  background: #cbd5e0;
+  background: rgba(242, 89, 36, 0.08);
 }
 
 button.small {
@@ -590,6 +591,77 @@ iframe {
   height: 100%;
 }
 
+.config-modal-overlay {
+  background: rgba(25, 24, 38, 0.8);
+  padding: 24px;
+}
+
+.config-modal {
+  width: min(100%, 720px);
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
+}
+
+.config-modal h3 {
+  margin-bottom: 8px;
+}
+
+.config-modal-help {
+  margin: 0 0 14px 0;
+  color: #4a5568;
+  font-size: 14px;
+}
+
+#configTextarea {
+  width: 100%;
+  min-height: 420px;
+  resize: vertical;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 13px;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', monospace;
+  color: #2d3748;
+}
+
+#configTextarea:focus {
+  outline: none;
+  border-color: #f25924;
+  box-shadow: 0 0 0 3px rgba(242, 89, 36, 0.1);
+}
+
+.config-modal-actions {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.config-modal-actions .button {
+  width: auto;
+  min-width: 100px;
+}
+
+@media (max-width: 768px) {
+  .config-modal-overlay {
+    padding: 12px;
+  }
+
+  .config-modal {
+    padding: 16px;
+    width: 100%;
+  }
+
+  #configTextarea {
+    min-height: 320px;
+  }
+}
+
 #toastContainer {
   position: fixed;
   top: 16px;

From 4cb3d307755122bfb675f9fb90da5ad5871ad53a Mon Sep 17 00:00:00 2001
From: franciscoemanuel-clk <francisco.pereira@clicksign.com>
Date: Tue, 26 May 2026 19:21:56 -0300
Subject: [PATCH 6/6] refactor: remove data-api

---
 v3/verify/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/v3/verify/index.html b/v3/verify/index.html
index 0e4e0e4..c1dc082 100644
--- a/v3/verify/index.html
+++ b/v3/verify/index.html
@@ -45,12 +45,12 @@ <h3>Como usar</h3>
           <div class="form-group">
             <label for="endpoint_select">Ambiente</label>
             <select id="endpoint_select">
-              <option value="https://1.clicksign.dev" data-api="https://api-verify-6.clicksign.dev">Staging 1</option>
-              <option value="https://3.clicksign.dev" data-api="https://api-verify-6.clicksign.dev">Staging 3</option>
-              <option value="https://20.clicksign.dev" data-api="https://api-verify-6.clicksign.dev">Staging 20</option>
-              <option value="http://localhost:3200" data-api="http://127.0.0.1:8081">Local</option>
-              <option value="https://sandbox.clicksign.com" data-api="https://api-verify-sandbox.clicksign.com" selected>Sandbox</option>
-              <option value="https://app.clicksign.com" data-api="https://api-verify.clicksign.com">Production</option>
+              <option value="https://1.clicksign.dev">Staging 1</option>
+              <option value="https://3.clicksign.dev">Staging 3</option>
+              <option value="https://20.clicksign.dev">Staging 20</option>
+              <option value="http://localhost:3200">Local</option>
+              <option value="https://sandbox.clicksign.com" selected>Sandbox</option>
+              <option value="https://app.clicksign.com">Production</option>
             </select>
             <small>Selecione o ambiente de destino para o widget</small>
           </div>