Aprende a integrar pagos con PayPal en ASP.NET Core: Integrar el SDK de JavaScript de PayPal

En este artículo te enseñare a integrar el SDK de JavaScript de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web y te mostrare como incluir botones de PayPal en tu sitio web.

En otros artículos, mostré cómo crear la cuenta para obtener las credenciales de consumo de la API REST y almacenar las credenciales de esta API en el archivo appsettings.json de nuestro proyecto ASP.NET Core, en mi caso se llama EstradaWebGroup.PayPal.Web.

SDK de JavaScript de PayPal

En seguida, voy a integrar los botones de pago inteligente de PayPal en la aplicación web ASP.NET Core. Los botones de pago inteligente de PayPal son válidos desde febrero de 2019 para nuevas integraciones. Puedes usar el SDK de JavaScript de PayPal para integrar estos botones en tu aplicación web y mostrarlos en tu página web. El SDK de JavaScript de PayPal se puede incluir en tu aplicación web con el siguiente fragmento de código:

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

Botones de pago inteligente de PayPal

Esta integración agrega los botones de pago inteligente de PayPal a tus aplicaciones web sin requerir código de servidor. Aquí, debes reemplazar API_CLIENT_ID con tu ID de cliente. Dado que este ID se almacena en el archivo appsettings.json, lo inyectaremos en el archivo _Layout.cshtml para que el SDK de JavaScript de PayPal esté disponible para toda tu aplicación. Abra el archivo _Layout.cshtml que se encuentra en la carpeta Views/Shared y agrega el código que se muestra en seguida:

<!DOCTYPE html>
<html lang="en">

@using Microsoft.Extensions.Options
@using EstradaWebGroup.Paypal.Web.Models
@inject IOptions<PaypalApiSetting> pSetting
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Estrada Web Group - @ViewData["Title"]</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">PaypalProject</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header> <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <footer class="border-top footer text-muted">
        <div class="container"> &copy; 2020 - Estrada Web Group - <a asp-area="" asp-page="/Privacy">Privacy</a> </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="https://www.paypal.com/sdk/js?client-id=@pSetting.Value.ClientID" id="paypal_sdk"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

Ten en cuenta que, al principio, agregamos el siguiente fragmento de código:

@using Microsoft.Extensions.Options
@using EstradaWebGroup.Paypal.Web.Models
@inject IOptions<PaypalApiSetting> pSetting

Estas líneas de código simplemente inyectan las credenciales de la API REST de PayPal en cada página web a través del archivo _Layout.cshtml. Al final de este archivo, agregamos el SDK de JavaScript de PayPal con el siguiente código:

<script src="https://www.paypal.com/sdk/js?client-id=@pSetting.Value.ClientID" id="paypal_sdk"></script>

El campo de identificación del cliente debes usarlo para personalizar la URL JavaScript de PayPal.

En este artículo te mostré como integrar el SDK de JavaScript de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web y te mostrare como incluir botones de PayPal en tu sitio web.