Crear botón de PayPal con JavaScript SDK

Curso de Pagos Online con PayPal

Clase 10 de 18

Clase 10 / 18

Recursos

Aprende a integrar un botón de pago de PayPal paso a paso con el SDK de JavaScript. Esta guía práctica te muestra cómo preparar el entorno, definir el container con ID y ejecutar el método Buttons con render para visualizar el botón y empezar a cobrar.

¿Cómo crear y renderizar un botón de PayPal con el SDK de JavaScript?

Integrar el botón comienza en el portal de desarrolladores, en la sección de Basic Integration. Ahí se indica usar un contenedor con un ID (por ejemplo, “paypal-button-container”) para que el script pueda referenciarlo y renderizar el botón dentro de esa capa.

¿Qué es y para qué sirve el contenedor con ID?

Es un elemento donde se inserta el botón de PayPal.
Debe tener un ID claro para usarlo en el script.
Permite controlar dónde se dibuja el botón en la vista.

¿Por qué el SDK debe cargarse antes que la integración?

El SDK expone PayPal como objeto global.
Si el SDK se carga después, el objeto no estará disponible.
Evita errores al invocar Buttons y render.

¿Cómo funciona Buttons y el método render?

Se llama a PayPal (objeto global del SDK).
Se usa Buttons para crear el botón.
Se ejecuta render pasando el string del ID del contenedor.

¿Cómo preparar el proyecto local para ver el botón de PayPal?

Primero, asegura que la app esté corriendo para probar el flujo en tiempo real. Luego, agrega el container y el script en la vista del producto.

¿Cómo correr el proyecto con npm start en localhost 3000?

Ve a la carpeta del proyecto.
Ejecuta el comando: npm start.
Verifica que corra en el puerto 3000 de tu localhost.

¿En qué vista se coloca el contenedor y el script?

Abre la carpeta de views.
Edita el archivo product.ejs.
Ubica la sección de Pago donde ahora está vacía.

¿Dónde insertar el script dentro del body del producto?

Inserta el contenedor del botón en la sección de pago.
Dentro del producto (en la etiqueta body), agrega el script que llama a PayPal.Buttons().render('#id-del-contenedor').
Guarda y recarga: verás los botones de PayPal listos para usar.

¿Qué sigue después de crear el botón de PayPal?

Una vez visible el botón, el próximo paso es crear la primera transacción. Para eso, necesitarás una cuenta de comprador en pruebas y configurar el flujo de pago. Ese proceso se aborda en la siguiente parte, donde se conectará el botón con la creación de una orden de prueba.

Habilidades y conceptos aplicados:

Definición de contenedor con ID para renderizado dirigido.
Uso del objeto global PayPal expuesto por el SDK.
Invocación de Buttons y render con el string del ID del contenedor.
Organización de vistas en product.ejs y ubicación en sección de pago.
Ejecución local con npm start en localhost:3000.