Stripe() 的值无效：apiKey 应为字符串。您指定：未定义

Question

我正在使用“Vue Stripe Checkout 3”组件，当我尝试实现它时，出现以下错误“

Invalid value for Stripe (): apiKey should be a string. You specified: undefined.

在我的数据中我有：

publishableKey: process.env.PUBLISHABLE_KEY,

我还尝试直接添加我的密钥（publishableKey：'我的密钥'），但它仍然不起作用。我也试过直接把它放在道具里，什么也没有。

<template>
<div>
          <stripe-checkout 
          ref="checkoutRef" 
          :pk="publishableKey"
          :items="items"
          :successUrl="successUrl"
          :cancelUrl="cancelUrl">

    <template slot="checkout-button">
      <button @click="checkout" class="btn-yellow wow fadeInUp btn" style="visibility: visible; animation-name: fadeInUp;">Pagar</button>
    </template>
  </stripe-checkout>
       
</div>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout';

export default {
   components: {
    StripeCheckout
  },
   data: () => ({
    loading: false,
publishableKey: 'sk_test_51H85e2F5x69G5dDPxFEtO0RyIBWBEWkqwV9fpN5ovLysfCxJ15kfyeALoUFdZNi57yt0zj40h4LV3l5Zkra6WPCw00by0N0W3a',
    items: [
      {
        sku: item.sku, 
        quantity: 1
      }
    ],
    successUrl: 'https://tarfut.es',
    cancelUrl: 'https://tarfut.es',
  }),
    
    methods: {
      checkout () {
      this.$refs.checkoutRef.redirectToCheckout();
    },
    },
}
</script>

提前致谢。

Answer 1

我的 Next.js 应用程序中也出现了类似的错误，我通过将密钥类型转换为

string

来解决该错误。

尝试更换：

publishableKey: process.env.PUBLISHABLE_KEY,

与：

publishableKey: `${process.env.PUBLISHABLE_KEY}`,

Answer 2

这是因为您没有向 nuxt 应用程序指定要设置哪个环境变量。

您必须在

nuxt.config.js

中精确说明哪一个需要从生产环境中访问。

export default {
    mode: 'universal',
    env: {
        API_BASE_URL: process.env.API_BASE_URL,
        STRIPE_API_KEY: process.env.STRIPE_API_KEY,
        GOOGLE_ANALYTICS: process.env.GOOGLE_ANALYTICS
        ...
    },
    ...

这里是官方文档。

Answer 3

Stripe() 的值无效：apiKey 应该是字符串。您指定：未定义

那么这是什么意思？

这里发生的情况是，您没有对 API 密钥进行字符串化，因此，它显示为未定义。

环境变量的键值对可能有效（即 REACT_APP_PUBLISHABLE_KEY=pk_live_43435345awf34t），但您需要将其字符串化。

我们将使用 ${ENV} 将环境变量转换为模板文字，以有效地字符串化该值，确保它不能是未定义的，因为我们将其加载到 loadStripe 方法中。

在这里，我们将看到这将允许我们使用 Stripe 可发布密钥调用 stripe API 并创建用于结账的会话。