Stripe

1
npm install --save stripe

1
import 'server-only'
2

3
import Stripe from 'stripe'
4

5
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

1
'use server'
2

3
import { headers } from 'next/headers'
4
import { stripe } from '@/lib/stripe'
5

6
export async function startCheckoutSession(productId: string) {
7
  // Implement your product catalog lookup.
8
  const product = await getProduct(productId)
9

10
  // Create Checkout Sessions from body params.
11
  const session = await stripe.checkout.sessions.create({
12
    ui_mode: 'embedded',
13
    redirect_on_completion: 'never',
14
    line_items: [
15
      {
16
        price_data: {
17
          currency: 'usd',
18
          product_data: {
19
            name: product.name,
20
            description: product.description,
21
          },
22
          unit_amount: product.priceInCents,
23
        },
24
        quantity: 1,
25
      },
26
    ],
27
    mode: 'payment',
28
  })
29

30
  return session.client_secret
31
}

1
'use client'
2

3
import { useCallback } from 'react'
4
import {
5
  EmbeddedCheckout,
6
  EmbeddedCheckoutProvider
7
} from '@stripe/react-stripe-js'
8
import { loadStripe } from '@stripe/stripe-js'
9
import { startCheckoutSession } from '@/app/actions/stripe'
10

11
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)
12

13
export default function Checkout({ productId }: { productId: string }) {
14
  const startCheckoutSessionForProduct = useCallback(
15
    () => startCheckoutSession(productId),
16
    [productId]
17
  )
18

19
  return (
20
    <div id="checkout">
21
      <EmbeddedCheckoutProvider
22
        stripe={stripePromise}
23
        options={{ clientSecret: startCheckoutSessionForProduct }}
24
      >
25
        <EmbeddedCheckout />
26
      </EmbeddedCheckoutProvider>
27
    </div>
28
  )
29
}