Merge pull request #4 from danielballoch/add-stripe

Add local postgres db

Author: danielballoch

components/CardSectionStyles.css

@@ -0,0 +1,33 @@
+/**
+* Shows how you can use CSS to style your Element's container.
+* These classes are added to your Stripe Element by default.
+* You can override these classNames by using the options passed
+* to the CardElement component.
+* https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-classes
+*/
+
+.StripeElement {
+    height: 40px;
+    padding: 10px 12px;
+    width: 100%;
+    color: #32325d;
+    background-color: white;
+    border: 1px solid transparent;
+    border-radius: 4px;
+  
+    box-shadow: 0 1px 3px 0 #e6ebf1;
+    -webkit-transition: box-shadow 150ms ease;
+    transition: box-shadow 150ms ease;
+  }
+  
+  .StripeElement--focus {
+    box-shadow: 0 1px 3px 0 #cfd7df;
+  }
+  
+  .StripeElement--invalid {
+    border-color: #fa755a;
+  }
+  
+  .StripeElement--webkit-autofill {
+    background-color: #fefde5 !important;
+  }

components/CardSelection.js

@@ -0,0 +1,64 @@
+/**
+* Use the CSS tab above to style your Element's container.
+*/
+import React from 'react';
+import {CardElement} from '@stripe/react-stripe-js';
+// import './CardSectionStyles.css'
+
+const CARD_ELEMENT_OPTIONS = {
+  style: {
+    base: {
+      color: "#32325d",
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+      fontSmoothing: "antialiased",
+      fontSize: "16px",
+      "::placeholder": {
+        color: "#aab7c4",
+      },
+    },
+    invalid: {
+      color: "#fa755a",
+      iconColor: "#fa755a",
+    },
+  },
+};
+
+function CardSection() {
+  return (
+      <div>
+        <label>
+        Card details
+        <CardElement options={CARD_ELEMENT_OPTIONS} />
+        </label>
+        <style jsx global>{`
+        .StripeElement {
+            height: 40px;
+            padding: 10px 12px;
+            width: 100%;
+            color: #32325d;
+            background-color: white;
+            border: 1px solid transparent;
+            border-radius: 4px;
+        
+            box-shadow: 0 1px 3px 0 #e6ebf1;
+            -webkit-transition: box-shadow 150ms ease;
+            transition: box-shadow 150ms ease;
+        }
+        
+        .StripeElement--focus {
+            box-shadow: 0 1px 3px 0 #cfd7df;
+        }
+        
+        .StripeElement--invalid {
+            border-color: #fa755a;
+        }
+        
+        .StripeElement--webkit-autofill {
+            background-color: #fefde5 !important;
+        }
+        `}</style>
+    </div>
+  );
+};
+
+export default CardSection;

components/CheckoutForm.css

@@ -0,0 +1,15 @@
+.sr-combo-inputs {
+    margin: 20px 0;
+  }
+  
+  .sr-input {
+    font-size: 16px;
+  }
+  
+  .sr-card-element {
+    padding-top: 12px;
+  }
+  
+  .btn {
+    font-size: 16px;
+  }

components/CheckoutForm.js

@@ -0,0 +1,181 @@
+import React, { useEffect, useState } from "react";
+import {useStripe, useElements, CardElement} from '@stripe/react-stripe-js';
+import getUserLocale from 'get-user-locale';
+// import "./CheckoutForm.css";
+import CardSection from './CardSelection';
+
+import api from "../lib/stripe-api";
+
+
+export default function CheckoutForm() {
+
+  const [amount, setAmount] = useState(0);
+  const [currency, setCurrency] = useState("");
+  const [clientSecret, setClientSecret] = useState(null);
+  const [error, setError] = useState(null);
+  const [metadata, setMetadata] = useState(null);
+  const [succeeded, setSucceeded] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const userLocale = getUserLocale();
+
+  useEffect(() => {
+    // Step 1: Fetch product details such as amount and currency from
+    // API to make sure it can't be tampered with in the client.
+    api.getProductDetails().then(productDetails => {
+      setAmount(productDetails.amount / 100);
+      setCurrency(productDetails.currency);
+    });
+
+    // Step 2: Create PaymentIntent over Stripe API
+    api
+      .createPaymentIntent({
+        payment_method_types: ["card"]
+      })
+      .then(clientSecret => {
+        setClientSecret(clientSecret);
+      })
+      .catch(err => {
+        setError(err.message);
+      });
+  }, []);
+
+
+  const handleSubmit = async ev => {
+      // We don't want to let default form submission happen here,
+    // which would refresh the page.
+    ev.preventDefault();
+    setProcessing(true);
+
+    // Step 3: Use clientSecret from PaymentIntent and the CardElement
+    // to confirm payment with stripe.confirmCardPayment()
+    const payload = await stripe.confirmCardPayment(clientSecret, {
+      payment_method: {
+        card: elements.getElement(CardElement),
+        billing_details: {
+          name: ev.target.name.value
+        }
+      }
+    });
+
+    if (payload.error) {
+        setError(`Payment failed: ${payload.error.message}`);
+        setProcessing(false);
+        console.log("[error]", payload.error);
+      } else {
+        setError(null);
+        setSucceeded(true);
+        setProcessing(false);
+        setMetadata(payload.paymentIntent);
+        console.log("[PaymentIntent]", payload.paymentIntent);
+      }
+    };
+
+
+    const renderSuccess = () => {
+        return (
+          <div className="sr-field-success message">
+            <h1>Your test payment succeeded</h1>
+            <p>View PaymentIntent response:</p>
+            <pre className="sr-callout">
+              <code>{JSON.stringify(metadata, null, 2)}</code>
+            </pre>
+          </div>
+        );
+      };
+    
+      const renderForm = () => {
+        const options = {
+          style: {
+            base: {
+              color: "#32325d",
+              fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+              fontSmoothing: "antialiased",
+              fontSize: "16px",
+              "::placeholder": {
+                color: "#aab7c4"
+              }
+            },
+            invalid: {
+              color: "#fa755a",
+              iconColor: "#fa755a"
+            }
+          }
+        };
+    
+        return (
+            <div>
+          <form onSubmit={handleSubmit}>
+            <h1>
+              {currency.toLocaleUpperCase()}{" "}
+              {/* {amount} */}
+              {/* {userLocale} */}
+              {/* replace navigator.language w/ userLocale, that way numbers are in the right language */}
+              {amount.toLocaleString(userLocale, {
+                minimumFractionDigits: 2
+              })}{" "}
+            </h1>
+            <h4>Pre-order the Pasha package</h4>
+    
+            <div className="sr-combo-inputs">
+              <div className="sr-combo-inputs-row">
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  placeholder="Name"
+                  autoComplete="cardholder"
+                  className="sr-input"
+                />
+              </div>
+    
+              <div className="sr-combo-inputs-row">
+                <CardElement
+                  className="sr-input sr-card-element"
+                  options={options}
+                />
+              </div>
+            </div>
+    
+            {error && <div className="message sr-field-error">{error}</div>}
+    
+            <button
+              className="btn"
+              disabled={processing || !clientSecret || !stripe}
+            >
+              {processing ? "Processing…" : "Pay"}
+            </button>
+          </form>
+            <style jsx global>{`
+                .sr-combo-inputs {
+                    margin: 20px 0;
+                }
+                
+                .sr-input {
+                    font-size: 16px;
+                }
+                
+                .sr-card-element {
+                    padding-top: 12px;
+                }
+                
+                .btn {
+                    font-size: 16px;
+                }
+            `}</style>
+          </div>
+        );
+      };
+    
+      return (
+        <div className="checkout-form">
+          <div className="sr-payment-form">
+            <div className="sr-form-row" />
+            {succeeded ? renderSuccess() : renderForm()}
+          </div>
+        </div>
+      );
+      
+    }

components/Layout.js

@@ -0,0 +1,19 @@
+import Head from 'next/head'
+import Navbar from './Navbar.js'
+// import Footer from './Footer.js'
+
+function Layout(props) {
+  return (
+    <div>
+      <Head>
+        <title>Shopping Cart</title>
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossOrigin="anonymous"/>
+      </Head>
+      <Navbar/>
+       <div className="container-fluid">{props.children}</div>
+      {/* <Footer/> */}
+    </div>
+  )
+}
+export default Layout

components/Navbar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useContext } from 'react';
+import CartContext from './cartContext';
+import Link from 'next/link';
+
+const Navbar = (props) => {
+  const { cart } = useContext(CartContext);
+  return (
+    <nav className="navbar navbar-light bg-light fixed-top">
+      <h3><Link href="/">Summit</Link>Chasing</h3>
+      <a href="/cart" className="btn btn-outline-primary my-2 my-sm-0">Cart {cart.length}</a>
+    </nav>
+  );
+};
+export default Navbar;

components/cartContext.js

@@ -0,0 +1,5 @@
+import {createContext} from 'react';
+
+const CartContext = createContext();
+
+export default CartContext;

lib/api.js

@@ -63,4 +63,4 @@ export async function getAllProductsForHome(preview) {
   'image': defaultProductVariant.images[0].asset->url,
   'images': defaultProductVariant.images,
   'price': defaultProductVariant.price,
-`
+`

lib/database.js

@@ -0,0 +1,17 @@
+import createClient from 'serverless-pg';
+
+const dbClient = createClient({
+  config: {
+    host: process.env.HOST,
+    port: process.env.PORT,
+    user: process.env.USERNAME,
+    password: process.env.PASSWORD,
+    database: process.env.NAME,
+  },
+  onConnect: () => {console.log('connected to database')},
+  onClose: () => {console.log('disconnected from database')},
+  beforeQuery: () => {},
+  afterQuery: () => {},
+});
+
+export default dbClient;