Passing 'Total Due Today' amount to the order form after 'Complete Order' is clicked

[Fayaz Valli]

Hello guys,

We are based in Tanzania (getdomains.co.tz) and have recently started using WHMCS. I'm totally new to WHMCS.

I'm trying to add a payment method (Mobile Payments) before the customer clicks "Complete Order". I have been able to add the payment method and to change the "Total Due Today" amount. When the customer selects Mobile Payments option, the amount changes. But when the customer clicks complete order the amount that shows is the default amount (previous amount, before selecting the Mobile Payment option). How do I fix this?

Here is my code: -- checkout.tpl

<div class="form-group">
    <p class="small text-muted">{$LANG.orderForm.preferredPaymentMethod}</p>

    <div class="text-center">
        <label class="radio-inline">
            <input type="radio" name="paymentmethod" value="pesapal" class="payment-methods" checked /> Mobile Payment
        </label>
        <label class="radio-inline">
            <input type="radio" name="paymentmethod" value="card" class="payment-methods" /> Cash / Cheque / Bank Deposit
        </label>
    </div>

    <script language="javascript">

    $(document).ready(function(){

        target = document.getElementsByClassName('alert alert-success text-center large-text')
        total_label = target[0].textContent;
        total_label = total_label.split(':');
        total = total_label[1];
        charge = total.split('T');
        pcharge = charge[0];
        charge = charge[0] * 0.05;
        pcharge = parseFloat(pcharge) + parseFloat(charge);
        
        document.getElementById('msg').innerHTML = total_label[0] + ':  &nbsp;&nbsp;&nbsp;<b>' + pcharge.toFixed(2) + 'TZS</b>';
        $('#pesapal_charge').html(charge.toFixed(2)+'TZS');


        a = document.getElementsByClassName('iCheck-helper');
        b = document.getElementsByClassName('radio-inline');

        i = 0; 
        for (i = 0; i < a.length; i++) {
            a[i].onclick = function (){
                tempp = $(this).parent();
                if (tempp[0].firstChild.value == 'pesapal') {
                    document.getElementById('msg').innerHTML = total_label[0] + ':  &nbsp;&nbsp;&nbsp;<b>' + pcharge.toFixed(2) + 'TZS</b>';
                } else {
                    document.getElementById('msg').innerHTML = total_label[0] + ':  &nbsp;<b>' + total_label[1] + '</b>';
                }
            };
        }

        for (i = 0; i < b.length; i++) { 
            b[i].onclick = function (){
                tempp = $(this).find('payment-methods');
                if (tempp.context.control.value == 'pesapal') {
                    document.getElementById('msg').innerHTML = total_label[0] + ':  &nbsp;&nbsp;&nbsp;<b>' + pcharge.toFixed(2) + 'TZS</b>';
                } else {
                    document.getElementById('msg').innerHTML = total_label[0] + ':  &nbsp;<b>' + total_label[1] + '</b>';
                }
            };
        }

    });
    </script>

    <div >
        <h2 align="center">Payment Gateway Charges</h2>
        <table style="width: 95%; margin-left:10px;" class="mg_gat_charges_integration_code">
            <thead>
                <tr>
                    <th style="text-align: right;padding: 3px 0px 3px; width:35%;">Payment Gateway</th>
                    <th style="text-align: center;padding: 3px 0px 3px;">Provisions</th>
                    <th style="text-align: left;padding: 3px 0px 3px;">Charges</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="text-align: right;padding: 3px 0px 3px;">Cash / Cheque / Bank Deposit</td>
                    <td style="text-align: center;padding: 3px 0px 3px;">Free of charge</td>
                    <td style="text-align: left; padding: 3px 0px 3px;">0.00TZS</td>
                </tr>
                
                <tr>
                    <td style="text-align: right;padding: 3px 0px 3px;">Mobile Payments</td>
                    <td style="text-align: center;padding: 3px 0px 3px;">+&nbsp;5.00%</td>
                    <td style="text-align: left; padding: 3px 0px 3px;" id="pesapal_charge"></td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

 

[brian!]

5 hours ago, Fayaz Valli said:

How do I fix this?

You would need to use an action hook to modify the total and have the modified total used throughout the ordering/invoicing process - https://developers.whmcs.com/hooks/hook-index/

but if you take a look in Marketplace, there are at least existing module addons that can add Gateway fees to the invoice...

• $18.50USD => https://marketplace.whmcs.com/product/3807
• $20.99USD => https://marketplace.whmcs.com/product/2966
• $69.95USD => https://marketplace.whmcs.com/product/3158 * (Annually)
• $69.95USD => https://marketplace.whmcs.com/product/1294 * (Annually)