implementacion webpay

src/pages/webpay/commit.jsx

@@ -0,0 +1,66 @@
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import { useAuth0 } from '@auth0/auth0-react';
+import { useEffect, useState } from 'react';
+
+const CommitPage = () => {
+    const navigate = useNavigate();
+    const [message, setMessage] = useState('');
+    const { user, getAccessTokenSilently } = useAuth0();
+
+    useEffect(() => {
+        const pathParts = window.location.pathname.split('/');
+        const id = pathParts[2];
+        console.log('Transaction ID:', id);
+        const urlParams = new URLSearchParams(window.location.search);
+        const token_ws = urlParams.get('token_ws');
+
+        if (token_ws) {
+            console.log('Received Webpay token:', token_ws);
+            commitTransaction(token_ws, id);
+        } else {
+            console.log('No token received');
+            commitTransaction('', id);
+        }
+    }, []);
+
+    const commitTransaction = (wsToken, id) => {
+        getAccessTokenSilently()
+            .then(token => {
+                const payload = {
+                    wsToken: wsToken,
+                    email: user.email,
+                    username: user.nickname,
+                };
+                console.log('Payload:', payload);
+
+                return axios.post(`${import.meta.env.VITE_API_URL}webpay_plus/${id}/commit`, payload, {
+                    headers: {
+                        authorization: `Bearer ${token}`
+                    }
+                });
+            })
+            .then(response => {
+                console.log('Transaction response:', response.data);
+                setMessage(response.data.message);
+
+                if (response.data.message === 'Transacción realizada con éxito') {
+                    alert('Transacción realizada con éxito');
+                    navigate('/');
+                }
+            })
+            .catch(error => {
+                console.error('Error committing transaction:', error);
+                alert('Error en la transacción: ' + error.message);
+            });
+    };
+
+    return (
+        <div>
+            <div><h1>{message}</h1></div>
+            <button onClick={() => navigate('/')}>Volver al inicio</button>
+        </div>
+    );
+};
+
+export default CommitPage;

src/pages/webpay/webpay.jsx

@@ -0,0 +1,71 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useAuth0 } from '@auth0/auth0-react';
+import Auth0Login from '../../components/Auth0Login';
+
+const WebpayPage = () => {
+  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
+  const [purchaseSuccess, setPurchaseSuccess] = useState(false);
+  const [responseToken, setResponseToken] = useState(null);
+  const [responseUrl, setResponseUrl] = useState(null);
+
+  useEffect(() => {
+    const fetchToken = async () => {
+      if (isAuthenticated && user) {
+        const token = await getAccessTokenSilently();
+        Auth0Login(user, token);  // Llama a la función para crear el usuario si es necesario
+      }
+    };
+    fetchToken();
+  }, [isAuthenticated, user, getAccessTokenSilently]);
+
+  const handleBuyTickets = async () => { 
+    try {
+      const resp = await axios.get('https://api.ipify.org?format=json');
+      if (isAuthenticated) {
+        try {
+          const token = await getAccessTokenSilently();
+          const response = await axios.post(`${import.meta.env.VITE_API_URL}webpay_plus/create/`, {
+            buy_order: '123456',
+            session_id: user.sub.split('|')[1],
+            amount: 10000,
+            post_id: 1,
+          }, {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+          console.log('Solicitud de compra en proceso:', response.data);
+          alert('Solicitud de compra creada. Presiona el botón de Ir a Pagar para continuar.');
+          setResponseToken(response.data.token);
+          setResponseUrl(response.data.url);
+          setPurchaseSuccess(true);
+        } catch (error) {
+          console.error('Error realizando la solicitud de compra:', error);
+          alert('Error al crear la transacción');
+          setPurchaseSuccess(false);
+        }
+      } else {
+        alert('Debes iniciar sesión para comprar');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Webpay</h1>
+      <button onClick={handleBuyTickets}>Comprar</button>
+      {purchaseSuccess && <div className="success-message">Solicitud de compra en proceso. Ir a pagar para continuar.</div>}
+      {responseUrl && responseToken && (
+        <form method="post" action={responseUrl}>
+          <input type="hidden" name="token_ws" value={responseToken} />
+          <input type="submit" value="Ir a pagar" />
+        </form>
+      )}
+    </div>
+  );
+};
+
+export default WebpayPage;