Я пытаюсь интегрировать платежи через Gpay в vue js, используя кнопку Google-Pay. Но я получаю предупреждение: не удалось разрешить компонент: кнопка google-pay.
Мой код -
<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, но она показывает предупреждение.
Это предупреждение. Тем не менее, элемент все равно необходимо сгенерировать. Причина ошибки в том, что @google-pay/button-element
не является компонентом Vue, но они ищут элементы с именем <google-pay-button>
для отображения кнопки.
Vue.js призван помочь в разработке, поэтому он указывает, что <google-pay-button>
является необъявленным компонентом, подтверждая, намеревались ли вы использовать его таким образом. Такие элементы со специальными именами можно поместить в список исключений. Я покажу, как это сделать с помощью 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
},
},
}),
],
});