Agregando productos a nuestra tienda en línea

Para los que tienen problemas con el allStripeSku. Revisando lo compartido por otros compañeros llegué a la siguiente solución:

En el archivo gatsby-config.js cambiar

objects: [`Sku`],

por

objects: [`Price`],

y el querry de graphql queda así

query{
  allStripePrice{
    edges{
      node{
        id
        unit_amount
        product{
          name
          metadata{
            img
            description
            wear
          }      
        }
      }
    }
  }
}

donde unit_amount es el precio del producto

¡Cómo me gustaría que existiera una tienda de Stickers de Platzi!

Todas mis quincenas se irían allá.

Como no existe hay que estudiar mucho para aprobar las carreras 💪🚀

En este momento la propiedad allStripeSku no se toma en el query, esto es debido a que según la documentación de Stripe a los productos solo se les puede crear un Sku cuando son de tipo good, por defecto, Stripe los crea de tipo service:

Esto significa que hay que empezar haciendo que los productos sean de tipo good, lo que no es posible (o al menos no encontre la forma) por medio del dashboard de Stripe, la solución que encontre a esto fue utilizar el CLI de Stripe el cual permite crear los productos especificando cada una de sus propiedades entre ellas el tipo:

**Es importante colocar el falg -d con el valor que aparece en la imagén, ya que sin el atributo name Stripe no permite crear los Sku **

De esta forma se crea el producto y en el dashboard ya es visible un apartado para crear los Sku y poder accesar al allStripeSku en GraphQL.

Con los productos que se crean el dashboard de stripe no se puede utilizar el allStrypeSku, esto es porque estos productos se crean de tipo service, para poder utilizar allStrypeSku se deben crear la productos de tipo good.

La solución que encontré fue instalar el stripe CLI en mi maquina ,en este enlace muestra como instalar. https://stripe.com/docs/stripe-cli

Luego de instalar ejecuto el comando

stripe login

con el inicio sesión
luego podemos crear un producto desde la terminal

stripe products create --name="stiker" --type="good" -d "attributes[0]"=name 

No coloco más valores porque puedo completar estos valores regresando al dashboard de stripe y completo los valores del productos (precio, imagen, metadata etc.)

En el archivo gatsby-config.js agrego una línea, en la configuración del plugin

{
      resolve:`gatsby-source-stripe`,
      options:{
        objects: ['Sku','Product'],
        secretKey: process.env.STRIPE_SK,
        downloadFiles: true,
      },
    }

Vuelvo a ejecutar el código de GraphQL y ya se muestran los productos Sku o también puedo utilizar el allStripeProduct que también me muestra algunas de las propiedades del producto.

Considero que esta solución es cómo hacer un poco de trampa y no sé si es la correcta pero me funciono.

Esta parte me pareció bastante interesante. El curso me está gustando mucho.
.
Al ser la primera vez que estoy haciendo algo con GatsbyJS aún no comprendo del todo el flujo de desarrollo de una aplicación de este tipo, para que pueda iniciar un proyecto yo solo.

Guia rapida para crear los productos con SKU en Windows

Vayan a la documentación CLI https://stripe.com/docs/stripe-cli

Bajen el archivo, descompriman lo, y pónganlo en el directorio de su preferencia.
Por ejemplo: Yo lo puse en el directorio del proyecto.

Para llamarlo, la misma consola te dice que es

.\stripe

entonces ya pueden hacer login:

.\stripe login

• Asegúrense de tener su sesión de stripe abierta, la del navegador.
  Lean, bien todo, les va a dar una frase, y solo tienen que dar ENTER para que se abra el navegador, y revise su sesión en stripe para vincular el CLI con su cuenta. Listo funciona como magia, ahora ya pueden usar el CLI

Pueden usar el comando que dio otro compañero para crear el producto:

.\stripe products create --name="Sudadera Platzi" --type="good" -d "attributes[0]"=name

Pero tiene truco, así no funciona ó al menos a mi no me funciono, me funciono así:

.\stripe products create --name="Sudadera Platzi" --type="good" -d"attributes[0]"=name

Si, el -d pegado -d"attributtes"...

Listo ya crearon un producto, ya puede tener SKU, pueden ir al dashboard de stripe, crearle un SKU **Recomendado

O crearlo en consola con algo así:

.\stripe skus create --name="Gold Special" --price=1500 --currency=usd -d"inventory[type]"=finite -d"inventory[quantity]"=500 --product=prod_HPMZEBiNddCUVb

En la parte final, --product=ID_DE_SU_PRODUCTO, lo copian de su dashboard de stripe.

Si lo crean desde consola, en la parte del SKU les aparecera un boton en gris/deshabilitado que dice ‘usar con checkout’, para que aparezca habilitado, ahi les dice que no permite productos finitos solo cambien:

.\stripe skus create --name="Gold Special" --price=1500 --currency=usd -d"inventory[type]"=infinite --product=prod_HPMZEBiNddCUVb

Igual, al final --product=ID_DEL_PRODUCTO_QUE_QUIEREN_GANE_EL_SKU

Bueno, llegaste al final, ya deberias de haber podido crear un producto desde consola, agregarle el SKU, correr el stripe-cli en Windows, pero seguramente aun no sabes como hacer que Gatsby te tome los Sku que tienes en tu cuenta, no, yo tampoco pude, funciono todo menos eso… también

• Revise la documentación del plugin y agregue ‘Product’ a object, y no funciono. object: [‘Product’, ‘Sku’]
• Intente Sku en la configuración en mayusculas y minisculas.
• Cambie la SK por PK y no funciono.

Tomaré la solución rápida de cambiar en gatsby-config.js

objects: ["Sku"],

por

objects: ["Price"],

con este query se obtiene la informaciópn necesaria

query GET_ALL_STRIPE_PRICE{
  allStripePrice {
    edges {
      node {
        id
        product {
          name
          metadata {
            description
            wear
            img
          }
        }
        unit_amount
      }
    }
  }
}

Si se quieren ahorrar los console.log para ver si estan llegando los datos al componente recomiendo instalar la extension de react

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Y listo 😄

Tienen un typo en los recursos **dotenv **dotnev

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

a Alguien más le arroja este error ?

 ERROR #11321  PLUGIN

"gatsby-source-stripe" threw an error while running the sourceNodes lifecycle:

No Stripe secret key found in gatsby-config

  30 |   } = actions;
  31 |   checkForStripeObjects(objects);
> 32 |   checkForSecretKey(secretKey);
     |   ^
  33 |   const stripe = new Stripe(secretKey, {
  34 |     appInfo: {
  35 |       name: "Gatsby.js Stripe Source Plugin",

File: node_modules/gatsby-source-stripe/gatsby-node.js:32:3



  Error: No Stripe secret key found in gatsby-config

tuve problemas con el archivo .env, nisiquiera me salia el icono al crearlo. para resolverlo lo que hice fue hacerlo un archivo de js

.env.development.js

y en las config de gatsby lo llame de igual forma:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}.js` 
})

espero les funcione igual si tienen el mismo error que yo 😃

Agregando productos a nuestra tienda en línea

Para usar Stripe desde nuestra aplicación con gatsby necesitamos instalar los siguientes plugins: npm i gatsby-source-stripe gatsby-plugin-stripe

Como también usaremos las claves del archivo .env, necesitamos instalar npm i dotenv

gatsby-config.js:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`
})

module.exports = {
  siteMetadata: {
    title: `Platziswag`,
    description: `El mejor swag de Platzi disponible para ti`,
    author: `@MiguelAngelRe28`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-stripe`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-source-stripe`,
      options: {
        objects: [`Price`],
        secretKey: process.env.STRIPE_SK,
      }
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: 'src/utils/typography.js',
      }
    }
  ],
}

query:

query {
  allStripePrice {
    edges {
      node {
        id
        unit_amount
        product {
          name
          metadata {
            img
            description
            wear
          }
        }
      }
    }
  }
}

Encontre y solucione el error de SKU espero les pueda servir de algo.
Aunque los productos con sku se hacen a traves de la consola, asi que lo mejor es cambiar a objects: [‘price’].
Instale esta dependencia
npm i @stripe/stripe.js

source-stripe
{
resolve: gatsby-source-stripe,
options: {
objects: [‘Price’],
secretKey: process.env.GATSBY_STRIPE_SECRET_KEY,
downloadFiles: false,
}
Agregue otro archivo en utils = stripe.js

• This is a singleton to ensure we only instantiate Stripe once.
  */
  import { loadStripe } from “@stripe/stripe-js”

let stripePromise
const getStripe = () => {
if (!stripePromise) {
stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY)
}
return stripePromise
}

export default getStripe

Y por utimo .env.production y .env.development lleban esto
GATSBY_STRIPE_SECRET_KEY=tu_key_aca
GATSBY_STRIPE_PUBLISHABLE_KEY=tu_key_aca

Reiniciar el servidor y todo bien

Pregunta: ¿Si antes del proceso de compra quisiera, por ejemplo, hacer un módulo para cotizar los productos (es decir, saber el precio antes de comprarlos como en un proceso de cotización o contratación) puedo hacerlo desde mi propio código o desde un servicio de estos?

No entiendo porque en los tutoriales no tienen problemas con el allStripeSku

Alguien me puede ayudar con este error que no me permite avanzar.

Que grande es la comunidad de Platzi. Siempre hay héroes sin capa 💚

odio los errores de código son de lo peor

(╯°□°）╯︵ ┻━┻

no funciona el allStripeSku

allStripeSku no lo toma en el Query. Alguien me puede ayudar con alguna solucion?

Existe algún plugin de gatsby como alternativa a Stripe?

Tengan cuidado con la Confg que dejaron en la descripción, tiene un typo

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

Ya intente varias veces en object![](ur

l)
Primero Sku, luego cambie a los que me sugería en la consola, se que a unos les funciona con Price pero no entiendo este problema