From 3be781aaf31bc719343b55d634fddb19ed33a07f Mon Sep 17 00:00:00 2001 From: Jonathan Steele Date: Mon, 7 Aug 2023 10:42:21 +0100 Subject: [PATCH 1/4] docs: Update README demo link --- examples/with-stripe-typescript/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-stripe-typescript/README.md b/examples/with-stripe-typescript/README.md index 8f2879b938708..f193e94edb1a2 100644 --- a/examples/with-stripe-typescript/README.md +++ b/examples/with-stripe-typescript/README.md @@ -11,7 +11,7 @@ This is a full-stack TypeScript example using: ## Demo -- [Live demo](https://nextjs-typescript-react-stripe-js.vercel.app) +- [Live demo](https://nextjs-with-stripe-typescript-demo.vercel.app) - [Guide](https://vercel.com/guides/getting-started-with-nextjs-typescript-stripe) The demo is running in test mode -- use `4242424242424242` as a test card number with any CVC + future expiration date. From ded5c1d789b5027997e1aa6e0dc65e9f271e0049 Mon Sep 17 00:00:00 2001 From: Jonathan Steele Date: Mon, 7 Aug 2023 14:04:47 +0100 Subject: [PATCH 2/4] chore: Add `appInfo` when initialising Stripe client --- examples/with-stripe-typescript/lib/stripe.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/with-stripe-typescript/lib/stripe.ts b/examples/with-stripe-typescript/lib/stripe.ts index 5740028d51a69..2b6110820a3bb 100644 --- a/examples/with-stripe-typescript/lib/stripe.ts +++ b/examples/with-stripe-typescript/lib/stripe.ts @@ -5,4 +5,8 @@ import Stripe from 'stripe' export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, { // https://github.com/stripe/stripe-node#configuration apiVersion: '2022-11-15', + appInfo: { + name: 'nextjs-with-stripe-typescript-demo', + url: 'https://nextjs-with-stripe-typescript-demo.vercel.app' + } }) From ea5ca7a5c36c8e2bcd21b4f034692a1697a2cf90 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Mon, 7 Aug 2023 08:35:21 -0500 Subject: [PATCH 3/4] Prettier --- examples/with-stripe-typescript/lib/stripe.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-stripe-typescript/lib/stripe.ts b/examples/with-stripe-typescript/lib/stripe.ts index 2b6110820a3bb..8a3b07b7cd550 100644 --- a/examples/with-stripe-typescript/lib/stripe.ts +++ b/examples/with-stripe-typescript/lib/stripe.ts @@ -7,6 +7,6 @@ export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, { apiVersion: '2022-11-15', appInfo: { name: 'nextjs-with-stripe-typescript-demo', - url: 'https://nextjs-with-stripe-typescript-demo.vercel.app' - } + url: 'https://nextjs-with-stripe-typescript-demo.vercel.app', + }, }) From a6f9a5b857623ca77f464b003b4bc01a17c3af91 Mon Sep 17 00:00:00 2001 From: Jonathan Steele Date: Thu, 31 Aug 2023 17:24:25 +0100 Subject: [PATCH 4/4] fix: Call `elements.update()` to ensure wallet modals reflect update payment amount --- .../with-stripe-typescript/app/components/ElementsForm.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/with-stripe-typescript/app/components/ElementsForm.tsx b/examples/with-stripe-typescript/app/components/ElementsForm.tsx index b685e57648d22..a523e70b524c2 100644 --- a/examples/with-stripe-typescript/app/components/ElementsForm.tsx +++ b/examples/with-stripe-typescript/app/components/ElementsForm.tsx @@ -61,12 +61,15 @@ function CheckoutForm(): JSX.Element { } } - const handleInputChange: React.ChangeEventHandler = (e) => + const handleInputChange: React.ChangeEventHandler = (e) => { setInput({ ...input, [e.currentTarget.name]: e.currentTarget.value, }) + elements?.update({ amount: input.customDonation * 100 }) + } + const handleSubmit: React.FormEventHandler = async (e) => { try { e.preventDefault()