Miden.Razor.SDK 1.0.12

Miden.Buzapay Razor Pages Payment Gateway SDK

A Razor Pages SDK for the Miden/Buzapay payment gateway. It ships:

• Typed API client wrappers (payment links, card auth, transfers, stable coins)
• AES encryption for card payloads
• Tag helpers + Razor partials + JS/CSS for full checkout UI (card, transfer, stable coin)

Target frameworks: .NET 8, 9, 10

Install

dotnet add package Miden.Razor.SDK

1. Configure Services

In Program.cs:

using Miden.Buzapay.Extensions;
using Miden.Buzapay.Options;

builder.Services.AddRazorPages();
builder.Services.AddMidenBuzapay(options =>
{
    options.SecretKey   = "your-secret-key";
    options.Environment = MidenBuzapayEnvironment.Sandbox; // or Production
});

The Caller defaults to Miden. To use Buzapay instead:

builder.Services.AddMidenBuzapay(options =>
{
    options.SecretKey   = "your-buzapay-key";
    options.Caller      = MidenBuzapayCaller.Buzapay;
    options.Environment = MidenBuzapayEnvironment.Sandbox;
});

Dual-caller (both Miden and Buzapay in one app)

Register the default config plus a named config for the second caller:

// Default — Miden (caller is set automatically)
builder.Services.AddMidenBuzapay(options =>
{
    options.SecretKey   = "your-miden-key";
    options.Environment = MidenBuzapayEnvironment.Sandbox;
});

// Named — Buzapay (caller is set automatically from the enum)
builder.Services.AddMidenBuzapay(MidenBuzapayCaller.Buzapay, options =>
{
    options.SecretKey   = "your-buzapay-key";
    options.Environment = MidenBuzapayEnvironment.Sandbox;
});

Then in your views, add config="Buzapay" to use the Buzapay config:

<miden-checkout-card config="Buzapay" merchant-name="Store" amount="60" ... />

Map endpoints and static files:

app.UseStaticFiles();
app.MapRazorPages();
app.MapMidenBuzapayEndpoints();

2. Register Tag Helpers

In Pages/_ViewImports.cshtml, add:

@addTagHelper *, Miden.Buzapay

3. Add Assets to Layout

In your _Layout.cshtml:

<head>
    
    <miden-styles />
</head>
<body>
    

    <miden-scripts />
</body>

4. Checkout Card

Drop a single tag wherever you want the full checkout form (card, bank transfer, stable coin):

<miden-checkout-card
    merchant-name="Acme"
    amount="2500"
    currency="NGN"
    email="buyer@acme.test"
    phone-number="08012345678"
    narration="Order #1045"
    merchant-logo-url="/img/logo.png" />

That's it — SecretKey, Environment, and Caller are automatically pulled from the options you configured in Program.cs.

Card attributes

Programmatic usage

If you need to build the payment object dynamically (e.g. from a database), pass it via the payment attribute:

@{
    var payment = new PaymentObject
    {
        MerchantName = order.StoreName,
        Amount = order.Total,
        Currency = order.Currency,
        Email = order.CustomerEmail,
        PhoneNumber = order.CustomerPhone,
        Narration = $"Order #{order.Id}"
    };
}

<miden-checkout-card payment="@payment" merchant-logo-url="/img/logo.png" />

5. Checkout Button

For a redirect or iframe checkout flow:

<miden-checkout-button
    merchant-name="Acme"
    amount="2500"
    currency="NGN"
    email="buyer@acme.test"
    phone-number="08012345678"
    narration="Order #1045"
    redirect-url="https://your-site.test/checkout/complete" />


<miden-checkout-button
    merchant-name="Acme"
    amount="5000"
    currency="NGN"
    email="buyer@acme.test"
    phone-number="08012345678"
    narration="Order #1045"
    redirect-url="https://your-site.test/checkout/complete"
    mode="Iframe"
    button-text="Pay Now"
    css-class="btn btn-success btn-lg" />

Button attributes

All payment attributes (merchant-name, amount, currency, email, phone-number, narration, redirect-url, logo-url) and the payment attribute work the same as the card tag helper.

JavaScript Events

Listen for payment lifecycle events on the checkout card element:

document.querySelector('[data-miden-checkout-card]')
  .addEventListener('miden:payment-authorized', function(e) {
    console.log(e.detail.paymentStatus); // "authorized" or "confirmed"
    console.log(e.detail.paymentId);
    console.log(e.detail.paymentDate);
    console.log(e.detail.message);
  });

3DS (Secure Authentication)

3DS is handled automatically by the SDK — no extra pages or code needed.

• Miden caller: 3DS challenge renders in an inline iframe within the checkout card.
• Buzapay caller: the SDK redirects to its built-in {EndpointBasePath}/checkout/three-ds-confirm endpoint, which renders the bank's 3DS page.

Alternative: Partial View Usage

If you prefer manual control, you can still use the Razor partials directly:

@using Miden.Buzapay.Models
@using Miden.Buzapay.Options
@using Microsoft.Extensions.Options
@inject IOptions<MidenBuzapayOptions> MidenOptions
@{
    var checkout = new MidenCheckoutCardModel
    {
        Payment = new PaymentObject
        {
            MerchantName = "Acme",
            Amount = 2500,
            Currency = "NGN",
            Email = "buyer@acme.test",
            PhoneNumber = "08012345678",
            Narration = "Order #1045"
        },
        MerchantLogoUrl = "/img/logo.png",
        SecretKey = MidenOptions.Value.SecretKey
    };
}

@await Html.PartialAsync("_MidenCheckoutCard", checkout)

When using partials, you must also add the assets manually in your layout:

<link rel="stylesheet" href="~/_content/Miden.Razor.SDK/miden-pg/miden-pg.css" />
<script src="~/_content/Miden.Razor.SDK/miden-pg/qrcode.js"></script>
<script src="~/_content/Miden.Razor.SDK/miden-pg/miden-pg.js" defer></script>

Notes

• EndpointBasePath defaults to /miden-buzapay. If you change it, pass the same value to MapMidenBuzapayEndpoints().
• The UI keeps the secret key on the server — it calls your local /miden-buzapay endpoints which forward to the gateway.
• The Caller defaults to Miden. It controls the UI theme and API routing: Miden uses a dark theme with Miden branding, Buzapay uses a light theme with merchant branding.
• The named overload AddMidenBuzapay(MidenBuzapayCaller.Buzapay, ...) sets the Caller automatically — you cannot mismatch caller and secret key.