v0.2.8

Zelechos · Zelechos · commit 03769119cb9e · 2022-04-12T02:02:14.000-04:00
diff --git a/Exercises JavaScript/ExercisesAJAX/09_Exercise/.gitignore b/Exercises JavaScript/ExercisesAJAX/09_Exercise/.gitignore
@@ -0,0 +1 @@
+stripe-keys.js
diff --git a/Exercises JavaScript/ExercisesAJAX/09_Exercise/assets/stripe-checkout.js b/Exercises JavaScript/ExercisesAJAX/09_Exercise/assets/stripe-checkout.js
@@ -0,0 +1,43 @@
+'use strict'
+
+// Importaciones de la STRIPE_KEYS
+import STRIPE_KEYS from './stripe-keys.js';
+
+const d = document;
+const $courses = d.getElementById('courses');
+const $template = d.getElementById('course-template').content;
+const $fragment = d.createDocumentFragment();
+
+// Peticion para obtener los datos como nombre, descripcion , imagenes de los cursos
+fetch("https://api.stripe.com/v1/products",{
+    headers: {
+        Authorization: `Bearer ${STRIPE_KEYS.secret}` 
+    }
+})
+    .then(response => response.json())
+    .then(json=>{
+        json.data.forEach(course =>{
+            console.log(course);
+        });
+
+        // $courses.appendChild($clone);
+    })
+
+// Peticion para obtener los precios de los cursos
+fetch("https://api.stripe.com/v1/prices",{
+    headers: {
+        Authorization: `Bearer ${STRIPE_KEYS.secret}` 
+    }
+})
+    .then(response => response.json())
+    .then(json=>{
+        json.data.forEach(course =>{
+            console.log(course);
+        });
+        // $courses.appendChild($fragment);
+    })
+
+                // $template.querySelector('img').setAttribute("src", `${course.images[0]}`);
+            // $template.querySelector('.tittle').textContent = course.name;
+            // $template.querySelector('.subtittle').textContent = course.description;
+            // $fragment.appendChild($template);
diff --git a/Exercises JavaScript/ExercisesAJAX/09_Exercise/assets/stripe-keys-example.js b/Exercises JavaScript/ExercisesAJAX/09_Exercise/assets/stripe-keys-example.js
@@ -0,0 +1,9 @@
+'use strict'
+
+// Exportamos nuestras llaves publicas y secreta
+
+// ATENCION : POR CUESTIONES DE SEGURIDAD NO SUBIRE MIS KEYS USTEDES DEBEN PONER SUS PROPIAS KEY EN EL SIGUIENTE LINK => https://dashboard.stripe.com/test/apikeys
+export default {
+    public : "Your public Stripe key here!!!",
+    secret : "Your secret Stripe key here!!!"
+}
diff --git a/Exercises JavaScript/ExercisesAJAX/09_Exercise/index.html b/Exercises JavaScript/ExercisesAJAX/09_Exercise/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Checkout with Stripe</title>
+</head>
+<body>
+    <h1>Checkout with Stripe</h1>
+    <section class="courses" id="courses">
+
+    </section>  
+    <template id="course-template">
+        <figure class="course">
+            <img>
+            <figcaption>
+                <h2 class="tittle"></h2>
+                <h4 class="subtittle"></h4>
+            </figcaption>
+        </figure>
+    </template>
+
+    <!-- Importamos la libreria de Stripe Js -->
+    <script src="https://js.stripe.com/v3/"></script>
+
+    <!-- Importamos nuestro script para manejar el stripe-->
+    <script type="module" src="./assets/stripe-checkout.js"></script>
+
+</body>
+</html>
