Aprende a integrar pagos con PayPal en ASP.NET Core: Cómo incluir botones de pago PayPal inteligente en mi página web

En este artículo te enseñare a incluir tus primeros botones de pago de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web.

En artículos anteriores ya vimos cómo incluir el SDK de JavaScript de PayPal, Crear el proyecto web ASP.NET Core, Configurar la API REST de PayPal en ASP.NET Core, Crear las cuentas PayPal.

• Aprende a integrar pagos con PayPal en ASP.NET Core: Credenciales API Sandbox para realizar pagos
• Aprende a integrar pagos con PayPal en ASP.NET Core: Crear el proyecto web ASP.NET Core
• Aprende a integrar pagos con PayPal en ASP.NET Core: Configurar la API REST en ASP.NET Core
• Aprende a integrar pagos con PayPal en ASP.NET Core: Integrar el SDK de JavaScript de PayPal
• Aprende a integrar pagos con PayPal en ASP.NET Core: Cómo incluir botones de pago PayPal inteligente en mi página web
• Aprende a integrar pagos con PayPal en ASP.NET Core: Personalizar con JavaScript el SDK de PayPal
• Personalizar botones de pago de PayPal en ASP.NET Core

Incluir botones de pago PayPal inteligente en mi página web

En este artículo crearemos los botones de pago inteligente de PayPal en la página web. Abre el proyecto que creamos en los artículos anteriores, en mi caso se llama EstradaWebGroup.PayPal.Web y agrega una nuevo Controller en blanco en la carpeta Controllers llamado ShowSmartButtons. Cuando se cree este controller lo abres y te mostrará el siguiente código:

public class ShowSmartButtonsController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }

Sobre la palabra index das clic y botón derecho del mouse, seleccionas Agregar Vista, lo que vas a modificar solamente es seleccionar la casilla: Usar página de diseño y das clic en el botón con los tres puntos, en seguida se abrirá una ventana donde vas a seleccionar Views/Shared/_Layout.cshtml y listo das clic en aceptar y agregar.

Código HTML

Abre la vista que generaste anteriormente y que se encuentra en Views/ShowSmartButtons/ Index.cshtml, y reemplaza su contenido con el siguiente código:

@{
    ViewData["Title"] = "Botones Paypal en ASP.NET Core";
}
<h1>@ViewData["Title"]</h1>
<br /> 
<div id="div_sbtn1"></div>
<div id="div_sbtn2" style="width:50%;margin-top:30px"></div>
<div id="div_sbtn3" style="width:20%;margin-top:30px"></div> 
@section Scripts{
    <script>
        paypal.Buttons().render('#div_sbtn1');
        paypal.Buttons().render('#div_sbtn2');
        paypal.Buttons().render('#div_sbtn3');
    </script> 
}

Aquí, se definen tres elementos de contenedor <div> y luego representamos tres conjuntos de botones de pago inteligente de PayPal a estos contenedores utilizando el código JavaScript. La única diferencia entre estos contenedores son sus atributos de ancho: 100%, 50% y 20% respectivamente.

Aquí, usamos el diseño de botón vertical predeterminado, y los botones pueden ocupar una cantidad dinámica de altura (height) en tu página web, dependiendo de los botones que se representan. Si bien el tamaño de los botones se puede controlar mediante el atributo de ancho (width) del contenedor. Ahora ejecutando el proyecto de ejemplo y navegando a https://localhost:44377/ShowSmartButtons produce los resultados que se muestran en la siguiente imagen:

En este artículo te mostre como incluir tus primeros botones de pago de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web.