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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Introducción a la API de Stripe Checkout

21/33
Recursos

La API de Stripe Checkout nos ayudará a alojar, gestionar y procesar los pagos de nuestros productos:

  1. Crea una cuenta en dashboard.stripe.com/register.
  2. Elige la opción de “Usar la API de Stripe”.
  3. Confirma tu correo e inicia sesión.
  4. Crea tus llaves privadas en la sección de “Consigue tus claves de prueba de API”.
  5. Guarda tus llaves en el archivo .env.development. Recuerda que no debes publicar este archivo en ninguna parte, nisiquiera en GitHub. Puedes añadirlo a tu lista de archivos ignorados en .gitignore para asegurarte de nunca añadirlo a tus commits.
  6. Habilita la opción de Checkout desde Aplicaciones de Stripe > Configuración de Checkout > Habilitado/Deshabilitado.
  7. Termina la configuración de tu cuenta en dashboard.stripe.com/account.
    Screen reader support enabled.

Aportes 13

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Una buena opción por si quieren montar tienda en serio. https://payouts.payoneer.com, y viven el sub-desarrollo como yo.

Mi platanero no aparece en la opciones jajaja

Por aqui un videito del famoso Fazt usando stripe con react https://www.youtube.com/watch?v=0Kd0LeAMGf4

Para los que se pierdan … la opcion de habilitarl el checkout cambio de nuevo… lo encontrarán en esta nueva url: https://dashboard.stripe.com/settings/checkout

La opcion de checkout ya no aparece en la pagina principal de Stripe, les dejo el link directo:
https://stripe.com/docs/payments/checkout

Stripe se puede usar en colombia?

para configurar el checkout (en el min 5:58) ir a
https://dashboard.stripe.com/settings/checkout

Y en la sección de próximos pasos buscar el botón Habilitar integración solo del cliente

Colombia no aparece en la lista de paises. Quedé 🤡

En mi país, El Salvador no está disponible Stripe al día de hoy. Uso una pasarela que se llama Pagadito

alguien sabe como puedo pedir la direccion del cliente cuando vaya a hacer una compra?

No se porqué terminé viendo Stripers