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.
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
},
},
}),
],
});