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

user_13984058 0
Viewed 8037

I am using the "Vue Stripe Checkout 3" component, and when I try to implement it, I get the following error "

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

In my data I have:

publishableKey: process.env.PUBLISHABLE_KEY,

Also I tried putting adding my key directly (publishableKey: 'my key') and it still didn't work. I also tried putting it in the prop directly and nothing.

<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>

Thanks in advance.

vuejs2 vue.js javascript
2 Answers

I had a similar error in my Next.js app, which I've solved by type casting the key to a string.

Try replacing:

publishableKey: process.env.PUBLISHABLE_KEY,

with:

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

This is due to the fact that your are not specifying to your nuxt application which env variable you want to set.

You have to precise in your nuxt.config.js which one needs to be accessible from production.

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
        ...
    },
    ...

Here is the official documentation.

user_46151780
Related