Implement googlepay button

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',
     },
   ]
 

lib/googlePay.ts

@@ -0,0 +1,116 @@
+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 DEFAULT_CONFIG = {
+  apiVersion: 2,
+  apiVersionMinor: 0,
+  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',
+  },
+}
+
+function getIsReadyToPayRequest() {
+  const isReadyToPayRequest: IsReadyToPayRequest = {
+    apiVersion: DEFAULT_CONFIG.apiVersion,
+    apiVersionMinor: DEFAULT_CONFIG.apiVersionMinor,
+    allowedPaymentMethods: [DEFAULT_CONFIG.allowedPaymentMethods],
+  }
+  return isReadyToPayRequest
+}
+
+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',
+  },
+}
+
+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', // TODO: get real environment once implementation is finished
+    })
+  }
+  return paymentsClient
+}
+
+function onGooglePayLoaded(buttonOptions: ButtonOptions) {
+  paymentsClient = getGooglePaymentsClient()
+  paymentsClient
+    .isReadyToPay(getIsReadyToPayRequest())
+    .then(function (response: IsReadyToPayResponse) {
+      if (response.result) {
+        const button = paymentsClient.createButton(buttonOptions)
+        document.getElementById('google-pay-button')?.append(button)
+      }
+    })
+    .catch(function (err: any) {
+      console.error(err)
+    })
+}
+
+export {
+  onGooglePayLoaded,
+  getGooglePaymentsClient,
+  paymentDataRequest,
+  PaymentToken,
+}

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,
 }

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

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",

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'
     }
   }