Fix with typescript stripe example fixes #50541 (#50574)

### What?

The TypeScript Stripe example has been fixed to address various issues. One of the issues was related to calling a function, which has now been resolved. Additionally, the Stripe API used in the example was outdated, causing an error during the build process. This issue has also been fixed.

By making these fixes, the TypeScript Stripe example should now work correctly without any function calling issues or errors related to the outdated Stripe API during the build.

### Why?

There's an issue regarding this problem `Fix with typescript stripe example fixes #50541`

```console
$ next build
- info Linting and checking validity of types ..- error ESLint must be installed in order to run during builds: yarn add --dev eslint
- info Linting and checking validity of types ...Failed to compile.

./components/CartSummary.tsx:41:24
Type error: Argument of type '{ sessionId: any; }' is not assignable to parameter of type 'string'.

  39 |     }
  40 |
> 41 |     redirectToCheckout({ sessionId: response.id })
     |                        ^
  42 |   }
  43 |
  44 |   return (
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

### How?

- Calling the `redirectToCheckout` function the right way https://github.com/dayhaysoos/use-shopping-cart/blob/275cb65f3d2fccb15857f4b9278cbbfca11eaf7a/use-shopping-cart/react/index.d.ts#L65
- Updating Stripe API
- Fix some changed / depcrated code since the API has changed a little
- Fix a TS error since the used library does not has a correct TS defintion file


![image](https://github.com/vercel/next.js/assets/987947/dd21dbb0-e949-4b3e-a26c-6a6d720c6e37)



Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

examples/with-stripe-typescript/components/CartSummary.tsx

@@ -1,9 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import StripeTestCards from '../components/StripeTestCards'
-
-import { useShoppingCart } from 'use-shopping-cart'
 import { fetchPostJSON } from '../utils/api-helpers'
+import { useShoppingCart } from 'use-shopping-cart'
 
 const CartSummary = () => {
   const [loading, setLoading] = useState(false)
@@ -38,7 +37,7 @@ const CartSummary = () => {
       return
     }
 
-    redirectToCheckout({ sessionId: response.id })
+    redirectToCheckout(response.id)
   }
 
   return (

examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts

@@ -1,9 +1,10 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 
 import Stripe from 'stripe'
+
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   // https://github.com/stripe/stripe-node#configuration
-  apiVersion: '2020-08-27',
+  apiVersion: '2022-08-01',
 })
 
 export default async function handler(

examples/with-stripe-typescript/pages/api/checkout_sessions/cart.ts

@@ -1,5 +1,9 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 
+import Stripe from 'stripe'
+// @ts-ignore
+import { validateCartItems } from 'use-shopping-cart/utilities'
+
 /*
  * Product data can be loaded from anywhere. In this case, we’re loading it from
  * a local JSON file, but this could also come from an async call to your
@@ -8,13 +12,11 @@ import { NextApiRequest, NextApiResponse } from 'next'
  * The important thing is that the product info is loaded from somewhere trusted
  * so you know the pricing information is accurate.
  */
-import { validateCartItems } from 'use-shopping-cart/utilities/serverless'
 import inventory from '../../../data/products'
 
-import Stripe from 'stripe'
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   // https://github.com/stripe/stripe-node#configuration
-  apiVersion: '2020-08-27',
+  apiVersion: '2022-08-01',
 })
 
 export default async function handler(
@@ -25,7 +27,7 @@ export default async function handler(
     try {
       // Validate the cart details that were sent from the client.
       const line_items = validateCartItems(inventory as any, req.body)
-      const hasSubscription = line_items.find((item) => {
+      const hasSubscription = line_items.find((item: any) => {
         return !!item.price_data.recurring
       })
       // Create Checkout Sessions from body params.

examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts

@@ -1,12 +1,12 @@
+import { CURRENCY, MAX_AMOUNT, MIN_AMOUNT } from '../../../config'
 import { NextApiRequest, NextApiResponse } from 'next'
 
-import { CURRENCY, MIN_AMOUNT, MAX_AMOUNT } from '../../../config'
+import Stripe from 'stripe'
 import { formatAmountForStripe } from '../../../utils/stripe-helpers'
 
-import Stripe from 'stripe'
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   // https://github.com/stripe/stripe-node#configuration
-  apiVersion: '2020-08-27',
+  apiVersion: '2022-08-01',
 })
 
 export default async function handler(
@@ -26,10 +26,14 @@ export default async function handler(
         payment_method_types: ['card'],
         line_items: [
           {
-            name: 'Custom amount donation',
             amount: formatAmountForStripe(amount, CURRENCY),
-            currency: CURRENCY,
             quantity: 1,
+            price_data: {
+              currency: CURRENCY,
+              product_data: {
+                name: 'Custom amount donation',
+              },
+            },
           },
         ],
         success_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,

examples/with-stripe-typescript/pages/api/payment_intents/index.ts

@@ -1,12 +1,12 @@
+import { CURRENCY, MAX_AMOUNT, MIN_AMOUNT } from '../../../config'
 import { NextApiRequest, NextApiResponse } from 'next'
 
-import { CURRENCY, MIN_AMOUNT, MAX_AMOUNT } from '../../../config'
+import Stripe from 'stripe'
 import { formatAmountForStripe } from '../../../utils/stripe-helpers'
 
-import Stripe from 'stripe'
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   // https://github.com/stripe/stripe-node#configuration
-  apiVersion: '2020-08-27',
+  apiVersion: '2022-08-01',
 })
 
 export default async function handler(

examples/with-stripe-typescript/pages/api/webhooks/index.ts

@@ -1,11 +1,12 @@
-import { buffer } from 'micro'
-import Cors from 'micro-cors'
 import { NextApiRequest, NextApiResponse } from 'next'
 
+import Cors from 'micro-cors'
 import Stripe from 'stripe'
+import { buffer } from 'micro'
+
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   // https://github.com/stripe/stripe-node#configuration
-  apiVersion: '2020-08-27',
+  apiVersion: '2022-08-01',
 })
 
 const webhookSecret: string = process.env.STRIPE_WEBHOOK_SECRET!