Currently, I am utilizing the Stripe API along with use-shopping-cart for an e-commerce platform. However, I have encountered a perplexing issue that I cannot seem to resolve. When I wrap a page with CartProvider, that specific page successfully interacts with the shopping cart. Nevertheless, my aim is to implement this functionality globally across the entire application. Therefore, I wrapped the entire app with CartProvider but encountered an error in the process. Despite extensively reviewing the documentation provided by use-shopping-cart, I have yet to find a solution.
--relevant code--
_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { CartProvider, DebugCart } from "use-shopping-cart";
import * as config from "../config";
import { ReactNode } from "react";
const Cart = ({ children }: { children: ReactNode }) => (
<CartProvider
cartMode="checkout-session"
stripe={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string}
currency={config.CURRENCY}
shouldPersist={false}
>
<>{children}</>
</CartProvider>
);
export default function App({ Component, pageProps }: AppProps) {
return (
<Cart>
<Component {...pageProps} />
</Cart>
);
}
The above implementation functions effectively for a single page only:
"use client";
import { NextPage } from "next";
import Cart from "./Cart";
import CartSummary from "./CartSummary";
import Products from "./Products";
const Checkout: NextPage = () => {
return (
<div>
<Cart>
<CartSummary />
<Products />
</Cart>
</div>
);
};
export default Checkout;
At this point, I am at a standstill and any guidance would be greatly appreciated. The error arises when attempting to utilize useShoppingCart for adding, removing products, and managing checkout throughout the entire application. While it operates seamlessly on a single page, my ultimate goal is to integrate this functionality universally across the app.