¿Cómo integrar una pasarela de pago usando JavaScript?
19/03/2024
•
5
min
La integración de una pasarela de pago utilizando JavaScript implica principalmente una parte frontal donde puedes crear un formulario de pago y luego enviar los datos a la API de la pasarela. Puedes integrar una pasarela de pago en tu sitio web utilizando JavaScript simple, AJAX, etc., pero utilizaremos Stripe como ejemplo, ya que es una pasarela de pago ampliamente utilizada.
También necesitarás crear un punto final de backend que podría estar en cualquier idioma. Sin embargo, no cubriremos esta parte aquí ya que está más allá del alcance de la pregunta.
Los pasos principales para integrar Stripe en una página web son:
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Paso 1: Incluye Stripe.js en tu página web:
<script src="https://js.stripe.com/v3/"></script>
Paso 2: Crea una instancia de Stripe con tu clave publicable. Puedes obtener la clave registrándote para una cuenta en el sitio web de Stripe.
<script>
var stripe = Stripe('tu-clave-publicable');
</script>
Paso 3: Ahora creamos una instancia de Elements que nos ayudará a generar un formulario de entrada de tarjeta de crédito.
<script>
var elements = stripe.elements();
</script>
Paso 4: Crea una instancia del elemento de tarjeta.
<script>
var card = elements.create('card');
card.mount('#card-element');
</script>
Aquí, #card-element es la identificación de un div donde se renderizará el formulario que contiene los campos de la tarjeta.
Paso 5: Ahora, necesitamos manejar la presentación del formulario. Cuando el usuario envía el formulario, evitaremos la acción predeterminada de presentación del formulario y luego confirmaremos el pago con tarjeta.
<script>
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.confirmCardPayment('{CLIENT_SECRET}', {
payment_method: {
card: card,
}
}).then(function(result) {
if (result.error) {
// Muestra el error a tu cliente (por ejemplo, fondos insuficientes)
console.log(result.error.message);
} else {
// ¡El pago ha sido procesado!
if (result.paymentIntent.status === 'succeeded') {
alert("¡Pago exitoso!")
}
}
});
});
</script>
Ahora, pongamos todo junto:
<html>
<head>
<title>Título del Sitio Web</title>
</head>
<body>
<form id="payment-form">
<div id="card-element">
<!-- Un Elemento de Stripe será insertado aquí. -->
</div>
<!-- Usado para mostrar errores del formulario -->
<div id="card-errors" role="alert"></div>
<button type="submit">Enviar Pago</button>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('tu-clave-publicable');
var elements = stripe.elements();
var card = elements.create('card');
card.mount('#card-element');
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.confirmCardPayment('{CLIENT_SECRET}', {
payment_method: {
card: card,
}
}).then(function(result) {
if (result.error) {
console.log(result.error.message);
} else {
if (result.paymentIntent.status === 'succeeded') {
alert("¡Pago exitoso!")
}
}
});
});
</script>
</body>
</html>
Nota:
Reemplaza 'tu-clave-publicable' con tu Clave Pública de Stripe y '{CLIENT_SECRET}' debe ser obtenido de tu servidor. En un servidor backend, tienes que usar tu clave secreta para crear PaymentIntent y obtener el secreto del cliente.
Un campo de juegos completo está disponible en la documentación de Stripe. Puedes encontrarlo aquí: https://stripe.com/docs/js
Esta es solo una forma de integrar una pasarela de pago usando JavaScript, diferentes pasarelas tendrán un conjunto diferente de APIs y SDKs y los pasos obviamente variarán. Además, recuerde tener el monto y la moneda de la transacción asegurados en el lado del servidor, para evitar intentos fraudulentos de cambiar el precio o la moneda.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.