diff --git a/src/classes/inlineCheckout.js b/src/classes/inlineCheckout.js
index 433e428..b6d5c04 100644
--- a/src/classes/inlineCheckout.js
+++ b/src/classes/inlineCheckout.js
@@ -12,6 +12,7 @@ import {
   getBrowserInfo,
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
+import { initUpsertSkyflow } from '../helpers/skyflowUpsert'
 import { ThreeDSHandler } from './3dsHandler.js';
 
 
@@ -208,6 +209,15 @@ export class InlineCheckout {
       this.abortController.signal,
       this.customStyles,
     );
+
+    this.cvvCollectContainer = await initUpsertSkyflow(
+      vault_id,
+      vault_url,
+      this.baseUrl,
+      this.apiKeyTonder,
+      this.abortController.signal,
+      this.customStyles,
+    );
   }
 
   removeCheckout() {
@@ -220,6 +230,25 @@ export class InlineCheckout {
     console.log("InlineCheckout removed from DOM and cleaned up.");
   }
 
+  async collectCvv() {
+    try {
+      const collectResponseSkyflowTonder = await this.cvvCollectContainer.collect({
+        tokens: true,
+        upsert: [
+          {
+            table: 'cards', 
+            column: 'card_number', 
+          }
+        ]
+      });
+
+      return collectResponseSkyflowTonder;
+    } catch (error) {
+      console.error("Error collecting cvv:", error);
+      throw error;
+    }
+  }
+
   async #checkout() {
     try {
       document.querySelector("#tonderPayButton").disabled = true;
diff --git a/src/helpers/skyflowUpsert.js b/src/helpers/skyflowUpsert.js
new file mode 100644
index 0000000..8b22ff9
--- /dev/null
+++ b/src/helpers/skyflowUpsert.js
@@ -0,0 +1,65 @@
+import { defaultStyles } from "./styles";
+
+export async function initUpsertSkyflow(
+  vaultId,
+  vaultUrl,
+  baseUrl,
+  apiKey,
+  signal,
+  customStyles = {}
+) {
+  const skyflow = await Skyflow.init({
+    vaultID: vaultId,
+    vaultURL: vaultUrl,
+    getBearerToken: async () => {
+      // Pass the signal to the fetch call
+      const response = await fetch(`${baseUrl}/api/v1/vault-token/`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Token ${apiKey}`,
+        },
+        signal: signal,
+      });
+
+      if (response.ok) {
+        const responseBody = await response.json();
+        return responseBody.token;
+      } else {
+        throw new Error('Failed to retrieve bearer token');
+      }
+    },
+    options: {
+      logLevel: Skyflow.LogLevel.ERROR,
+      env: Skyflow.Env.DEV,
+    },
+  });
+
+  const cvvCollectContainer = await skyflow.container(
+    Skyflow.ContainerType.COLLECT
+  );
+
+  // Custom styles for collect elements.
+  var collectStylesOptions = Object.keys(customStyles).length === 0 ? defaultStyles : customStyles
+
+  const cvvElementUpsert = await cvvCollectContainer.create({
+    table: "cards",
+    column: "cvv",
+    ...collectStylesOptions,
+    label: 'Upsert CVV',
+    placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
+    type: Skyflow.ElementType.CVV,
+    skyflowID:  'd8ad3825-848b-4150-b077-c849b14031c8',
+  });
+
+  await mountElements(
+    cvvElementUpsert,
+  )
+
+  return cvvCollectContainer
+}
+
+async function mountElements(
+  cvvElementUpsert,
+) {
+  cvvElementUpsert.mount("#collectCvvUpsert");
+}
diff --git a/src/helpers/template.js b/src/helpers/template.js
index 51a0cf1..5771b2a 100644
--- a/src/helpers/template.js
+++ b/src/helpers/template.js
@@ -1,5 +1,6 @@
 export const cardTemplate = `
 <div class="container-tonder">
+  <div id="collectCvvUpsert" class="empty-div"></div>
   <div id="collectCardholderName" class="empty-div"></div>
   <div id="collectCardNumber" class="empty-div"></div>
   <div class="collect-row">
@@ -9,6 +10,7 @@ export const cardTemplate = `
   </div>
   <div id="msgError"></div>
   <button id="tonderPayButton" class="pay-button">Pagar</button>
+  <button id="tonderCollectCvvButton" class="pay-button">Pagar</button>
 </div>
 
 <style>
diff --git a/src/index-dev.js b/src/index-dev.js
index dfc8581..1a1d7f0 100644
--- a/src/index-dev.js
+++ b/src/index-dev.js
@@ -125,4 +125,16 @@ document.addEventListener('DOMContentLoaded', function() {
       payButton.textContent = 'Pagar';
     }
   });
+
+  const collectCvvButton = document.getElementById('collect-cvv-button');
+  collectCvvButton.addEventListener('click', async function() {
+    try {
+      collectCvvButton.textContent = 'Actualizando cvv...'
+      const response = await inlineCheckout.collectCvv()
+      console.log('collectCvv response', response)
+    } catch (error) {
+    } finally {
+      collectCvvButton.textContent = 'Collect cvv'
+    }
+  });
 });
diff --git a/src/index.html b/src/index.html
index 7534a3b..136c6ed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,7 @@
         display: flex;
         justify-content: center;
       }
-      #pay-button {
+      #pay-button, #collect-cvv-button {
         padding: 10px 20px;
         margin-top: 30px;
         background-color: #4a90e2;
@@ -49,6 +49,7 @@
       </form>
       <div class="button-container">
         <button id="pay-button">Pagar</button>
+        <button id="collect-cvv-button">Collect cvv</button>
       </div>
     </div>
   </body>