dayhaysoos

import React, { useState } from "react";

// ui programming
//

// gif: https://share.getcloudapp.com/BluYJZjy

function Challenge() {
  const [numberInput, setNumberInput] = useState("");

dayhaysoos

# Create your own hooks library

When I first started learning how to code, I never considered the possibility of being an open-source maintainer. I didn't think I'd be smart enough to provide something truly valuable, I also wasn't in a position where I could afford to spend time on anything like that for free. Thanks to GitHub sponsors, the latter isn't so much of an issue anymore! 

There are lots of great reasons to kick off and maintain your own library, but I'd like to lead with the number one reason how I ended up doing it "by accident".

I maintain a library called [use-shopping-cart](https://useshoppingcart.com), a Stripe powered, React Hooks library that handles your shopping cart state and logic. I once wanted to launch a swag store and figured I'd roll my own e-commece experience. Little did I know how much work that would entail. I was so frustrated with it that I told myself I never want to write out this logic ever again. I did *not* expect to be in a place where I'm getting sponsorships, and p

dayhaysoos

import sucrase from '@rollup/plugin-sucrase'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import url from '@rollup/plugin-url'

import pkg from './package.json'

export default [
  {
    input: 'src/index.js',

dayhaysoos

import { createSlice } from '@reduxjs/toolkit'
import { createEntry, updateEntry, removeEntry, updateQuantity } from './Entry'
import { isClient } from '../utilities/SSR'
import { checkoutHandler } from '../utilities/old-utils'

export const cartInitialState = {
  mode: 'checkout-session',
  stripe: null,
  currency: 'USD',
  language: isClient ? navigator.language : 'en-US',

dayhaysoos

import { formatCurrencyString } from './store'
import { v4 as uuidv4 } from 'uuid'

function Entry({
  product,
  quantity,
  currency,
  language,
  price_metadata,
  product_metadata

dayhaysoos

Nick's SA Take home project

Spinning it up:

• After cloning this repo, run: npm install

  • Add a .env file with your Stripe API secret key, there's a .env.example file for you to refer to. Feel free to change that file name to .env and add your Stripe API secret key there.

npm start

dayhaysoos

require("dotenv").config({ path: "../.env" });

const stripe = require("stripe")(process.env.STRIPE_API_SECRET);
const BASE_URL = process.env.URL;

exports.handler = async () => {
  const account = await stripe.accounts.create({
    type: "standard",
  });

dayhaysoos

       <form id="payment-form" action="/charge?itemId={{itemId}}" method="POST">
          <label for="Name">Name</label>
          <input type="name" class="form-control" id="name" name="name" placeholder="Nick DeJesus">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]">
          <label for="address">Address</label>
          <input type="address" class="form-control" id="address" name="address" placeholder="11 Main Street">
          <label for="city">City</label>
          <input type="city" class="form-control" id="city" name="city" placeholder="Boston">
          <label for="state">State</label>

dayhaysoos

app.post("/charge", async function (req, res) {
  const {
    email,
    stripeToken,
    address,
    name,
    city,
    state,
    zip,
    country,

dayhaysoos

(function () {
  "use-strict";

  var style = {
    base: {
      // Add your base input styles here. For example:
      fontSize: "16px",
      color: "#32325d",
    },
  };