Persilsoft.Culqi.Blazor 1.0.1

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.

Example

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 la 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"
    }
}

D�nde:
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�bido 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" />
<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 Pagar
ToPay: Manejador de evento que mostrar� 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 al backend a trav�s de un gateway HttpClient)";
        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 revisar la documentaci�n de Persilsoft.Culqi.Server