From de7b21cbab0f7861ace5a9df9ef568fc36c7caf9 Mon Sep 17 00:00:00 2001
From: Kristin Fritsch <kristinfritsch@circle.com>
Date: Wed, 8 Apr 2020 13:17:38 +0200
Subject: [PATCH] Fix request when using avs as verification method (#28)

* Fix request when using avs as verification method

* Add note about docs
---
 pages/debug/cards/create.vue | 55 ++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/pages/debug/cards/create.vue b/pages/debug/cards/create.vue
index 8ac9dbf1..f270f61e 100644
--- a/pages/debug/cards/create.vue
+++ b/pages/debug/cards/create.vue
@@ -2,6 +2,17 @@
   <v-layout>
     <v-row>
       <v-col cols="12" md="4">
+        <small v-if="isSandbox">
+          Please see the
+          <a
+            href="https://developers.circle.com/docs/test-card-numbers"
+            ref="noopener"
+            target="_blank"
+          >
+            api docs
+          </a>
+          on how to trigger error responses.
+        </small>
         <v-menu>
           <template v-slot:activator="{ on }">
             <div class="d-flex flex-row-reverse">
@@ -36,7 +47,11 @@
             label="Verification Method"
           />
 
-          <v-text-field v-model="formData.cvv" label="CVV" />
+          <v-text-field
+            v-if="showCVVField"
+            v-model="formData.cvv"
+            label="CVV"
+          />
 
           <v-text-field v-model="formData.expiry.month" label="Expiry Month" />
 
@@ -87,7 +102,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'
@@ -117,18 +132,7 @@ import ExpiryInput from '@/components/ExpiryInput.vue'
   }
 })
 export default class CreateCardClass extends Vue {
-  @Watch('formData.verificationMethod', { immediate: true })
-  onChildChanged(val: string) {
-    if (val === 'none') {
-      this.cvvRequired = false
-    }
-    if (val === 'cvv') {
-      this.cvvRequired = true
-    }
-  }
-
   // data
-  cvvRequired = true
   formData = {
     cardNumber: '',
     cvv: '',
@@ -170,16 +174,31 @@ export default class CreateCardClass extends Vue {
   prefillForm(index: number) {
     this.formData = exampleCards[index].formData
   }
+
+  get showCVVField() {
+    return this.formData.verificationMethod === 'cvv'
+  }
+
   async makeApiCall() {
     this.loading = true
 
     const { cardNumber, cvv, ...data } = this.formData
-    const cardDetails = {
-      number: cardNumber.trim().replace(/\D/g, ''),
-      cvv
-    }
     const { expiry, verificationMethod, ...billingDetails } = data
 
+    let cardDetails: {
+      number: string
+      cvv?: string
+    } = {
+      number: cardNumber.trim().replace(/\D/g, '')
+    }
+
+    if (verificationMethod === 'cvv') {
+      cardDetails = {
+        ...cardDetails,
+        cvv
+      }
+    }
+
     const payload: CreateCardPayload = {
       idempotencyKey: uuidv4(),
       expMonth: parseInt(expiry.month),
@@ -194,7 +213,7 @@ export default class CreateCardClass extends Vue {
     }
 
     try {
-      if (this.cvvRequired) {
+      if (verificationMethod === 'cvv' || verificationMethod === 'avs') {
         const publicKey = await this.$cardsApi.getPCIPublicKey()
         const encryptedData = await openPGP.encrypt(cardDetails, publicKey)
         const { encryptedMessage, keyId } = encryptedData