Personalizar botones de pago de PayPal en ASP.NET Core

En este artículo te enseñare a personalizar el diseño de los botones de pago de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web.

PayPal ofrece varias opciones para personalizar el estilo y el comportamiento de los botones de pago inteligente. También puedes utilizar estas opciones para mostrar múltiples fuentes de financiamiento a los compradores, cuando corresponda.

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, Agregar botones de PayPal y Personalizar el SDK de JavaScript de PayPal.

• 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

Cambiar el color de los botones PayPal

Aquí, usaré un ejemplo para demostrar cómo cambiar el color del botón de pago inteligente de PayPal. Abre el proyecto que venimos desarrollando en los artículos anteriores y agrega un nuevo controller llamado PersonalizarBoton y agrega la vista correspondiente. Abre el archivo PersonalizarBoton.cshtml y reemplace su contenido con el siguiente código:

@{
    ViewData["Title"] = "Personalizar los botones inteligentes de PayPal en Estrada Web Group";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>@ViewData["Title"]</h1>
<br />
<h5>Change Color:</h5>
<div class="row">
    <div class="col-md-3" id="color_gold">Gold</div>
    <div class="col-md-3" id="color_blue">Blue</div>
    <div class="col-md-3" id="color_silver">Silver</div>
    <div class="col-md-3" id="color_black">Black</div>
</div>
@section Scripts{
    <script>
        paypal.Buttons({ style: { color: 'gold' } }).render('#color_gold');
        paypal.Buttons({ style: { color: 'blue' } }).render('#color_blue');
        paypal.Buttons({ style: { color: 'silver' } }).render('#color_silver');
        paypal.Buttons({ style: { color: 'black' } }).render('#color_black');
    </script>
}

PayPal permite establecer la propiedad style.color en uno de los cinco colores predefinidos, incluidos dorado, azul, plateado, blanco y negro.

Ejecuta este proyecto y navega a la página https://localhost:44377/PersonalizarBoton produce los resultados que se muestran en la figura Cambiar color a los botones de PayPal.

Ten en cuenta que el código anterior solo puede cambiar el color del primer botón de PayPal, pero no los botones de CRÉDITO y Tarjeta de débito o crédito de PayPal.

Figura: Cambiar color a los botones de PayPal

Cambiar el texto de los botones

PayPal también permite cambiar la etiqueta que se muestra en los botones. Puedes establecer la propiedad style.label con uno de los seis valores predefinidos, que incluyen pago, crédito, pago, comprar ahora, paypal y pago en cuotas.

Ten en cuenta que la función de pago a plazos está disponible solo en estas configuraciones regionales: en_MX, es_MX, en_BR y pt_BR.

Agrega el siguiente código al archivo PersonalizarBoton.cshtml:

<h5>Cambiar Texto:</h5>
<div class="row">
    <div class="col-md-3" id="label_checkout">Checkout</div>
    <div class="col-md-3" id="label_credit">Paypal</div>
    <div class="col-md-3" id="label_pay">Pay</div>
    <div class="col-md-3" id="label_buynow">Buy Now</div>
</div>
@section Scripts{
    <script>
        //Código anterior...
        paypal.Buttons({ style: { color: 'gold', label: 'checkout' } }).render('#label_checkout');
        paypal.Buttons({ style: { color: 'blue', label: 'paypal' } }).render('#label_credit'); 
        paypal.Buttons({ style: { color: 'silver', label: 'pay' } }).render('#label_pay');
        paypal.Buttons({ style: { color: 'black', label: 'buynow' } }).render('#label_buynow');
  </script>
}

El código anterior producirá los resultados que se muestran en la figura Cambiar texto de los botones de PayPal.

Figura: Cambiar texto de los botones de PayPal

Cambiar el diseño de los botones de PayPal

Puedes configurar la opción style.layout para determinar el diseño de los botones cuando hay varios botones disponibles. El style.layout tiene dos opciones: horizontal y vertical. El diseño horizontal apila los botones horizontalmente con un máximo de dos botones, lo que se recomienda para las siguientes situaciones

• Colocar botones en la página de un producto, junto al producto.
• El espacio en la página es limitado.
• Ya se proporcionan opciones de pago locales.

El diseño vertical apila los botones verticalmente con un máximo de cuatro botones, lo que se recomienda para los siguientes casos:

• Presentar una lista dinámica de opciones de pago locales en las páginas de pago y carrito de compras.
• Aprovechando PayPal Checkout como una plataforma de pagos.

Agrega el siguiente código al archivo PersonalizarBoton.cshtml:

<br />
<h5>Diseño de prueba:</h5>
<div class="row">
    <div class="col-md-3" id="layout_v">Vertical (Default)</div>
    <div class="col-md-5" id="layout_h">Horizontal</div>
</div>


@section Scripts{
    <script>
        //Código anterior...
        paypal.Buttons({ style: { layout: 'vertical' } }).render('#layout_v');
        paypal.Buttons({ style: { layout: 'horizontal' } }).render('#layout_h');
    </script>
}

El código anterior producirá los resultados que se muestran en la figura Diseño de los botones de PayPal.

Figura: Diseño de los botones de PayPal

Cambiar forma de los botones de PayPal

También puedes establecer el parámetro style.shape que contiene dos opciones: rect y pill. PayPal recomendó que, siempre que sea posible, utilice el botón con forma de pill, porque su forma única y poderosa ya se identifica como PayPal en la mente de las personas.

Agrega el siguiente código al archivo PersonalizarBoton.cshtml:

<br />
<h5>Cambiar Forma:</h5>
<div class="row">
    <div class="col-md-3" id="shape_rect">Rect</div>
    <div class="col-md-3" id="shape_pill">Pill</div>
</div>


@section Scripts{
    <script>
        //Código anterior...
        paypal.Buttons({ style: { shape: 'rect' } }).render('#shape_rect');
        paypal.Buttons({ style: { shape: 'pill' } }).render('#shape_pill');
    </script>
}

El código anterior producirá los resultados que se muestran en la figura Cambiar la forma de los botones de PayPal.

En este artículo te mostré a personalizar el diseño de los botones de pago de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web.