Introducción a Gatsby

1

¿Por qué Gatsby? Seguridad y Velocidad

2

¿Qué es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuración de ESLint

Fundamentos de Gatsby

7

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

¿Cómo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalación y configuración de plugins

17

Imágenes como fuente de datos

18

Plugins de transformación

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducción a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en línea

23

Productos en React

Generando páginas programáticamente

24

Creando páginas en función de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producción

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Comprando productos

31/33
Recursos

Vamos a usar React.useEffect para ejecutar Stripe al momento que carga nuestra página en el navegador. Solo debemos ejecutar esta función una vez, así que el segundo argumento de useEffect debe ser un array vacío:

// cart
const [stripe, setStripe] = useState();

useEffect(() => {
  setStripe(window.Stripe(
    process.env.STRIPE_PK,
    { betas: ['checkout_beta_4'] },
  ));
}, []);

De esta forma podemos configurar nuestro botón de compra para que envíe al usuario al formulario de pago de Stripe:

const handleSubmit = asynv e => {
  e.preventDefault();

  const { error } = await stripe.redirectToCheckout({
    items: cart.map(({ .sku, quantity }) => ({ sku, quantity })),
    successUrl: process.env.SUCCESS_REDIRECT,
    canelUrl: process.env.CANCEL_REDIRECT,
  });

  if (error) throw error;
}

/* ... */

<Button onClick={handleSubmit}>Comprar</Button>

Screen reader support enabled.

Aportes 16

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola a todos, dejé este tutorial para quienes tienen problemas con la integración de Stripe https://platzi.com/tutoriales/1618-gatsby/6296-ajustes-para-integrar-stripe/

Hola
Les comento que la llamada a la API cambio un poco

const handleSubmit = async e => {
    e.preventDefault()

    let prod = cart.map(({ id, quantity }) => ({ price: id, quantity: quantity }))

    const { error } = await stripe.redirectToCheckout({
      lineItems: prod,
      mode: "payment",
      successUrl: process.env.SUCCESS_REDIRECT,
      cancelUrl: process.env.CANCEL_REDIRECT,
    })
    if (error) {
      throw error
    }
  }```

Para manejadores (o cualquier tipo de función) dentro de tu componente deberías usar useCallback. Si no por cada render que realice tu componente, por el motivo que sea, se volverán a reconstruir esas funciones.

Gracias a todos los que comentaron soluciones para los cambios de integración de Stripe
El profesor es un grande pero le faltó explicar el porqué de algunas cosas
Y el equipo de platzi bue, podrían mantener actualizados los cursos no?

Con este codigo en el componente Cart.js me funciono el llamado al checkout (09-2020)

  import React, { useContext, useEffect, useState } from "react"
  import { StyledCart, Button } from "../styles/components"
  import priceFormat from "../utils/priceFormat"
  import { CartContext } from "../context"
  import { Link } from "gatsby"
  export default function Cart() {
    const { cart } = useContext(CartContext)
    const [total, setTotal] = useState(0)
    const [stripe, setStripe] = useState()
    const getTotal = () => {
      setTotal(
        cart.reduce(
          (acc, current) => acc + current.unit_amount * current.quantity,
          0
        )
      )
    }
    useEffect(() => {
      setStripe(window.Stripe(process.env.STRIPE_PK))
      getTotal()
    }, [])

    const handleBuy = async event => {
      event.preventDefault()
      let item = cart.map(({ id, quantity }) => ({
        price: id,
        quantity: quantity,
      }))

      const { error } = await stripe.redirectToCheckout({
        lineItems: item,
        mode: "payment",
        successUrl: process.env.SUCCESS_REDIRECT,
        cancelUrl: process.env.CANCEL_REDIRECT,
      })
      if (error) {
        throw error
      }
    }
    return (
      <>
        <StyledCart>
          <h2> Your Cart</h2>
          <table>
            <tbody>
              <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
              </tr>
              {cart.map(item => (
                <tr key={item.id}>
                  <td>
                    <img src={item.metadata.img} alt={item.name} />
                  </td>
                  <td>{priceFormat(item.unit_amount)}</td>
                  <td>{item.quantity}</td>
                  <td>{priceFormat(item.quantity * item.unit_amount)}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <nav>
            <div>
              <h3>Subtotal: </h3>
              <small>USB {priceFormat(total)}</small>
            </div>
            <div>
              <Link to="/">
                <Button type="outline">Go Back</Button>
              </Link>
              <Button onClick={handleBuy} disabled={cart.length === 0}>
                I'm ready let's buy
              </Button>
            </div>
          </nav>
        </StyledCart>
      </>
    )
  }

FUENTE: https://platzi.com/tutoriales/1618-gatsby/6296-ajustes-para-integrar-stripe/

Es genial verlo funcionando anque este un poco desactualizado. Gracias a los que comparten las ayudas!!!

Bueno, aquí todo se rompió. Si uso los parámetros que usé en graphQL me dice que no son paramétros aceptados y si uso sku me dice “no such sku”.

Alguien sabe como solucionar este problema en el carrito de compras cuando tienes dos productos iguales?
Aparece este error al momento de comprar.

index.js:2177 Warning: Encountered two children with the same key,sku_Hi7CrKHH9rKdq2. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Por favor su ayuda me sale este error:

POST https://api.stripe.com/v1/payment_pages 400
(index):1 Uncaught (in promise) IntegrationError: No such sku: prod_HT1BNFcbKjkecM
at new t (https://js.stripe.com/v3/:1:10981)
at mo (https://js.stripe.com/v3/:1:54357)
at e._handleMessage (https://js.stripe.com/v3/:1:60838)
at e._handleMessage (https://js.stripe.com/v3/:1:27678)
at https://js.stripe.com/v3/:1:59440

Me sale el siguiente error ->
"IntegrationError: stripe.redirectToCheckout: You must provide successUrl and cancelUrl. "
¿Que hago?

Ya revise el .env y todo parece estar bien

Tengo este problema al presionar Comprar, alguien sabe cómo solucionarlo?
Uncaught (in promise) IntegrationError: SKUs for Checkout require a name attribute.

Este es mi código en Cart.js

useEffect(() => {
    setStripe(
      window.Stripe(process.env.STRIPE_PK)
    )
    
    getTotal()
  }, [])

  const handleSubmit = async e => {
    e.preventDefault

    const { error } = await stripe.redirectToCheckout({
      items: cart.map(({ sku, quantity }) => ({ sku, quantity })),
      successUrl: process.env.SUCCESS_REDIRECT,
      cancelUrl: process.env.CANCEL_REDIRECT,
    })


    if (error) {
      throw error
    }

  }

Al presionar Comprar, no pasa nada.
Y sale en consola:

(index):1 Uncaught (in promise) IntegrationError: Invalid value for stripe.redirectToCheckout: items.0.sku should be a string. You specified items.0.sku as undefined.

Varias consultas: Quién gestiona y almacena el registro de la compra? nuestra tienda o stripe?
¿Cómo haríamos si luego de lanzar a producción deseo cambiar de precio o agregar algún producto?
Gracias

yo lo tuve que cambiar por

mode: `subscription`
const handleSubmit = async event => {
    event.preventDefault()

    let item = cart.map(({ id, quantity }) => ({ price: id, quantity: quantity }))

    const { error } = await stripe.redirectToCheckout({
      lineItems: item,
      mode: `subscription`,
      successUrl: process.env.SUCCESS_REDIRECT,
      cancelUrl: process.env.CANCEL_REDIRECT,
    })
    if (error) {
      throw error
    }
  }
```

Hola Devs:
-Despues de horas buscando el error, esta configuracion fue la que funciono, por si alguien le puede ayudar:

-Aqui les dejo mi repositorio del codigo por si gustan [esta en el commit de esta clase]: Click Aqui
-Recuerden, #NuncaParesDeAprender 💚

No hay manera de que funcione, con las claves de test no me importa los productos y con las de live me pide que añada el dominio y no permite añadir localhost