Update stripe-node & next to latest versions

Author: thorsten-stripe

.env.example

@@ -1,4 +1,6 @@
 # Stripe keys
-STRIPE_PUBLISHABLE_KEY=pk_12345
+# https://dashboard.stripe.com/apikeys
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_12345
 STRIPE_SECRET_KEY=sk_12345
+# https://stripe.com/docs/webhooks/signatures
 STRIPE_WEBHOOK_SECRET=whsec_1234

.gitignore

@@ -4,6 +4,8 @@
 
 # Node files
 node_modules/
+package-lock.json
+yarn.lock
 
 # Typescript
 dist

README.md

@@ -33,8 +33,9 @@ Read more about testing on Stripe at https://stripe.com/docs/testing.
 
 ### Included functionality
 
+- [Global CSS styles](https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets)
 - Making `.env` variables available to next: [next.config.js](next.config.js)
-  - **Note**: When deploying with Now you need to [add your secrets](https://zeit.co/docs/v2/serverless-functions/env-and-secrets) and specify a [now.json](/now.json) file.
+  - **Note**: When deploying with Now you need to [add your secrets](https://vercel.com/docs/v2/serverless-functions/env-and-secrets) and specify a [now.json](/now.json) file.
 - 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:
@@ -58,7 +59,7 @@ Read more about testing on Stripe at https://stripe.com/docs/testing.
 
 ### Using `create-next-app`
 
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
 npm init next-app --example with-stripe-typescript with-stripe-typescript-app
@@ -71,7 +72,7 @@ yarn create next-app --example with-stripe-typescript with-stripe-typescript-app
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stripe-typescript
+curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stripe-typescript
 cd with-stripe-typescript
 ```
 
@@ -86,7 +87,7 @@ cp .env.example .env
 You will need a Stripe account ([register](https://dashboard.stripe.com/register)) to run this sample. Go to the Stripe [developer dashboard](https://stripe.com/docs/development#api-keys) to find your API keys and replace them in the `.env` file.
 
 ```bash
-STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
 STRIPE_SECRET_KEY=<replace-with-your-secret-key>
 ```
 
@@ -114,9 +115,9 @@ The CLI will print a webhook secret key to the console. Set `STRIPE_WEBHOOK_SECR
 
 ### Deploy
 
-Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 
-**Note**: You must add your Stripe secrets using the ZEIT Now CLI ([Download here](https://zeit.co/download)):
+**Note**: You must add your Stripe secrets using the Vercel CLI ([Download here](https://vercel.com/download)):
 
 ```bash
 now secrets add stripe_publishable_key pk_***

components/CheckoutForm.tsx

@@ -1,35 +1,37 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
-import CustomDonationInput from '../components/CustomDonationInput'
+import CustomDonationInput from '../components/CustomDonationInput';
 
-import { fetchPostJSON } from '../utils/api-helpers'
-import { formatAmountForDisplay } from '../utils/stripe-helpers'
-import * as config from '../config'
+import { fetchPostJSON } from '../utils/api-helpers';
+import { formatAmountForDisplay } from '../utils/stripe-helpers';
+import * as config from '../config';
 
-import { useStripe } from '@stripe/react-stripe-js'
+import { useStripe } from '@stripe/react-stripe-js';
 
 const CheckoutForm: React.FunctionComponent = () => {
+  const [loading, setLoading] = useState(false);
   const [input, setInput] = useState({
     customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
-  })
-  const stripe = useStripe()
+  });
+  const stripe = useStripe();
 
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e =>
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) =>
     setInput({
       ...input,
       [e.currentTarget.name]: e.currentTarget.value,
-    })
+    });
 
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async e => {
-    e.preventDefault()
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    setLoading(true);
     // Create a Checkout Session.
     const response = await fetchPostJSON('/api/checkout_sessions', {
       amount: input.customDonation,
-    })
+    });
 
     if (response.statusCode === 500) {
-      console.error(response.message)
-      return
+      console.error(response.message);
+      return;
     }
 
     // Redirect to Checkout.
@@ -38,12 +40,13 @@ const CheckoutForm: React.FunctionComponent = () => {
       // available to this file, so you can provide it as parameter here
       // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
       sessionId: response.id,
-    })
+    });
     // If `redirectToCheckout` fails due to a browser or network
     // error, display the localized error message to your customer
     // using `error.message`.
-    console.warn(error.message)
-  }
+    console.warn(error.message);
+    setLoading(false);
+  };
 
   return (
     <form onSubmit={handleSubmit}>
@@ -60,12 +63,12 @@ const CheckoutForm: React.FunctionComponent = () => {
       <button
         className="checkout-style-background"
         type="submit"
-        disabled={!stripe}
+        disabled={!stripe || loading}
       >
         Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
       </button>
     </form>
-  )
-}
+  );
+};
 
-export default CheckoutForm
+export default CheckoutForm;

components/ElementsForm.tsx

@@ -20,23 +20,23 @@ const CARD_OPTIONS = {
       fontSize: '16px',
       fontSmoothing: 'antialiased',
       ':-webkit-autofill': {
-        color: '#fce883'
+        color: '#fce883',
       },
       '::placeholder': {
-        color: '#6772e5'
-      }
+        color: '#6772e5',
+      },
     },
     invalid: {
       iconColor: '#ef2961',
-      color: '#ef2961'
-    }
-  }
+      color: '#ef2961',
+    },
+  },
 };
 
 const ElementsForm: React.FunctionComponent = () => {
   const [input, setInput] = useState({
     customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
-    cardholderName: ''
+    cardholderName: '',
   });
   const [payment, setPayment] = useState({ status: 'initial' });
   const [errorMessage, setErrorMessage] = useState('');
@@ -69,21 +69,21 @@ const ElementsForm: React.FunctionComponent = () => {
     }
   };
 
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e =>
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) =>
     setInput({
       ...input,
-      [e.currentTarget.name]: e.currentTarget.value
+      [e.currentTarget.name]: e.currentTarget.value,
     });
 
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async e => {
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
     // Abort if form isn't valid
     if (!e.currentTarget.reportValidity()) return;
     setPayment({ status: 'processing' });
 
     // Create a PaymentIntent with the specified amount.
     const response = await fetchPostJSON('/api/payment_intents', {
-      amount: input.customDonation
+      amount: input.customDonation,
     });
     setPayment(response);
 
@@ -104,8 +104,8 @@ const ElementsForm: React.FunctionComponent = () => {
       {
         payment_method: {
           card: cardElement!,
-          billing_details: { name: input.cardholderName }
-        }
+          billing_details: { name: input.cardholderName },
+        },
       }
     );
 
@@ -143,7 +143,7 @@ const ElementsForm: React.FunctionComponent = () => {
           <div className="FormRow elements-style">
             <CardElement
               options={CARD_OPTIONS}
-              onChange={e => {
+              onChange={(e) => {
                 if (e.error) {
                   setPayment({ status: 'error' });
                   setErrorMessage(

components/Layout.tsx

@@ -8,11 +8,13 @@ type Props = {
   title?: string;
 };
 
-const stripePromise = loadStripe(process.env.STRIPE_PUBLISHABLE_KEY!);
+const stripePromise = loadStripe(
+  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
+);
 
 const Layout: React.FunctionComponent<Props> = ({
   children,
-  title = 'TypeScript Next.js Stripe Example'
+  title = 'TypeScript Next.js Stripe Example',
 }) => (
   <Elements stripe={stripePromise}>
     <Head>
@@ -60,7 +62,7 @@ const Layout: React.FunctionComponent<Props> = ({
         </a>
         .{' View code on '}
         <a
-          href="https://github.com/zeit/next.js/tree/canary/examples/with-stripe-typescript"
+          href="https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript"
           target="_blank"
           rel="noopener noreferrer"
         >

next.config.js

@@ -5,7 +5,7 @@
   },
   "build": {
     "env": {
-      "STRIPE_PUBLISHABLE_KEY": "@stripe_publishable_key"
+      "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY": "@stripe_publishable_key"
     }
   }
 }