Upon reaching the checkout page, I encounter the message:
Invalid value with type "undefined" was received for stripe. Valid type for stripe is "string".This issue seems to be related to the redirectToCheckout function. Can someone assist me?
The cart-summary.tsx file displays all items, prices, and details fetched from sanity.io:
"use client"
import { useState } from "react"
import { Loader2 } from "lucide-react"
import { formatCurrencyString, useShoppingCart } from "use-shopping-cart"
import { Button } from "@/components/ui/button"
export function CartSummary() {
const{ formattedTotalPrice, totalPrice, cartDetails, cartCount, redirectToCheckout } = useShoppingCart()
const [loading, setLoading] = useState(false)
const isDisabled = loading || cartCount === 0
const shippingAmount = cartCount! > 0 ? 500 : 0
const totalAmount = totalPrice! + shippingAmount
async function onCheckout() {
setLoading(true)
const response = await fetch('/api/checkout', {
method: "POST",
body: JSON.stringify(cartDetails),
})
const data = await response.json()
const result = await redirectToCheckout(data.id)
if (result?.error) {
console.error(result)
}
setLoading(false)
}
return (
<section
aria-labelledby="summary-heading"
className="mt-16 rounded-lg border-2 border-gray-200 bg-gray-50 px-4 py-6 shadow-md dark:border-gray-900 dark:bg-black sm:p-6 lg:col-span-5 lg:mt-0 lg:p-8"
>
<h2 id="summary-heading" className="text-lg font-medium">
Order summary
</h2>
<dl className="mt-6 space-y-4">
<div className="flex items-center justify-between">
<dt className="text-sm">{formattedTotalPrice}</dt>
<dd className="text-sm font-medium">Subtotal Amount</dd>
</div>
... (additional code omitted for brevity) ...
</section>
)
}
The route.tsx file created for the checkout process resides in the api/checkout folder, where the necessary Stripe configurations are specified:
import { NextResponse } from "next/server"
// @ts-ignore
import { validateCartItems } from "use-shopping-cart/utilities"
import { inventory } from "@/config/inventory"
import { stripe } from "@/lib/stripe"
... (additional logic for handling POST request in checkout API) ...
I have attempted to debug this issue without success.
https://i.stack.imgur.com/K4tR1.png