├── project05_2checkout ├── .prettierrc ├── .prettierignore ├── static │ ├── favicon.ico │ └── 2checkoutLoad.js ├── gatsby-config.js ├── LICENSE ├── package.json ├── README.md ├── .gitignore └── src │ └── pages │ └── index.js ├── project02_gatsby_snipcart ├── .prettierignore ├── .prettierrc ├── .netlify │ ├── state.json │ └── functions │ │ └── payment-hook.zip ├── netlify.toml ├── static │ └── favicon.ico ├── functions │ └── payment-hook │ │ └── payment-hook.js ├── gatsby-config.js ├── LICENSE ├── README.md ├── package.json ├── src │ └── pages │ │ ├── index.js │ │ └── products.js └── .gitignore ├── project00_gatsby_stripe_checkout ├── .prettierrc ├── .prettierignore ├── netlify.toml ├── static │ └── favicon.ico ├── src │ └── pages │ │ ├── payment-success.js │ │ ├── checkout-session.js │ │ ├── index.js │ │ └── productlist.js ├── gatsby-config.js ├── LICENSE ├── package.json ├── functions │ └── checkout │ │ └── checkout.js ├── .gitignore └── README.md ├── project03_gatsby_use_shopping_cart ├── .prettierrc ├── src │ ├── components │ │ ├── cartstatus.css │ │ ├── Product.js │ │ └── CartStatus.js │ ├── pages │ │ ├── payment-success.js │ │ ├── index.js │ │ └── cart.js │ └── cart-provider │ │ └── wrap-root-element.js ├── .prettierignore ├── gatsby-browser.js ├── gatsby-ssr.js ├── static │ └── favicon.ico ├── gatsby-config.js ├── README.md ├── LICENSE ├── package.json └── .gitignore ├── project01_gatsby_stripe_payment_intents ├── .prettierrc ├── .prettierignore ├── src │ ├── components │ │ ├── checkoutForm.css │ │ └── CheckoutForm.js │ └── pages │ │ └── index.js ├── netlify.toml ├── static │ └── favicon.ico ├── gatsby-config.js ├── functions │ ├── success-payment │ │ └── success-payment.js │ └── checkout │ │ └── checkout.js ├── LICENSE ├── package.json ├── .gitignore └── README.md ├── project04_gatsby_shopify_graphql ├── usingBuySDK │ ├── .prettierrc │ ├── .prettierignore │ ├── static │ │ └── favicon.ico │ ├── gatsby-config.js │ ├── LICENSE │ ├── package.json │ ├── .gitignore │ ├── src │ │ └── pages │ │ │ ├── cart.js │ │ │ └── index.js │ └── README.md ├── usingGraphql │ ├── .prettierignore │ ├── .prettierrc │ ├── gatsby-ssr.js │ ├── gatsby-browser.js │ ├── static │ │ └── favicon.ico │ ├── src │ │ ├── apollo │ │ │ ├── wrap-root-element.js │ │ │ └── client.js │ │ └── pages │ │ │ └── index.js │ ├── gatsby-config.js │ ├── LICENSE │ ├── package.json │ ├── .gitignore │ └── README.md └── README.md ├── project06_payfast └── README.md ├── LICENSE └── README.md /project05_2checkout/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /project05_2checkout/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "46b83437-c9be-428d-b38b-925fbbdcc3ea" 3 | } -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/src/components/cartstatus.css: -------------------------------------------------------------------------------- 1 | .statusMargin { 2 | margin : 10px; 3 | } -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command="gatsby build" 3 | functions="functions" -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/src/components/checkoutForm.css: -------------------------------------------------------------------------------- 1 | .StripeElement { 2 | width: 400px; 3 | } -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | export { wrapRootElement } from './src/cart-provider/wrap-root-element' -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | export { wrapRootElement } from './src/cart-provider/wrap-root-element' -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | export { wrapRootElement } from './src/apollo/wrap-root-element' -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | export { wrapRootElement } from './src/apollo/wrap-root-element' -------------------------------------------------------------------------------- /project02_gatsby_snipcart/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command="gatsby build" 3 | publish="public" 4 | functions="functions" -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command="gatsby build" 3 | publish="public" 4 | functions="functions" -------------------------------------------------------------------------------- /project05_2checkout/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project05_2checkout/static/favicon.ico -------------------------------------------------------------------------------- /project02_gatsby_snipcart/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project02_gatsby_snipcart/static/favicon.ico -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project00_gatsby_stripe_checkout/static/favicon.ico -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project03_gatsby_use_shopping_cart/static/favicon.ico -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project01_gatsby_stripe_payment_intents/static/favicon.ico -------------------------------------------------------------------------------- /project02_gatsby_snipcart/.netlify/functions/payment-hook.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project02_gatsby_snipcart/.netlify/functions/payment-hook.zip -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project04_gatsby_shopify_graphql/usingBuySDK/static/favicon.ico -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panacloud-modern-global-apps/jamstack-ecommerce/HEAD/project04_gatsby_shopify_graphql/usingGraphql/static/favicon.ico -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/src/pages/payment-success.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | export default function PaymentSuccess() { 4 | 5 | 6 | return ( 7 |
8 |
Paymetn Success
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.com/docs/gatsby-config/ 5 | */ 6 | 7 | module.exports = { 8 | /* Your site config here */ 9 | plugins: [], 10 | } 11 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.com/docs/gatsby-config/ 5 | */ 6 | 7 | module.exports = { 8 | /* Your site config here */ 9 | plugins: [], 10 | } 11 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/src/apollo/wrap-root-element.js: -------------------------------------------------------------------------------- 1 | import { ApolloProvider } from "@apollo/client"; 2 | import { client } from "./client"; 3 | import React from 'react' 4 | 5 | export const wrapRootElement = ({element})=>( 6 | 7 | {element} 8 | 9 | ) -------------------------------------------------------------------------------- /project06_payfast/README.md: -------------------------------------------------------------------------------- 1 | PayFast is a Pakistani payment gateway startup. It [accepts digital payments](https://apps.net.pk/payfast-2/) from bank accounts, mobile wallets and UnionPay scheme cards from customers. 2 | 3 | [Developer Docs](https://apps.net.pk/docs/#preface) 4 | 5 | We will just cover the theory of making Payments with PayFast. -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/src/pages/payment-success.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react" 2 | import { useShoppingCart } from "use-shopping-cart" 3 | export default function Product({product}) { 4 | 5 | const {clearCart} = useShoppingCart(); 6 | useEffect(()=>{ 7 | clearCart(); 8 | },[]) 9 | 10 | return ( 11 |
12 | Payment Successful 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /project05_2checkout/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.com/docs/gatsby-config/ 5 | */ 6 | 7 | module.exports = { 8 | /* Your site config here */ 9 | plugins: [ 10 | { 11 | resolve: 'gatsby-plugin-load-script', 12 | options: { 13 | src: '/2checkoutLoad.js', // Change to the script filename 14 | }, 15 | }, 16 | 17 | ], 18 | } 19 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/src/apollo/client.js: -------------------------------------------------------------------------------- 1 | import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; 2 | import fetch from 'cross-fetch' 3 | 4 | export const client = new ApolloClient({ 5 | link: new HttpLink({ 6 | uri: "https://shanstore2.myshopify.com/api/graphql", 7 | fetch, 8 | headers: { 9 | "X-Shopify-Storefront-Access-Token": "a9da41bccc9eb31891047c268e893226" 10 | } 11 | }), 12 | cache: new InMemoryCache() 13 | }) -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import { Elements, useStripe } from "@stripe/react-stripe-js"; 2 | import { loadStripe } from "@stripe/stripe-js"; 3 | import React from "react" 4 | import CheckoutForm from "../components/CheckoutForm"; 5 | 6 | const stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw"); 7 | 8 | export default function Home() { 9 | return ( 10 |
11 | Hello world! 12 | 13 | 14 | 15 | 16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.com/docs/gatsby-config/ 5 | */ 6 | 7 | require("dotenv").config({ 8 | path: `.env.${process.env.NODE_ENV}`, 9 | }) 10 | module.exports = { 11 | /* Your site config here */ 12 | plugins: [ 13 | { 14 | resolve: `gatsby-source-stripe`, 15 | options: { 16 | objects: ["Price"], 17 | secretKey: process.env.STRIPE_SECRET_KEY, 18 | downloadFiles: false, 19 | }, 20 | }, 21 | 22 | ], 23 | } 24 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/functions/payment-hook/payment-hook.js: -------------------------------------------------------------------------------- 1 | // Docs on event and context https://www.netlify.com/docs/functions/#the-handler-method 2 | exports.handler = async event => { 3 | try { 4 | console.log("Data = ", JSON.parse(event.body)) 5 | return { 6 | statusCode: 200, 7 | body: JSON.stringify({ message: `Hello World` }), 8 | // // more keys you can return: 9 | // headers: { "headerName": "headerValue", ... }, 10 | // isBase64Encoded: true, 11 | } 12 | } catch (error) { 13 | return { statusCode: 500, body: error.toString() } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.com/docs/gatsby-config/ 5 | */ 6 | require("dotenv").config(); 7 | module.exports = { 8 | /* Your site config here */ 9 | plugins: [ 10 | { 11 | resolve: `gatsby-source-shopify`, 12 | options: { 13 | // The domain name of your Shopify shop. 14 | shopName: process.env.SHOP_NAME, 15 | // The storefront access token 16 | accessToken: process.env.ACCESS_TOKEN, 17 | }, 18 | }, 19 | ], 20 | } 21 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.com/docs/gatsby-config/ 5 | */ 6 | 7 | require("dotenv").config(); 8 | 9 | module.exports = { 10 | /* Your site config here */ 11 | plugins: [ 12 | { 13 | resolve: `gatsby-source-shopify`, 14 | options: { 15 | // The domain name of your Shopify shop. 16 | shopName: process.env.SHOP_NAME, 17 | // The storefront access token 18 | accessToken: process.env.ACCESS_TOKEN, 19 | }, 20 | }, 21 | ], 22 | } 23 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/functions/success-payment/success-payment.js: -------------------------------------------------------------------------------- 1 | // Docs on event and context https://www.netlify.com/docs/functions/#the-handler-method 2 | exports.handler = async event => { 3 | console.log("Data = ", JSON.parse(event.body)); 4 | try { 5 | return { 6 | statusCode: 200, 7 | body: JSON.stringify({ message: `Hello World` }), 8 | // // more keys you can return: 9 | // headers: { "headerName": "headerValue", ... }, 10 | // isBase64Encoded: true, 11 | } 12 | } catch (error) { 13 | return { statusCode: 500, body: error.toString() } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/src/cart-provider/wrap-root-element.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { loadStripe } from "@stripe/stripe-js" 3 | import { CartProvider } from "use-shopping-cart" 4 | 5 | const stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw") 6 | 7 | export const wrapRootElement = ({element})=> { 8 | return ( 9 | 16 | {element} 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/src/components/Product.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useShoppingCart } from "use-shopping-cart" 3 | 4 | export default function Product({product}) { 5 | 6 | const { addItem } = useShoppingCart(); 7 | return ( 8 |
9 |
Name: {product.name}
10 |
Price: {product.price}
11 |
12 | 17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.com/docs/gatsby-config/ 5 | */ 6 | 7 | require("dotenv").config({path:".env"}); 8 | 9 | module.exports = { 10 | /* Your site config here */ 11 | plugins: [ 12 | { 13 | resolve: 'gatsby-plugin-snipcartv3', 14 | options: { 15 | apiKey: process.env.SNIPCART_KEY 16 | } 17 | }, 18 | { 19 | resolve: `gatsby-source-stripe`, 20 | options: { 21 | objects: ["Price"], 22 | secretKey: process.env.STRIPE_SECRET_KEY, 23 | downloadFiles: false, 24 | }, 25 | }, 26 | ], 27 | } 28 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/README.md: -------------------------------------------------------------------------------- 1 | ### Shopping Cart State and Logic for Stripe in React 2 | 3 | [USE-SHOPPING-CART](https://useshoppingcart.com/) 4 | 5 | [USE-SHOPPING-CART EXAMPLES](https://github.com/dayhaysoos/use-shopping-cart/tree/master/examples) 6 | 7 | Project Video Tutorial 8 | 9 | [Buiding Project 03 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224984117135014/) 10 | 11 | [Building Project 03 Video in English on YouTube](https://www.youtube.com/watch?v=tYGlZI4OPIs) 12 | 13 | [Building Project 03 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224993742615645/) 14 | 15 | [Building Project 03 Video in Urdu on YouTube](https://www.youtube.com/watch?v=gsfKhhB9_0M) -------------------------------------------------------------------------------- /project05_2checkout/LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/functions/checkout/checkout.js: -------------------------------------------------------------------------------- 1 | // Docs on event and context https://www.netlify.com/docs/functions/#the-handler-method 2 | const stripe = require('stripe')(process.env.STRIPE_KEY); 3 | 4 | exports.handler = async event => { 5 | const paymentIntent = await stripe.paymentIntents.create({ 6 | amount: 8000, 7 | currency: 'usd', 8 | // Verify your integration in this guide by including this parameter 9 | metadata: {customerId: "34343", orderId: "343434"}, 10 | }); 11 | 12 | try { 13 | return { 14 | statusCode: 200, 15 | body: JSON.stringify({ client_secret: paymentIntent.client_secret }), 16 | } 17 | } catch (error) { 18 | return { statusCode: 500, body: error.toString() } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/src/pages/checkout-session.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { loadStripe } from "@stripe/stripe-js" 3 | 4 | const stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw") 5 | 6 | export default function CheckoutSession({location}) { 7 | 8 | const redirectToCheckout = async ()=> { 9 | const stripe = await stripePromise; 10 | const response = await fetch('/.netlify/functions/checkout'); 11 | const data = await response.json(); 12 | 13 | const result = await stripe.redirectToCheckout({ 14 | sessionId: data.id 15 | }) 16 | } 17 | 18 | return ( 19 |
20 |
Hello Checkout Session
21 | 22 | 23 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /project05_2checkout/static/2checkoutLoad.js: -------------------------------------------------------------------------------- 1 | (function (document, src, libName, config) { 2 | var script = document.createElement('script'); 3 | script.src = src; 4 | script.async = true; 5 | var firstScriptElement = document.getElementsByTagName('script')[0]; 6 | script.onload = function () { 7 | for (var namespace in config) { 8 | if (config.hasOwnProperty(namespace)) { 9 | window[libName].setup.setConfig(namespace, config[namespace]); 10 | } 11 | } 12 | window[libName].register(); 13 | }; 14 | 15 | firstScriptElement.parentNode.insertBefore(script, firstScriptElement); 16 | })(document, 'https://secure.2checkout.com/checkout/client/twoCoInlineCart.js', 'TwoCoInlineCart',{"app":{"merchant":"250567165059"},"cart":{"host":"https:\/\/secure.2checkout.com"}}); -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/src/components/CartStatus.js: -------------------------------------------------------------------------------- 1 | import { navigate } from "gatsby"; 2 | import React from "react" 3 | import { useShoppingCart } from "use-shopping-cart" 4 | import './cartstatus.css' 5 | export default function CartStatus() { 6 | const { totalPrice, cartCount, clearCart } = useShoppingCart(); 7 | return ( 8 |
9 |
Total Price: {totalPrice}
10 |
Count: {cartCount}
11 | 16 | 21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { loadStripe } from "@stripe/stripe-js" 3 | 4 | 5 | const stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw") 6 | 7 | 8 | export default function Home({location}) { 9 | 10 | 11 | 12 | const redirectToCheckout = async () => { 13 | const stripe = await stripePromise; 14 | const result = await stripe.redirectToCheckout({ 15 | mode: "payment", 16 | lineItems: [{ price: "price_1HiNkpEncg17e61HdiErZOkH", quantity: 3 }, 17 | { price: "price_1Hhx11Encg17e61HRwNwsnuv", quantity: 3 }], 18 | successUrl: `${location.origin}/payment-success/`, 19 | cancelUrl: `${location.origin}/payment-error`, 20 | }); 21 | } 22 | 23 | return ( 24 |
25 |
Hello world!
26 | 27 | 28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import CartStatus from '../components/CartStatus' 3 | import Product from "../components/Product" 4 | 5 | const productData = [ 6 | { 7 | name: 'Water Bottle', 8 | sku: 'price_1HiNkpEncg17e61HdiErZOkH', 9 | price: 1500, 10 | image: 'https://www.fillmurray.com/300/300', 11 | currency: 'USD' 12 | }, 13 | { 14 | name: 'Formal Shoe', 15 | sku: 'price_1HiJklEncg17e61HJvgC9VGR', 16 | price: 3000, 17 | image: 'https://www.fillmurray.com/300/300', 18 | currency: 'USD' 19 | } 20 | ] 21 | 22 | 23 | export default function Home() { 24 | 25 | return ( 26 |
27 | 28 |
29 | { 30 | productData.map((product)=>( 31 | 32 | )) 33 | } 34 |
35 |
36 | ) 37 | } 38 | -------------------------------------------------------------------------------- /project05_2checkout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-hello-world", 3 | "private": true, 4 | "description": "A simplified bare-bones starter for Gatsby", 5 | "version": "0.1.0", 6 | "license": "0BSD", 7 | "scripts": { 8 | "build": "gatsby build", 9 | "develop": "gatsby develop", 10 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 11 | "start": "npm run develop", 12 | "serve": "gatsby serve", 13 | "clean": "gatsby clean", 14 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "gatsby": "^2.24.91", 18 | "gatsby-plugin-load-script": "^1.1.0", 19 | "react": "^16.12.0", 20 | "react-dom": "^16.12.0" 21 | }, 22 | "devDependencies": { 23 | "prettier": "2.1.2" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world" 28 | }, 29 | "bugs": { 30 | "url": "https://github.com/gatsbyjs/gatsby/issues" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-hello-world", 3 | "private": true, 4 | "description": "A simplified bare-bones starter for Gatsby", 5 | "version": "0.1.0", 6 | "license": "0BSD", 7 | "scripts": { 8 | "build": "gatsby build", 9 | "develop": "gatsby develop", 10 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 11 | "start": "npm run develop", 12 | "serve": "gatsby serve", 13 | "clean": "gatsby clean", 14 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "@stripe/stripe-js": "^1.11.0", 18 | "gatsby": "^2.24.91", 19 | "react": "^16.12.0", 20 | "react-dom": "^16.12.0", 21 | "use-shopping-cart": "^2.1.0" 22 | }, 23 | "devDependencies": { 24 | "prettier": "2.1.2" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world" 29 | }, 30 | "bugs": { 31 | "url": "https://github.com/gatsbyjs/gatsby/issues" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/README.md: -------------------------------------------------------------------------------- 1 | ### Adding a Shopping Cart with Snipcart 2 | 3 | [Gatsby E-Commerce Recipe: Integrate a Cart in a Few Steps](https://snipcart.com/blog/gatsby-recipes-ecommerce) 4 | 5 | [Snipcart Gatsby Plugin V3](https://www.gatsbyjs.com/plugins/gatsby-plugin-snipcartv3/) 6 | 7 | [Using Snipcart with Gatsby](https://www.gatsbyjs.com/docs/adding-a-shopping-cart-with-snipcart/) 8 | 9 | [Enabling E-Commerce Quickly with Gatsby, Snipcart & Netlify Functions](https://snipcart.com/blog/gatsby-netlify-functions-ecommerce) 10 | 11 | [Snipcart Documentation](https://docs.snipcart.com/v3/setup/installation) 12 | 13 | ### Project Building Videos 14 | 15 | [Buidling Project 02 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224954863883701/) 16 | 17 | [Buidling Project 02 Video in English on YouTube](https://www.youtube.com/watch?v=0APfFRm2hK8) 18 | 19 | [Building Project 02 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224961217042526/) 20 | 21 | [Building Project 02 Video in Urdu on YouTube](https://www.youtube.com/watch?v=vzeLykEV87w&t=6s) -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-hello-world", 3 | "private": true, 4 | "description": "A simplified bare-bones starter for Gatsby", 5 | "version": "0.1.0", 6 | "license": "0BSD", 7 | "scripts": { 8 | "build": "gatsby build", 9 | "develop": "gatsby develop", 10 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 11 | "start": "npm run develop", 12 | "serve": "gatsby serve", 13 | "clean": "gatsby clean", 14 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "dotenv": "^8.2.0", 18 | "gatsby": "^2.24.91", 19 | "gatsby-source-shopify": "^3.4.0", 20 | "react": "^16.12.0", 21 | "react-dom": "^16.12.0", 22 | "shopify-buy": "^2.11.0" 23 | }, 24 | "devDependencies": { 25 | "prettier": "2.1.2" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/gatsbyjs/gatsby/issues" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-hello-world", 3 | "private": true, 4 | "description": "A simplified bare-bones starter for Gatsby", 5 | "version": "0.1.0", 6 | "license": "0BSD", 7 | "scripts": { 8 | "build": "gatsby build", 9 | "develop": "gatsby develop", 10 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 11 | "start": "npm run develop", 12 | "serve": "gatsby serve", 13 | "clean": "gatsby clean", 14 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "@stripe/react-stripe-js": "^1.1.2", 18 | "@stripe/stripe-js": "^1.11.0", 19 | "gatsby": "^2.24.91", 20 | "react": "^16.12.0", 21 | "react-dom": "^16.12.0", 22 | "stripe": "^8.119.0" 23 | }, 24 | "devDependencies": { 25 | "prettier": "2.1.2" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/gatsbyjs/gatsby/issues" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-stripe-checkout", 3 | "private": true, 4 | "description": "A simplified bare-bones starter for Gatsby", 5 | "version": "0.1.0", 6 | "license": "0BSD", 7 | "scripts": { 8 | "build": "gatsby build", 9 | "develop": "gatsby develop", 10 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 11 | "start": "npm run develop", 12 | "serve": "gatsby serve", 13 | "clean": "gatsby clean", 14 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "@stripe/stripe-js": "^1.11.0", 18 | "dotenv": "^8.2.0", 19 | "gatsby": "^2.24.91", 20 | "gatsby-source-stripe": "^3.1.1", 21 | "react": "^16.12.0", 22 | "react-dom": "^16.12.0", 23 | "stripe": "^8.119.0" 24 | }, 25 | "devDependencies": { 26 | "prettier": "2.1.2" 27 | }, 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/gatsbyjs/gatsby/issues" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-hello-world", 3 | "private": true, 4 | "description": "A simplified bare-bones starter for Gatsby", 5 | "version": "0.1.0", 6 | "license": "0BSD", 7 | "scripts": { 8 | "build": "gatsby build", 9 | "develop": "gatsby develop", 10 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 11 | "start": "npm run develop", 12 | "serve": "gatsby serve", 13 | "clean": "gatsby clean", 14 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "@stripe/stripe-js": "^1.11.0", 18 | "dotenv": "^8.2.0", 19 | "gatsby": "^2.24.91", 20 | "gatsby-plugin-snipcartv3": "^2.3.3", 21 | "gatsby-source-stripe": "^3.1.1", 22 | "react": "^16.12.0", 23 | "react-dom": "^16.12.0" 24 | }, 25 | "devDependencies": { 26 | "prettier": "2.1.2" 27 | }, 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/gatsbyjs/gatsby/issues" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-hello-world", 3 | "private": true, 4 | "description": "A simplified bare-bones starter for Gatsby", 5 | "version": "0.1.0", 6 | "license": "0BSD", 7 | "scripts": { 8 | "build": "gatsby build", 9 | "develop": "gatsby develop", 10 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 11 | "start": "npm run develop", 12 | "serve": "gatsby serve", 13 | "clean": "gatsby clean", 14 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "@apollo/client": "^3.2.7", 18 | "cross-fetch": "^3.0.6", 19 | "dotenv": "^8.2.0", 20 | "gatsby": "^2.24.91", 21 | "gatsby-source-shopify": "^3.5.1", 22 | "react": "^16.12.0", 23 | "react-dom": "^16.12.0" 24 | }, 25 | "devDependencies": { 26 | "prettier": "2.1.2" 27 | }, 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/gatsbyjs/gatsby/issues" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Panacloud Multi-Cloud Internet-Scale Modern Global Apps 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |
Hello world!
7 | 8 |
9 |
10 |
11 | 12 |
13 | 14 | 15 | 16 | 30 | 31 |
32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /project05_2checkout/README.md: -------------------------------------------------------------------------------- 1 | 2Checkout is a payment gateway which supports 180 countries including the local market i.e. Pakistan 2 | 3 | [2checkout](https://www.2checkout.com/) 4 | 5 | [Payment API](https://www.2checkout.com/payment-api/) 6 | 7 | [Documentation](https://www.2checkout.com/documentation) 8 | 9 | [API Integration](https://knowledgecenter.2checkout.com/API-Integration) 10 | 11 | [Start using the 2Checkout API](https://knowledgecenter.2checkout.com/API-Integration/01Start-using-the-2Checkout-API) 12 | 13 | [Demo/Test Ordering System](https://knowledgecenter.2checkout.com/API-Integration/Transition_guides/Transition_Guide_for_2CO_Sandbox) 14 | 15 | [2Checkout Node.js Library](https://github.com/2Checkout/2checkout-node) 16 | 17 | Videos 18 | 19 | [Building Project 05 and 06 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225129468128698) 20 | 21 | [Building Project 05 and 06 Video in English on YouTube](https://www.youtube.com/watch?v=dKHANO9U6IU) 22 | 23 | [Project 05 and 06 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225139989951737) 24 | 25 | [Project 05 and 06 Video in Urdu on YouTube](https://www.youtube.com/watch?v=5BK_R0MBL-c) 26 | 27 | 28 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/functions/checkout/checkout.js: -------------------------------------------------------------------------------- 1 | // Docs on event and context https://www.netlify.com/docs/functions/#the-handler-method 2 | const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY); 3 | 4 | exports.handler = async event => { 5 | const session = await stripe.checkout.sessions.create({ 6 | payment_method_types: ['card'], 7 | line_items: [{ 8 | price_data: { 9 | currency: 'usd', 10 | product_data: { 11 | name: 'T-shirt', 12 | images: ["https://ae01.alicdn.com/kf/HTB1eB_4XtjvK1RjSspiq6AEqXXaU/Fengdong-fashion-school-backpack-for-girls-school-bags-female-bagpack-children-backpacks-kids-cute-USB-bag.jpg"] 13 | }, 14 | unit_amount: 2000, 15 | }, 16 | quantity: 1, 17 | }], 18 | mode: 'payment', 19 | success_url: 'http://localhost:8888/payment-success/', 20 | cancel_url: 'http://localhost:8888/payment-error/', 21 | }); 22 | try { 23 | 24 | return { 25 | statusCode: 200, 26 | body: JSON.stringify({ id: session.id }), 27 | // // more keys you can return: 28 | // headers: { "headerName": "headerValue", ... }, 29 | // isBase64Encoded: true, 30 | } 31 | } catch (error) { 32 | return { statusCode: 500, body: error.toString() } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /project05_2checkout/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # Local Netlify folder 72 | .netlify -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/README.md: -------------------------------------------------------------------------------- 1 | ### Stripe Payment Intents API 2 | 3 | [Charges vs. Payment Intents APIs](https://stripe.com/docs/payments/payment-intents/migration/charges) 4 | 5 | [The Payment Intents](https://stripe.com/docs/payments/payment-intents) 6 | 7 | [The Payment Intent APIs](https://stripe.com/docs/api/payment_intents) 8 | 9 | [Serverless stripe payment via Netlify functions and Gatsby](https://ecolpaert.com/serverless-stripe-payment-via-netlify-functions-and-gatsby) 10 | 11 | [STRIPE ELEMENTS: Build beautiful, smart checkout flows](https://stripe.com/en-be/payments/elements) 12 | 13 | [React components for Stripe.js and Elements](https://github.com/stripe/react-stripe-js) 14 | 15 | [React Stripe.js Reference](https://stripe.com/docs/stripe-js/react) 16 | 17 | [Netlify Functions Example](https://github.com/alexmacarthur/netlify-lambda-function-example/blob/68a0cdc05e201d68fe80b0926b0af7ff88f15802/lambda-src/purchase.js#L43) 18 | 19 | [Using Stripe in React Notes](https://nancyhuynh-til.netlify.app/stripe-react-notes/) 20 | 21 | [Stripe Custom Payment Flow](https://stripe.com/docs/payments/integration-builder) 22 | 23 | ### Project Building Videos 24 | 25 | [Building Project 01 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224918482854198/) 26 | 27 | [Building Project 01 Video in English on YouTube](https://www.youtube.com/watch?v=tamOJxju7fg) 28 | 29 | [Building Project 01 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224927228272828/) 30 | 31 | [Building Project 01 Video in Urdu on YouTube](https://www.youtube.com/watch?v=vzeLykEV87w) 32 | -------------------------------------------------------------------------------- /project03_gatsby_use_shopping_cart/src/pages/cart.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useShoppingCart } from "use-shopping-cart" 3 | import CartStatus from "../components/CartStatus"; 4 | 5 | export default function Cart() { 6 | 7 | const { cartDetails, incrementItem, decrementItem, redirectToCheckout } = useShoppingCart(); 8 | console.log("Cart Details = ",cartDetails); 9 | console.log(Object.keys(cartDetails)); 10 | 11 | if(!Object.keys(cartDetails).length) return
Cart is Empty
12 | 13 | return ( 14 |
15 |

Cart

16 | 17 |
18 | 21 |
22 | { 23 | Object.keys(cartDetails).map((item)=> ( 24 |
25 |
Name: {cartDetails[item].name}
26 |
Price: {cartDetails[item].price}
27 |
28 |
29 | Quantity: {cartDetails[item].quantity} -- Total Price: {cartDetails[item].value} 30 |
31 | 34 | 37 |
38 | )) 39 | } 40 |
41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /project05_2checkout/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | export default function Home() { 4 | 5 | console.log("TwoCoInlineCart = ",window.TwoCoInlineCart); 6 | 7 | 8 | return ( 9 |
10 |
Hello world!
11 | 12 | 13 |
14 | 19 |
20 | 21 | 22 |
23 | 34 |
35 | 46 | 47 | 53 |
54 | 55 | 56 | 57 |
58 | ) 59 | } 60 | -------------------------------------------------------------------------------- /project01_gatsby_stripe_payment_intents/src/components/CheckoutForm.js: -------------------------------------------------------------------------------- 1 | import { CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js" 2 | import React from "react" 3 | import './checkoutForm.css' 4 | 5 | const CARD_ELEMENT_OPTIONS = { 6 | style: { 7 | base: { 8 | color: "#32325d", 9 | fontFamily: '"Helvetica Neue", Helvetica, sans-serif', 10 | fontSmoothing: "antialiased", 11 | fontSize: "16px", 12 | "::placeholder": { 13 | color: "#aab7c4", 14 | }, 15 | }, 16 | invalid: { 17 | color: "#fa755a", 18 | iconColor: "#fa755a", 19 | }, 20 | }, 21 | }; 22 | 23 | 24 | export default function CheckoutForm() { 25 | const stripe = useStripe(); 26 | const elements = useElements(); 27 | 28 | const checkoutSubmit = async()=>{ 29 | const response = await fetch("/.netlify/functions/checkout", {method: "post"}); 30 | const data = await response.json(); 31 | console.log("DAta = ",data); 32 | 33 | const result = await stripe.confirmCardPayment(data.client_secret, { 34 | payment_method: { 35 | card: elements.getElement(CardNumberElement), 36 | billing_details: { 37 | name: 'Zia Khan', 38 | email: "abc@gmail.com" 39 | }, 40 | } 41 | }) 42 | 43 | console.log("Result = ",result); 44 | 45 | 46 | } 47 | return ( 48 |
49 | Checkout Form 50 |
51 | {/**/ } 52 | 53 | 54 | 55 | 56 | 57 |
58 | 61 |
62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/src/pages/productlist.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { loadStripe } from "@stripe/stripe-js" 3 | import { graphql, useStaticQuery } from "gatsby" 4 | 5 | const stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw") 6 | 7 | export default function ProductList({location}) { 8 | 9 | const data = useStaticQuery( 10 | graphql` 11 | query ProductPrices { 12 | prices : allStripePrice { 13 | edges { 14 | node { 15 | id 16 | active 17 | currency 18 | unit_amount 19 | product { 20 | id 21 | name 22 | images 23 | } 24 | } 25 | } 26 | } 27 | } 28 | ` 29 | ); 30 | console.log("Stripe Data = ", data); 31 | 32 | const redirectToCheckout = async (id) => { 33 | const stripe = await stripePromise; 34 | const result = await stripe.redirectToCheckout({ 35 | mode: "payment", 36 | lineItems: [{ price: id, quantity: 1 }], 37 | successUrl: `${location.origin}/payment-success/`, 38 | cancelUrl: `${location.origin}/payment-error`, 39 | }); 40 | } 41 | 42 | 43 | return ( 44 |
45 |
Product List
46 | { 47 | data.prices.edges.map((node)=>( 48 |
49 |
Product Name: {node.node.product.name}
50 |
Product Price: {node.node.unit_amount}
51 |
52 | 55 |
56 | )) 57 | } 58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /project00_gatsby_stripe_checkout/README.md: -------------------------------------------------------------------------------- 1 | ### Stripe Checkout 2 | 3 | There are two core ways to accept payments on Stripe: 4 | 5 | Stripe Checkout 6 | Payment Intents API 7 | 8 | Note: There is also a third way called Charges API. While Charges API are not deprecreated, but Stripe plans to focus product development on Payment Intents to make it the foundational Stripe API. 9 | 10 | In this project we will use the Stripe Checkout, the quickest way to build conversion-optimized payment forms, hosted on Stripe. 11 | 12 | Stripe Checkout is a prebuilt payment page that you can redirect your customer to for simple purchases and subscriptions. It provides many features, such as Apple Pay, Google Pay, internationalization, and form validation. 13 | 14 | [We built Checkout so you don’t have to](https://stripe.com/blog/checkout) 15 | 16 | [Checkout Docs](https://stripe.com/docs/payments/checkout) 17 | 18 | [Accept a payment](https://stripe.com/docs/payments/accept-a-payment?integration=elements) 19 | 20 | [Learn How to Accept Money on Jamstack Sites in 38 Minutes](https://www.netlify.com/blog/2020/04/13/learn-how-to-accept-money-on-jamstack-sites-in-38-minutes/) 21 | 22 | [Stripe Prebuilt Checkout](https://stripe.com/en-gb-us/payments/checkout) 23 | 24 | [Processing Payments with Stripe](https://www.gatsbyjs.com/docs/processing-payments-with-stripe/) 25 | 26 | [Gatsby E-commerce Tutorial](https://www.gatsbyjs.com/tutorial/ecommerce-tutorial/) 27 | 28 | [Five things I learned by building my own shopping cart and checkout with Gatsby and Stripe](https://dev.to/nhuynh1/five-things-i-learned-by-building-my-own-shopping-cart-and-checkout-with-gatsby-and-stripe-273k) 29 | 30 | 31 | ### Project Building Videos 32 | 33 | [Building Project 00 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224888744070747/) 34 | 35 | [Building Project 00 Video in English on YouTube](https://www.youtube.com/watch?v=cextuS_GgVI) 36 | 37 | [Building Project 00 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224899533580478/) 38 | 39 | [Building Project 00 Video in Urdu on YouTube](https://www.youtube.com/watch?v=Jhg8URgZH-s) 40 | 41 | -------------------------------------------------------------------------------- /project02_gatsby_snipcart/src/pages/products.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { loadStripe } from "@stripe/stripe-js" 3 | import { graphql, useStaticQuery } from "gatsby" 4 | 5 | const stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw") 6 | 7 | export default function Products({location}) { 8 | 9 | const data = useStaticQuery( 10 | graphql` 11 | query ProductPrices { 12 | prices : allStripePrice { 13 | edges { 14 | node { 15 | id 16 | active 17 | currency 18 | unit_amount 19 | product { 20 | id 21 | name 22 | images 23 | description 24 | } 25 | } 26 | } 27 | } 28 | } 29 | ` 30 | ); 31 | console.log("Stripe Data = ", data); 32 | 33 | return ( 34 |
35 |
Product List
36 | { 37 | data.prices.edges.map((node)=>( 38 |
39 |
Product Name: {node.node.product.name}
40 |
Product Price: {node.node.unit_amount}
41 |
42 | 51 |
52 | )) 53 | } 54 |
55 | ) 56 | } 57 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/src/pages/cart.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react" 2 | 3 | import Client from 'shopify-buy' 4 | 5 | const client = Client.buildClient({ 6 | domain:`shanstore2.myshopify.com`, 7 | storefrontAccessToken: "a9da41bccc9eb31891047c268e893226" 8 | }) 9 | 10 | export default function Cart() { 11 | 12 | const [checkoutSession, setCheckoutSession] = useState(); 13 | useEffect(()=>{ 14 | (async()=>{ 15 | const session = await client.checkout.fetch(localStorage.getItem("checkoutid")); 16 | setCheckoutSession(session); 17 | console.log("session loadded test = ",session); 18 | console.log("checkoutSession.lineItems = ",session.lineItems); 19 | })() 20 | },[]); 21 | return ( 22 |
23 |
Cart
24 |
25 | 30 |
31 | { 32 | checkoutSession && checkoutSession.lineItems.map((item)=>( 33 |
34 |
35 | Name: {item.title} 36 |
37 |
38 | 39 |
40 |
41 | Price: {item.variant.price} 42 |
43 |
44 | quantity: {item.quantity} 45 |
46 |
47 | 57 | 66 |
67 |
68 | )) 69 | } 70 |
71 | ); 72 | } -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import { graphql, navigate } from "gatsby" 2 | import React, { useEffect, useState } from "react" 3 | 4 | import Client from 'shopify-buy' 5 | 6 | const client = Client.buildClient({ 7 | domain:`shanstore2.myshopify.com`, 8 | storefrontAccessToken: "a9da41bccc9eb31891047c268e893226" 9 | }) 10 | 11 | 12 | export default function Home({data}) { 13 | 14 | const [checkoutSession, setCheckoutSession] = useState(); 15 | 16 | useEffect(()=>{ 17 | (async () =>{ 18 | const session = await client.checkout.create(); 19 | console.log("session = ",session); 20 | setCheckoutSession(session); 21 | localStorage.setItem("checkoutid",session.id); 22 | })() 23 | },[]); 24 | 25 | 26 | console.log(data.allShopifyProduct.edges); 27 | return ( 28 |
29 |
Hello world!
30 |
31 |
32 | Total Price: {checkoutSession && checkoutSession.totalPrice} 33 |
34 |
35 | Total Item: {checkoutSession && checkoutSession.lineItems.length} 36 |
37 | 40 |
41 |
42 | { 43 | data.allShopifyProduct.edges.map(({node})=>( 44 |
45 |
46 | Name: {node.title} 47 |
48 |
49 | Description: {node.description} 50 |
51 |
52 | 53 |
54 |
55 | Price: {node.variants[0].price} 56 |
57 |
58 | 71 |
72 |
73 | )) 74 | } 75 |
76 | 77 | 78 |
79 | ) 80 | } 81 | 82 | 83 | export const query = graphql` 84 | { 85 | allShopifyProduct { 86 | edges { 87 | node { 88 | handle 89 | id 90 | title 91 | shopifyId 92 | variants { 93 | price 94 | sku 95 | title 96 | id 97 | } 98 | images { 99 | originalSrc 100 | } 101 | description 102 | } 103 | } 104 | } 105 | } 106 | ` -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/README.md: -------------------------------------------------------------------------------- 1 | ### Building an E-commerce site with Headless Shopify Plus 2 | 3 | [Headless eCommerce with Shopify](https://www.shopify.com/plus/solutions/headless-commerce) 4 | 5 | [Headless Shopify - Beginning of new era for eCommerce](https://aureatelabs.com/ecommerce/headless-shopify-beginning-of-new-era-for-ecommerce/) 6 | 7 | [How To Build A Shopify Headless eCommerce Storefront](https://medium.com/selleo/how-to-build-a-shopify-headless-ecommerce-storefront-99b9dfd5204b) 8 | 9 | [Headless Shopify - 25 Amazing Examples](https://selleo.com/blog/headless-shopify-25-amazing-examples) 10 | 11 | [Building an E-commerce site with Shopify](https://www.gatsbyjs.com/docs/building-an-ecommerce-site-with-shopify/) 12 | 13 | [Headless Shopify: Lessons Learned Building with Gatsby, Part 1](https://www.getelevar.com/optimization/headless-shopify/) 14 | 15 | [Headless Shopify: Lessons Learned Building with Gatsby, Part 2](https://www.getelevar.com/shopify/headless-shopify-learning-lessons/) 16 | 17 | [Watch Webinar](https://www.gatsbyjs.com/optimizing-ecommerce-webinar/) 18 | 19 | [Building an E-commerce store with Gatsby and Shopify](https://dev.to/cole_ruche/building-an-e-commerce-store-with-gatsby-and-shopify-4458) 20 | 21 | 22 | [Course: Gatsby JS & Shopify: Gatsby ecommerce sites Gatsby 2020](https://www.udemy.com/course/gatsby-ecommerce-shopify/) 23 | 24 | [Shopify and GraphQL](https://shopify.dev/concepts/graphql) 25 | 26 | [Shopify GraphQL learning resources](https://shopify.dev/concepts/graphql/learning-resources) 27 | 28 | [The Shopify GraphQL Learning Kit](https://www.shopify.com/partners/blog/shopify-graphql-learning-kit) 29 | 30 | [Developer changelog](https://shopify.dev/changelog) 31 | 32 | [Build a Shopify App with Node and React](https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react) 33 | 34 | [Casestudy: How Fostr used Headless Shopify and the Jamstack to power e-commerce on Victoria Beckham Beauty](https://www.netlify.com/customers/victoria-beckham-beauty/) 35 | 36 | [Creating a Shopify app using Serverless tech](https://phawk.co.uk/blog/shopify-apps-using-serverless/) 37 | 38 | [Best Practices For E-Commerce UI Design](https://www.smashingmagazine.com/2020/11/best-practices-ecommerce-ui-design/) 39 | 40 | 41 | [Building Project 04/example01 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225017709934813/) 42 | 43 | [Building Project 04/example01 Video in English on YouTube](https://www.youtube.com/watch?v=Unz_REIRjpg) 44 | 45 | [Building Project 04/example01 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225025711294842/) 46 | 47 | [Building Project 04 Video/example01 in Urdu on YouTube](https://www.youtube.com/watch?v=tNcpbyt0a6g) 48 | 49 | [Building Project 04 Part 2 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225072595506918) 50 | 51 | [Building Project 04 Part 2 Video in English on YouTube](https://www.youtube.com/watch?v=Qn16dqu7jKc) 52 | 53 | [Building Project 04 Part 2 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225081196721943) 54 | 55 | [Building Project 04 Part 2 Video in Urdu on YouTube](https://www.youtube.com/watch?v=mz2ChgziBBk) 56 | 57 | [Building Project 04 Part 3 Video in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225098638837985) 58 | 59 | [Building Project 04 Part 3 Video in English on YouTube](https://www.youtube.com/watch?v=xeAw__ofxtc) 60 | 61 | [Building Project 04 Part 3 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225107438537972) 62 | 63 | [Building Project 04 Part 3 Video in Urdu on YouTube](https://www.youtube.com/watch?v=-grjtMNprWI) 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import { gql, useMutation } from "@apollo/client"; 2 | import React, { useEffect } from "react" 3 | 4 | const createCheckout = gql` 5 | mutation checkoutCreate($input: CheckoutCreateInput!) { 6 | checkoutCreate(input: $input) { 7 | checkout { 8 | id 9 | webUrl 10 | lineItems(first:100){ 11 | edges{ 12 | node{ 13 | quantity 14 | id 15 | title, 16 | variant{ 17 | id 18 | priceV2{ 19 | amount 20 | } 21 | } 22 | } 23 | } 24 | } 25 | } 26 | checkoutUserErrors { 27 | code 28 | field 29 | message 30 | } 31 | } 32 | } 33 | ` 34 | 35 | const addLineItem = gql` 36 | mutation checkoutLineItemsAdd($lineItems: [CheckoutLineItemInput!]!, $checkoutId: ID!) { 37 | checkoutLineItemsAdd(lineItems: $lineItems, checkoutId: $checkoutId) { 38 | checkout { 39 | id 40 | webUrl 41 | lineItems(first:100){ 42 | edges{ 43 | node{ 44 | quantity 45 | id 46 | title, 47 | variant{ 48 | id 49 | priceV2{ 50 | amount 51 | } 52 | } 53 | } 54 | } 55 | } 56 | } 57 | checkoutUserErrors { 58 | code 59 | field 60 | message 61 | } 62 | } 63 | } 64 | ` 65 | 66 | export default function Home({data}) { 67 | 68 | const [createCheckoutMutaiton, {data:checkoutData}] = useMutation(createCheckout); 69 | const [addLineItemMuation, {data:addLineItemData}] = useMutation(addLineItem); 70 | 71 | 72 | useEffect(()=>{ 73 | (async()=>{ 74 | 75 | const response = await createCheckoutMutaiton({ 76 | variables: { 77 | input: {} 78 | } 79 | }); 80 | console.log("checkout session created ",response); 81 | 82 | })() 83 | 84 | 85 | 86 | },[]) 87 | 88 | return ( 89 |
90 |
Hello Shopify Gatsby Apollo
91 |
92 | 97 |
98 |
99 | { 100 | data.allShopifyProduct.edges.map(({node})=>( 101 |
102 |
103 | Name: {node.title} 104 |
105 |
106 | Description: {node.description} 107 |
108 |
109 | 110 |
111 |
112 | Price: {node.variants[0].price} 113 |
114 |
115 | 131 |
132 |
133 | )) 134 | } 135 |
136 |
137 | ) 138 | } 139 | 140 | 141 | 142 | export const query = graphql` 143 | { 144 | allShopifyProduct { 145 | edges { 146 | node { 147 | handle 148 | id 149 | title 150 | shopifyId 151 | variants { 152 | price 153 | sku 154 | title 155 | id 156 | } 157 | images { 158 | originalSrc 159 | } 160 | description 161 | } 162 | } 163 | } 164 | } 165 | ` 166 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingBuySDK/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | Gatsby 5 | 6 |

7 |

8 | Gatsby's hello-world starter 9 |

10 | 11 | Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the hello-world starter. 20 | 21 | ```shell 22 | # create a new Gatsby site using the hello-world starter 23 | gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```shell 31 | cd my-hello-world-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._ 40 | 41 | Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 68 | 69 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 70 | 71 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail). 72 | 73 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 74 | 75 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 76 | 77 | 9. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license. 78 | 79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 80 | 81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: 88 | 89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 90 | 91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 92 | 93 | ## 💫 Deploy 94 | 95 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world) 96 | 97 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world) 98 | 99 | 100 | -------------------------------------------------------------------------------- /project04_gatsby_shopify_graphql/usingGraphql/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | Gatsby 5 | 6 |

7 |

8 | Gatsby's hello-world starter 9 |

10 | 11 | Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the hello-world starter. 20 | 21 | ```shell 22 | # create a new Gatsby site using the hello-world starter 23 | gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```shell 31 | cd my-hello-world-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._ 40 | 41 | Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 68 | 69 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 70 | 71 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail). 72 | 73 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 74 | 75 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 76 | 77 | 9. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license. 78 | 79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 80 | 81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: 88 | 89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 90 | 91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 92 | 93 | ## 💫 Deploy 94 | 95 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world) 96 | 97 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world) 98 | 99 | 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Learn to Build Ecommerce Websites and Apps using JAMstack 2 | 3 | If you don't have web programming background or don't know React or Serverless we suggest you start from this [app development foundation bootcamp](https://panacloud.github.io/bootcamp-2020/) and [JAMstack Serverless Repo](https://github.com/panacloud-modern-global-apps/jamstack-serverless). 4 | 5 | 6 | [Intro Class in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224856174736534/) 7 | 8 | [Intro Class in English on YouTube](https://www.youtube.com/watch?v=u3KOcuxvb5w) 9 | 10 | [Intro Class in Urdu on facebook](https://www.facebook.com/zeeshanhanif/videos/10224865871098937/) 11 | 12 | [Intro Class in Urdu on YouTube](https://www.youtube.com/watch?v=c11-JmxKJfc) 13 | 14 | [What is Ecommerce?](https://www.shopify.com/encyclopedia/what-is-ecommerce) 15 | 16 | [What is Ecommerce in 2020?](https://ecommerceguide.com/guides/what-is-ecommerce/) 17 | 18 | [Building an eCommerce Website](https://www.hostgator.com/blog/get-ecommerce-website-running/) 19 | 20 | [A Developer’s Guide to Headless E-Commerce 2020](https://snipcart.com/blog/headless-ecommerce-guide) 21 | 22 | [Is JAMstack Right for Your Ecommerce Business?](https://www.practicalecommerce.com/is-jamstack-right-for-your-ecommerce-business) 23 | 24 | [9 Best eCommerce Solutions for Jamstack Websites](https://bejamas.io/blog/jamstack-ecommerce/) 25 | 26 | ### Local Ecommerce 27 | 28 | [What do we know about Pakistan's ecommerce industry?](https://www.dawn.com/news/1549691) 29 | 30 | [Is Pakistan ready to go cashless?](https://www.dawn.com/news/1581827) 31 | 32 | [Digital banking grows 12pc, paper-based transactions down 10pc in FY20](https://profit.pakistantoday.com.pk/2020/10/11/digital-banking-grows-12pc-paper-based-transactions-down-10pc-in-fy20/) 33 | 34 | [No matter how obstructive the present be, ecommerce is the future](https://www.thenews.com.pk/print/711489-no-matter-how-obstructive-the-present-be-ecommerce-is-the-future) 35 | 36 | [First e-commerce index shows increase in digital payments and growing demand for online shopping](https://nation.com.pk/17-Apr-2020/first-e-commerce-index-shows-increase-in-digital-payments-and-growing-demand-for-online-shopping) 37 | 38 | 39 | ### Payment Gateways 40 | 41 | [The 10 Most Popular Online Payment Gateways for Your Website, Compared](https://www.dreamhost.com/blog/10-online-payment-gateways-compared/) 42 | 43 | [Top 10 Online Payment Methods for eCommerce Sites](https://www.hostgator.com/blog/online-payment-methods-ecommerce/) 44 | 45 | [Stripe vs Braintree vs 2Checkout Payment Gateways](https://medium.com/@devathon_/stripe-vs-braintree-vs-2checkout-payment-gateways-90ae36e68f04) 46 | 47 | [Accept Credit Cards Online (Sep 2020): The Best Way to Receive Payments in Any Country Using 2Checkout, Payoneer and InvoiceNinja](https://ecommerce-platforms.com/articles/accept-credit-cards-online) 48 | 49 | ### Local Payments Methods 50 | 51 | [Why local payment methods are essential for your e-commerce business](https://www.payvision.com/payment-insights/e-commerce/why-local-payment-methods-are-essential-for-ecommerce-business/) 52 | 53 | [Payment Gateways available in Pakistan](https://www.flux.pk/payment-gateways-available-in-pakistan/) 54 | 55 | [SBP allows pilot operation of e-commerce payment gateway](https://profit.pakistantoday.com.pk/2020/07/18/sbp-allow-pilot-operation-of-e-commerce-payment-gateway/) 56 | 57 | [‘No matter how obstructive the present be, ecommerce is the future’](https://www.thenews.com.pk/print/711489-no-matter-how-obstructive-the-present-be-ecommerce-is-the-future) 58 | 59 | [PayFast by Avanza Premier Payment Services (APPS)](https://apps.net.pk/) 60 | 61 | [PayFast Docs for Developers](https://apps.net.pk/docs/) 62 | 63 | [Karachi based Fintech Safepay Plans to Become “the Stripe of Pakistan” after Receiving Support from Y Combinator](https://www.crowdfundinsider.com/2020/09/166007-karachi-based-fintech-safepay-plans-to-become-the-stripe-of-pakistan-after-receiving-support-from-y-combinator/) 64 | 65 | [Shopify Payments in Pakistan](https://www.shopify.com/payment-gateways/pakistan) 66 | 67 | [JazzCash](https://sandbox.jazzcash.com.pk/sandbox) 68 | 69 | [JazzCash Documentation](https://payments.jazzcash.com.pk/SandboxDocumentation/) 70 | 71 | [JazzCash Developer Certer](https://developer.jazzcash.com.pk/) 72 | 73 | [JazzCash Payment Gateway](https://sandbox.jazzcash.com.pk/SandboxDocumentation/Content/documentation/Payment%20Gateway%20Integration%20Guide%20for%20Merchants-v4.2.pdf) 74 | 75 | 76 | 77 | ### Ecommerce Solutions 78 | 79 | [9 Best eCommerce Solutions for Jamstack Websites](https://bejamas.io/blog/jamstack-ecommerce/) 80 | 81 | [Headless Commerce: The Definitive Guide - 2020 Edition](https://www.coredna.com/blogs/headless-commerce) 82 | 83 | [Headless Shopify - 25 Amazing Examples](https://selleo.com/blog/headless-shopify-25-amazing-examples) 84 | 85 | [Shopify Plus: Headless Commerce](https://www.shopify.com/plus/solutions/headless-commerce) 86 | 87 | 88 | ### Delivery Services 89 | 90 | [List of Delivery Services in Pakistan](https://clarity.pk/delivery-services/list-of-delivery-services-in-pakistan/) 91 | 92 | 93 | ### Ecommerce Investments in Pakistan and Developing Countries 94 | 95 | [Retailo raises USD 2.3 million pre-seed for its B2B ecommerce marketplace in Saudi & Pakistan](https://kr-asia.com/retailo-raises-usd-2-3-million-pre-seed-for-its-b2b-ecommerce-marketplace-in-saudi-pakistan) 96 | 97 | [Miniso has acquired ToSharing for around $7 million to expand eCommerce operations in Pakistan](https://www.techjuice.pk/miniso-has-acquired-tosharing-for-around-7-million-to-expand-ecommerce-operations-in-pakistan/) 98 | 99 | [Pakistani e-commerce platform PriceOye announces six-figure funding in recent round](https://profit.pakistantoday.com.pk/2020/08/29/pakistani-e-commerce-platform-priceoye-secures-six-figure-funding-in-recent-round/) 100 | 101 | [Pakistani baby products ecommerce platform Baby Planet raises $250,000 led by High Output Ventures](https://www.menabytes.com/baby-planet-seed/) 102 | 103 | [Pakistan’s Tajir raises $1.8 million for its B2B ecommerce marketplace that helps mom-and-pop stores source inventory](https://www.menabytes.com/tajir-pakistan-1-8-million/) 104 | 105 | [Two Pakistanis on mission to revolutionize e-commerce industry](https://nation.com.pk/12-Jul-2020/two-pakistanis-on-mission-to-revolutionize-e-commerce-industry) 106 | 107 | [Want to become an ecommerce millionaire? These eight business models are up for grabs](https://dailytimes.com.pk/633731/want-to-become-an-ecommerce-millionaire-these-eight-business-models-are-up-for-grabs/) 108 | 109 | [US-based venture capital fund backs Pakistani e-commerce platform PriceOye.pk](https://www.dawn.com/news/1577370) 110 | 111 | [Dastgyr Pakistani Startup Raises Six-Figure Investment For Its B2B E-Commerce Marketplace](https://www.technologytimes.pk/2020/08/25/dastgyr-raises-six-figure-investment-for-its-b2b-ecommerce-marketplace/) 112 | 113 | [Sequoia India, Flourish Ventures lead $22.5m round in Bangladeshi B2B commerce startup](https://www.techinasia.com/sequoia-india-flourish-ventures-invest-bangladesh-b2b-commerce-startup-shopup) 114 | 115 | ### UI Design 116 | 117 | [Best Practices For E-Commerce UI Design](https://www.smashingmagazine.com/2020/11/best-practices-ecommerce-ui-design/) 118 | 119 | --------------------------------------------------------------------------------