Shopping Cart Checkout Demo
-
-
-
@@ -41,25 +36,18 @@ Once you have access to [the environment variables you'll need](#required-config
## Included functionality
-- [Global CSS styles](https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets)
-- Implementation of a Layout component that loads and sets up Stripe.js and Elements for usage with SSR via `loadStripe` helper: [components/Layout.tsx](components/Layout.tsx).
- Stripe Checkout
- Custom Amount Donation with redirect to Stripe Checkout:
- - Frontend: [pages/donate-with-checkout.tsx](pages/donate-with-checkout.tsx)
- - Backend: [pages/api/checkout_sessions/](pages/api/checkout_sessions/)
- - Checkout payment result page that uses [SWR](https://github.com/vercel/swr) hooks to fetch the CheckoutSession status from the API route: [pages/result.tsx](pages/result.tsx).
+ - Server Component: [app/donate-with-checkout/page.tsx](app/donate-with-checkout/page.tsx)
+ - Server Action: [app/actions/stripe.ts](app/actions/stripe.ts)
+ - Checkout Session 'success' page fetches the Checkout Session object from Stripe: [donate-with-checkout/result/page.tsx](app/donate-with-checkout/result/page.tsx)
- Stripe Elements
- - Custom Amount Donation with Stripe Elements & PaymentIntents (no redirect):
- - Frontend: [pages/donate-with-elements.tsx](pages/donate-with-elements.tsx)
- - Backend: [pages/api/payment_intents/](pages/api/payment_intents/)
-- Webhook handling for [post-payment events](https://stripe.com/docs/payments/accept-a-payment#web-fulfillment)
- - By default Next.js API routes are same-origin only. To allow Stripe webhook event requests to reach our API route, we need to add `micro-cors` and [verify the webhook signature](https://stripe.com/docs/webhooks/signatures) of the event. All of this happens in [pages/api/webhooks/index.ts](pages/api/webhooks/index.ts).
-- Helpers
- - [utils/api-helpers.ts](utils/api-helpers.ts)
- - helpers for GET and POST requests.
- - [utils/stripe-helpers.ts](utils/stripe-helpers.ts)
- - Format amount strings properly using `Intl.NumberFormat`.
- - Format amount for usage with Stripe, including zero decimal currency detection.
+ - Custom Amount Donation with Stripe Payment Element & PaymentIntents:
+ - Server Component: [app/donate-with-elements/page.tsx](app/donate-with-elements/page.tsx)
+ - Server Action: [app/actions/stripe.ts](app/actions/stripe.ts)
+ - Payment Intent 'success' page (via `returl_url`) fetches the Payment Intent object from Stripe: [donate-with-elements/result/page.tsx](app/donate-with-elements/result/page.tsx)
+- Webhook handling for [post-payment events](https://stripe.com/docs/payments/handling-payment-events)
+ - Route Handler: [app/api/webhooks/route.ts](app/api/webhooks/route.ts)
## How to use
@@ -146,3 +134,4 @@ Alternatively, you can deploy using our template by clicking on the Deploy butto
- [@thorsten-stripe](https://twitter.com/thorwebdev)
- [@lfades](https://twitter.com/luis_fades)
+- [@jsteele-stripe](https://twitter.com/ynnoj)
diff --git a/examples/with-stripe-typescript/app/actions/stripe.ts b/examples/with-stripe-typescript/app/actions/stripe.ts
new file mode 100644
index 0000000000..301640b2ef
--- /dev/null
+++ b/examples/with-stripe-typescript/app/actions/stripe.ts
@@ -0,0 +1,55 @@
+'use server'
+
+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{errorMessage}
+ + ) + + default: + return null + } + } + + const handleInputChange: React.ChangeEventHandler{formattedContent}
+}
diff --git a/examples/with-stripe-typescript/components/StripeTestCards.tsx b/examples/with-stripe-typescript/app/components/StripeTestCards.tsx
similarity index 86%
rename from examples/with-stripe-typescript/components/StripeTestCards.tsx
rename to examples/with-stripe-typescript/app/components/StripeTestCards.tsx
index 46f66855a9..d186d54b59 100644
--- a/examples/with-stripe-typescript/components/StripeTestCards.tsx
+++ b/examples/with-stripe-typescript/app/components/StripeTestCards.tsx
@@ -1,4 +1,4 @@
-const StripeTestCards = () => {
+export default function StripeTestCards(): JSX.Element {
return (
Donate to our project π
+Donate to our project π
+
+
+ 
+
+ 
+
+ Cart cleared.
-} diff --git a/examples/with-stripe-typescript/components/CustomDonationInput.tsx b/examples/with-stripe-typescript/components/CustomDonationInput.tsx deleted file mode 100644 index 401afd142d..0000000000 --- a/examples/with-stripe-typescript/components/CustomDonationInput.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react' -import { formatAmountForDisplay } from '../utils/stripe-helpers' - -type Props = { - name: string - value: number - min: number - max: number - currency: string - step: number - onChange: (e: React.ChangeEvent{errorMessage}
- - ) - - default: - return null - } - } - - const handleInputChange: React.ChangeEventHandler
-
- {formattedContent}
-}
-
-export default PrintObject
diff --git a/examples/with-stripe-typescript/components/Products.tsx b/examples/with-stripe-typescript/components/Products.tsx
deleted file mode 100644
index 20763e6863..0000000000
--- a/examples/with-stripe-typescript/components/Products.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import products from '../data/products'
-import { formatCurrencyString } from 'use-shopping-cart'
-import { useShoppingCart } from 'use-shopping-cart'
-
-const Products = () => {
- const { addItem, removeItem } = useShoppingCart()
-
- return (
- - {formatCurrencyString({ - value: product.price, - currency: product.currency, - })} -
- - -Donate to our project π
-Donate to our project π
- {paymentIntent && paymentIntent.client_secret ? ( -Loading...
- )} -
-
-
-
- 
-
-