10 |
14 | Donate with Checkout
11 |Donate to our project 💖
12 |
4 | Use any of the{' '}
5 |
10 | Stripe test cards
11 | {' '}
12 | for this demo, e.g.{' '}
13 |
18 | );
19 | };
20 |
21 | export default StripeTestCards;
22 |
--------------------------------------------------------------------------------
/pages/donate-with-elements.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 |
3 | import { Elements } from '@stripe/react-stripe-js';
4 | import getStripe from '../utils/get-stripejs';
5 |
6 | import Layout from '../components/Layout';
7 | import ElementsForm from '../components/ElementsForm';
8 |
9 | const DonatePage: NextPage = () => {
10 | return (
11 |
14 | 4242424242424242
15 |
16 | .
17 |
13 |
16 |
18 |
19 | Donate with Elements
14 |Donate to our project 💖
15 |
12 |
19 |
22 |
23 | Shopping Cart
13 |14 | Powered by the{' '} 15 | use-shopping-cart{' '} 16 | React hooks library. 17 |
18 |
13 | 
14 |
34 | ))}
35 | {product.name}
15 |16 | {formatCurrencyString({ 17 | value: product.price, 18 | currency: product.currency, 19 | })} 20 |
21 | 27 | 33 |-
9 |
-
10 |
11 |
12 |
Donate with Checkout
13 |
14 |
15 |
16 |
17 | -
18 |
19 |
20 |
Donate with Elements
21 |
22 |
23 |
24 |
25 | -
26 |
27 |
28 |
Use Shopping Cart
29 |
30 |
31 |
32 |
33 |
failed to load
;
25 |
26 | return (
27 |
29 |
34 |
36 |
37 | Checkout Payment Result
30 |Status: {data?.payment_intent?.status ?? 'loading...'}
31 |CheckoutSession response:
32 |
32 |
33 |
46 | {children}
47 |
48 |
34 |
35 |
36 | 
37 |
38 |
39 |
40 | Stripe Sample
41 |
44 |
45 |
37 |
38 |
39 |
40 | Stripe Sample
41 |
42 | Next.js, TypeScript, and Stripe 🔒💸
43 |
44 |
49 |
50 | This is a{' '}
51 |
56 | Stripe Sample
57 |
58 | .{' View code on '}
59 |
64 | GitHub
65 |
66 | .
67 |
68 |
69 |
70 | );
71 |
72 | export default Layout;
73 |
--------------------------------------------------------------------------------
/public/elements-card-payment.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/api/webhooks/index.ts:
--------------------------------------------------------------------------------
1 | import { buffer } from 'micro';
2 | import Cors from 'micro-cors';
3 | import { NextApiRequest, NextApiResponse } from 'next';
4 |
5 | import Stripe from 'stripe';
6 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
7 | // https://github.com/stripe/stripe-node#configuration
8 | apiVersion: '2020-03-02',
9 | });
10 |
11 | const webhookSecret: string = process.env.STRIPE_WEBHOOK_SECRET!;
12 |
13 | // Stripe requires the raw body to construct the event.
14 | export const config = {
15 | api: {
16 | bodyParser: false,
17 | },
18 | };
19 |
20 | const cors = Cors({
21 | allowMethods: ['POST', 'HEAD'],
22 | });
23 |
24 | const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => {
25 | if (req.method === 'POST') {
26 | const buf = await buffer(req);
27 | const sig = req.headers['stripe-signature']!;
28 |
29 | let event: Stripe.Event;
30 |
31 | try {
32 | event = stripe.webhooks.constructEvent(
33 | buf.toString(),
34 | sig,
35 | webhookSecret
36 | );
37 | } catch (err) {
38 | // On error, log and return the error message.
39 | console.log(`❌ Error message: ${err.message}`);
40 | res.status(400).send(`Webhook Error: ${err.message}`);
41 | return;
42 | }
43 |
44 | // Successfully constructed event.
45 | console.log('✅ Success:', event.id);
46 |
47 | // Cast event data to Stripe object.
48 | if (event.type === 'payment_intent.succeeded') {
49 | const paymentIntent = event.data.object as Stripe.PaymentIntent;
50 | console.log(`💰 PaymentIntent status: ${paymentIntent.status}`);
51 | } else if (event.type === 'payment_intent.payment_failed') {
52 | const paymentIntent = event.data.object as Stripe.PaymentIntent;
53 | console.log(
54 | `❌ Payment failed: ${paymentIntent.last_payment_error?.message}`
55 | );
56 | } else if (event.type === 'charge.succeeded') {
57 | const charge = event.data.object as Stripe.Charge;
58 | console.log(`💵 Charge id: ${charge.id}`);
59 | } else {
60 | console.warn(`🤷♀️ Unhandled event type: ${event.type}`);
61 | }
62 |
63 | // Return a response to acknowledge receipt of the event.
64 | res.json({ received: true });
65 | } else {
66 | res.setHeader('Allow', 'POST');
67 | res.status(405).end('Method Not Allowed');
68 | }
69 | };
70 |
71 | export default cors(webhookHandler as any);
72 |
--------------------------------------------------------------------------------
/components/CheckoutForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import CustomDonationInput from '../components/CustomDonationInput';
4 | import StripeTestCards from '../components/StripeTestCards';
5 |
6 | import getStripe from '../utils/get-stripejs';
7 | import { fetchPostJSON } from '../utils/api-helpers';
8 | import { formatAmountForDisplay } from '../utils/stripe-helpers';
9 | import * as config from '../config';
10 |
11 | const CheckoutForm = () => {
12 | const [loading, setLoading] = useState(false);
13 | const [input, setInput] = useState({
14 | customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
15 | });
16 |
17 | const handleInputChange: React.ChangeEventHandlerProcessing...
; 53 | 54 | case 'requires_action': 55 | returnAuthenticating...
; 56 | 57 | case 'succeeded': 58 | returnPayment Succeeded 🥳
; 59 | 60 | case 'error': 61 | return ( 62 | <> 63 |Error 😭
64 |{errorMessage}
65 | 66 | ); 67 | 68 | default: 69 | return null; 70 | } 71 | }; 72 | 73 | const handleInputChange: React.ChangeEventHandler
2 | >
3 | > This project is deprecated and is no longer being actively maintained.
4 | >
5 | > See [vercel/next.js/examples/with-stripe-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript) for an alternative sample.
6 |
7 | # Sample using Next.js, TypeScript, and react-stripe-js 🔒💸
8 |
9 | This is a full-stack TypeScript example using:
10 |
11 | - Frontend:
12 | - Next.js and [SWR](https://github.com/zeit/swr)
13 | - [react-stripe-js](https://github.com/stripe/react-stripe-js) for [Checkout](https://stripe.com/checkout) and [Elements](https://stripe.com/elements)
14 | - Backend
15 | - Next.js [API routes](https://nextjs.org/docs/api-routes/introduction)
16 | - [stripe-node with TypeScript](https://github.com/stripe/stripe-node#usage-with-typescript)
17 |
18 | ## Demo
19 |
20 | - Live demo: https://nextjs-typescript-react-stripe-js.now.sh/
21 | - CodeSandbox: https://codesandbox.io/s/github/stripe-samples/nextjs-typescript-react-stripe-js
22 | - Tutorial: https://dev.to/thorwebdev/type-safe-payments-with-next-js-typescript-and-stripe-4jo7
23 |
24 | The demo is running in test mode -- use `4242424242424242` as a test card number with any CVC + future expiration date.
25 |
26 | Use the `4000000000003220` test card number to trigger a 3D Secure challenge flow.
27 |
28 | Read more about testing on Stripe at https://stripe.com/docs/testing.
29 |
30 | Shopping Cart Checkout Demo
31 |
32 | Checkout Donations Demo
35 |
36 | Elements Donations Demo
39 |
40 |