How do I Add a Service Charge to Hosted Payments?

In order to add a service charge to be applied to the amount your customer is being charged, we need to use JavaScript. Below is a simple template for updating the amount and description of the charge:

Disclaimer:

THERE IS NO WARRANTY FOR THE PROGRAM. THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.

<script language="javascript" >
    function addServiceCharge (form)
    {
        var originalPrice = parseFloat(form.price.value);
        var serviceCharge = 0.03; <!-- Replace with correct amount. 0.03 = 3%, 0.025 = 2.5%, etc -->
         
        form.price.value = ((serviceCharge * originalPrice) + originalPrice).toFixed(2);
        form.description.value += " + " + serviceCharge * 100 + "% Service Charge -";
        form.description.value += " Bill Amount: $" + originalPrice + " ";
        form.description.value += "Service Charge: $" + (originalPrice * serviceCharge).toFixed(2) + " ";
        form.description.value += "Total Payment: $" + form.price.value;
    }
</script>
 
<form action="https://www.payjunction.com/trinity/quickshop/add_to_cart_snap.action" method="post" onsubmit="addServiceCharge(this);">
    <input type="hidden" value="YOUR_QS_STORE_ID" name="store">
    <input type="hidden" value="no" name="need_to_ship">
    <input type="hidden" value="no" name="need_to_tax">
    <input type="hidden" value="BP" name="identifier">
    <input type="hidden" value="BILL PAYMENT" name="description">
    <input type="hidden" value="1" name="quantity">
    <label>Enter Amount</label>
    <input type="text" name="price">
    <table cellspacing="2" cellpadding="0" border="0">
        <tbody>
            <tr>
                <td width="224" valign="absmiddle" align="left">
                    <div align="right">
                        <input type="submit" value="PAY BILL" name="submit">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</form>

Step-by-Step Instructions

  1. Update the serviceCharge variable with the amount you will be charging extra. For example:

    var serviceCharge = 0.025;

    This would add a service charge of 2.5% on top of what the customer enters into the Enter Amount field. The default value is 0.03 (3%).

  2. Update the following line with YOUR Hosted Payments Store ID. If you are not sure what your Hosted Payments ID is, please see the following guide: How do I find or update the QuickShop Store ID?

    <input type="hidden" value="YOUR_QS_STORE_ID" name="store">

Test your button! When inserting code into a webpage using a content manager such as WordPress, it is not uncommon for things to get left behind, or accidentally changed. Thus it is very important after updating your website with the code to make sure that you are properly redirected, and the amount and description for the charge are correctly updated.

What your customers will see

The left side of the above image is controlled by what you have set to display, hide or require in the Fields setting for your Hosted Payments Store, which you can find by clicking on the More menu and clicking Hosted Payments. Each Hosted Payments store will have its own Fields Settings button.

What you the merchant will see

As the above image shows, the breakdown of how much the customer entered, plus what was added for the service charge, is displayed in the Description.

Submit a Request

Submit your support questions here.
We'll be in touch as soon as possible

SUBMIT REQUEST

Got Questions?

We’re here to help. Call us and speak
with a Customer Support Representative.

CALL US

TOLL FREE(800) 601-0230 x3

TOLL(805) 563-1520

BACKUP(805) 426-0404


FAX FREE(800) 771-3821

FAX TOLL(805) 569-3821

Send your Feedback

Let us know how we can improve.
We’re always happy to hear from you!

SEND FEEDBACK