fix: Update embedded checkout example to use +page.server.js

src/routes/examples/embedded-checkout/checkout-session/+server.js → src/routes/examples/embedded-checkout/+page.server.js

@@ -1,11 +1,10 @@
-import { json } from '@sveltejs/kit'
 import Stripe from 'stripe'
 import { SECRET_STRIPE_KEY, DOMAIN } from '$env/static/private'
 
 const stripe = new Stripe(SECRET_STRIPE_KEY)
 const return_url = new URL('/examples/embedded-checkout/thanks?session_id={CHECKOUT_SESSION_ID}', DOMAIN).toString()
 
-export async function POST() {
+export async function load() {
   const session = await stripe.checkout.sessions.create({
     ui_mode: 'embedded',
     line_items: [
@@ -18,7 +17,7 @@ export async function POST() {
     return_url
   })
 
-  return json({
+  return {
     clientSecret: session.client_secret
-  })
+  }
 }

src/routes/examples/embedded-checkout/+page.svelte

@@ -1,30 +1,16 @@
 <script>
-  import { goto } from '$app/navigation'
   import { onMount } from 'svelte'
   import { loadStripe } from '@stripe/stripe-js'
   import { PUBLIC_STRIPE_KEY } from '$env/static/public'
   import { EmbeddedCheckout } from '$lib'
 
+  export let data
+
   let stripe = null
-  let clientSecret = null
 
   onMount(async () => {
     stripe = await loadStripe(PUBLIC_STRIPE_KEY)
-    clientSecret = await createCheckoutSession()
   })
-
-  async function createCheckoutSession() {
-    const response = await fetch('/examples/embedded-checkout/checkout-session', {
-      method: 'POST',
-      headers: {
-        'content-type': 'application/json'
-      },
-      body: JSON.stringify({})
-    })
-    const { clientSecret } = await response.json()
-
-    return clientSecret
-  }
 </script>
 
 <h1>Embedded Checkout Example</h1>
@@ -33,4 +19,4 @@
   <a href="https://github.com/joshnuss/svelte-stripe/tree/main/src/routes/examples/embedded-checkout">View code</a>
 </nav>
 
-<EmbeddedCheckout {stripe} {clientSecret}/>
+<EmbeddedCheckout {stripe} clientSecret={data.clientSecret}/>