{"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 si disponemos de un sitio de correo electr\u00f3nico. Desde el Dashboard puedes hacer diferentes cosas y para los desarrolladores tiene una gran variedad de diferentes lenguajes de programaci\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":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"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 si disponemos de un sitio de correo electr\u00f3nico. Desde el Dashboard puedes hacer diferentes cosas y para los desarrolladores tiene una gran variedad de diferentes lenguajes de programaci\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}]}}