vue.jsvue-componentgoogle-pay

Failed to resolve component: google-pay-button


I am trying to payment integration via Gpay in vue js using google-pay-button. But i am getting warning - Failed to resolve component: google-pay-button

My code -

<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.


Solution

  • 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