无法解析组件：google-pay-button

Question

我正在尝试使用 google-pay-button 通过 vue js 中的 Gpay 进行支付集成。但我收到错误 - 无法解析组件：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>

我期望应该显示 Google pay 按钮，但它显示错误。

Answer 1

这是一个警告。尽管如此，该元素仍然需要生成。错误的原因是

@google-pay/button-element

不是 Vue 组件，但它们正在寻找名为

<google-pay-button>

的元素来显示按钮。

Vue.js 旨在辅助开发，因此它表明

<google-pay-button>

是一个未声明的组件，确认您是否打算以这种方式使用它。这些特殊命名的元素可以放入例外列表中。我将演示如何使用 Vite 来做到这一点。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // consider any tag with a dash as a custom element
          isCustomElement: (tag) => tag === 'google-pay-button', // 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
        },
      },
    }),
  ],
});