Braintre en React y NodeJs

Vista previa del material en texto

Braintre en React y NodeJs. 
Configuración del backend: 
• Instala las dependencias necesarias ejecutando el siguiente comando en tu 
directorio de backend: 
 
 npm install express braintree 
 
• Crea un servidor Node.js con Express y configura las rutas para procesar las 
solicitudes del carrito de compra y la integración con Braintree. Aquí hay un 
ejemplo básico: 
 
const express = require('express'); 
const braintree = require('braintree'); 
const app = express(); 
 const gateway = new braintree.BraintreeGateway({ 
 environment: braintree.Environment.Sandbox, 
 merchantId: 'TU_MERCHANT_ID', 
 publicKey: 'TU_PUBLIC_KEY', 
 privateKey: 'TU_PRIVATE_KEY', 
}); 
app.get('/client_token', (req, res) => { 
gateway.clientToken.generate({}, (err, response) => { 
 if (err) { res.status(500).send(err); 
 } else { 
 res.send(response.clientToken); } 
}); }); 
 
app.post('/checkout', (req, res) => { 
 const { amount, nonce } = req.body; 
 gateway.transaction.sale( { amount, paymentMethodNonce: nonce, options: { 
submitForSettlement: true, }, }, (err, result) => { if (err) { res.status(500).send(err); 
} else { 
res.send(result); } } ); }); 
app.listen(3001, () => { 
console.log('Servidor backend escuchando en http://localhost:3001'); 
 }); 
 
 
Configuración del frontend: 
 
• Crea una aplicación React o utiliza una existente. 
• Configura la integración con Braintree en tu componente de carrito de compra. Aquí hay 
un ejemplo básico utilizando el cliente JavaScript de Braintree: 
 
import React, { useEffect, useState } from 'react'; 
import braintree from 'braintree-web'; 
 
const Cart = () => { 
 const [clientToken, setClientToken] = useState(''); 
 const [nonce, setNonce] = useState(''); 
 
 useEffect(() => { 
 // Obtener el token del cliente desde el backend 
 fetch('/client_token') 
 .then((response) => response.text()) 
 .then((token) => setClientToken(token)); 
 }, []); 
 
 const handlePayment = () => { 
 braintree.client.create( 
 { 
 authorization: clientToken, 
 }, 
 (err, clientInstance) => { 
 if (err) { 
 console.error(err); 
 return; 
 } 
 
 clientInstance.request( 
 { 
 amount: '10.00', // Monto del carrito de compra 
 currency: 'USD', 
 // Otros detalles del pedido (nombre, dirección, etc.) 
 }, 
 (requestErr, { nonce: paymentNonce }) => { 
 if (requestErr) { 
 console.error(requestErr); 
 return; 
http://localhost:3001/
 } 
 
 // Enviar el nonce del pago al backend para procesarlo 
 fetch('/checkout', { 
 method: 'POST', 
 headers: { 
 'Content-Type': 'application/json', 
 }, 
 body: JSON.stringify({ 
 amount: '10.00', // Monto del carrito de compra 
 nonce: paymentNonce, 
 }), 
 }) 
 .then((response) => response.json()) 
 .then((data) => { 
 // Manejar la respuesta del backend (éxito, error, etc.) 
 }); 
 } 
 ); 
 } 
 ); 
 }; 
 
 return ( 
 <div> 
 {/* Renderizar el carrito de compra y otros elementos */} 
 <button onClick={handlePayment}>Pagar</button> 
 </div> 
 ); 
}; 
 
export default Cart; 
 
 
 Asegúrate de gestionar el estado del carrito, calcular el total, capturar la información 
del pedido y realizar acciones adicionales según tus requerimientos. 
Recuerda reemplazar 'TU_MERCHANT_ID', 'TU_PUBLIC_KEY' y 'TU_PRIVATE_KEY' en el 
backend con tus propias credenciales proporcionadas por Braintree.