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.

• 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

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:

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.

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.