From 04cbecaaadab37f52d09213df441eea653dc8e36 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Wed, 2 Mar 2022 13:43:12 -0500
Subject: [PATCH 1/9] work in progress

---
 lib/googlePay.ts                              | 74 +++++++++++++++++++
 package.json                                  |  2 +-
 .../debug/payments/googlepay/convertToken.vue |  6 ++
 tsconfig.json                                 |  3 +-
 4 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 lib/googlePay.ts

diff --git a/lib/googlePay.ts b/lib/googlePay.ts
new file mode 100644
index 00000000..874e0cf6
--- /dev/null
+++ b/lib/googlePay.ts
@@ -0,0 +1,74 @@
+import IsReadyToPayRequest = google.payments.api.IsReadyToPayRequest
+import PaymentDataRequest = google.payments.api.PaymentDataRequest
+import ButtonOptions = google.payments.api.ButtonOptions
+
+const isReadyToPayRequest: IsReadyToPayRequest = {
+  apiVersion: 2,
+  apiVersionMinor: 0,
+  allowedPaymentMethods: [
+    {
+      type: 'CARD',
+      parameters: {
+        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+        allowedCardNetworks: ['MASTERCARD', 'VISA'],
+      },
+    },
+  ],
+}
+
+const paymentDataRequest: PaymentDataRequest = {
+  apiVersion: 2,
+  apiVersionMinor: 0,
+  merchantInfo: {
+    merchantId: '12345678901234567890',
+    merchantName: 'Example Merchant',
+  },
+  allowedPaymentMethods: [
+    {
+      type: 'CARD',
+      parameters: {
+        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+        allowedCardNetworks: ['MASTERCARD', 'VISA'],
+      },
+      tokenizationSpecification: {
+        type: 'PAYMENT_GATEWAY',
+        parameters: {
+          gateway: 'checkoutltd',
+          gatewayMerchantId: 'YOUR_PUBLIC_KEY',
+        },
+      },
+    },
+  ],
+  transactionInfo: {
+    currencyCode: 'USD',
+    countryCode: 'US',
+    totalPriceStatus: 'FINAL',
+    totalPrice: '12.00',
+    checkoutOption: 'COMPLETE_IMMEDIATE_PURCHASE',
+  },
+}
+
+const buttonOptions: ButtonOptions = {}
+
+function onGooglePayLoaded() {
+  const paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST' })
+  paymentsClient
+    .isReadyToPay(isReadyToPayRequest)
+    .then(function (response) {
+      if (response.result) {
+        const button = paymentsClient.createButton(buttonOptions)
+        document.getElementById('google-pay-button').append(button)
+      } else {
+        console.log('no google pay button')
+      }
+    })
+    .catch(function (err) {
+      console.error(err)
+    })
+}
+
+// function googlePayAvailable() {
+//   return
+// }
+
+export { isReadyToPayRequest, onGooglePayLoaded }
diff --git a/package.json b/package.json
index d3de60e3..6860f0d7 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@nuxtjs/dotenv": "1.4.1",
     "@nuxtjs/vuetify": "1.12.2",
     "@types/card-validator": "7.0.1",
-    "@types/googlepay": "^0.6.4",
+    "@types/googlepay": "0.6.4",
     "@types/vue-the-mask": "0.11.1",
     "axios": "0.24.0",
     "card-validator": "8.1.1",
diff --git a/pages/debug/payments/googlepay/convertToken.vue b/pages/debug/payments/googlepay/convertToken.vue
index d18063da..53670d7e 100644
--- a/pages/debug/payments/googlepay/convertToken.vue
+++ b/pages/debug/payments/googlepay/convertToken.vue
@@ -13,6 +13,7 @@
           >
             Autogenerate token
           </v-btn>
+          <v-btn id="google-pay-button"></v-btn>
           <v-select
             v-model="formData.type"
             :items="paymentType"
@@ -62,6 +63,7 @@ import { mapGetters } from 'vuex'
 import RequestInfo from '@/components/RequestInfo.vue'
 import ErrorSheet from '@/components/ErrorSheet.vue'
 import { getLive } from '~/lib/apiTarget'
+import { onGooglePayLoaded } from '@/lib/googlePay'
 
 @Component({
   components: {
@@ -93,6 +95,10 @@ export default class ConvertToken extends Vue {
   showError = false
   payload = {}
 
+  mounted() {
+    onGooglePayLoaded()
+  }
+
   onErrorSheetClosed() {
     this.error = {}
     this.showError = false
diff --git a/tsconfig.json b/tsconfig.json
index 72584c0d..014c270c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,7 +29,8 @@
       "@types/node",
       "@nuxt/types",
       "@nuxtjs/vuetify",
-      "@types/applepayjs"
+      "@types/applepayjs",
+      "@types/googlepay"
     ]
   },
   "exclude": [

From 767adbba1db95b21268e4d5c159554f058ce4fd1 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Wed, 2 Mar 2022 14:39:00 -0500
Subject: [PATCH 2/9] moved typings to dev dependencies

---
 lib/googlePay.ts | 18 ++++++++++++++++--
 package.json     |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/lib/googlePay.ts b/lib/googlePay.ts
index 874e0cf6..596bea23 100644
--- a/lib/googlePay.ts
+++ b/lib/googlePay.ts
@@ -48,7 +48,18 @@ const paymentDataRequest: PaymentDataRequest = {
   },
 }
 
-const buttonOptions: ButtonOptions = {}
+const buttonOptions: ButtonOptions = {
+  onClick: onGooglePayButtonClicked,
+  allowedPaymentMethods: [
+    {
+      type: 'CARD',
+      parameters: {
+        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+        allowedCardNetworks: ['MASTERCARD', 'VISA'],
+      },
+    },
+  ],
+}
 
 function onGooglePayLoaded() {
   const paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST' })
@@ -57,7 +68,6 @@ function onGooglePayLoaded() {
     .then(function (response) {
       if (response.result) {
         const button = paymentsClient.createButton(buttonOptions)
-        document.getElementById('google-pay-button').append(button)
       } else {
         console.log('no google pay button')
       }
@@ -67,6 +77,10 @@ function onGooglePayLoaded() {
     })
 }
 
+function onGooglePayButtonClicked() {
+  console.log(paymentDataRequest)
+}
+
 // function googlePayAvailable() {
 //   return
 // }
diff --git a/package.json b/package.json
index 6860f0d7..eb4c735e 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "@nuxtjs/dotenv": "1.4.1",
     "@nuxtjs/vuetify": "1.12.2",
     "@types/card-validator": "7.0.1",
-    "@types/googlepay": "0.6.4",
     "@types/vue-the-mask": "0.11.1",
     "axios": "0.24.0",
     "card-validator": "8.1.1",
@@ -50,6 +49,7 @@
     "@nuxtjs/eslint-config-typescript": "8.0.0",
     "@nuxtjs/eslint-module": "3.0.2",
     "@types/applepayjs": "3.0.3",
+    "@types/googlepay": "0.6.4",
     "@types/lodash": "4.14.177",
     "@types/openpgp": "4.4.18",
     "@types/uuid": "8.3.3",

From a341b832186085e0f10fe83d02e21b2baf4450e0 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Wed, 2 Mar 2022 16:56:02 -0500
Subject: [PATCH 3/9] import googlepay js script

---
 lib/googlePay.ts                              | 29 ++++++++++++-------
 .../debug/payments/googlepay/convertToken.vue |  4 ++-
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/lib/googlePay.ts b/lib/googlePay.ts
index 596bea23..99f5534e 100644
--- a/lib/googlePay.ts
+++ b/lib/googlePay.ts
@@ -1,6 +1,7 @@
 import IsReadyToPayRequest = google.payments.api.IsReadyToPayRequest
 import PaymentDataRequest = google.payments.api.PaymentDataRequest
 import ButtonOptions = google.payments.api.ButtonOptions
+import IsReadyToPayResponse = google.payments.api.IsReadyToPayResponse
 
 const isReadyToPayRequest: IsReadyToPayRequest = {
   apiVersion: 2,
@@ -61,28 +62,36 @@ const buttonOptions: ButtonOptions = {
   ],
 }
 
+let paymentsClient: any = null
+
+function getGooglePaymentsClient() {
+  if (paymentsClient === null) {
+    paymentsClient = new google.payments.api.PaymentsClient({
+      environment: 'TEST',
+    })
+  }
+  return paymentsClient
+}
+
 function onGooglePayLoaded() {
-  const paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST' })
+  paymentsClient = getGooglePaymentsClient()
   paymentsClient
     .isReadyToPay(isReadyToPayRequest)
-    .then(function (response) {
+    .then(function (response: IsReadyToPayResponse) {
       if (response.result) {
         const button = paymentsClient.createButton(buttonOptions)
-      } else {
-        console.log('no google pay button')
+        document.body.append(button)
       }
     })
-    .catch(function (err) {
+    .catch(function (err: any) {
       console.error(err)
     })
 }
 
 function onGooglePayButtonClicked() {
-  console.log(paymentDataRequest)
+  paymentsClient.loadPaymentData(paymentDataRequest).catch(function (err: any) {
+    console.error(err)
+  })
 }
 
-// function googlePayAvailable() {
-//   return
-// }
-
 export { isReadyToPayRequest, onGooglePayLoaded }
diff --git a/pages/debug/payments/googlepay/convertToken.vue b/pages/debug/payments/googlepay/convertToken.vue
index 53670d7e..9f26c1f2 100644
--- a/pages/debug/payments/googlepay/convertToken.vue
+++ b/pages/debug/payments/googlepay/convertToken.vue
@@ -13,7 +13,6 @@
           >
             Autogenerate token
           </v-btn>
-          <v-btn id="google-pay-button"></v-btn>
           <v-select
             v-model="formData.type"
             :items="paymentType"
@@ -96,6 +95,9 @@ export default class ConvertToken extends Vue {
   payload = {}
 
   mounted() {
+    const googleScript = document.createElement('script')
+    googleScript.setAttribute('src', 'https://pay.google.com/gp/p/js/pay.js')
+    document.head.appendChild(googleScript)
     onGooglePayLoaded()
   }
 

From 9d813f3aab4c7070f772a9a094b871c9e4b0c2e8 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Wed, 2 Mar 2022 17:41:26 -0500
Subject: [PATCH 4/9] remove script

---
 pages/debug/payments/googlepay/convertToken.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pages/debug/payments/googlepay/convertToken.vue b/pages/debug/payments/googlepay/convertToken.vue
index 9f26c1f2..956401a7 100644
--- a/pages/debug/payments/googlepay/convertToken.vue
+++ b/pages/debug/payments/googlepay/convertToken.vue
@@ -95,9 +95,6 @@ export default class ConvertToken extends Vue {
   payload = {}
 
   mounted() {
-    const googleScript = document.createElement('script')
-    googleScript.setAttribute('src', 'https://pay.google.com/gp/p/js/pay.js')
-    document.head.appendChild(googleScript)
     onGooglePayLoaded()
   }
 

From d13a9c453a837f6658d98c4f29834beb3a2729be Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Thu, 3 Mar 2022 12:52:18 -0500
Subject: [PATCH 5/9] implementing onbuttonclick

---
 lib/googlePay.ts                              | 31 +++++++++++++++----
 nuxt.config.js                                |  7 +++++
 .../debug/payments/googlepay/convertToken.vue | 11 +++++--
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/lib/googlePay.ts b/lib/googlePay.ts
index 99f5534e..b79ddd8c 100644
--- a/lib/googlePay.ts
+++ b/lib/googlePay.ts
@@ -2,6 +2,7 @@ import IsReadyToPayRequest = google.payments.api.IsReadyToPayRequest
 import PaymentDataRequest = google.payments.api.PaymentDataRequest
 import ButtonOptions = google.payments.api.ButtonOptions
 import IsReadyToPayResponse = google.payments.api.IsReadyToPayResponse
+import PaymentData = google.payments.api.PaymentData
 
 const isReadyToPayRequest: IsReadyToPayRequest = {
   apiVersion: 2,
@@ -62,12 +63,19 @@ const buttonOptions: ButtonOptions = {
   ],
 }
 
+interface PaymentToken {
+  protocolVersion: String
+  signature: String
+  intermediateSigningKey: Object
+  signedMessage: String
+}
+
 let paymentsClient: any = null
 
 function getGooglePaymentsClient() {
   if (paymentsClient === null) {
     paymentsClient = new google.payments.api.PaymentsClient({
-      environment: 'TEST',
+      environment: 'TEST', // TODO: get real environment once implementation is finished
     })
   }
   return paymentsClient
@@ -80,7 +88,7 @@ function onGooglePayLoaded() {
     .then(function (response: IsReadyToPayResponse) {
       if (response.result) {
         const button = paymentsClient.createButton(buttonOptions)
-        document.body.append(button)
+        document.getElementById('google-pay-button')?.append(button)
       }
     })
     .catch(function (err: any) {
@@ -89,9 +97,20 @@ function onGooglePayLoaded() {
 }
 
 function onGooglePayButtonClicked() {
-  paymentsClient.loadPaymentData(paymentDataRequest).catch(function (err: any) {
-    console.error(err)
-  })
+  const paymentsClient = getGooglePaymentsClient()
+  paymentsClient
+    .loadPaymentData(paymentDataRequest)
+    .then(function (paymentData: PaymentData) {
+      console.log(paymentData)
+      const paymentTokenString =
+        paymentData.paymentMethodData.tokenizationData.token // payment token as JSON string
+      const paymentToken: PaymentToken = JSON.parse(paymentTokenString) // payment token as object with keys protocolVersion, signature, and signedMessage
+      console.log(paymentToken)
+      // TODO: update form fields with values from paymentToken - how to do this?
+    })
+    .catch(function (err: any) {
+      console.error(err)
+    })
 }
 
-export { isReadyToPayRequest, onGooglePayLoaded }
+export { onGooglePayLoaded }
diff --git a/nuxt.config.js b/nuxt.config.js
index 13b03c3d..30458655 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -24,6 +24,13 @@ export default {
       },
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    script: [
+      {
+        src: 'https://pay.google.com/gp/p/js/pay.js',
+        async: true,
+        defer: true,
+      },
+    ],
   },
   /*
    ** Customize the progress-bar color
diff --git a/pages/debug/payments/googlepay/convertToken.vue b/pages/debug/payments/googlepay/convertToken.vue
index 956401a7..f99cd33b 100644
--- a/pages/debug/payments/googlepay/convertToken.vue
+++ b/pages/debug/payments/googlepay/convertToken.vue
@@ -13,6 +13,10 @@
           >
             Autogenerate token
           </v-btn>
+          <v-container
+            id="google-pay-button"
+            v-if="showGooglePayButton()"
+          ></v-container>
           <v-select
             v-model="formData.type"
             :items="paymentType"
@@ -85,7 +89,6 @@ export default class ConvertToken extends Vue {
     signedMessage: '',
   }
 
-  // const paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST' })
   paymentType = ['Google Pay', 'Apple Pay']
   protocolVersions = ['ECv1']
   required = [(v: string) => !!v || 'Field is required']
@@ -107,6 +110,10 @@ export default class ConvertToken extends Vue {
     return !getLive()
   }
 
+  showGooglePayButton() {
+    return this.formData.type === 'Google Pay' && getLive() // TODO: AND if googlepay is supported
+  }
+
   // autogenerate token info by assigning random strings to each field
   autogenerateToken() {
     this.formData.signature = Math.random().toString(36).substring(2, 12)
@@ -135,7 +142,7 @@ export default class ConvertToken extends Vue {
         }
     }
     this.payload = payload
-    // TODO: implement API call to token converter endpoint once endpoint is finished for google pay
+    // TODO: implement API call to /tokens endpoint
   }
 }
 </script>

From ccb3262d6d3ab9c9b2a62c5a63d5d058e8de6cd3 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Thu, 3 Mar 2022 13:13:01 -0500
Subject: [PATCH 6/9] populate token form from googlepay api response

---
 lib/googlePay.ts                              | 44 ++++---------------
 .../debug/payments/googlepay/convertToken.vue | 43 ++++++++++++++++--
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/lib/googlePay.ts b/lib/googlePay.ts
index b79ddd8c..c9c3a2d5 100644
--- a/lib/googlePay.ts
+++ b/lib/googlePay.ts
@@ -2,7 +2,6 @@ import IsReadyToPayRequest = google.payments.api.IsReadyToPayRequest
 import PaymentDataRequest = google.payments.api.PaymentDataRequest
 import ButtonOptions = google.payments.api.ButtonOptions
 import IsReadyToPayResponse = google.payments.api.IsReadyToPayResponse
-import PaymentData = google.payments.api.PaymentData
 
 const isReadyToPayRequest: IsReadyToPayRequest = {
   apiVersion: 2,
@@ -50,24 +49,11 @@ const paymentDataRequest: PaymentDataRequest = {
   },
 }
 
-const buttonOptions: ButtonOptions = {
-  onClick: onGooglePayButtonClicked,
-  allowedPaymentMethods: [
-    {
-      type: 'CARD',
-      parameters: {
-        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
-        allowedCardNetworks: ['MASTERCARD', 'VISA'],
-      },
-    },
-  ],
-}
-
 interface PaymentToken {
-  protocolVersion: String
-  signature: String
+  protocolVersion: string
+  signature: string
   intermediateSigningKey: Object
-  signedMessage: String
+  signedMessage: string
 }
 
 let paymentsClient: any = null
@@ -81,7 +67,7 @@ function getGooglePaymentsClient() {
   return paymentsClient
 }
 
-function onGooglePayLoaded() {
+function onGooglePayLoaded(buttonOptions: ButtonOptions) {
   paymentsClient = getGooglePaymentsClient()
   paymentsClient
     .isReadyToPay(isReadyToPayRequest)
@@ -96,21 +82,9 @@ function onGooglePayLoaded() {
     })
 }
 
-function onGooglePayButtonClicked() {
-  const paymentsClient = getGooglePaymentsClient()
-  paymentsClient
-    .loadPaymentData(paymentDataRequest)
-    .then(function (paymentData: PaymentData) {
-      console.log(paymentData)
-      const paymentTokenString =
-        paymentData.paymentMethodData.tokenizationData.token // payment token as JSON string
-      const paymentToken: PaymentToken = JSON.parse(paymentTokenString) // payment token as object with keys protocolVersion, signature, and signedMessage
-      console.log(paymentToken)
-      // TODO: update form fields with values from paymentToken - how to do this?
-    })
-    .catch(function (err: any) {
-      console.error(err)
-    })
+export {
+  onGooglePayLoaded,
+  getGooglePaymentsClient,
+  paymentDataRequest,
+  PaymentToken,
 }
-
-export { onGooglePayLoaded }
diff --git a/pages/debug/payments/googlepay/convertToken.vue b/pages/debug/payments/googlepay/convertToken.vue
index f99cd33b..1997fce3 100644
--- a/pages/debug/payments/googlepay/convertToken.vue
+++ b/pages/debug/payments/googlepay/convertToken.vue
@@ -66,7 +66,14 @@ import { mapGetters } from 'vuex'
 import RequestInfo from '@/components/RequestInfo.vue'
 import ErrorSheet from '@/components/ErrorSheet.vue'
 import { getLive } from '~/lib/apiTarget'
-import { onGooglePayLoaded } from '@/lib/googlePay'
+import {
+  onGooglePayLoaded,
+  getGooglePaymentsClient,
+  paymentDataRequest,
+  PaymentToken,
+} from '@/lib/googlePay'
+import ButtonOptions = google.payments.api.ButtonOptions
+import PaymentData = google.payments.api.PaymentData
 
 @Component({
   components: {
@@ -97,8 +104,21 @@ export default class ConvertToken extends Vue {
   showError = false
   payload = {}
 
+  buttonOptions: ButtonOptions = {
+    onClick: this.onGooglePayButtonClicked,
+    allowedPaymentMethods: [
+      {
+        type: 'CARD',
+        parameters: {
+          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+          allowedCardNetworks: ['MASTERCARD', 'VISA'],
+        },
+      },
+    ],
+  }
+
   mounted() {
-    onGooglePayLoaded()
+    onGooglePayLoaded(this.buttonOptions)
   }
 
   onErrorSheetClosed() {
@@ -111,7 +131,7 @@ export default class ConvertToken extends Vue {
   }
 
   showGooglePayButton() {
-    return this.formData.type === 'Google Pay' && getLive() // TODO: AND if googlepay is supported
+    return this.formData.type === 'Google Pay' && getLive()
   }
 
   // autogenerate token info by assigning random strings to each field
@@ -120,6 +140,23 @@ export default class ConvertToken extends Vue {
     this.formData.signedMessage = Math.random().toString(36).substring(2, 12)
   }
 
+  onGooglePayButtonClicked() {
+    const paymentsClient = getGooglePaymentsClient()
+    paymentsClient
+      .loadPaymentData(paymentDataRequest)
+      .then((paymentData: PaymentData) => {
+        const paymentTokenString =
+          paymentData.paymentMethodData.tokenizationData.token // payment token as JSON string
+        const paymentToken: PaymentToken = JSON.parse(paymentTokenString) // payment token as object with keys protocolVersion, signature, and signedMessage
+        // fill form with googlepay token data
+        this.formData.signature = paymentToken.signature
+        this.formData.signedMessage = paymentToken.signedMessage
+      })
+      .catch(function (err: any) {
+        console.error(err)
+      })
+  }
+
   makeApiCall() {
     const type = this.formData.type === 'Google Pay' ? 'googlepay' : 'applepay'
     let payload = null

From 5c70672d60f101b71de3b854fbb25ff971ebae73 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Thu, 3 Mar 2022 23:12:08 -0500
Subject: [PATCH 7/9] removed editable fields

---
 .../debug/payments/googlepay/convertToken.vue | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/pages/debug/payments/googlepay/convertToken.vue b/pages/debug/payments/googlepay/convertToken.vue
index 1997fce3..4870010a 100644
--- a/pages/debug/payments/googlepay/convertToken.vue
+++ b/pages/debug/payments/googlepay/convertToken.vue
@@ -3,6 +3,12 @@
     <v-row>
       <v-col cols="12" md="4">
         <v-form>
+          <v-select
+            v-on:change="clearTokens()"
+            v-model="formData.type"
+            :items="paymentType"
+            label="Payment Type"
+          />
           <v-btn
             v-if="showAutogenerateButton()"
             depressed
@@ -17,30 +23,21 @@
             id="google-pay-button"
             v-if="showGooglePayButton()"
           ></v-container>
-          <v-select
-            v-model="formData.type"
-            :items="paymentType"
-            label="Payment Type"
-          />
-          <v-select
-            v-model="formData.protocolVersion"
-            :items="protocolVersions"
-            label="Protocol Version"
-          />
-          <v-text-field v-model="formData.signature" label="Signature" />
-          <v-text-field
-            v-model="formData.signedMessage"
-            label="Signed Message"
-          />
-
+          <v-card v-if="tokensGenerated" class="body-1 px-6 py-8 mb-4">
+            <h1>Token Information</h1>
+            <p>Protocol Version: {{ formData.protocolVersion }}</p>
+            <p>Signature: {{ formData.signature }}</p>
+            <p>Signed Message: {{ formData.signedMessage }}</p>
+          </v-card>
           <v-btn
+            v-if="tokensGenerated"
             depressed
             class="mb-7"
             color="primary"
             :loading="loading"
             @click.prevent="makeApiCall()"
           >
-            Convert Token
+            POST /tokens
           </v-btn>
         </v-form>
       </v-col>
@@ -103,6 +100,7 @@ export default class ConvertToken extends Vue {
   loading = false
   showError = false
   payload = {}
+  tokensGenerated = false
 
   buttonOptions: ButtonOptions = {
     onClick: this.onGooglePayButtonClicked,
@@ -134,10 +132,15 @@ export default class ConvertToken extends Vue {
     return this.formData.type === 'Google Pay' && getLive()
   }
 
+  clearTokens() {
+    this.tokensGenerated = false
+  }
+
   // autogenerate token info by assigning random strings to each field
   autogenerateToken() {
     this.formData.signature = Math.random().toString(36).substring(2, 12)
     this.formData.signedMessage = Math.random().toString(36).substring(2, 12)
+    this.tokensGenerated = true
   }
 
   onGooglePayButtonClicked() {

From f1e0d0040bdd1004dc47f131ac15d0df068471d0 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Fri, 4 Mar 2022 17:39:50 -0500
Subject: [PATCH 8/9] call /convertToken endpoint

---
 layouts/default.vue                           |  2 +-
 lib/googlePay.ts                              | 68 ++++++++++++++++---
 lib/walletsApi.ts                             | 20 ++++++
 pages/debug/payments/create.vue               |  7 +-
 .../convertToken.vue                          | 68 ++++++++++---------
 plugins/walletsApi.ts                         |  1 +
 6 files changed, 119 insertions(+), 47 deletions(-)
 rename pages/debug/payments/{googlepay => digitalWallets}/convertToken.vue (75%)

diff --git a/layouts/default.vue b/layouts/default.vue
index 428fe3df..4b26815d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -430,7 +430,7 @@ export default class DefaultLayoutsClass extends Vue {
     },
     {
       title: 'POST /convertToken',
-      to: '/debug/payments/googlepay/convertToken',
+      to: '/debug/payments/digitalWallets/convertToken',
     },
   ]
 
diff --git a/lib/googlePay.ts b/lib/googlePay.ts
index c9c3a2d5..9bf3e44a 100644
--- a/lib/googlePay.ts
+++ b/lib/googlePay.ts
@@ -2,21 +2,69 @@ import IsReadyToPayRequest = google.payments.api.IsReadyToPayRequest
 import PaymentDataRequest = google.payments.api.PaymentDataRequest
 import ButtonOptions = google.payments.api.ButtonOptions
 import IsReadyToPayResponse = google.payments.api.IsReadyToPayResponse
+import IsReadyToPayPaymentMethodSpecification = google.payments.api.IsReadyToPayPaymentMethodSpecification
 
-const isReadyToPayRequest: IsReadyToPayRequest = {
+const DEFAULT_CONFIG = {
   apiVersion: 2,
   apiVersionMinor: 0,
-  allowedPaymentMethods: [
-    {
-      type: 'CARD',
-      parameters: {
-        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
-        allowedCardNetworks: ['MASTERCARD', 'VISA'],
-      },
+  allowedPaymentMethods: <IsReadyToPayPaymentMethodSpecification> {
+    type: 'CARD',
+    parameters: {
+      allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+      allowedCardNetworks: ['MASTERCARD', 'VISA'],
     },
-  ],
+  },
+  merchantInfo: {
+    merchantId: '12345678901234567890',
+    merchantName: 'Example Merchant',
+  },
+  tokenizationSpecification: {
+    type: 'PAYMENT_GATEWAY',
+    parameters: {
+      gateway: 'checkoutltd',
+      gatewayMerchantId: 'YOUR_PUBLIC_KEY',
+    },
+  },
+  transactionInfo: {
+    currencyCode: 'USD',
+    countryCode: 'US',
+    totalPriceStatus: 'FINAL',
+    totalPrice: '12.00',
+    checkoutOption: 'COMPLETE_IMMEDIATE_PURCHASE',
+  },
+}
+
+// const isReadyToPayRequest: IsReadyToPayRequest = {
+//   apiVersion: 2,
+//   apiVersionMinor: 0,
+//   allowedPaymentMethods: [
+//     {
+//       type: 'CARD',
+//       parameters: {
+//         allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+//         allowedCardNetworks: ['MASTERCARD', 'VISA'],
+//       },
+//     },
+//   ],
+// }
+
+function getIsReadyToPayRequest() {
+  const isReadyToPayRequest: IsReadyToPayRequest = {
+    apiVersion: DEFAULT_CONFIG.apiVersion,
+    apiVersionMinor: DEFAULT_CONFIG.apiVersionMinor,
+    allowedPaymentMethods: [DEFAULT_CONFIG.allowedPaymentMethods],
+  }
+  return isReadyToPayRequest
 }
 
+// const defaultPaymentMethods: IsReadyToPayPaymentMethodSpecification = {
+//   type: 'CARD',
+//   parameters: {
+//     allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+//     allowedCardNetworks: ['MASTERCARD', 'VISA'],
+//   },
+// }
+
 const paymentDataRequest: PaymentDataRequest = {
   apiVersion: 2,
   apiVersionMinor: 0,
@@ -70,7 +118,7 @@ function getGooglePaymentsClient() {
 function onGooglePayLoaded(buttonOptions: ButtonOptions) {
   paymentsClient = getGooglePaymentsClient()
   paymentsClient
-    .isReadyToPay(isReadyToPayRequest)
+    .isReadyToPay(getIsReadyToPayRequest())
     .then(function (response: IsReadyToPayResponse) {
       if (response.result) {
         const button = paymentsClient.createButton(buttonOptions)
diff --git a/lib/walletsApi.ts b/lib/walletsApi.ts
index c5a8c066..d0ec8971 100644
--- a/lib/walletsApi.ts
+++ b/lib/walletsApi.ts
@@ -102,10 +102,30 @@ function getMasterWallet() {
   return instance.get(url)
 }
 
+/**
+ * Convert digital wallets token
+ * @param {String} type
+ * @param {Object} tokenData
+ * @param {UUID} idempotencyKey
+ */
+function convertToken(type: string, tokenData: Object) {
+  const url = '/v1/tokens'
+  const payload = {
+    type,
+    tokenData,
+    idempotencyKey: '394dffd9-e992-4b86-b3f3-0a242a44db48',
+  }
+  const config = {
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  }
+  return instance.post(url, payload, config)
+}
+
 export default {
   getInstance,
   getWallets,
   getWalletById,
   createWallet,
   getMasterWallet,
+  convertToken,
 }
diff --git a/pages/debug/payments/create.vue b/pages/debug/payments/create.vue
index b6f98cd6..518d4b18 100644
--- a/pages/debug/payments/create.vue
+++ b/pages/debug/payments/create.vue
@@ -27,11 +27,13 @@
           <v-text-field v-if="cvvRequired" v-model="formData.cvv" label="CVV" />
 
           <v-text-field
+            v-if="formData.sourceType != 'token'"
             v-model="formData.verificationSuccessUrl"
             label="VerificationSuccessUrl"
           />
 
           <v-text-field
+            v-if="formData.sourceType != 'token'"
             v-model="formData.verificationFailureUrl"
             label="VerificationFailureUrl"
           />
@@ -125,7 +127,7 @@ export default class CreatePaymentClass extends Vue {
   }
 
   verificationMethods = ['none', 'cvv', 'three_d_secure']
-  sourceType = ['card', 'ach']
+  sourceType = ['card', 'ach', 'token']
   required = [(v: string) => !!v || 'Field is required']
   error = {}
   loading = false
@@ -154,8 +156,7 @@ export default class CreatePaymentClass extends Vue {
   onSourceTypeChanged(val: string) {
     if (val === 'card') {
       this.formData.verification = 'cvv'
-    }
-    if (val === 'ach') {
+    } else {
       this.formData.verification = 'none'
     }
   }
diff --git a/pages/debug/payments/googlepay/convertToken.vue b/pages/debug/payments/digitalWallets/convertToken.vue
similarity index 75%
rename from pages/debug/payments/googlepay/convertToken.vue
rename to pages/debug/payments/digitalWallets/convertToken.vue
index 4870010a..45454411 100644
--- a/pages/debug/payments/googlepay/convertToken.vue
+++ b/pages/debug/payments/digitalWallets/convertToken.vue
@@ -4,30 +4,34 @@
       <v-col cols="12" md="4">
         <v-form>
           <v-select
-            v-on:change="clearTokens()"
             v-model="formData.type"
             :items="paymentType"
             label="Payment Type"
+            @change="clearTokens()"
           />
           <v-btn
             v-if="showAutogenerateButton()"
+            outlined
+            small
             depressed
             class="mb-7"
-            color="primary"
             :loading="loading"
             @click.prevent="autogenerateToken()"
           >
             Autogenerate token
           </v-btn>
-          <v-container
-            id="google-pay-button"
-            v-if="showGooglePayButton()"
-          ></v-container>
+          <div v-if="showGooglePayButton()" id="google-pay-button"></div>
           <v-card v-if="tokensGenerated" class="body-1 px-6 py-8 mb-4">
-            <h1>Token Information</h1>
-            <p>Protocol Version: {{ formData.protocolVersion }}</p>
-            <p>Signature: {{ formData.signature }}</p>
-            <p>Signed Message: {{ formData.signedMessage }}</p>
+            <h2 class="title">Token Information</h2>
+            <p class="font-weight-light mt-2">
+              Protocol Version: {{ formData.protocolVersion }}
+            </p>
+            <p class="font-weight-light mt-2">
+              Signature: {{ formData.signature }}
+            </p>
+            <p class="font-weight-light mt-2">
+              Signed Message: {{ formData.signedMessage }}
+            </p>
           </v-card>
           <v-btn
             v-if="tokensGenerated"
@@ -37,7 +41,7 @@
             :loading="loading"
             @click.prevent="makeApiCall()"
           >
-            POST /tokens
+            Make API Call
           </v-btn>
         </v-form>
       </v-col>
@@ -60,15 +64,15 @@
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
 import { mapGetters } from 'vuex'
-import RequestInfo from '@/components/RequestInfo.vue'
-import ErrorSheet from '@/components/ErrorSheet.vue'
+import RequestInfo from '~/components/RequestInfo.vue'
+import ErrorSheet from '~/components/ErrorSheet.vue'
 import { getLive } from '~/lib/apiTarget'
 import {
   onGooglePayLoaded,
   getGooglePaymentsClient,
   paymentDataRequest,
   PaymentToken,
-} from '@/lib/googlePay'
+} from '~/lib/googlePay'
 import ButtonOptions = google.payments.api.ButtonOptions
 import PaymentData = google.payments.api.PaymentData
 
@@ -94,12 +98,9 @@ export default class ConvertToken extends Vue {
   }
 
   paymentType = ['Google Pay', 'Apple Pay']
-  protocolVersions = ['ECv1']
-  required = [(v: string) => !!v || 'Field is required']
   error = {}
   loading = false
   showError = false
-  payload = {}
   tokensGenerated = false
 
   buttonOptions: ButtonOptions = {
@@ -113,6 +114,7 @@ export default class ConvertToken extends Vue {
         },
       },
     ],
+    buttonSizeMode: 'fill',
   }
 
   mounted() {
@@ -151,7 +153,6 @@ export default class ConvertToken extends Vue {
         const paymentTokenString =
           paymentData.paymentMethodData.tokenizationData.token // payment token as JSON string
         const paymentToken: PaymentToken = JSON.parse(paymentTokenString) // payment token as object with keys protocolVersion, signature, and signedMessage
-        // fill form with googlepay token data
         this.formData.signature = paymentToken.signature
         this.formData.signedMessage = paymentToken.signedMessage
       })
@@ -160,28 +161,29 @@ export default class ConvertToken extends Vue {
       })
   }
 
-  makeApiCall() {
+  async makeApiCall() {
+    this.loading = true
     const type = this.formData.type === 'Google Pay' ? 'googlepay' : 'applepay'
-    let payload = null
-
+    let tokenData = null
     switch (type) {
       case 'googlepay':
-        payload = {
-          type,
-          token_data: {
-            protocolVersion: this.formData.protocolVersion,
-            signature: this.formData.signature,
-            signedMessage: this.formData.signedMessage,
-          },
+        tokenData = {
+          protocolVersion: this.formData.protocolVersion,
+          signature: this.formData.signature,
+          signedMessage: this.formData.signedMessage,
         }
         break
       case 'applepay':
-        payload = {
-          type,
-          token_data: 'TODO: implement apply pay payload',
-        }
+        tokenData = { signature: 'TODO: implement apply pay payload' }
+    }
+    try {
+      await this.$walletsApi.convertToken(type, tokenData)
+    } catch (error) {
+      this.error = error
+      this.showError = true
+    } finally {
+      this.loading = false
     }
-    this.payload = payload
     // TODO: implement API call to /tokens endpoint
   }
 }
diff --git a/plugins/walletsApi.ts b/plugins/walletsApi.ts
index 3261837f..c4fde0e5 100644
--- a/plugins/walletsApi.ts
+++ b/plugins/walletsApi.ts
@@ -8,6 +8,7 @@ declare module 'vue/types/vue' {
       createWallet: any
       getInstance: any
       getMasterWallet: any
+      convertToken: any
     }
   }
 }

From 6747d5402bca131f1999edba0900539f65b4da13 Mon Sep 17 00:00:00 2001
From: Eliza Lucas <eliza.lucas@circle.com>
Date: Fri, 4 Mar 2022 18:01:16 -0500
Subject: [PATCH 9/9] delete extra spaces and comments

---
 lib/googlePay.ts | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/lib/googlePay.ts b/lib/googlePay.ts
index 9bf3e44a..f3ce973a 100644
--- a/lib/googlePay.ts
+++ b/lib/googlePay.ts
@@ -7,7 +7,7 @@ import IsReadyToPayPaymentMethodSpecification = google.payments.api.IsReadyToPay
 const DEFAULT_CONFIG = {
   apiVersion: 2,
   apiVersionMinor: 0,
-  allowedPaymentMethods: <IsReadyToPayPaymentMethodSpecification> {
+  allowedPaymentMethods: <IsReadyToPayPaymentMethodSpecification>{
     type: 'CARD',
     parameters: {
       allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
@@ -34,20 +34,6 @@ const DEFAULT_CONFIG = {
   },
 }
 
-// const isReadyToPayRequest: IsReadyToPayRequest = {
-//   apiVersion: 2,
-//   apiVersionMinor: 0,
-//   allowedPaymentMethods: [
-//     {
-//       type: 'CARD',
-//       parameters: {
-//         allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
-//         allowedCardNetworks: ['MASTERCARD', 'VISA'],
-//       },
-//     },
-//   ],
-// }
-
 function getIsReadyToPayRequest() {
   const isReadyToPayRequest: IsReadyToPayRequest = {
     apiVersion: DEFAULT_CONFIG.apiVersion,
@@ -57,14 +43,6 @@ function getIsReadyToPayRequest() {
   return isReadyToPayRequest
 }
 
-// const defaultPaymentMethods: IsReadyToPayPaymentMethodSpecification = {
-//   type: 'CARD',
-//   parameters: {
-//     allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
-//     allowedCardNetworks: ['MASTERCARD', 'VISA'],
-//   },
-// }
-
 const paymentDataRequest: PaymentDataRequest = {
   apiVersion: 2,
   apiVersionMinor: 0,