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

Estrada Web Group
Administrador
Aprende a integrar pagos con PayPal en ASP.NET Core: Personalizar con JavaScript el SDK de PayPal

En este artículo te enseñare a personalizar la moneda y región de los botones de pago de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web.

Puedes personalizar la integración del SDK de JavaScript pasando parámetros de consulta y parámetros de secuencia de comandos. Estos parámetros ayudan a PayPal a decidir las fuentes de financiación y los botones óptimos para mostrar a tus compradores. Aquí, te mostraré cómo pasar dos parámetros especiales, la moneda y la configuración regional, en la URL del script SDK como parámetros de consulta.

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.

Los fondos en tu cuenta de PayPal deben estar en una moneda específica. La moneda predeterminada se establece en USD. PayPal ahora admite 25 monedas diferentes, incluidos USD, CAD, AUD, EUR, GBP, JPY, MXN, etc. Puedes cambiar el tipo de moneda agregando una cadena de moneda a la URL del script SDK. Por ejemplo, la siguiente etiqueta de script establecerá la moneda en EUR:

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

De manera similar, también puedes agregar el parámetro de configuración regional. La configuración regional se utiliza para localizar cualquier componente. De forma predeterminada, PayPal detecta de forma inteligente la configuración regional correcta para los compradores en función de sus preferencias de ubicación geográfica y navegador. Se recomienda pasar este parámetro solo si necesitas que los botones de PayPal se procesen en el mismo idioma que el resto de tu sitio web.

Actualmente, PayPal admite más de 200 países con más de 600 configuraciones regionales. Puedes cambiar la configuración regional agregando una cadena de configuración regional a la URL del script SDK. Por ejemplo, la siguiente etiqueta de script establecerá la configuración regional en de_DE:

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

A continuación, usaré un ejemplo para mostrar cómo cambiar la moneda y los parámetros locales. Agregue una nuevo Controller llamado PersonalizarJsSdk a la carpeta de Views. Abra el archivo PersonalizarJsSdk.cshtml y reemplace su contenido con el siguiente código:

@{ 
ViewData["Title"] = "Personalizar el JavaScript SDK"; 
} 
<h1>@ViewData["Title"]</h1>
<br />
<h5>Change Curreny and Locale</h5>
<br /> 
<div class="row">
    <div class="col-md-6" id="us">US: USD</div>
</div>
<div class="row">
    <div class="col-md-6" id="de">DE: EUR</div>
</div>
<div class="row">
    <div class="col-md-6" id="mx">MX: MXN</div>
</div>
@section Scripts{
    <script>
        $(function () {
            let src0 = document.getElementById('paypal_sdk').src;
            document.getElementById('paypal_sdk').src = src0 + '&currency=USD&locale=en_US';
            paypal.Buttons().render('#us');
            document.getElementById('paypal_sdk').src = src0 + '&currency=EUR&locale=de_DE';
            paypal.Buttons().render('#de');
            document.getElementById('paypal_sdk').src = src0 + '&currency=MXN&locale=es_MX';
            paypal.Buttons().render('#mx');
        });
    </script>
}

Aquí, utilizamos el código JavaScript para realizar cambios en el SDK JavaScript de PayPal definido en el archivo _Layout.cshtml que está disponible para toda la aplicación. Este cambio solo afecta a la página actual PersonalizarJsSdk, pero no al resto de nuestra aplicación. Excepto por la página actual, aún queremos mantener la configuración predeterminada (currency = USD y locale = en_US) para nuestra aplicación. Si deseas cambiar esta configuración para toda tu aplicación, puedes hacer cambios directamente en el archivo _Layout.cshtml.

Ahora, ejecuta la aplicación y navega a la página https://localhost:44377/PersonalizarJsSdk produce los resultados que se muestran en la siguiente imagen:

Credit Card PayPal

Puedes ver que el idioma que se muestra en los botones de Pago inteligente de PayPal está controlado por los parámetros locales, que se pueden ver más claramente si das clic en cada uno de los botones que dicen Tarjeta de débito o crédito, como se muestra en la siguiente imagen.

PayPal debito credit card personalizar region y moneda

En este artículo te mostre a personalizar la moneda y región de los botones de pago de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web.

Compartir artículo:

Más artículos geniales

Middleware en ASP.NET 6 - Orden de Operaciones

Middleware en ASP.NET 6 - Orden de Operaciones

En este artículo continuamos con la canalizacióncreada por Middleware y, específicamente, por qué es muy importante el orden en que se agregan los middlewares a la canalización.

Ver artículo completo
Qué es MVC y cómo utilizarlo en ASP.NET Core

Qué es MVC y cómo utilizarlo en ASP.NET Core

En este tutorial, aprenderas qué es MVC y en el tutorial posterior, aprenderás cómo usar el patrón de diseño MVC en ASP.NET Core

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla