PayPal: Integración con el Cliente - JavaScript CDN : Primeros pasos - 21

Ya conocido qué es lo que tenemos que hacer para obtener las claves de PayPal para Django, es decir el modo desarrollador en PayPal tal cual te mostraba en el anterior video aquí para continuar en esta clase tienes que tener tanto el client como el Secret sobre todo ahorita el client que es el que vamos a utilizar el Secret lo empleamos más adelante entonces para poder ampliar esta integración vamos a utilizar un plugin que viene siendo el que voy a dejar en alguna parte de la vida.

https://www.npmjs.com/package/@paypal/paypal-js

Es posible emplearlo mediante Node o la CDN que es la que vamos a emplear

<script src="https://www.paypal.com/sdk/js?client-id=test"></script>

Aclarado esto un poco vamos a comenzar qué es lo que vamos a hacer primero para separar las cosas voy a colocarla aquí en la de edita vamos a crear una nueva nuevo template una nueva plantilla que lo voy a colocar:

mystore\elements\templates\partials\paypal.html

<div id="buttonPayPal"></div>

<script>
   paypal.Buttons().render('#buttonPayPal');
</script>

Y en la página de detalle, cargamos el JS:

mystore\elements\templates\elements\detail.html

{% block content %}
<script src="https://www.paypal.com/sdk/js?client-id=<YOURCLIENTID>"></script>
***
<div class="card-body">
   {% include "partials/paypal.html" %}
***

En donde dice <YOURCLIENTID> pudieras poner tu clave provista por PayPal, pero, vamos a crear un esquema más modular en el siguiente apartado.

Pero, con el código anterior, deberías de poder ver los botones de PayPal desde tu web.

Acepto recibir anuncios de interes sobre este Blog.

Vamos a configurar el JS de Paypal CDN en nuestra aplicación de Django, para realizar compras en línea.

- Andrés Cruz

In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro desarrollo web con Django 5 y Python 3 + integración con Vue 3, Bootstrap y Alpine.js.