Ejemplos
Explora ejemplos prácticos de cómo usar el SDK de JavaScript de Jupiter
Ejemplo: Vanilla JavaScript
Este ejemplo muestra cómo implementar Jupiter utilizando JavaScript vanilla y html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout - Mi Tienda</title>
<script src="https://cdn.jupiter.com/sdk/v1/jupiter.js"></script>
</head>
<body>
<div class="producto">
<h1>MacBook Pro 14"</h1>
<p class="precio">$45,000 MXN</p>
<button id="btn-pagar">Pagar con Crédito Jupiter</button>
</div>
<script>
// Inicializar Jupiter SDK
const jupiter = new Jupiter({
apiKey: 'jp_test_1234567890abcdef',
environment: 'sandbox'
});
// Llama authorize() al hacer clic en el botón
document.getElementById('btn-pagar').addEventListener('click', function() {
console.log('Iniciando proceso de autorización...');
jupiter.authorize({
amount: 45_000_00, // $45,000.00 en centavos
referenceId: `orden-${Date.now()}`, // Generar ID único
onComplete: ({loanId, status}) => {
console.log('Resultado:', result);
if (status === "rejected") {
alert('Lo sentimos, tu crédito fue rechazado.');
return;
}
alert(`¡Felicidades! Tu crédito fue aprobado. Loan ID: ${result.loanId}`);
// Guardar el loan ID (por ejemplo, enviar a tu backend)
fetch('/api/orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
loanId: result.loanId,
amount: 4500000,
...
})
});
},
onCancel: () => {
console.log('Usuario canceló');
alert('Proceso cancelado.');
},
onError: (error) => {
console.error('Error:', error);
alert(`Ocurrió un error: ${error.message}. Por favor, intenta de nuevo.`);
}
});
});
</script>
</body>
</html>Ejemplo: React
Este ejemplo muestra cómo implementar Jupiter en un componente de React.
import { useState } from 'react';
import Jupiter from '@jupiter/sdk';
const jupiter = new Jupiter({
apiKey: process.env.JUPITER_API_KEY,
environment: process.env.NODE_ENV === 'production' ? 'production' : 'sandbox'
});
export function JupiterButton({ amount, orderId }) {
const [status, setStatus] = useState('idle'); // idle, processing, success, error
function handleAuthorize() {
setStatus('processing');
jupiter.authorize({
amount: amount,
referenceId: orderId,
onComplete: ({loanId, status}) => {
console.log('Autorización completada');
if (status === 'rejected') {
setStatus('error');
return;
}
setStatus('success');
// Guarda el loan ID en tu backend
//
},
onCancel: () => {
console.log('Usuario canceló');
setStatus('idle');
},
onError: (error) => {
console.error('Error en autorización:', error);
setStatus('error');
}
});
};
return (
<button
onClick={handleAuthorize}
disabled={status === 'processing'}
className="btn-authorize"
>
{status === 'processing' ? 'Procesando...' : 'Pagar con Jupiter'}
</button>
);
}