Add an cvv field to test upsert operation

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;

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");
+}

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>

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'
+ }
+ });
 });

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>