时间戳

首页 > 解决方案 > 为什么我无法安装 npm stripe checkout？

vue.js - 为什么我无法安装 npm stripe checkout？

问题描述

我正在使用：npm install vue-stripe-checkout，但是得到了这个错误：

vue.runtime.esm.js?2b0e:5106 Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
at eval (main.js?56d7:5)
at Module../src/main.js (app.js:1148)

在我的 main.js 中：

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueStripeCheckout from 'vue-stripe-checkout';

Vue.use(VueStripeCheckout, "pk_test_wk9TFDEeu4kRrI1pT0WxYrBC00bSQO9djj");

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

标签： vue.jsvuetify.jsstripe-payments

解决方案

看起来您正在使用最新版本，vue-stripe-checkout其中包含不允许您以上述方式使用的重大更改（作为插件）

它目前导出 2 个组件：StripeCheckout这StripeElements需要您将它们用作组件。

这是一个非常基本的例子：

<template>
  <stripe-checkout
    ref="checkoutRef"
    :pk="publishableKey"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
  >
    <template slot="checkout-button">
      <button @click="checkout">Check out</button>
    </template>
  </stripe-checkout>
</template>
 
<script>
import { StripeCheckout } from 'vue-stripe-checkout';
export default {
  components: {
    StripeCheckout
  },
  data: () => ({
    loading: false,
    publishableKey: 'YourKey',
    items: [
      {
        sku: 'sku_FdQKocNoVzznpJ', 
        quantity: 1
      }
    ],
    successUrl: 'your-success-url',
    cancelUrl: 'your-cancel-url',
  }),
  methods: {
    checkout () {
      this.$refs.checkoutRef.redirectToCheckout();
    }
  }
}
</script>

您可以参考此处查看这两个组件的所有示例：https ://github.com/jofftiquez/vue-stripe-checkout

推荐阅读