Creación de Transacciones con PayPal en Platzi Store

Configura el SDK de PayPal para cobrar en MXN, habilitar vault y generar tu primera transacción con un botón inteligente. Verás cómo tomar el precio dinámico desde product.ejs, confirmar el pago con onApprove y probar todo con una cuenta de comprador en sandbox.

¿Cómo configurar el SDK de PayPal con currency y vault?

Para personalizar la integración, se edita header.ejs dentro de views/shared y se agregan parámetros al final de la línea donde está el client ID. El parámetro currency define la moneda del cobro (por ejemplo, MXN para peso mexicano; USD para dólares). El parámetro vault=true asegura una conexión entre el SDK y el backend de PayPal, requisito para crear suscripciones más adelante.

• currency: define la moneda en que cobrarás. Facilita reportes y evita errores de conversión.
• vault=true: conexión segura. Necesario para suscripciones.
• header.ejs: archivo compartido donde se carga el SDK.

Ejemplo de línea con parámetros en header.ejs:

<script src="...sdk/js?client-id=TU_CLIENT_ID&currency=MXN&vault=true"></script>

¿Cómo crear la transacción con el botón inteligente?

Dentro de product.ejs ya está integrado el botón. Desde la documentación, en la sección setup a transaction, se copia la base del código y se ajusta el monto. En lugar de un valor fijo (como 0.01), se usa la variable product.price disponible en la vista para cobrar el precio real del producto.

• product.price: toma el precio dinámico del producto mostrado.
• createOrder: define el monto que se enviará a PayPal.
• onApprove: confirma que el pago fue aprobado y muestra una alerta.

¿Cómo definir el precio dinámico con product.price?

Reemplaza el valor fijo por la variable del producto. Así se cobra exactamente lo que se ve en pantalla.

paypal.Buttons({
  createOrder: function (data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: { value: product.price }
      }]
    });
  },
  onApprove: function () {
    alert('transacción creada');
  }
}).render('#paypal-button-container');

¿Cómo confirmar con onApprove el pago aprobado?

Se agrega onApprove como segundo elemento del objeto de configuración. Aquí basta con una función anónima sin parámetros que dispare un mensaje de éxito. Esto verifica visualmente que el pago fue aprobado por PayPal.

• onApprove: punto de confirmación del pago.
• alert: retroalimentación inmediata para el usuario.

¿Cómo probar el flujo en sandbox con una cuenta de comprador?

Para pagar, hace falta una cuenta de comprador en sandbox. Desde la página principal del sandbox, en cuentas, se crea una cuenta personal (no business), eligiendo el país (México en el ejemplo), un correo como “mi comprador arroba email punto com” y una contraseña. Se puede asignar un balance alto (por ejemplo, un millón de pesos) y habilitar una tarjeta de crédito. Tras el estado “processing”, la cuenta queda lista.

• cuenta personal de pruebas: simula al comprador real.
• balance y tarjeta Visa: métodos de pago disponibles para testear.
• login en PayPal: paso obligatorio antes de pagar.

¿Cómo crear una cuenta personal de pruebas?

• Entrar a cuentas en sandbox y elegir crear nueva.
• Seleccionar tipo: personal.
• Definir correo y contraseña.
• Asignar balance alto y habilitar tarjeta de crédito.
• Esperar a que finalice “processing”.

¿Cómo pagar y verificar detalles en PayPal?

• Refrescar la tienda y pulsar “pagar con PayPal”.
• Iniciar sesión con la cuenta personal creada.
• Verificar el precio: cien pesos mexicanos para la playera.
• Confirmar datos del comprador y dirección: PayPal siempre requiere una dirección.
• Elegir método de pago (por ejemplo, la tarjeta Visa) y pulsar “pagar ahora”.
• Observar la alerta: “transacción creada”. Primera transacción exitosa con botón inteligente de PayPal.

Antes de avanzar: aunque el flujo anterior funciona en frontend, es posible que usuarios malintencionados intenten cambiar el precio. Por eso, el siguiente paso es capturar la transacción y enviar los datos al backend para comparar que el precio cobrado coincida con el que definiste. Así evitas cobros manipulados y aseguras la integridad del pedido.

¿Tienes dudas o quieres compartir tu implementación con currency, vault y onApprove? Deja tu comentario y conversemos.