Stripeで決済をしようとしたらエラー出た

PropertyTypeError: Invalid value with type "undefined" was received for stripe. Valid type for stripe is "string".

import React, { useState } from "react"
import { useShoppingCart } from 'use-shopping-cart'

...

const handleSubmit = async event => {
    event.preventDefault()
    setLoading(true)
    // price_id
    const price = new FormData(event.target).get("priceSelect")
    const { error } = await checkoutSingleItem(price)

    if (error) {
      setLoading(false)
    }
  }

import { getGlobalData } from '../utils/global-data';
import '../styles/globals.css';
import 'prismjs/themes/prism-tomorrow.css';
import { CartProvider } from 'use-shopping-cart'

function MyApp({ Component, pageProps }) {
  const globalData = getGlobalData()
  return (
    <>
      <CartProvider
        mode={"payment"}
        cartMode={"client-only"}
        stripe={process.env.NEXT_STRIPE_PUBLISHABLE_KEY}
        successUrl={`${globalData.siteUrl}/checkout-success`}
        cancelUrl={`${globalData.siteUrl}/cart`}
        currency={'jpy'}
      >
        <span className="theme-bejamas" />
        <Component {...pageProps} />
      </CartProvider>
    </>
  );
}

export default MyApp;