example: Add Stripe embedded Checkout example

examples/with-stripe-typescript/app/actions/stripe.ts

@@ -2,14 +2,19 @@
 
 import type { Stripe } from 'stripe'
 
-import { redirect } from 'next/navigation'
 import { headers } from 'next/headers'
 
 import { CURRENCY } from '@/config'
 import { formatAmountForStripe } from '@/utils/stripe-helpers'
 import { stripe } from '@/lib/stripe'
 
-export async function createCheckoutSession(data: FormData): Promise<void> {
+export async function createCheckoutSession(
+  data: FormData
+): Promise<{ client_secret: string | null; url: string | null }> {
+  const ui_mode = data.get(
+    'uiMode'
+  ) as Stripe.Checkout.SessionCreateParams.UiMode
+
   const checkoutSession: Stripe.Checkout.Session =
     await stripe.checkout.sessions.create({
       mode: 'payment',
@@ -29,13 +34,24 @@ export async function createCheckoutSession(data: FormData): Promise<void> {
           },
         },
       ],
-      success_url: `${headers().get(
-        'origin'
-      )}/donate-with-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${headers().get('origin')}/donate-with-checkout`,
+      ...(ui_mode === 'hosted' && {
+        success_url: `${headers().get(
+          'origin'
+        )}/donate-with-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
+        cancel_url: `${headers().get('origin')}/donate-with-checkout`,
+      }),
+      ...(ui_mode === 'embedded' && {
+        return_url: `${headers().get(
+          'origin'
+        )}/donate-with-embedded-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
+      }),
+      ui_mode,
     })
 
-  redirect(checkoutSession.url as string)
+  return {
+    client_secret: checkoutSession.client_secret,
+    url: checkoutSession.url,
+  }
 }
 
 export async function createPaymentIntent(

examples/with-stripe-typescript/app/components/CheckoutForm.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import type Stripe from 'stripe'
+
 import React, { useState } from 'react'
 
 import CustomDonationInput from '@/components/CustomDonationInput'
@@ -8,12 +10,22 @@ import StripeTestCards from '@/components/StripeTestCards'
 import { formatAmountForDisplay } from '@/utils/stripe-helpers'
 import * as config from '@/config'
 import { createCheckoutSession } from '@/actions/stripe'
+import getStripe from '@/utils/get-stripejs'
+import {
+  EmbeddedCheckout,
+  EmbeddedCheckoutProvider,
+} from '@stripe/react-stripe-js'
+
+interface CheckoutFormProps {
+  uiMode: Stripe.Checkout.SessionCreateParams.UiMode
+}
 
-export default function CheckoutForm(): JSX.Element {
+export default function CheckoutForm(props: CheckoutFormProps): JSX.Element {
   const [loading] = useState<boolean>(false)
   const [input, setInput] = useState<{ customDonation: number }>({
     customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
   })
+  const [clientSecret, setClientSecret] = useState<string | null>(null)
 
   const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
     e
@@ -23,26 +35,57 @@ export default function CheckoutForm(): JSX.Element {
       [e.currentTarget.name]: e.currentTarget.value,
     })
 
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (
+    e
+  ): Promise<void> => {
+    e.preventDefault()
+
+    if (props.uiMode === 'hosted') {
+      const { url } = await createCheckoutSession(
+        new FormData(e.target as HTMLFormElement)
+      )
+
+      window.location.assign(url as string)
+    }
+
+    const { client_secret } = await createCheckoutSession(
+      new FormData(e.target as HTMLFormElement)
+    )
+
+    setClientSecret(client_secret)
+  }
+
   return (
-    <form action={createCheckoutSession}>
-      <CustomDonationInput
-        className="checkout-style"
-        name="customDonation"
-        min={config.MIN_AMOUNT}
-        max={config.MAX_AMOUNT}
-        step={config.AMOUNT_STEP}
-        currency={config.CURRENCY}
-        onChange={handleInputChange}
-        value={input.customDonation}
-      />
-      <StripeTestCards />
-      <button
-        className="checkout-style-background"
-        type="submit"
-        disabled={loading}
-      >
-        Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
-      </button>
-    </form>
+    <React.Fragment>
+      <form onSubmit={handleSubmit}>
+        <input type="hidden" name="uiMode" value={props.uiMode} />
+        <CustomDonationInput
+          className="checkout-style"
+          name="customDonation"
+          min={config.MIN_AMOUNT}
+          max={config.MAX_AMOUNT}
+          step={config.AMOUNT_STEP}
+          currency={config.CURRENCY}
+          onChange={handleInputChange}
+          value={input.customDonation}
+        />
+        <StripeTestCards />
+        <button
+          className="checkout-style-background"
+          type="submit"
+          disabled={loading}
+        >
+          Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
+        </button>
+      </form>
+      {clientSecret ? (
+        <EmbeddedCheckoutProvider
+          stripe={getStripe()}
+          options={{ clientSecret }}
+        >
+          <EmbeddedCheckout />
+        </EmbeddedCheckoutProvider>
+      ) : null}
+    </React.Fragment>
   )
 }

examples/with-stripe-typescript/app/donate-with-checkout/page.tsx

@@ -3,15 +3,15 @@ import type { Metadata } from 'next'
 import CheckoutForm from '@/components/CheckoutForm'
 
 export const metadata: Metadata = {
-  title: 'Donate with Checkout | Next.js + TypeScript Example',
+  title: 'Donate with hosted Checkout | Next.js + TypeScript Example',
 }
 
 export default function DonatePage(): JSX.Element {
   return (
     <div className="page-container">
-      <h1>Donate with Checkout</h1>
+      <h1>Donate with hosted Checkout</h1>
       <p>Donate to our project 💖</p>
-      <CheckoutForm />
+      <CheckoutForm uiMode="hosted" />
     </div>
   )
 }

examples/with-stripe-typescript/app/donate-with-embedded-checkout/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from 'next'
+
+import CheckoutForm from '@/components/CheckoutForm'
+
+export const metadata: Metadata = {
+  title: 'Donate with embedded Checkout | Next.js + TypeScript Example',
+}
+
+export default function DonatePage(): JSX.Element {
+  return (
+    <div className="page-container">
+      <h1>Donate with embedded Checkout</h1>
+      <p>Donate to our project 💖</p>
+      <CheckoutForm uiMode="embedded" />
+    </div>
+  )
+}

examples/with-stripe-typescript/app/donate-with-embedded-checkout/result/error.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+export default function Error({ error }: { error: Error }) {
+  return <h2>{error.message}</h2>
+}

examples/with-stripe-typescript/app/donate-with-embedded-checkout/result/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Checkout Session Result',
+}
+
+export default function ResultLayout({
+  children,
+}: {
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <div className="page-container">
+      <h1>Checkout Session Result</h1>
+      {children}
+    </div>
+  )
+}

examples/with-stripe-typescript/app/donate-with-embedded-checkout/result/page.tsx

@@ -0,0 +1,28 @@
+import type { Stripe } from 'stripe'
+
+import PrintObject from '@/components/PrintObject'
+import { stripe } from '@/lib/stripe'
+
+export default async function ResultPage({
+  searchParams,
+}: {
+  searchParams: { session_id: string }
+}): Promise<JSX.Element> {
+  if (!searchParams.session_id)
+    throw new Error('Please provide a valid session_id (`cs_test_...`)')
+
+  const checkoutSession: Stripe.Checkout.Session =
+    await stripe.checkout.sessions.retrieve(searchParams.session_id, {
+      expand: ['line_items', 'payment_intent'],
+    })
+
+  const paymentIntent = checkoutSession.payment_intent as Stripe.PaymentIntent
+
+  return (
+    <>
+      <h2>Status: {paymentIntent.status}</h2>
+      <h3>Checkout Session response:</h3>
+      <PrintObject content={checkoutSession} />
+    </>
+  )
+}

examples/with-stripe-typescript/package.json

@@ -6,13 +6,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "@stripe/react-stripe-js": "2.1.1",
-    "@stripe/stripe-js": "1.54.1",
+    "@stripe/react-stripe-js": "2.4.0",
+    "@stripe/stripe-js": "2.2.2",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "server-only": "0.0.1",
-    "stripe": "12.14.0"
+    "stripe": "14.8.0"
   },
   "devDependencies": {
     "@types/node": "20.4.6",