CODEWITHSUNDEEP
javascriptvue.jsvue-componentvitegoogle-pay
user24059324
user24059324

Reputation:

Failed to resolve component: google-pay-button

I am trying to payment integration via GooglePay in Vue.js using google-pay-button. But i am getting warning:

Failed to resolve component: google-pay-button

<google-pay-button
  environment="TEST"
  v-bind:button-type="buttonType"
  v-bind:button-color="buttonColor"
  v-bind:existing-payment-method-required="existingPaymentMethodRequired"
  v-bind:paymentRequest.prop="{
    apiVersion: paymentRequest.apiVersion,
    apiVersionMinor: paymentRequest.apiVersionMinor,
    allowedPaymentMethods: paymentRequest.allowedPaymentMethods,
    merchantInfo: paymentRequest.merchantInfo,
    transactionInfo: transactionInfo,
    callbackIntents: callbackIntents,
  }"
  v-on:loadpaymentdata="onLoadPaymentData"
  v-on:error="onError"
  v-bind:onPaymentAuthorized.prop="onPaymentDataAuthorized">
</google-pay-button>

<script>
import "@google-pay/button-element";
export default {
  ...
}
</script>

I am expecting there should be show Google Pay button, but it's showing warning.

Upvotes: 3

Views: 186

Answers (1)

rozsazoltan
rozsazoltan

Reputation: 8835

This is a warning. Nevertheless, the element still needs to be generated. The reason for the error is that the @google-pay/button-element is not a Vue component, but they are looking for elements named <google-pay-button> to display the button.

Vue.js aims to assist development, thus it indicates that <google-pay-button> is an undeclared component, confirming if you intended to use it this way. Such specially named elements can be put into an exception list. I will demonstrate how to do this using Vite.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const customElements = ['google-pay-button'];

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // consider any tag with a dash as a custom element
          isCustomElement: (tag) => customElements.includes(tag), // can write any condition here, the key is to cover all your custom components, even if it's as simple as tag.startsWith("google-pay-") or any other
        },
      },
    }),
  ],
});

More information

Upvotes: 1

Related Questions