Digicash Payment Gateway Webhook Real-Time MVC UI Updates

Introduction

In order to include Digicash payments into your MVC application, you must first configure an endpoint to receive payment callbacks and then update the user interface (UI) to reflect the payment status. Using both AJAX polling and SignalR for real-time updates, this article will guide you through the step-by-step.

Step 1. Set Up the Callback Endpoint

The first step in handling the Digicash payment callbacks in your application is creating an endpoint. Every time a payment status is modified, Digicash will send data to this endpoint.

[HttpPost]
[Route("api/webhook/digicashstatus")]
public IHttpActionResult DigiCashTransactiontest([FromBody] DigiCashTransactionModel request)
{
    try
    {
        if (request != null)
        {
            var res = _paymentGateway.WebhookCallback(request);
        }

        return Ok(new { success = true });
    }
    catch (Exception ex)
    {
        error.ErrorLog(ex.Message, "WebHookCallDigiCashController", "DigiCashTransactiontest Input : " + request);
        return null;
    }
}

Within this code, the data sent by Digicash is represented by the DigiCashTransactionModel class. Once this information is received, the WebhookCallback method updates the payment status in your database.

 public class DigiCashTransactionModel 
    {
        public string Id { get; set; }
        public decimal Amount { get; set; }
        public decimal Fee { get; set; }
        public string Status { get; set; }
        public DateTime TransactionDate { get; set; }
        public string ReferenceId { get; set; }
        public string PaymentMethod { get; set; }
        public string CustomerAccount { get; set; }
        public int DisbursementAccountId { get; set; }
        public string MerchantId { get; set; }
    }

Step 2. Update the UI

Using AJAX

The UI can be updated in accordance with the payment status by using AJAX to check it on a regular basis. Here's how to do it.

<script>
    $(document).ready(function() {
        let callCount = 0;
        const maxCalls = 3;
        const intervalTime = 3000; // 3 seconds
        const Transactionid = '@Model.TransactionId';

        function renderHtml(CurrentStatus, statusDesc, pgRefNo, indentNo, paymentMode) {
            let statusIcon = '';
            let statusColor = '';

            if (CurrentStatus === 'SUCCESSFUL') {
                statusIcon = 'fa-check-circle-o';
                statusColor = 'green';
            } else if (CurrentStatus === 'PENDING') {
                statusIcon = 'fa fa-exclamation-circle';
                statusColor = 'red';
            } else {
                statusIcon = 'fa fa-times-circle-o';
                statusColor = 'red';
            }

            const htmlContent = `
                <div class="col-md-12 text-center">
                    <span style="font-size: 62px; color: ${statusColor}">
                        <i class="fa ${statusIcon}" aria-hidden="true"></i>
                    </span>
                </div>
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div class="card-box">
                        <table class="table table-bordered">
                            <tr>
                                <th>Status</th>
                                <td>${CurrentStatus}</td>
                            </tr>
                            <tr>
                                <th>Transaction Number</th>
                                <td>${pgRefNo}</td>
                            </tr>
                            <tr>
                                <th>Order Ref No</th>
                                <td>${indentNo}</td>
                            </tr>
                            <tr>
                                <th>Payment Mode</th>
                                <td>${paymentMode}</td>
                            </tr>
                            <tr>
                                <th>Message</th>
                                <td>${statusDesc}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-md-3"></div>
            `;

            document.querySelector('.loader').style.display = 'none';
            document.querySelector('.message').innerHTML = htmlContent;
        }

        function CheckStatus() {
            $.ajax({
                url: '@Url.Action("GetPaymentByTransactionsID", "DIGI_cash")',
                type: 'GET',
                data: { Transactionid: Transactionid },
                success: function(response) {
                    if (response.Status === 'SUCCESSFUL') {
                        renderHtml(response.Status, 'Payment Successful!', response.TransactionsID, response.OrderId, response.PaymentMethod);
                        clearInterval(interval); // Stop further AJAX calls
                    } else if (callCount >= maxCalls) {
                        makeFinalAjaxCall();
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

        function CheckStatuslastTime() {
            $.ajax({
                url: '@Url.Action("GetFinalPaymentStatusDIgicashapi", "DIGI_cash")',
                type: 'GET',
                data: { Transactionid: Transactionid },
                success: function(response) {
                    if (response.Status === 'SUCCESSFUL') {
                        renderHtml(response.Status, 'Payment Successful!', response.TransactionsID, response.OrderId, response.PaymentMethod);
                    } else {
                        renderHtml(response.Status, 'Payment Pending. Status will be updated within 24 hours.', response.TransactionsID, response.OrderId, response.PaymentMethod);
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

        const interval = setInterval(function() {
            if (callCount < maxCalls) {
                CheckStatus();
                callCount++;
            } else {
                clearInterval(interval);
                CheckStatuslastTime(); 
            }
        }, intervalTime);
    });
</script>

jQuery script that periodically checks the status of a payment transaction and modifies the page according to that information. Once the document has loaded completely, it initializes variables for AJAX call counting and establishes a time interval for utilizing the model's transaction ID to check the status of payments. Using icons and colors to indicate different payment states, the render HTML function creates HTML to represent the status. In order to verify the payment status from the server, the CheckStatus function sends out AJAX GET queries. If the status is SUCCESSFUL, it changes the webpage and ends further calls. It makes a final AJAX request to ascertain the payment status and updates the page if the status is still unresolved after a predetermined number of attempts maxCalls.

Conclusion

By doing these actions, you may manage Digicash payments efficiently and give your consumers real-time information. Keeping users updated on their payment status promptly ensures a seamless and responsive user experience.