stripe initial impl

templates/.github/workflows/ci.yml

@@ -18,9 +18,9 @@ jobs:
         yarn
         yarn test --watchAll=false
     - if: env.AWS_ACCESS_KEY_ID == null
-          run: |
-            echo "AWS Credentials not found, This is expected for the first run as the repo is provisioned then secrets are injected at a later step."
-            exit 1
+      run: |
+        echo "AWS Credentials not found, This is expected for the first run as the repo is provisioned then secrets are injected at a later step."
+        exit 1
   build:
       needs: unit-test
       runs-on: ubuntu-latest

templates/README.md

@@ -64,3 +64,21 @@ REACT_APP_CONFIG=staging yarn build
 
 serve -s build
 ```
+
+<%if eq (index .Params `billingEnabled`) "yes" %>
+## Billing example
+A subscription and checkout example using [Stripe](https://stripe.com), coupled with the backend repository to provide an end-to-end checkout example for you to customize. We also setup a webhook and an endpoint in the backend to receive webhook when events occur.
+
+### Setup
+The following example content has been set up in Stripe:
+- 1 product
+- 3 prices(subscriptions) [annual, monthly, daily]
+- 1 webhook [`charge.failed`, `charge.succeeded`, `customer.created`, `subscription_schedule.created`]
+See link for available webhooks: https://stripe.com/docs/api/webhook_endpoints/create?lang=curl#create_webhook_endpoint-enabled_events
+
+this is setup using the script [scripts/stripe-example-setup.sh](scripts/stripe-example-setup.sh)
+
+### Deployment
+The deployment requires the publishable key in the build, per environment you will have to provide `stripePublishableKey` in `config/<env>.json` [`production`/`staging`/`development`], then when CI builds it will create a bundle with the Stripe publishable API key
+
+<% end %>

templates/package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@oryd/kratos-client": "^0.5.3-alpha.1",
-    "@testing-library/jest-dom": "^4.2.4",
+    <%if eq (index .Params `userAuth`) "yes" %>"@oryd/kratos-client": "^0.5.3-alpha.1",
+    <% end %><%if eq (index .Params `billingEnabled`) "yes" %>"@stripe/react-stripe-js": "^1.4.0",
+    "@stripe/stripe-js": "^1.13.2",
+    <% end %>"@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",

templates/src/App.js

@@ -5,7 +5,9 @@ import Home from './pages/Home'
 <%if eq (index .Params `userAuth`) "yes" %> 
 import Auth from './pages/Auth'
 import Logout from './pages/Logout'<% end %>
-
+<%if eq (index .Params `billingEnabled`) "yes" %> 
+import BillingRoutes from './pages/Billing/routes'
+<% end %>
 import Dashboard from './pages/Dashboard'
 import PageNotFound from './pages/PageNotFound'
 
@@ -57,7 +59,10 @@ function App() {
             <Route path="/auth/*">
               <AuthRoutes/>
             </Route>
-            <Route path="*">
+            <%if eq (index .Params `billingEnabled`) "yes" %><Route exact path="/billing/*">
+                <BillingRoutes />
+            </Route>
+            <% end %><Route path="*">
               <PageNotFound />
             </Route>
           </Switch>
@@ -73,7 +78,10 @@ function App() {
           <Route path="/dashboard">
             <Dashboard />
           </Route>
-          <Route path="*">
+          <%if eq (index .Params `billingEnabled`) "yes" %><Route exact path="/billing/*">
+            <BillingRoutes />
+          </Route>
+          <% end %><Route path="*">
             <PageNotFound />
           </Route>
         </Switch>

templates/src/components/Navigation.js

@@ -14,7 +14,10 @@ function AuthenticatedLinks() {
       <li>
         <Link to="/auth/profile">User Settings</Link>
       </li>
-      <li>
+      <%if eq (index .Params `billingEnabled`) "yes" %><li>
+        <Link to="/billing/products">Billing</Link>
+      </li>
+      <% end %><li>
         <Link to="/auth/logout">Logout</Link>
       </li>
     </React.Fragment>
@@ -57,7 +60,10 @@ function NavLinks() {
     <li>
       <Link to="/dashboard">Dashboard</Link>
     </li>
-  </ul>
+    <%if eq (index .Params `billingEnabled`) "yes" %><li>
+      <Link to="/billing/products">Billing</Link>
+    </li>
+  <% end %></ul>
 }
 <% end %>
 function Navigation() {

templates/src/config/development.json

@@ -1,5 +1,6 @@
 {
     "appName": "<% .Name %>",
     "environment": "development",
-    "backendURL": "http://localhost:8080"
+    "backendURL": "http://localhost:8080"<%if eq (index .Params `billingEnabled`) "yes" %>,
+    "stripePublishableKey": "<% index .Params `stagingStripePublicApiKey` %>"<% end %>
 }

templates/src/config/production.json

@@ -1,5 +1,6 @@
 {
     "appName": "<% .Name %>",
     "environment": "production",
-    "backendURL": "https://<% index .Params `productionBackendSubdomain` %><% index .Params `productionHostRoot` %>"
+    "backendURL": "https://<% index .Params `productionBackendSubdomain` %><% index .Params `productionHostRoot` %>"<%if eq (index .Params `billingEnabled`) "yes" %>,
+    "stripePublishableKey": "<% index .Params `productionStripePublicApiKey` %>"<% end %>
 }

templates/src/config/staging.json

@@ -1,5 +1,6 @@
 {
     "appName": "<% .Name %>",
     "environment": "staging",
-    "backendURL": "https://<% index .Params `stagingBackendSubdomain` %><% index .Params `stagingHostRoot` %>"
+    "backendURL": "https://<% index .Params `stagingBackendSubdomain` %><% index .Params `stagingHostRoot` %>"<%if eq (index .Params `billingEnabled`) "yes" %>,
+    "stripePublishableKey": "<% index .Params `stagingStripePublicApiKey` %>"<% end %>
 }

templates/src/pages/Billing/Confirmation.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import Card from '../../components/Card'
+
+function Confirmation() {
+  const queryString = decodeURIComponent(new URL(window.location).searchParams.toString());
+  const queryParams = queryString.split("&");
+  return (
+    <div className="billing-container content-container">
+      <Card header="Example Subscription Results">
+        { queryParams.map((param) => (<p>{ param }</p>)) }
+      </Card>
+    </div>
+  )
+}
+
+export default Confirmation

templates/src/pages/Billing/Plans.css

@@ -0,0 +1,47 @@
+.billing-container .card {
+  min-width: auto;
+  max-width: 80%;
+}
+
+.products {
+  text-align: center;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.productInfo, .billing-container button {
+  background: #f3f3ff;
+  border: 1px #ccc solid;
+  cursor: pointer;
+  padding: 3%;
+}
+
+.productName {
+  font-weight: bold;
+}
+
+.productPrice {
+  margin-top: 1rem;
+}
+
+.productInfo {
+  min-width: 150px;
+  max-width: 250px;
+  margin: 1%;
+}
+
+.productInfo div:not(:last-child) {
+  padding-bottom: 0.7rem;
+  margin-bottom: 0.7rem;
+  border-bottom: 1px solid grey;
+}
+
+.billing-container button{
+  font-weight: bold;
+  padding: 20px;
+  width: 25%;
+  margin: 30px auto 0;
+}

templates/src/pages/Billing/Plans.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react'
+import config from '../../config';
+import './Plans.css'
+
+import Card from '../../components/Card'
+import { useStripe } from '@stripe/react-stripe-js';
+
+function Plans() {
+  const stripe = useStripe()
+  const [data, setData] = useState({
+    isLoading: true,
+    products: [],
+  })
+  const [selected, setSelected] = useState(null);
+
+  const getProducts = async() =>  {
+    const uri = `${config.backendURL}/billing/products`;
+    const resp = await fetch(uri,{ credentials : "include" });
+    if (resp.status !== 200 ) {
+      // error case, should show error
+      return setData({ isLoading: false, products: [] });
+    }
+    const data = await resp.json();
+    setData({ isLoading: false, products: data });
+  };
+
+  const checkout = async(data) =>  {
+    if ( !data.price_id ) return null;
+    const uri = `${config.backendURL}/billing/checkout?price_id=${data.price_id}`;
+    const resp = await fetch(uri, {
+      credentials: "include",
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    const { sessionId } = await resp.json();
+    stripe.redirectToCheckout({ sessionId });
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    checkout({ price_id: selected });
+    return false;
+  };
+
+  const Product = ({ product }) => (
+    <label className="productInfo">
+        <div className="productName">
+          <input
+            name="plan"
+            type="radio"
+            checked={ selected === product.id }
+            value={ product.id }
+            onChange={ (e) => setSelected(e.target.value) }
+          />
+          { product.nickname }
+        </div>
+        <div className="productDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+        <div className="productPrice">{ product.price }</div>
+    </label>)
+
+  const Products = ({ products }) => {
+    if (products.length === 0) {
+      return <div>No products</div>
+    }
+    return (
+    <form onSubmit={ handleSubmit } action="#">
+      <div className="products">
+        { products.map(i => <Product key={ i.id } product={ i } />) }
+      </div>
+      <button>Subscribe</button>
+    </form>
+  )}
+
+  useEffect(() => {
+    getProducts();
+  }, []);
+
+  return (
+    <div className="billing-container content-container">
+      <Card header="Subscription Example">
+        { data.isLoading ?
+          <p>Loading</p> :
+          <Products products={ data.products }></Products>
+        }
+      </Card>
+    </div>
+  )
+}
+
+export default Plans

templates/src/pages/Billing/routes.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { BrowserRouter as Switch, Route } from 'react-router-dom'
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements} from '@stripe/react-stripe-js';
+
+import config from '../../config';
+import Plans from './Plans'
+import Confirmation from './Confirmation'
+
+const stripePromise = loadStripe(config.stripePublishableKey);
+
+function Billing () {
+  return (
+    <Elements stripe={ stripePromise }>
+      <Switch>
+        <Route path="/billing/products" component={ Plans } />
+        <Route path="/billing/confirmation*" component={ Confirmation } />
+      </Switch>
+    </Elements>
+  )
+}
+
+export default Billing

zero-module.yml

@@ -119,7 +119,35 @@ parameters:
     - action: KeyMatchCondition
       matchField: CIVendor
       whenValue: "circleci"
-
+  - field: billingEnabled
+    label: "Provides a subscription example using stripe in backend and frontend repository"
+    options:
+      "yes": "Yes"
+      "no": "No"
+  - field: stagingStripePublicApiKey
+    label: "Staging Stripe public api key, used for frontend repository (Recommended: using sandbox key while setting up)"
+    conditions:
+    - action: KeyMatchCondition
+      matchField: billingEnabled
+      whenValue: "yes"
+  - field: stagingStripeSecretApiKey
+    label: "Staging Stripe secret api key, used for backend repository (Recommended: using sandbox key while setting up)"
+    conditions:
+    - action: KeyMatchCondition
+      matchField: billingEnabled
+      whenValue: "yes"
+  - field: productionStripePublicApiKey
+    label: "Production Stripe public api key, used for frontend repository (Recommended: using sandbox key while setting up)"
+    conditions:
+    - action: KeyMatchCondition
+      matchField: billingEnabled
+      whenValue: "yes"
+  - field: productionStripeSecretApiKey
+    label: "Production Stripe secret api key, used for backend repository (Recommended: using sandbox key while setting up)"
+    conditions:
+    - action: KeyMatchCondition
+      matchField: billingEnabled
+      whenValue: "yes"
 conditions:
   - action: ignoreFile
     matchField: userAuth
@@ -143,3 +171,8 @@ conditions:
     whenValue: "github-actions"
     data:
     - .circleci/
+  - action: ignoreFile
+    matchField: CIVendor
+    whenValue: "github-actions"
+    data:
+    - src/pages/Billing