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

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: Credenciales API Sandbox para realizar pagos

En este artículo te mostrare donde puedes obtener las Credenciales API Sandbox para recibir pagos en tu página web desarrollada con ASP.NET Core y explicare los tipos de API que existen en PayPal, además creare unos artículos donde te mostrare como integrar PayPal en tu sitio web 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 ;