Embedded Checkout

Complete checkout experience embedded directly in your application.

App.vue

<script setup lang="ts">
import { loadStripe } from '@stripe/stripe-js'
import { EmbeddedCheckout, EmbeddedCheckoutProvider } from 'vue-stripe'

const stripePromise = loadStripe(import.meta.env.PUBLIC_STRIPE_PUBLIC_KEY as string)

async function fetchClientSecret() {
  const resp = await fetch('/api/embedded-checkout')
  const data = await resp.json() as { clientSecret: string }
  return data.clientSecret
}
</script>

<template>
  <EmbeddedCheckoutProvider :stripe="stripePromise" :options="{ fetchClientSecret }">
    <EmbeddedCheckout />
  </EmbeddedCheckoutProvider>
</template>

server.ts

import type { APIRoute } from 'astro'
import Stripe from 'stripe'

const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY)

export const GET: APIRoute = async () => {
  const returnUrl = new URL('/success', `http://localhost:4321`)

  const session = await stripe.checkout.sessions.create({
    ui_mode: 'embedded',
    line_items: [
      {
        price: 'price_1Rug5eF1gmAl8mdreU18dl12',
        quantity: 1,
      },
    ],
    mode: 'payment',
    return_url: returnUrl.toString(),
  })

  return Response.json({
    clientSecret: session.client_secret,
  })
}