From d0d0cb5bcf9346ebde967548ca33018bd73a8298 Mon Sep 17 00:00:00 2001
From: Tarun Kumar <tkumar@circle.com>
Date: Wed, 29 Apr 2020 00:16:29 -0400
Subject: [PATCH 1/2] Removing verification field in create card and make
 payment

---
 components/CreateCardForm.vue               |  1 -
 lib/cardTestData.ts                         | 21 ++++------
 lib/cardsApi.ts                             |  1 -
 lib/marketplaceApi.ts                       | 11 +++--
 lib/paymentsApi.ts                          | 11 +++--
 pages/debug/cards/create.vue                | 45 +++++----------------
 pages/debug/marketplace/payments/create.vue | 38 ++++-------------
 pages/debug/payments/create.vue             | 38 ++++-------------
 pages/flow/charge/existing-card/index.vue   |  3 +-
 pages/flow/charge/index.vue                 |  2 -
 10 files changed, 50 insertions(+), 121 deletions(-)

diff --git a/components/CreateCardForm.vue b/components/CreateCardForm.vue
index 53dd7944..89b9fcc1 100644
--- a/components/CreateCardForm.vue
+++ b/components/CreateCardForm.vue
@@ -209,7 +209,6 @@ export default class CreateCardFormClass extends Vue {
       idempotencyKey: uuidv4(),
       expMonth: parseInt(expiry.month),
       expYear: 2000 + parseInt(expiry.year),
-      verification: 'cvv',
       keyId: '',
       encryptedData: '',
       billingDetails,
diff --git a/lib/cardTestData.ts b/lib/cardTestData.ts
index 2ae620c4..57822c8b 100644
--- a/lib/cardTestData.ts
+++ b/lib/cardTestData.ts
@@ -16,8 +16,7 @@ export const exampleCards = [
       city: 'Test City',
       postalCode: '11111',
       phoneNumber: '+12025550180',
-      email: 'customer-0001@circle.com',
-      verification: 'cvv'
+      email: 'customer-0001@circle.com'
     }
   },
   {
@@ -37,8 +36,7 @@ export const exampleCards = [
       city: 'Test City',
       postalCode: '11111',
       phoneNumber: '+12025550180',
-      email: 'customer-0002@circle.com',
-      verification: 'cvv'
+      email: 'customer-0002@circle.com'
     }
   },
   {
@@ -58,8 +56,7 @@ export const exampleCards = [
       city: 'Test City',
       postalCode: '11111',
       phoneNumber: '+12025550180',
-      email: 'customer-0003@circle.com',
-      verification: 'cvv'
+      email: 'customer-0003@circle.com'
     }
   },
   {
@@ -79,8 +76,7 @@ export const exampleCards = [
       city: 'Test City',
       postalCode: '11111',
       phoneNumber: '+12025550180',
-      email: 'customer-0004@circle.com',
-      verification: 'cvv'
+      email: 'customer-0004@circle.com'
     }
   },
   {
@@ -100,8 +96,7 @@ export const exampleCards = [
       city: 'Test City',
       postalCode: '11111',
       phoneNumber: '+12025550180',
-      email: 'customer-0005@circle.com',
-      verification: 'cvv'
+      email: 'customer-0005@circle.com'
     }
   },
   {
@@ -121,8 +116,7 @@ export const exampleCards = [
       city: 'Test City',
       postalCode: '11111',
       phoneNumber: '+12025550180',
-      email: 'customer-0006@circle.com',
-      verification: 'cvv'
+      email: 'customer-0006@circle.com'
     }
   },
   {
@@ -142,8 +136,7 @@ export const exampleCards = [
       city: 'Test City',
       postalCode: '11111',
       phoneNumber: '+12025550180',
-      email: 'customer-0007@circle.com',
-      verification: 'cvv'
+      email: 'customer-0007@circle.com'
     }
   }
 ]
diff --git a/lib/cardsApi.ts b/lib/cardsApi.ts
index 52f592a8..98cfde9c 100644
--- a/lib/cardsApi.ts
+++ b/lib/cardsApi.ts
@@ -42,7 +42,6 @@ export interface CreateCardPayload {
   }
   expMonth: number
   expYear: number
-  verification: string
   metadata: MetaData
 }
 
diff --git a/lib/marketplaceApi.ts b/lib/marketplaceApi.ts
index 545c550e..ea4a3205 100644
--- a/lib/marketplaceApi.ts
+++ b/lib/marketplaceApi.ts
@@ -23,13 +23,12 @@ export interface CreateMarketplacePaymentPayload {
     amount: string
     currency: string
   }
-  verification: string
   source: {
     id: string
     type: string
   }
-  keyId: string
-  encryptedData: string
+  keyId?: string
+  encryptedData?: string
   metadata: MetaData
   marketplaceInfo: MarketplaceInfo
 }
@@ -92,6 +91,12 @@ function createPayment(payload: CreateMarketplacePaymentPayload) {
   if (payload.metadata) {
     payload.metadata.phoneNumber = nullIfEmpty(payload.metadata.phoneNumber)
   }
+  if (payload.keyId) {
+    payload.keyId = nullIfEmpty(payload.keyId)
+  }
+  if (payload.encryptedData) {
+    payload.encryptedData = nullIfEmpty(payload.encryptedData)
+  }
   return instance.post(url, payload)
 }
 
diff --git a/lib/paymentsApi.ts b/lib/paymentsApi.ts
index 8866cceb..07455585 100644
--- a/lib/paymentsApi.ts
+++ b/lib/paymentsApi.ts
@@ -16,13 +16,12 @@ export interface CreatePaymentPayload {
     amount: string
     currency: string
   }
-  verification: string
   source: {
     id: string
     type: string
   }
-  keyId: string
-  encryptedData: string
+  keyId?: string
+  encryptedData?: string
   metadata: MetaData
 }
 
@@ -101,6 +100,12 @@ function createPayment(payload: CreatePaymentPayload) {
   if (payload.metadata) {
     payload.metadata.phoneNumber = nullIfEmpty(payload.metadata.phoneNumber)
   }
+  if (payload.keyId) {
+    payload.keyId = nullIfEmpty(payload.keyId)
+  }
+  if (payload.encryptedData) {
+    payload.encryptedData = nullIfEmpty(payload.encryptedData)
+  }
   return instance.post(url, payload)
 }
 
diff --git a/pages/debug/cards/create.vue b/pages/debug/cards/create.vue
index d228d020..1b956e80 100644
--- a/pages/debug/cards/create.vue
+++ b/pages/debug/cards/create.vue
@@ -41,17 +41,7 @@
         <v-form>
           <v-text-field v-model="formData.cardNumber" label="Card Number" />
 
-          <v-select
-            v-model="formData.verification"
-            :items="verificationMethods"
-            label="Verification Method"
-          />
-
-          <v-text-field
-            v-if="showCVVField"
-            v-model="formData.cvv"
-            label="CVV"
-          />
+          <v-text-field v-model="formData.cvv" label="CVV" />
 
           <v-text-field v-model="formData.expiry.month" label="Expiry Month" />
 
@@ -147,11 +137,9 @@ export default class CreateCardClass extends Vue {
     line2: '',
     city: '',
     postalCode: '',
-    verification: 'cvv',
     phoneNumber: '',
     email: ''
   }
-  verificationMethods = ['none', 'cvv', 'avs']
   rules = {
     isNumber: (v: string) =>
       v === '' || !isNaN(parseInt(v)) || 'Please enter valid number',
@@ -176,35 +164,24 @@ export default class CreateCardClass extends Vue {
     this.formData = exampleCards[index].formData
   }
 
-  get showCVVField() {
-    return this.formData.verification === 'cvv'
-  }
-
   async makeApiCall() {
     this.loading = true
 
     const { email, phoneNumber, cardNumber, cvv, ...data } = this.formData
-    const { expiry, verification, ...billingDetails } = data
+    const { expiry, ...billingDetails } = data
 
-    let cardDetails: {
+    const cardDetails: {
       number: string
       cvv?: string
     } = {
-      number: cardNumber.trim().replace(/\D/g, '')
-    }
-
-    if (verification === 'cvv') {
-      cardDetails = {
-        ...cardDetails,
-        cvv
-      }
+      number: cardNumber.trim().replace(/\D/g, ''),
+      cvv
     }
 
     const payload: CreateCardPayload = {
       idempotencyKey: uuidv4(),
       expMonth: parseInt(expiry.month),
       expYear: 2000 + parseInt(expiry.year),
-      verification,
       keyId: '',
       encryptedData: '',
       billingDetails,
@@ -217,14 +194,12 @@ export default class CreateCardClass extends Vue {
     }
 
     try {
-      if (verification === 'cvv' || verification === 'avs') {
-        const publicKey = await this.$cardsApi.getPCIPublicKey()
-        const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
-        const { encryptedMessage, keyId } = encryptedData
+      const publicKey = await this.$cardsApi.getPCIPublicKey()
+      const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
+      const { encryptedMessage, keyId } = encryptedData
 
-        payload.keyId = keyId
-        payload.encryptedData = encryptedMessage
-      }
+      payload.keyId = keyId
+      payload.encryptedData = encryptedMessage
 
       await this.$cardsApi.createCard(payload)
     } catch (error) {
diff --git a/pages/debug/marketplace/payments/create.vue b/pages/debug/marketplace/payments/create.vue
index 70131eec..c8e5d6fd 100644
--- a/pages/debug/marketplace/payments/create.vue
+++ b/pages/debug/marketplace/payments/create.vue
@@ -15,13 +15,7 @@
 
           <v-text-field v-model="formData.amount" label="Amount" />
 
-          <v-select
-            v-model="formData.verification"
-            :items="verificationMethods"
-            label="Verification Method"
-          />
-
-          <v-text-field v-if="cvvRequired" v-model="formData.cvv" label="CVV" />
+          <v-text-field v-model="formData.cvv" label="CVV" />
           <v-btn
             depressed
             class="mb-7"
@@ -50,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from 'nuxt-property-decorator'
+import { Component, Vue } from 'nuxt-property-decorator'
 import { mapGetters } from 'vuex'
 import uuidv4 from 'uuid/v4'
 import openPGP from '@/lib/openpgp'
@@ -84,16 +78,13 @@ export default class CreatePaymentClass extends Vue {
     merchantId: '',
     merchantWalletId: ''
   }
-  cvvRequired = true
   formData = {
     sourceId: '',
-    verification: 'cvv',
     amount: '0.00',
     cvv: '',
     phoneNumber: '',
     email: ''
   }
-  verificationMethods = ['none', 'cvv']
   required = [(v: string) => !!v || 'Field is required']
   error = {}
   loading = false
@@ -108,16 +99,6 @@ export default class CreatePaymentClass extends Vue {
     }
   }
 
-  @Watch('formData.verification', { immediate: true })
-  onChildChanged(val: string) {
-    if (val === 'none') {
-      this.cvvRequired = false
-    }
-    if (val === 'cvv') {
-      this.cvvRequired = true
-    }
-  }
-
   onErrorSheetClosed() {
     this.error = {}
     this.showError = false
@@ -143,7 +124,6 @@ export default class CreatePaymentClass extends Vue {
     const payload: CreateMarketplacePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
-      verification: this.formData.verification,
       source: sourceDetails,
       keyId: '',
       encryptedData: '',
@@ -157,16 +137,14 @@ export default class CreatePaymentClass extends Vue {
     }
 
     try {
-      if (this.cvvRequired) {
-        const { cvv } = this.formData
-        const cardDetails = { cvv }
+      const { cvv } = this.formData
+      const cardDetails = { cvv }
 
-        const publicKey = await this.$paymentsApi.getPCIPublicKey()
-        const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
+      const publicKey = await this.$paymentsApi.getPCIPublicKey()
+      const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
 
-        payload.encryptedData = encryptedData.encryptedMessage
-        payload.keyId = encryptedData.keyId
-      }
+      payload.encryptedData = encryptedData.encryptedMessage
+      payload.keyId = encryptedData.keyId
 
       await this.$marketplaceApi.createPayment(payload)
     } catch (error) {
diff --git a/pages/debug/payments/create.vue b/pages/debug/payments/create.vue
index d531235d..e86c439a 100644
--- a/pages/debug/payments/create.vue
+++ b/pages/debug/payments/create.vue
@@ -10,13 +10,7 @@
 
           <v-text-field v-model="formData.amount" label="Amount" />
 
-          <v-select
-            v-model="formData.verification"
-            :items="verificationMethods"
-            label="Verification Method"
-          />
-
-          <v-text-field v-if="cvvRequired" v-model="formData.cvv" label="CVV" />
+          <v-text-field v-model="formData.cvv" label="CVV" />
 
           <v-text-field v-model="formData.phoneNumber" label="Phone" />
 
@@ -50,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from 'nuxt-property-decorator'
+import { Component, Vue } from 'nuxt-property-decorator'
 import { mapGetters } from 'vuex'
 import uuidv4 from 'uuid/v4'
 import openPGP from '@/lib/openpgp'
@@ -74,16 +68,13 @@ import ErrorSheet from '@/components/ErrorSheet.vue'
 })
 export default class CreatePaymentClass extends Vue {
   isMarketplace!: boolean
-  cvvRequired = true
   formData = {
     sourceId: '',
-    verification: 'cvv',
     amount: '0.00',
     cvv: '',
     phoneNumber: '',
     email: ''
   }
-  verificationMethods = ['none', 'cvv']
   required = [(v: string) => !!v || 'Field is required']
   error = {}
   loading = false
@@ -98,16 +89,6 @@ export default class CreatePaymentClass extends Vue {
     }
   }
 
-  @Watch('formData.verification', { immediate: true })
-  onChildChanged(val: string) {
-    if (val === 'none') {
-      this.cvvRequired = false
-    }
-    if (val === 'cvv') {
-      this.cvvRequired = true
-    }
-  }
-
   onErrorSheetClosed() {
     this.error = {}
     this.showError = false
@@ -128,7 +109,6 @@ export default class CreatePaymentClass extends Vue {
     const payload: CreatePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
-      verification: this.formData.verification,
       source: sourceDetails,
       keyId: '',
       encryptedData: '',
@@ -141,16 +121,14 @@ export default class CreatePaymentClass extends Vue {
     }
 
     try {
-      if (this.cvvRequired) {
-        const { cvv } = this.formData
-        const cardDetails = { cvv }
+      const { cvv } = this.formData
+      const cardDetails = { cvv }
 
-        const publicKey = await this.$paymentsApi.getPCIPublicKey()
-        const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
+      const publicKey = await this.$paymentsApi.getPCIPublicKey()
+      const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
 
-        payload.encryptedData = encryptedData.encryptedMessage
-        payload.keyId = encryptedData.keyId
-      }
+      payload.encryptedData = encryptedData.encryptedMessage
+      payload.keyId = encryptedData.keyId
 
       await this.$paymentsApi.createPayment(payload)
     } catch (error) {
diff --git a/pages/flow/charge/existing-card/index.vue b/pages/flow/charge/existing-card/index.vue
index 985b51a0..0dbbaf9b 100644
--- a/pages/flow/charge/existing-card/index.vue
+++ b/pages/flow/charge/existing-card/index.vue
@@ -45,7 +45,7 @@
                 required
               />
 
-              <CVVInput v-model="formData.cvv" :rules="[rules.required]" />
+              <CVVInput v-model="formData.cvv" />
 
               <v-text-field
                 v-model="formData.phoneNumber"
@@ -325,7 +325,6 @@ export default class CardFlowClass extends Vue {
     const payload: CreatePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
-      verification: 'cvv',
       source: sourceDetails,
       keyId: '',
       encryptedData: '',
diff --git a/pages/flow/charge/index.vue b/pages/flow/charge/index.vue
index c9907750..ca1720df 100644
--- a/pages/flow/charge/index.vue
+++ b/pages/flow/charge/index.vue
@@ -371,7 +371,6 @@ export default class ChargeFlowClass extends Vue {
       idempotencyKey: uuidv4(),
       expMonth: parseInt(this.formData.cardData.expiry.month),
       expYear: 2000 + parseInt(this.formData.cardData.expiry.year),
-      verification: 'none',
       keyId: '',
       encryptedData: '',
       billingDetails: {
@@ -428,7 +427,6 @@ export default class ChargeFlowClass extends Vue {
     const payload: CreatePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
-      verification: 'cvv',
       source: sourceDetails,
       keyId: '',
       encryptedData: '',

From ac8ea5e7c0cd2f53d482fb4c56cf2f881176abb8 Mon Sep 17 00:00:00 2001
From: Tarun Kumar <tkumar@circle.com>
Date: Thu, 7 May 2020 11:46:58 -0400
Subject: [PATCH 2/2] Updating the CVV methods with latest changes

---
 lib/marketplaceApi.ts                       | 11 ++----
 lib/paymentsApi.ts                          | 11 ++----
 pages/debug/marketplace/payments/create.vue | 38 ++++++++++++++++-----
 pages/debug/payments/create.vue             | 38 ++++++++++++++++-----
 pages/flow/charge/existing-card/index.vue   |  3 +-
 pages/flow/charge/index.vue                 |  1 +
 6 files changed, 69 insertions(+), 33 deletions(-)

diff --git a/lib/marketplaceApi.ts b/lib/marketplaceApi.ts
index ea4a3205..545c550e 100644
--- a/lib/marketplaceApi.ts
+++ b/lib/marketplaceApi.ts
@@ -23,12 +23,13 @@ export interface CreateMarketplacePaymentPayload {
     amount: string
     currency: string
   }
+  verification: string
   source: {
     id: string
     type: string
   }
-  keyId?: string
-  encryptedData?: string
+  keyId: string
+  encryptedData: string
   metadata: MetaData
   marketplaceInfo: MarketplaceInfo
 }
@@ -91,12 +92,6 @@ function createPayment(payload: CreateMarketplacePaymentPayload) {
   if (payload.metadata) {
     payload.metadata.phoneNumber = nullIfEmpty(payload.metadata.phoneNumber)
   }
-  if (payload.keyId) {
-    payload.keyId = nullIfEmpty(payload.keyId)
-  }
-  if (payload.encryptedData) {
-    payload.encryptedData = nullIfEmpty(payload.encryptedData)
-  }
   return instance.post(url, payload)
 }
 
diff --git a/lib/paymentsApi.ts b/lib/paymentsApi.ts
index 07455585..8866cceb 100644
--- a/lib/paymentsApi.ts
+++ b/lib/paymentsApi.ts
@@ -16,12 +16,13 @@ export interface CreatePaymentPayload {
     amount: string
     currency: string
   }
+  verification: string
   source: {
     id: string
     type: string
   }
-  keyId?: string
-  encryptedData?: string
+  keyId: string
+  encryptedData: string
   metadata: MetaData
 }
 
@@ -100,12 +101,6 @@ function createPayment(payload: CreatePaymentPayload) {
   if (payload.metadata) {
     payload.metadata.phoneNumber = nullIfEmpty(payload.metadata.phoneNumber)
   }
-  if (payload.keyId) {
-    payload.keyId = nullIfEmpty(payload.keyId)
-  }
-  if (payload.encryptedData) {
-    payload.encryptedData = nullIfEmpty(payload.encryptedData)
-  }
   return instance.post(url, payload)
 }
 
diff --git a/pages/debug/marketplace/payments/create.vue b/pages/debug/marketplace/payments/create.vue
index c8e5d6fd..70131eec 100644
--- a/pages/debug/marketplace/payments/create.vue
+++ b/pages/debug/marketplace/payments/create.vue
@@ -15,7 +15,13 @@
 
           <v-text-field v-model="formData.amount" label="Amount" />
 
-          <v-text-field v-model="formData.cvv" label="CVV" />
+          <v-select
+            v-model="formData.verification"
+            :items="verificationMethods"
+            label="Verification Method"
+          />
+
+          <v-text-field v-if="cvvRequired" v-model="formData.cvv" label="CVV" />
           <v-btn
             depressed
             class="mb-7"
@@ -44,7 +50,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+import { Component, Vue, Watch } from 'nuxt-property-decorator'
 import { mapGetters } from 'vuex'
 import uuidv4 from 'uuid/v4'
 import openPGP from '@/lib/openpgp'
@@ -78,13 +84,16 @@ export default class CreatePaymentClass extends Vue {
     merchantId: '',
     merchantWalletId: ''
   }
+  cvvRequired = true
   formData = {
     sourceId: '',
+    verification: 'cvv',
     amount: '0.00',
     cvv: '',
     phoneNumber: '',
     email: ''
   }
+  verificationMethods = ['none', 'cvv']
   required = [(v: string) => !!v || 'Field is required']
   error = {}
   loading = false
@@ -99,6 +108,16 @@ export default class CreatePaymentClass extends Vue {
     }
   }
 
+  @Watch('formData.verification', { immediate: true })
+  onChildChanged(val: string) {
+    if (val === 'none') {
+      this.cvvRequired = false
+    }
+    if (val === 'cvv') {
+      this.cvvRequired = true
+    }
+  }
+
   onErrorSheetClosed() {
     this.error = {}
     this.showError = false
@@ -124,6 +143,7 @@ export default class CreatePaymentClass extends Vue {
     const payload: CreateMarketplacePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
+      verification: this.formData.verification,
       source: sourceDetails,
       keyId: '',
       encryptedData: '',
@@ -137,14 +157,16 @@ export default class CreatePaymentClass extends Vue {
     }
 
     try {
-      const { cvv } = this.formData
-      const cardDetails = { cvv }
+      if (this.cvvRequired) {
+        const { cvv } = this.formData
+        const cardDetails = { cvv }
 
-      const publicKey = await this.$paymentsApi.getPCIPublicKey()
-      const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
+        const publicKey = await this.$paymentsApi.getPCIPublicKey()
+        const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
 
-      payload.encryptedData = encryptedData.encryptedMessage
-      payload.keyId = encryptedData.keyId
+        payload.encryptedData = encryptedData.encryptedMessage
+        payload.keyId = encryptedData.keyId
+      }
 
       await this.$marketplaceApi.createPayment(payload)
     } catch (error) {
diff --git a/pages/debug/payments/create.vue b/pages/debug/payments/create.vue
index e86c439a..d531235d 100644
--- a/pages/debug/payments/create.vue
+++ b/pages/debug/payments/create.vue
@@ -10,7 +10,13 @@
 
           <v-text-field v-model="formData.amount" label="Amount" />
 
-          <v-text-field v-model="formData.cvv" label="CVV" />
+          <v-select
+            v-model="formData.verification"
+            :items="verificationMethods"
+            label="Verification Method"
+          />
+
+          <v-text-field v-if="cvvRequired" v-model="formData.cvv" label="CVV" />
 
           <v-text-field v-model="formData.phoneNumber" label="Phone" />
 
@@ -44,7 +50,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+import { Component, Vue, Watch } from 'nuxt-property-decorator'
 import { mapGetters } from 'vuex'
 import uuidv4 from 'uuid/v4'
 import openPGP from '@/lib/openpgp'
@@ -68,13 +74,16 @@ import ErrorSheet from '@/components/ErrorSheet.vue'
 })
 export default class CreatePaymentClass extends Vue {
   isMarketplace!: boolean
+  cvvRequired = true
   formData = {
     sourceId: '',
+    verification: 'cvv',
     amount: '0.00',
     cvv: '',
     phoneNumber: '',
     email: ''
   }
+  verificationMethods = ['none', 'cvv']
   required = [(v: string) => !!v || 'Field is required']
   error = {}
   loading = false
@@ -89,6 +98,16 @@ export default class CreatePaymentClass extends Vue {
     }
   }
 
+  @Watch('formData.verification', { immediate: true })
+  onChildChanged(val: string) {
+    if (val === 'none') {
+      this.cvvRequired = false
+    }
+    if (val === 'cvv') {
+      this.cvvRequired = true
+    }
+  }
+
   onErrorSheetClosed() {
     this.error = {}
     this.showError = false
@@ -109,6 +128,7 @@ export default class CreatePaymentClass extends Vue {
     const payload: CreatePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
+      verification: this.formData.verification,
       source: sourceDetails,
       keyId: '',
       encryptedData: '',
@@ -121,14 +141,16 @@ export default class CreatePaymentClass extends Vue {
     }
 
     try {
-      const { cvv } = this.formData
-      const cardDetails = { cvv }
+      if (this.cvvRequired) {
+        const { cvv } = this.formData
+        const cardDetails = { cvv }
 
-      const publicKey = await this.$paymentsApi.getPCIPublicKey()
-      const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
+        const publicKey = await this.$paymentsApi.getPCIPublicKey()
+        const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
 
-      payload.encryptedData = encryptedData.encryptedMessage
-      payload.keyId = encryptedData.keyId
+        payload.encryptedData = encryptedData.encryptedMessage
+        payload.keyId = encryptedData.keyId
+      }
 
       await this.$paymentsApi.createPayment(payload)
     } catch (error) {
diff --git a/pages/flow/charge/existing-card/index.vue b/pages/flow/charge/existing-card/index.vue
index 0dbbaf9b..985b51a0 100644
--- a/pages/flow/charge/existing-card/index.vue
+++ b/pages/flow/charge/existing-card/index.vue
@@ -45,7 +45,7 @@
                 required
               />
 
-              <CVVInput v-model="formData.cvv" />
+              <CVVInput v-model="formData.cvv" :rules="[rules.required]" />
 
               <v-text-field
                 v-model="formData.phoneNumber"
@@ -325,6 +325,7 @@ export default class CardFlowClass extends Vue {
     const payload: CreatePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
+      verification: 'cvv',
       source: sourceDetails,
       keyId: '',
       encryptedData: '',
diff --git a/pages/flow/charge/index.vue b/pages/flow/charge/index.vue
index ca1720df..f0df76ed 100644
--- a/pages/flow/charge/index.vue
+++ b/pages/flow/charge/index.vue
@@ -427,6 +427,7 @@ export default class ChargeFlowClass extends Vue {
     const payload: CreatePaymentPayload = {
       idempotencyKey: uuidv4(),
       amount: amountDetail,
+      verification: 'cvv',
       source: sourceDetails,
       keyId: '',
       encryptedData: '',