{"id":1629,"date":"2024-08-02T10:47:31","date_gmt":"2024-08-02T08:47:31","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1629"},"modified":"2024-08-02T10:47:32","modified_gmt":"2024-08-02T08:47:32","slug":"006-pagos-online-con-fetch-y-stripe","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/17-ejercicios-con-ajax\/006-pagos-online-con-fetch-y-stripe\/","title":{"rendered":"006. Pagos Online con Fetch y Stripe"},"content":{"rendered":"\n

Stripe<\/strong> tiene su propia API<\/strong> que en la mayor parte del mundo, este servicio de cobro est\u00e1 habilitado. Es una excelente opci\u00f3n si disponemos de un sitio de correo electr\u00f3nico. Desde el Dashboard<\/strong> puedes hacer diferentes cosas y para los desarrolladores tiene una gran variedad de diferentes lenguajes de programaci\u00f3n.<\/p>\n\n\n\n\n\n\n\n

Lo m\u00e1s interesante es que el checkout<\/strong> para hacer una compra en linea a trav\u00e9s de una tarjeta de cr\u00e9dito, Stripe<\/strong> tiene una soluci\u00f3n que podemos implementar completamente con c\u00f3digo frontend<\/strong>, es decir, con Javascript<\/strong>.<\/p>\n\n\n\n

En este cap\u00edtulo vamos a crear los productos en nuestro Dashboard<\/strong> de Stripe<\/strong><\/a>, en el siguiente cap\u00edtulo accederemos a los productos din\u00e1micamente con Ajax<\/strong>, generando una p\u00e1gina donde est\u00e9n nuestros productos, y en un tercer cap\u00edtulo veremos la soluci\u00f3n del lado del cliente que ofrece Stripe<\/strong> con pura programaci\u00f3n Javascript<\/strong> para poder hacer las transacciones correspondientemente.<\/p>\n\n\n\n

En Stripe<\/strong> tenemos una secci\u00f3n completa para desarrolladores, como se est\u00e1 tratando con datos sensibles, los endpoints<\/strong> piden una autenticaci\u00f3n, para lo que tenemos que ir a las claves API<\/strong>, y nos van a proporcionar dos claves, la clave p\u00fablica<\/strong> y la clave secreta<\/strong>, ambas las necesitamos, ya que en diferentes momentos las va a solicitar el API<\/strong> de Stripe<\/strong>. La llave secreta comienza por sk<\/em> (secret key<\/strong>) y pk<\/em> (public key<\/strong>).<\/p>\n\n\n\n

En este cap\u00edtulo crearemos productos desde la plataforma de Stripe<\/strong>, para lo que hay que hacerse una cuenta de Stripe<\/strong>, y para hacer pruebas, existe la opci\u00f3n de ponerla en modo de prueba.<\/p>\n\n\n\n

Una vez creados los productos a trav\u00e9s del dashboard<\/strong> de Stripe<\/strong>, vamos a crear un archivo llamado stripe-checkout.html<\/em>, donde vamos a comenzar a escribir nuestro c\u00f3digo. En el mismo crearemos un espacio donde se ir\u00e1n cargando los diferentes productos que hemos creado en nuestra cuenta de Stripe<\/strong>. Vamos a trabajar con la t\u00e9cnica de los templates<\/strong>, que vimos en cap\u00edtulos pasados.<\/p>\n\n\n\n

Para guardar las llaves secretas vamos a trabajar con m\u00f3dulos<\/strong>, para que \u00fanicamente nosotros veamos nuestras llaves secretas<\/strong>. Tambi\u00e9n hay que mandar a llamar al script<\/strong> de Stripe<\/strong>, en este caso trabajaremos con uno que habla de la librer\u00eda stripe.js<\/em><\/strong>, que la podemos encontrar desde https:\/\/stripe.com\/docs\/js<\/a>.<\/p>\n\n\n\n

Vamos a crear tambi\u00e9n un archivo denominado checkout-stripe.js<\/em>, que va a ser el archivo que programaremos, y lo programaremos por m\u00f3dulos. Adicionalmente crearemos un archivo denominado stripe-keys.js<\/em>, que traer\u00e1 las llaves p\u00fablicas, para que no est\u00e9n a la vista.<\/p>\n\n\n\n

\n

Nota<\/strong>: adem\u00e1s de acceder al endpoint<\/strong> de los productos, tenemos que acceder tambi\u00e9n al endpoint<\/strong> de los precios de los productos.<\/p>\n<\/blockquote>\n\n\n\n

Para preparar el checkout<\/strong>, tenemos que ir a la documentaci\u00f3n de Checkout Sessions<\/strong> de Stripe<\/strong>. Es un m\u00e9todo que nos permitir\u00e1 interactuar con el formulario de pago que ya est\u00e1 en la infraestructura de Stripe<\/strong>, lo \u00fanico que tenemos que hacer es programar al evento click<\/em> <\/strong>de cada uno de los productos que tenemos en nuestro front<\/strong>, mandar llamar este servicio, nos pedir\u00e1 la llave p\u00fablica.<\/p>\n\n\n\n

Archivos<\/h2>\n\n\n\n

En el siguiente ZIP est\u00e1n todos los archivos de este ejercicio.<\/p>\n\n\n\n

Stripe<\/a>Descarga<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

Stripe tiene su propia API que en la mayor parte del mundo, este servicio de cobro est\u00e1 habilitado. Es una excelente opci\u00f3n…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1609,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1629","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Stripe tiene su propia API que en la mayor parte del mundo, este servicio de cobro est\u00e1 habilitado. Es una excelente opci\u00f3n...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1629"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1629\/revisions"}],"predecessor-version":[{"id":1632,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1629\/revisions\/1632"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1609"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}