Conectar un método de pago profesional a tu tienda en línea es más sencillo de lo que parece. Con el SDK de JavaScript de PayPal y los Smart Payment Buttons, puedes ofrecer una experiencia de pago moderna en pocos pasos, utilizando las credenciales de tu aplicación registrada en el portal de desarrolladores.
¿Dónde encontrar la integración de Smart Payment Buttons?
Una vez dentro del portal de desarrolladores de PayPal, el camino hacia la integración comienza haciendo clic en la opción de checkout [0:15]. Esta ruta lleva directamente a los Smart Payment Buttons, que representan la integración más reciente que PayPal ofrece para negocios [0:22].
Dentro de esa sección, se debe seleccionar la opción de Basic Integration [0:28]. Allí se despliega una serie de pasos ordenados para completar el proceso:
- Paso uno: crear la aplicación y obtener las credenciales (realizado previamente en el portal).
- Paso dos: agregar la etiqueta script del SDK de PayPal dentro del proyecto.
¿Cómo agregar el script del SDK de PayPal al proyecto?
PayPal indica que la etiqueta <script> debe colocarse dentro del <body> de la aplicación. Sin embargo, en el proyecto Platzi Store se coloca dentro de la etiqueta <head> [0:45], para asegurar que el SDK esté disponible tan pronto como la página termine de cargar.
El flujo dentro del código es el siguiente:
- Ir a la carpeta
views/shared, que contiene los archivos compartidos en todas las vistas, como el header y el footer [0:58].
- Abrir el archivo del header, donde se encuentran los estilos y archivos de JavaScript necesarios.
- Localizar el comentario que indica dónde debe ir el SDK de PayPal y pegar la etiqueta
<script> justo debajo [1:10].
¿Cómo obtener y reemplazar el client ID?
La etiqueta copiada trae un valor genérico que dice sv_client_id. Este debe sustituirse por el client ID real de tu aplicación [1:18]. Para obtenerlo:
- Regresa al Dashboard del portal de desarrolladores de PayPal.
- Haz clic en Mis aplicaciones y credenciales.
- Selecciona tu aplicación (en este caso, Platzi Store) [1:30].
- Copia el client ID que aparece en la pantalla.
Una vez copiado, reemplaza el valor genérico en la etiqueta <script>, guarda el archivo y la integración del SDK queda lista [1:40].
¿Es obligatorio colocar el script en el head?
No necesariamente. Lo importante es que la etiqueta <script> del SDK esté disponible antes de que se ejecute la lógica de integración con los botones de pago [1:55]. Cada proyecto puede tener una estructura diferente, así que la ubicación dependerá de cómo esté organizado tu código. La regla clave es: el SDK debe cargarse antes de crear cualquier componente de PayPal.
Con el SDK correctamente enlazado y el client ID configurado, el proyecto está preparado para dar el siguiente paso: crear un botón de pago de PayPal funcional. Si ya seguiste estos pasos en tu propio proyecto, comparte tu experiencia y cuéntanos cómo te fue con la integración.
