Fix with typescript stripe example fixes #50541

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!