Leo Chan leojbchan
leojbchan
/ CardPayment.tsx
Created
July 28, 2021 13:17
Headless WooCommerce & Next.js: Example of Card Element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| CardNumberElement, | |
| CardExpiryElement, | |
| CardCvcElement, | |
| useElements | |
| } from "@stripe/react-stripe-js"; | |
| const CardPayment = () => { | |
| const elements = useElements(); |
leojbchan
/ create-payment-intent.ts
Created
July 28, 2021 12:01
Headless WooCommerce & Next.js: Example of API to Create Stripe Payment Intent
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import type { NextApiRequest, NextApiResponse } from "next"; | |
| import { LineItem } from "../../utils/types/wooCommerceTypes"; | |
| import { retrieveProductById } from "../../utils/wooCommerceApi"; | |
| import { PaymentIntent } from "../../utils/types/stripeTypes"; | |
| const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY); | |
| // retrieve product price from WooCommerce based on ID and multiply by quantity | |
| const getProductTotal = async (lineItem: LineItem) => { | |
| let product: LineItem = await retrieveProductById( | |
| lineItem.product_id.toString() |
leojbchan
/ CardPayment.tsx
Last active
July 28, 2021 11:48
Headless WooCommerce & Next.js: Example of Stripe Element Components
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| CardNumberElement, | |
| CardExpiryElement, | |
| CardCvcElement, | |
| } from "@stripe/react-stripe-js"; | |
| const CardPayment = () => { | |
| return ( | |
| <form> | |
| <CardNumberElement |
leojbchan
/ checkout.tsx
Created
July 28, 2021 11:32
Headless WooCommerce & Next.js: Example of Stripe Element Provider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Elements } from "@stripe/react-stripe-js"; | |
| import { loadStripe } from "@stripe/stripe-js"; | |
| import { CardPayment } from "../containers"; | |
| const stripePromise = loadStripe( | |
| `${process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}` | |
| ); | |
| export default function Checkout() { | |
| return ( |
leojbchan
/ CartItem.tsx
Created
July 26, 2021 16:20
Headless WooCommerce & Next.js: Example of Cart Item
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import styled from "styled-components"; | |
| import { CartQty } from "../../components"; | |
| import { useAppDispatch } from "../../store/hooks"; | |
| import { | |
| decrementLineItemQuantity, | |
| addLineItem, | |
| removeLineItem, | |
| } from "../../store/slices/cartSlice"; | |
| import { LineItem } from "../../utils/types/wooCommerceTypes"; |
leojbchan
/ cartSlice.ts
Created
July 23, 2021 15:00
Headless WooCommerce & Next.js: Full Example of Cart Slice
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createSlice, PayloadAction } from "@reduxjs/toolkit"; | |
| import { LineItem } from "../../utils/types/wooCommerceTypes"; | |
| // Define a type for the slice state | |
| interface CartState { | |
| lineItems: LineItem[]; | |
| } | |
| // Define the initial state using that type | |
| const initialState: CartState = { |
leojbchan
/ cartSlice.ts
Created
July 23, 2021 14:46
Headless WooCommerce & Next.js: Example of Slice with Reducer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createSlice, PayloadAction } from "@reduxjs/toolkit"; | |
| import { LineItem } from "../../utils/types/wooCommerceTypes"; | |
| // Define a type for the slice state | |
| interface CartState { | |
| lineItems: LineItem[]; | |
| } | |
| // Define the initial state using that type | |
| const initialState: CartState = { |
leojbchan
/ cartSlice.ts
Created
July 23, 2021 14:13
Headless WooCommerce & Next.js: Example of Case Reducer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const addLineItemReducer = ( | |
| state: CartState, | |
| action: PayloadAction<LineItem> | |
| ) => { | |
| const index = state.lineItems.findIndex( | |
| (lineItem) => lineItem.product_id === action.payload.product_id | |
| ); | |
| // if index === -1, id is not in lineItems array | |
| if (index === -1) { | |
| // add line item to lineItems array |
leojbchan
/ cartSlice.ts
Created
July 23, 2021 13:02
Headless WooCommerce & Next.js: Example Cart Slice Limited
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createSlice, PayloadAction } from "@reduxjs/toolkit"; | |
| import { LineItem } from "../../utils/types/wooCommerceTypes"; | |
| // Define a type for the slice state | |
| interface CartState { | |
| lineItems: LineItem[]; | |
| } | |
| // Define the initial state using that type | |
| const initialState: CartState = { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; | |
| import type { RootState, AppDispatch } from "./store"; | |
| // GENERAL NOTE // | |
| // While it's possible to import the RootState and AppDispatch types into each component, it's better to create typed versions of the useDispatch and useSelector hooks for usage in your application. // | |
| // Use throughout your app instead of plain `useDispatch` and `useSelector` | |
| export const useAppDispatch = () => useDispatch<AppDispatch>(); | |
| export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; |
NewerOlder