Integración del SDK de PayPal en Platzi Store

Integrar pagos con PayPal en Platzi Store es rápido si sigues una ruta clara. Aquí verás cómo añadir el SDK de PayPal con Smart Payment Buttons, ubicar la etiqueta script en el lugar correcto y configurar tu client ID para que la integración quede lista en tu proyecto.

¿Cómo integrar el SDK de PayPal en Platzi Store?

Para iniciar, se ingresa al portal de desarrolladores de PayPal y se selecciona checkout. Desde ahí, se llega a Smart Payment Buttons, la integración más reciente orientada a negocios. En Basic Integration aparecen los pasos: el primero (crear la aplicación y credenciales) ya está hecho; el avance continúa en el paso dos, que pide incluir el SDK en el proyecto. El objetivo es que el SDK esté disponible cuando cargue la página.

¿Qué ruta seguir en el portal de desarrolladores de PayPal?

• Entrar a la sección de checkout dentro del portal de desarrolladores de PayPal.
• Seleccionar Smart Payment Buttons.
• Abrir la guía de Basic Integration.
• Saltar el paso de creación de credenciales si ya se hizo previamente.

¿Qué archivo editar en el proyecto y por qué?

• Ir a la carpeta views y luego a shared.
• Abrir el archivo del header compartido por todas las vistas.
• Este punto centraliza estilos y archivos de JavaScript que la app necesita.
• Debajo del comentario «El SDK de PayPal va aquí», pegar la etiqueta script del SDK.

¿Cómo pegar la etiqueta script del SDK de PayPal?

• Copiar la etiqueta script del SDK desde la guía de Basic Integration.
• Pegarlo en el header compartido para que esté disponible al cargar cada vista.
• El enfoque aquí fue incluirlo en el head; funciona porque el SDK queda listo cuando el DOM está disponible.

<!-- En views/shared/header: debajo de “El SDK de PayPal va aquí” -->
<!-- Pega aquí la etiqueta script del SDK de PayPal -->
<!-- Ejemplo conceptual: -->
<!-- <script src="...client-id=sv.clientid..."></script> -->

¿Cómo obtener y configurar el client ID en el proyecto?

Para activar el SDK, necesitas reemplazar el placeholder por tu client ID real. Se hace desde el Dashboard en PayPal, en la sección de aplicaciones.

• Ir a Dashboard y hacer clic en “Mis aplicaciones y credenciales”.
• Seleccionar “Platzi Store”.
• Copiar el client ID mostrado.
• Volver al proyecto y reemplazar “sv.clientid” por tu client ID.
• Guardar los cambios y verificar que el SDK esté listo.

<!-- Antes: placeholder -->
<script src="...client-id=sv.clientid..."></script>

<!-- Después: con tu client ID -->
<script src="...client-id=TU_CLIENT_ID..."></script>

• Resultado: la integración del SDK de PayPal queda lista para usarse en tu app.
• Nota: la ubicación en head es una decisión práctica del proyecto; lo clave es que esté disponible antes de inicializar la integración.

¿Dónde colocar la etiqueta script del SDK y qué considerar?

Aunque aquí se colocó en el head, no es la única alternativa. Lo importante es la disponibilidad del SDK antes de crear la integración del botón. Eso asegura que el código que inicializa Smart Payment Buttons funcione sin errores.

• Puede ir en el head para carga anticipada.
• También puede ubicarse antes del código que inicializa el botón.
• Verifica que el script cargue antes de usar la API del SDK.
• Preparar el entorno para crear el botón de PayPal a continuación.

¿Dónde vas a insertar el SDK en tu proyecto y cómo gestionarás el header compartido? Comparte tu enfoque y dudas en los comentarios.