Curso JavaScript: 132. Ejercicios AJAX - APIs: Pagos Online con Fetch y Stripe (4/4) -

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 157

  • @pauldelacruzcancho3749
    @pauldelacruzcancho3749 Год назад +16

    En ningún curso de pago te dan estos ejemplo, desde el corazón JonMircha, muchas gracias.
    Para los que estan haciendo el curso a 05/2023 y no les sale el ejercicio intenten lo siguiente:
    habilitar la integración de Stripe Checkout en la configuración de tu cuenta de Stripe (por el dashboard).
    van a su configuración (el icono de engranaje), les aparecerá una opción que diga "
    Checkout y Payment Links" los llevara a otra página y en la parte inferior encontraran dos segmentos, escogen "INTEGRACIÓN SOLO DEL CLIENTE" y tienen que "habilitar integración solo del cliente", luego aparecerá un mensaje indicando que pongan un nombre a su tienda o producto y listo ya sale.
    Gracias JonMircha te queremos!!!

    • @jonmircha
      @jonmircha  Год назад

      👋🏻😉🙌🏻

    • @adrianmartinez2061
      @adrianmartinez2061 Год назад

      Genio!! me ahorraste un montón de tiempo! 👏👏👏

    • @davidmejias1445
      @davidmejias1445 Год назад

      mil gracias hermano Dios te bendiga

    • @cashredes
      @cashredes 11 месяцев назад

      uy paul, que ahorro de tiempo por este comentario, muchisimas gracias.

    • @luisfernandoleal5023
      @luisfernandoleal5023 8 месяцев назад

      Gracias Paul!! Me ahorraste muchísimo tiempo!! Te amo!! a vos también Jhon!!

  • @AngelSalazar-uf5fk
    @AngelSalazar-uf5fk 3 года назад +43

    Jon muchas gracias como siempre ! me veré este curso varias veces este año para un conocimiento más sólido. PARA QUIENES TENGAN PROBLEMAS CON ESTE VIDEO:
    Probablemente les diga que tienen que configurar su cuenta, entonces van a dashboard/settings/account y lo que tienen que setear es el nombre de su cuenta o empresa, después de eso tienen que irse a dashboard/settings/checkout y habilitar la opción de integración sólo del cliente. Don't get stressed jajaja la programación es algo que hay que tener paciencia y siempre con buena aptitud como la de nuestro buen amigo Jon.
    De verdad que muy buen aporte los pagos con stripe, aveces somos un poco escépticos a utilizar recursos de terceros, pero la verdad acá es que nos conviene muchísimo utilizar este recurso para evitar todos aquellos problemas que ya los desarrolladores de stipe han pensado y resuelto.
    Pienso que esto pasa porque se cambia alguna política de la empresa y la configuración para el consumo del API es otra, saludos !.

  • @AngelSalazar-uf5fk
    @AngelSalazar-uf5fk 3 года назад +2

    Jon muchas gracias como siempre ! me veré este curso varias veces este año para un conocimiento más sólido. PARA QUIENES TENGAN PROBLEMAS CON ESTE VIDEO:
    Probablemente les diga que tienen que configurar su cuenta, entonces van a dashboard/settings/account y lo que tienen que setear es el nombre de su cuenta o empresa, después de eso tienen que irse a dashboard/settings/checkout y habilitar la opción de integración sólo del cliente. Don't get stressed jajaja la programación es algo que hay que tener paciencia y siempre con buena aptitud como la de nuestro buen amigo Jon.
    De verdad que muy buen aporte los pagos con stripe, aveces somos un poco escépticos a utilizar recursos de terceros, pero la verdad acá es que nos conviene muchísimo utilizar este recurso para evitar todos aquellos problemas que ya los desarrolladores de stipe han pensado y resuelto.

  • @luisfernandoleal5023
    @luisfernandoleal5023 8 месяцев назад +1

    Jon, excelente esta serie de videos!!! Estaría muy bueno que armes uno con mercado pago - mercado libre!! Muy pero muy bueno este curso.

  • @adrianmartinez2061
    @adrianmartinez2061 Год назад +1

    Querido Profe!! esta serie de videos ha estado excelente!!! varios conceptos para repasar y cosas que investigar! mil gracias!! un gran abrazo!

    • @jonmircha
      @jonmircha  Год назад

      Con mucho gusto👋🏻😉

  • @miktl
    @miktl Год назад +1

    Uff que buena. en la documentación dice que el redirectToCheckout esta obsoleto pero no encontré otra alternativa solo para el lado del cliente, pero sigue funcionando por ahora.

  • @Sebastian-fj1wn
    @Sebastian-fj1wn Год назад

    Siendo vísperas para navidad en pleno 2022. Estos videos de Jon siguen siendo uno de los mejores cursos que puedes encontrar. Muchas gracias por todo el apoyo.

    • @jonmircha
      @jonmircha  Год назад

      Muchísimas gracias!😉👋🏻

  • @addevmoises
    @addevmoises 3 года назад +2

    Excelente esta miniserie me encantó, me daba un error para abrir el checkout pero lo solucioné activando en el dashboard la integración solo para clientes

  • @benjassanchez6699
    @benjassanchez6699 11 месяцев назад +1

    Excelente video - ahí la llevamos en el curso

    • @jonmircha
      @jonmircha  11 месяцев назад

      Excelente!👋🏻😉

  • @yovanyescobarrojas2041
    @yovanyescobarrojas2041 2 года назад +1

    grandeeeeeee profe mircha, saludos desde COLOMBIA

  • @hernangarcia77
    @hernangarcia77 3 года назад +1

    me has salvado con el e.target a los elementos hijos y luego usar parentNode para referirte al container. Mil gracias Jon, aprendo mucho con tus videos

  • @brandonluna8245
    @brandonluna8245 Год назад +1

    que buen fondo de pantalla profe! 👏

  • @edwardgeronimo335
    @edwardgeronimo335 4 года назад +2

    Muchas gracias por compartir sus conocimientos y amplia experiencia en el desarrollo web de manera desinteresada. Excelente material presentado. Unos de los mejores curso de Javascript

  • @alexanderg3764
    @alexanderg3764 3 года назад

    Esta seccion fue maravillosa, jamas pense que un curso veria una pasarela de pagos. Cuando fui a crear la cuenta en Stripe me di cuenta que para Colombia no hay soporte, eso me desanimo, pero, se puede crear la cuenta poniendo USA y desde el dashboard configurar a la moneda colombiana !! (por si algun colombiano lee esto :))

  • @mundomagupe6088
    @mundomagupe6088 Год назад

    Muchas gracias, enserio muy interesante stripe. lastima que no este disponible en mi pais! Saludos voy corriendo al siguiente video jaja

  • @lopezrunco
    @lopezrunco 2 года назад +1

    Excelente serie! Sin duda muy útil para aplicar en proyectos reales. Saludos!

  • @ArturoJimenez
    @ArturoJimenez 4 года назад +1

    Llegue tarde no vi el estreno ! pero ya me actualizo .. jajaja

  • @condebasura
    @condebasura Год назад

    hola, como andas? me gusto mucho la idea de la api externa para el pago de productos, asi tambien poder alojar la imagen jaja, me supongo que no se complica al querer ingresar los productos a stripe por medio de un formulario. muchas gracias

  • @Wiiiiizard
    @Wiiiiizard 2 года назад +1

    🧙‍♂Muchas gracias!!! Muy buen curso!!!

  • @edilymora125
    @edilymora125 3 года назад +4

    Gracias por esta super serie profe ❤

  • @josedaniel3316
    @josedaniel3316 2 года назад +1

    Un crack tio jhon.. gracias por el cursoo

  • @domingorubengaldamez5276
    @domingorubengaldamez5276 3 года назад

    Gracias Jon por tu generosidad y tu dedicación

  • @reykerescalona3109
    @reykerescalona3109 Год назад

    Hola mi estimado Jon, espero estes bien, un saludo desde Venezuela. Existe una forma de trabajar solo del client-side sin necesidad de agregar los productos o planes en stripe ? La web que tengo montada funciona consumiendo una api de un crm

  • @alonsocueva5923
    @alonsocueva5923 4 года назад

    Muchas gracias profe Mircha. Un excelente curso de JavaScript. Un saludo desde Perú.

  • @chambers4222
    @chambers4222 3 года назад

    Excelentes videos, desconocía acerca del servicio Stripe y la verdad es bastante bueno además de que se puede utilizar con distintos lenguajes, había visto otros videotutoriales o cursos en donde se trataba de implementar esto y batalle bastante, inclusive unos no funcionaron ya sea por desactualizaciones o algunos errores que surgían por malas explicaciones. Muchísimas gracias por estos videos Jon! Bendiciones. 😀😀😀

    • @jonmircha
      @jonmircha  3 года назад

      Gracias por tus bendiciones

  • @Fogell_
    @Fogell_ 4 года назад +5

    Las claves de la api no se verian vulnerables al estar en un archivo js en el front? o sea cualquiera las podria ver o no? 🤔

    • @jonmircha
      @jonmircha  4 года назад +9

      No por que en tu dashboard de stripe tú restringues los dominios de los que aceptarás peticiones, así que no importa que tengan tus keys jamás podrían hacer peticiones desde dominios no autorizados

  • @valnetvln6802
    @valnetvln6802 3 года назад +1

    Brutal el vídeo amigo, muchas gracias por este curso...

  • @manuelarg654
    @manuelarg654 4 года назад +2

    Hola Jon una pregunta, a qué dirección llegará la orden de tacos si el formulario no la tiene o como se agregaría en caso de domicilios?

    • @jonmircha
      @jonmircha  4 года назад

      Stripe sólo cobra, no se encarga de la entrega

  • @SergioRamirez-ed6ec
    @SergioRamirez-ed6ec 2 года назад

    Hola, sabes si con el método redirectToCheckout se pueden definir los planes a meses sin intereses (installments) a mostrar en el checkout?
    Es decir, que solo se muestren, por ejemplo... de 3 a 12 meses sin intereses

  • @carloseduardoperezmares6237
    @carloseduardoperezmares6237 4 года назад +1

    Gracias por el curso!!

  • @brayanortegaarmendariz3015
    @brayanortegaarmendariz3015 Год назад

    Profesor, se permite usar una de las asesorias de paga que ofrece para una duda especificamente del curso, no hacer ejercicios o llover dudas externas, pero si sobre una pequeña parte donde estoy atorado, desearía ser uno de sus alumnos de la uni, gracias.

  • @italosalas7015
    @italosalas7015 2 года назад +1

    @jonmircha, Es posible implementar la API de Stripe en un Marketplace? teniendo en cuenta que al no tener acceso a la dashboard, el usuario no podra publicar sus productos, por consecuencia, nosotros mismos tendriamos que publicar los libros manulmente uno por uno.

    • @jonmircha
      @jonmircha  2 года назад

      Hay varios CMS que ya traen la integración de stripe, depende con que tecnologías crees tu e-commerce

  • @emmanuelabregu2267
    @emmanuelabregu2267 2 года назад +1

    Ya veo
    si es suscripción el mode:"subscription",
    pero si es pago único es mode: "payment",
    y si tuviera aleatorio habría un mode para ello?

  • @darx9050
    @darx9050 2 года назад

    Tremenda clase Jon, este curso no deja de sorprenderme, disculpa una pregunta, si tuviera un carrito de compras, dentro del objeto quantity seria una variable de 'n productos elegidos por el usuario?' y el price tambien cambiaria o ese no?

  • @pepepixal6640
    @pepepixal6640 2 года назад

    gracias jon, ¿se podría mandar una orden de pago de una sola vez que incluya varios productos y cantidades?

    • @jonmircha
      @jonmircha  2 года назад

      Hay que revisar la doc, yo supongo que es muy viable

  • @brandon400
    @brandon400 4 года назад +1

    gran video,una duda
    en caso de que haga una web de esto, podre seguir usando stripe en estado de prueba?le diria al usuario que ponga en tarjeta "42 42 42..."
    pregunto porque no tengo intencion de vender nada pero me gustaria hacer el ejercicio :)

  • @brianbg941
    @brianbg941 4 года назад +1

    Buenas me gusto mucho y me gustaría implementarlo, pero el código es seguro para implementar mis productos con JS y Stripe ?

    • @jonmircha
      @jonmircha  4 года назад

      Sí, por que desde el dashboard controlas desde que dominios se reciben la petición y toda la seguridad en el backend, te lo da Stripe

    • @brianbg941
      @brianbg941 4 года назад +1

      @@jonmircha Muchas gracias profe, esperando los nuevos Proyectos!!!

  • @TheDawnBreaker9146
    @TheDawnBreaker9146 2 года назад

    Gracias Jon, muy bueno esta parte, sin embargo me apareció un error 400 pidiéndome una dirección de página de pagos (pagiment_page), no entiendo que pasó. Gracias

    • @jonmircha
      @jonmircha  2 года назад

      Lee la doc de Stripe y busca ese tipo de error

  • @jhonnathanalvarez03
    @jhonnathanalvarez03 3 года назад +2

    Alguien tiene este tipo de error..?
    Uncaught IntegrationError: Invalid stripe.redirectToCheckout parameter: lineltems is not an accepted parameter.

    • @jonmircha
      @jonmircha  3 года назад

      Revisa que tengas activado la solución frontend en tu dashboard de strype

    • @josechambi7483
      @josechambi7483 3 года назад

      me sale igual solucionaste?

    • @hugoguillermo4392
      @hugoguillermo4392 2 года назад

      Hola claro subtituye y coloca esto lineItems es i en Mayuscula

  • @brianbg941
    @brianbg941 4 года назад +1

    Me sale este error a la hora de hacer un único pago Modo Payment Unico: IntegrationError: The Checkout Session's total amount must convert to at least 50 cents. $100.00 COP converts to approximately $0.02 USD. el monto en peso colombiano es mayor a $0.2 como podria solucionar el problema profesor ?

    • @jonmircha
      @jonmircha  4 года назад

      Creo que lo que te dice la API es que el monto es muy pequeño para procesarlo, revisa la documentación

  • @emersonpalaciootalvaro2632
    @emersonpalaciootalvaro2632 4 года назад

    excelente parcero muy completo y super bien explicado todo 🌟🌟🌟🌟🌟 5 de 5 .
    pregunta.
    como hago para pasar ese dinero a una cuenta personal o de una cuenta empresarial?

  • @mastermaster153
    @mastermaster153 2 года назад

    12:51 por qué se usa parentElement? que no ya el data attribute ya está en el e.target? :(

    • @adriel8152
      @adriel8152 2 года назад +1

      Porque el e.target puede devolver la img o el figcaption, y el dataset no está en esos elementos, sino en el elemento padre que es el figure, por eso se usa el método parentNode()

  • @eitanstevengil4215
    @eitanstevengil4215 Год назад

    Me sale el error: "You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS." Cuando ya quiero implementar el checkout. Ya vi el comentario de Angel Salazar e hice las configuraciones, pero no me lo soluciona :((

    • @jonmircha
      @jonmircha  Год назад

      Revisa los cambios que haya en la doc de Stripe

  • @nomackleo
    @nomackleo 4 года назад +1

    Hola! Quisiera decir antes de cualquier cosa, que es excelente la labor que haces. Gracias.
    Tengo una duda respecto a la seguridad y espero la pregunta no sea tonta, pero es algo que no me queda claro.
    ¿Al ser un módulo el código no queda expuesto, o se deben tener más cosas en cuenta para no exponer las keys de la API?
    Gracias master.

    • @jonmircha
      @jonmircha  4 года назад +1

      La seguridad te la da Stripe, no hay problema de que quedenexpuestas las keys por que desde el dashboard de stripe tu decides de que dominios e ips recibiras peticiones

    • @nomackleo
      @nomackleo 4 года назад

      @@jonmircha genial!! Gracias. 😁

  • @edwina.espinaltaveras4222
    @edwina.espinaltaveras4222 3 года назад +1

    Todo funciono perfectamente, pero tengo un duda y es que pague unos de los productos y quiero saber si me descontaron ese dinero o solo fue una simulación, se que es algo tonto pero quiero confirmar xD

    • @jonmircha
      @jonmircha  3 года назад

      Depende de en que modo tengas el API de Stripe

  • @tomasalvarez922
    @tomasalvarez922 4 года назад +1

    jon, tengo este error, puede ser porque no complete al 100% mi cuenta de stripe? (si la active). Aparte no esta disponible para mi pais (argentina) The Checkout client-only integration is not enabled. Enable it in the Dashboard at dashboard.stripe.com/account/checkout/settings.
    at new r (js.stripe.com/v3/:1:6143)
    at Wn (js.stripe.com/v3/:1:53263)
    at $n.Qn._handleMessage (js.stripe.com/v3/:1:61506)
    at $n._handleMessage (js.stripe.com/v3/:1:22815)
    at js.stripe.com/v3/:1:59748

    • @jonmircha
      @jonmircha  4 года назад

      Tienes que activar la solución client-only, desde tu dashboard, por eso salen esos errores

  • @Petter092
    @Petter092 3 года назад

    Excelente video. Me gustaría saber como obtener la respuesta de la transacción en la pagina de éxito con puro javascript, ¿alguien tiene documentación?

    • @jonmircha
      @jonmircha  3 года назад

      Esto es puro JavaScript ¯\_(ツ)_/¯

  • @ArmanGO-Oficial
    @ArmanGO-Oficial 2 года назад

    Como se haría para implementar PayPal a la pasarela de pagos?

    • @jonmircha
      @jonmircha  2 года назад

      Lee la documentación de Paypal y verás que será algo muy similar 😉

  • @elweonweandolaweafome
    @elweonweandolaweafome Год назад

    32:14 el SEO de pokemon showdown XD casualmente lo juego :v

  • @juancruzledesma5693
    @juancruzledesma5693 4 года назад

    Una consulta profe, al ingresar para pagar con tarjeta me sale este error en la consola:
    POST play.google.com/log?format=json&hasfast=true net::ERR_BLOCKED_BY_ADBLOCKER
    De hecho son varios con la peticion POST y GET, solamente que cambian las URL pero el "net::ERR...." me sale igual. Lo mas curioso de esto es que me sale este error pero me permite continuar
    pd: Utilizo como navegador Opera (lo digo por si las moscas)

    • @jonmircha
      @jonmircha  4 года назад

      Y por que haces POST a esta url T play.google.com/log?format=json&hasfast=true ????

    • @juancruzledesma5693
      @juancruzledesma5693 4 года назад

      @@jonmircha Es que eso es lo mas extraño, no le estoy haciendo ninguna petición. ¯\_(ツ)_/¯
      Las unicas URLs que tengo en el codigo serian las 2 que estan en fetch() y las de "successUrl" y "cancelUrl"

  • @luisleonardocastillo6502
    @luisleonardocastillo6502 4 года назад

    Ayudaa!
    me sale el siguiente error y ya revise el código aparentemente igual:
    POST api.stripe.com/v1/payment_pages 400
    Uncaught (in promise) IntegrationError: Checkout does not support package pricing, aka `transform_quantity` in `items[0]`.
    at new r (js.stripe.com/v3/:1:5998)
    at zn (js.stripe.com/v3/:1:51870)
    at Kn.Xn._handleMessage (js.stripe.com/v3/:1:5896

  • @cristianrosas8674
    @cristianrosas8674 3 года назад +2

    Me encantó ésto, pero leerse toda la documentación de Stripe tambien es un poco dolor en el alma xD

  • @helipalacio8772
    @helipalacio8772 Год назад +1

    👏👏👏 🙏🙏🙏🙏

  • @josepalacios9273
    @josepalacios9273 4 года назад +1

    Al hacer click para la compra del producto tengo este error: api.stripe.com/v1/payment_pages 400. Alguna sugerencia para solucionarlo?

    • @jonmircha
      @jonmircha  4 года назад

      400 hace referencia a errores en tus peticiones revisa tus urls

    • @RCanaCH
      @RCanaCH 4 года назад +6

      Te falta activar la opción de "Integración solo del cliente de Checkout"
      1. Ingresa con tu cuenta al dashboard
      2. Click en configuración en el panel lateral
      3. Click en configuración de Checkout de la sección Payments
      4. Click para habilitar la Integración solo del cliente de Checkout
      Más detalles en el siguiente enlace 🔥
      stripe.com/docs/payments/checkout/client

    • @josepalacios9273
      @josepalacios9273 4 года назад +1

      @@RCanaCH Gracias por la comunicacion. Revise las urls (recomendacion de Jon) y segui las instrucciones pero aun sigo con el error, adicionalmente tengo el mensaje : (index):1 Uncaught (in promise) IntegrationError: Not a valid URL
      at new r (js.stripe.com/v3/:1:5998)
      at Yn (js.stripe.com/v3/:1:53165)
      at Kn.Xn._handleMessage (js.stripe.com/v3/:1:61286)
      at Kn._handleMessage (js.stripe.com/v3/:1:22719)
      at js.stripe.com/v3/:1:59639

    • @josepalacios9273
      @josepalacios9273 4 года назад +1

      Finalmente encontre el problema: Doble espacio en blanco en una url. Gracias por la ayuda.

    • @Jadexb04
      @Jadexb04 4 года назад

      @@RCanaCH Gracias por el dato eso faltaba habilitar.

  • @cristianroldan337
    @cristianroldan337 2 года назад

    Buen día, a alguien más le salta el error 400 ?? Me dice que tengo que configurar mi cuenta en stripe.dashboard, pero ya esta configurada y verificada mediante mensaje de texto, pero aún así me sale el error :/

    • @cristianroldan337
      @cristianroldan337 2 года назад

      Según un mensaje que saque de la pestaña de network, en el error me dice que tengo que habilitar la integración solo para clientes: dashboard.stripe.com/account/checkout/settings yendo a esa url, cuando lo quiero hacer, me sale un ADVERTENCIA, diciendo que los id de los productos se harán públicos, tambien me dice:
      Los usuarios que conozcan el ID público de un producto podrán comprarlo. Los productos archivados no se pueden comprar.

    • @cristianroldan337
      @cristianroldan337 2 года назад

      Bueno, lo hablitilé, me funciona como Jon, pero antes de hacer la redireccion, me sale un mensaje de advertencia en la consola, diciendo:
      "You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS"
      Y cuando estoy en la parte del formulario que Stripe proporciona, me salen mensajes de advertencia:
      Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type".
      Esto lo digo porque a Jon no le sale igual, pero no veo que algo cambie, lo digo por si hice algo mal o por si no debería haber habilitado la integracion solo para clientes

    • @hugoguillermo4392
      @hugoguillermo4392 2 года назад

      @@cristianroldan337 Solo habilitalo, lo acabo de habilitar y me funciono a la primera

  • @anthonyavilez2401
    @anthonyavilez2401 3 года назад +1

    👌

  • @JulianLoyolaSolis
    @JulianLoyolaSolis 3 года назад +1

    no funciona
    pasa el codigo por favor

    • @jonmircha
      @jonmircha  3 года назад +1

      github.com/jonmircha/youtube-js#repositorio-premium

  • @helipalacio8772
    @helipalacio8772 Месяц назад +1

    👨

  • @heimancastro1954
    @heimancastro1954 2 месяца назад +1

    🤑🤑🤑🤑🤑🤑🍕🍕🍕🍕🍕🍕

  • @lalojejeje
    @lalojejeje 2 года назад

    Hola Jon! Tengo el siguiente error: stripe-checkout.js:60 Uncaught TypeError: Cannot read properties of undefined (reading 'redirectToCheckout')
    at HTMLDocument. (stripe-checkout.js:60:9) Alguna idea? 🤔😔 Ya le di vueltas a todo...

    • @jonmircha
      @jonmircha  2 года назад +1

      Seguro tienes un error de dedo al escribir el nombre de tus variables

    • @lalojejeje
      @lalojejeje 2 года назад

      @@jonmircha Jon Jon Jon!!!... Error en la ruta v3 por v1 en el html... Jalón de orejas para mi... 😒🤣 Gracias Jon, eres el mejor!!!...

  • @helipalacio8772
    @helipalacio8772 Год назад +1

    👏👏👏 🙏🙏🙏