Persilsoft.Culqi.Blazor 1.0.4

Persilsoft.Culqi.Blazor

Proporciona un botón como componente para abrir la interfaz de Culqi Custom Checkout. El resultado final será la obtención de un token que deberá ser procesado por su Backend utilizando la Api de Culqi a través de la generación de Cargos únicos.

Ejemplo

Primero, debe incluir el siguiente Script en su página:

<script src="https://js.culqi.com/checkout-js"></script>

Nota: Recuerde que para integrarse con Culqi Custom Checkout debe contar con su llave pública que puede obtenerla a través del CulqiPanel.

Luego, usted debe registrar en el contendor de dependencias los servicios requeridos:

Action<CulqiOptions> CulqiOptionsConfigurator = options =>
builder.Configuration.GetSection(CulqiOptions.SectionKey).Bind(options);

builder.Services.AddCulqiService(CulqiOptionsConfigurator);

En el archivo de configuración appsettings.json, debe configurar las opciones de Culqi:

{
    "Culqi": {
        "PublicKey": "xxxxxxxxxxxx",
        "StoreName": "Persilsoft Store",
        "Tarjeta": true,
        "Yape": true,
        "BancaMovil": false,
        "Agente": false,
        "Billetera": false,
        "Cuotealo": false,
        "Lang": "auto",
        "Installments": false,
        "HiddenCulqiLogo": false,
        "HiddenToolBarAmount": false,
        "MenuType": "sidebar",
        "BannerColor": "#c00",
        "ButtonBackground": "#ffc107",
        "MenuColor": "tomato",
        "LinksColor": "green",
        "ButtonTextColor": "#333",
        "PriceColor": "red"
    }
}

Donde:
PublicKey: Es la llave publica de la tienda virtual
StoreName: Nombre de la tienda virtual
Tarjeta: Indica si acepta tarjeta de crédito o débito como forma de pago
Yape: Indica si acepta Yape como forma de pago
BancaMovil: Indica si acepta Banca móvil
Agente: Indica si acepta Agente
Billetera: Indica si acepta billeteras como forma de pago
Cuotealo: Indica si acepta Cuotealo del BCP como forma de pago
Lang: Idioma del checkout. Ejemplo: "auto","en","es"
Installments: Indica si se activa o no la opción de pago en cuotas
HiddenCulqiLogo: Indica si se oculta o no el logo de Culqi
HiddenToolBarAmount: Indica si se oculta o no el monto
MenuType: Establece el tipo de menú(sidebar, sliderTop, select)
BannerColor: Establece el color del baner
ButtonBackground: Establece el color de fondo del botón pagar
MenuColor: Establece el color de texto del menú cuando se activan las opciones
LinksColor: Establece el color de texto de los links
ButtonTextColor: Establece el color de texto de los botones
PriceColor: Establece el color de texto del precio

Ahora, necesita utilizar el componente CulqiCheckoutComponent y pasarle algunos parámetros

@page "/checkout"

<PageTitle>Checkout</PageTitle>

<h1>Checkout</h1>
<input @bind=amount type="number" step="0.50" placeholder="Ingrese monto" class="form-control mb-2 d-inline" style="width: 200px" />
<CulqiCheckoutComponent Modal=true
                        PayText="Realizar pago"
                        ButtonCssClass="btn btn-warning"
                        ToPay="ToPay"
                        TokenReceived="TokenReceived"
                        ErrorReceived="ErrorReceived"
                        @ref=culqi />
<div class="alert alert-@alertType">
    @message
</div>

Donde:
Modal: Indica si el checkout es modal incrustado o no
PayText: Texto para el botón Pagar
ButtonCssClass: Clases css para el botón que abre el checkout
ToPay: Manejador de evento para abrir el checkout
TokenReceived: Método callback por donde se recibe el token generado que será enviado al Backend
ErrorReceived: Método callback por donde se recibe el error que pueda ocurrir al generar el token

A continuación, se muestra el ejemplo con el Code-behind:

@code {
    private decimal amount;
    private CulqiCheckoutComponent culqi;
    private string alertType;
    private string message;

    private async void ToPay()
    {
        if (amount <= 0)
        {
            alertType = "warning";
            message = "Debe ingresar un monto > 0.";
        }
        else
        {
            long culqiAmount = (long)(amount * 100);

            await culqi.ShowCulqiCheckout(currency: "PEN", amount: culqiAmount, order: null, email: null, logo: null);
        }
    }

    private async Task TokenReceived(CulqiCheckoutEventArgs e)
    {
        message = $"Token: {e.Token} (Debe enviar este token a su backend)";
        alertType = "info";
        await Task.CompletedTask;
    }

    private async Task ErrorReceived(CheckoutErrorEventArgs e)
    {
        Console.WriteLine($"merchantMessage: {e.MerchantMessage}");
        Console.WriteLine($"userMessage: {e.UserMessage}");
        await Task.CompletedTask;
    }
}

Para el envío del token al Backend puede implementar su propio Endpoint o revisar la documentación de Persilsoft.Culqi.Server que ya proporciona los Endpoints listos para ser agregados a la canalización de su aplicación AspNet Core.