Repository: javaniecampbell/ecommerce-starter
Branch: main
Commit: 4c23f15e81f5
Files: 6
Total size: 3.5 KB

Directory structure:
gitextract_tlhd_kyt/

├── .docker/
│   └── .gitkeep
├── .gitignore
├── .k8s/
│   └── .gitkeep
├── documentation/
│   ├── Step 1 - Netlify Identity Installion Guide.md
│   └── Step 2 - Integrating Stripe Guide.md
└── layot.txt

================================================
FILE CONTENTS
================================================

================================================
FILE: .docker/.gitkeep
================================================


================================================
FILE: .gitignore
================================================
ecommerce-frontend/
editor/

================================================
FILE: .k8s/.gitkeep
================================================


================================================
FILE: documentation/Step 1 - Netlify Identity Installion Guide.md
================================================
## Netlify Identity Setup

### Setup

```javascript
yarn add react-netlify-identity react-netlify-identity-widget @reach/dialog @reach/tabs @reach/visually-hidden
```

Add provider to `gatsby-ssr.js`

```javascript
import React from "react";
import { IdentityContextProvider } from "react-netlify-identity-widget";
const url =
  process.env.REACT_APP_NETLIFY_IDENTITY_URL ||
  "https://ddow-ecommerce.netlify.app";
if (!url)
  throw new Error(`process.env.REACT_APP_NETLIFY_IDENTITY_URL is blank2`);
export const wrapRootElement = ({ element }) => {
  return <IdentityContextProvider url={url}>{element}</IdentityContextProvider>;
};
```

Add provider to `gatsby-browser.js`

```javascript
export { wrapRootElement } from "./gatsby-ssr";
```

Add Identity modal to `page.js`

```javascript
import React, { useState } from "react";
import { Link } from "gatsby";
// Step 1 - Adding Netlify Identity
import {
  IdentityModal,
  useIdentityContext,
} from "react-netlify-identity-widget";

import Layout from "../components/layout";
import Image from "../components/image";
import SEO from "../components/seo";

const IndexPage = () => {
  const identity = useIdentityContext();
  const [dialog, setDialog] = useState(false);
  return (
    <Layout>
      <SEO title="Login" />
      {identity && identity.isLoggedIn && (
        <pre>{JSON.stringify(identity, null, 2)}</pre>
      )}

      {!dialog && <button onClick={() => setDialog(true)}>Login</button>}
      <IdentityModal
        showDialog={dialog}
        onCloseDialog={() => setDialog(false)}
        onLogin={(user) => console.log(`Hello `, user?.user_metadata)}
        onSignup={(user) => console.log(`Hello `, user?.user_metadata)}
        onLogout={() => console.log("bye")}
      />
    </Layout>
  );
};

export default IndexPage;
```

```bash
git config user.email "1676496+javaniecampbell@users.noreply.github.com"
```

### References

https://github.com/sw-yx/gatsby-plugin-netlify-identity


================================================
FILE: documentation/Step 2 - Integrating Stripe Guide.md
================================================
## Stripe Integration Guide

1. Need to create a list of products that's not client side (i.e. database, a JSON file, etc)
2. Cannot trust data sent from the client, because it can be corrupted or tampered with.
3. Buy Button will trigger a Netlify Function, that will be called to get the price, etc.
4. The Function will then create a stripe checkout session
5. Return the session back to the client
6. Stripe JS redirects using the session to the Stripe Checkout Service

### Step 1: Install the packages and create `functions/`

#### Create directory

Make the `functions/` directory at the root of your client application

```bash
mkdir functions
```

Then initialize the `functions/` directory as follows:

```bash
npm init -y
```

OR

```bash
yarn init -y
```

Then install your packages in the `functions/` directory so that they manage it's own packages and reducing build errors at deployment:

```bash
npm install stripe node-fetch --prefix=functions
```

OR

```bash
yarn add stripe node-fetch --cwd functions
```


================================================
FILE: layot.txt
================================================

    Directory: C:\Users\jc601810\workspace\DDoW-Projects\ecommerce-starter

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----           7/21/2022  7:46 PM                .docker
d----           7/21/2022  7:47 PM                .k8s
d----            1/2/2021 11:14 AM                documentation
d----           1/15/2022 11:43 AM                ecommerce-frontend
d----            2/8/2021  9:33 PM                editor
-a---           7/21/2022  7:47 PM             28 .gitignore
-a---            7/2/2023 11:20 PM              0 layot.txt