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 鈥淯sar la API de Stripe鈥.
  3. Confirma tu correo e inicia sesi贸n.
  4. Crea tus llaves privadas en la secci贸n de 鈥淐onsigue 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?

o inicia sesi贸n.

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