Hosted Payments Example Buttons and Code

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.

Using HTML iframes with Hosted Payments code is not recommended. Hosted Payments uses 3rd party cookies. If security settings in the client's browsers do not allow 3rd party cookies, they will see this message: "The Hosted Payments store ID you tried to access is invalid.". Although most browsers by default allow 3rd party cookies, Safari does not.

Basic Buttons (HTML Only)

Make a Payment Button

This type of button allows the user to enter the amount they wish to pay, and then takes them immediately to the checkout process.

<form method="post" action="https&#58;&#47;&#47;www&#46;payjunction&#46;com/trinity/quickshop/add_to_cart_snap.action">
 <input type="hidden" name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID">
 <input type="hidden" name="need_to_ship" value="no">
 <input type="hidden" name="need_to_tax" value="no">
 <input type="hidden" name="description" value="Online&#32;Bill&#32;Payment">
 <input type="hidden" name="quantity" value="1">
 <label>Enter Amount</label>
 <input type="text" name="price">
 <input type="submit" name="submit" value="Make Payment">
 </form>

In order to use the above code as a template, you will need to update this line:

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

With your Shop ID: How do I find or update the Hosted Payments Shop Name?

User-Selectable Preset Amounts

This type of button is best used with donations/charity events, and sends the user directly to checkout once they click the button.

<form method="post" action="https&#58;&#47;&#47;www&#46;payjunction&#46;com/trinity/quickshop/add_to_cart_snap.action">
    <input type="hidden" name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID">
    <input type="hidden" name="need_to_ship" value="no">
    <input type="hidden" name="need_to_tax" value="no">
    <input type="hidden" name="description" value="Online&#32;Donation">
    <input type="hidden" name="quantity" value="1">
    <label style="font-weight: bold;">Donation Amount<label>
    <select name="price">
        <option value="1.00">$1.00</option>
        <option value="5.00">$5.00</option>
        <option value="20.00">$20.00</option>
        <option value="50.00">$50.00</option>
        <option value="100.00">$100.00</option>
    </select>
    <input type="submit" name="submit" value="Donate">
</form>

In order to use the above code as a template, you will need to update this line:

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

With your Shop ID: How do I find or update the Hosted Payments Shop Name?

The amounts shown in the drop-down menu depend on the <option> tags provided. The above template provides $1, $5, $20, $50 and $100 amounts which the customer can select.

Multiple Hosted Payment Shops

This type of button is commonly used for tracking different events or departments/locations in an organization in PayJunction, or if you have multiple accounts/terminals and you do not wish to make multiple buttons for each.

Step-by-step guide for creating additional Hosted Payment Shops: How do I create multiple Hosted Payment stores?

Not sure if you should use multiple Hosted Payment Shops? Give our help desk a call at 800-601-0230 x 3.

<form method="post" action="https&#58;&#47;&#47;www&#46;payjunction&#46;com/trinity/quickshop/add_to_cart_snap.action">
    Location:  <select name="store">
        <option value="QS_STORE_ID_SB">Santa Barbara</option>
        <option value="QS_STORE_ID_GOLETA">Goleta</option>
        <option value="QS_STORE_ID_CARPENTARIA">Carpentaria</option>
    </select>
    <input type="hidden" name="need_to_ship" value="no">
    <input type="hidden" name="need_to_tax" value="no">
    <input type="hidden" name="description" value="Bill&#32;Payment">
    <input type="hidden" name="quantity" value="1">
    <br>
    <label>Enter Amount</label>
    <input type="text" name="price">
    <input type="submit" name="submit" value="Make&#32;Payment">
</form>

In order to use the above code as a template, you will need to update each of these lines:

<option value="QS_STORE_ID_SB">Santa Barbara</option>

With the appropriate Shop ID for that location/department/event: How do I find or update the Hosted Payments Shop Name?

User Input Quantity Direct to Checkout

Useful for situations where customers would only want to buy one type of item. This allows the customer to set the quantity, and then go directly to the checkout process.

<div style="border: 2px solid; width: 118px; padding: 0px 0px 10px 13px;">
    <h3>Widget X</h3>
    <label style="font-weight: bold;">Price: $50.00</label>
    <form method="post" action="https://www.payjunction.com/trinity/quickshop/add_to_cart.action">
        <input name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID" type="hidden">
        <input name="need_to_ship" value="no" type="hidden">
        <input name="need_to_tax" value="no" type="hidden">
        <input name="identifier" value="WX9000" type="hidden">
        <input name="description" value="Widget-X" type="hidden">
        <input name="price" value="50" type="hidden">
        <div>
            <label>Quantity:</label>
            <input name="quantity" style="width: 25px" type="text">
        </div>
        <div style="margin: 3px;">
            <input name="submit" value="Purchase Now" type="submit">
        </div>
    </form>
</div>

Advanced Buttons (HTML + JavaScript)

The following buttons make use of JavaScript to dynamically update the values sent to PayJunction as the user interacts with the form. Utilization of the following as templates should only be done by those with a basic understanding of scripting/programming, if not JavaScript and the Document Object Model (DOM) themselves.

Do not forget to update the <input type="hidden" name="store" value="YOUR_QUICKSHOP_STORE_ID"> with the actual store id for the account for each form!

How do I find or update the Hosted Payments Shop Name?

Add a Convenience Fee - Flat Rate

Adds a flat rate service charge to the amount entered by the customer.

<div style="border:2px solid;width:280px;padding:5px">
    <form method="post" action="https&#58;&#47;&#47;www&#46;payjunction&#46;com/trinity/quickshop/add_to_cart_snap.action" onsubmit="return pjApplyConvenienceFee(this);">
        <input type="hidden" name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID">
        <input type="hidden" name="need_to_ship" value="no">
         <input type="hidden" name="need_to_tax" value="no">
         <input type="hidden" name="description" value="Online&#32;Bill&#32;Payment">
         <input type="hidden" name="quantity" value="1">
         <label for="price">Enter Amount</label>
         <br>
         <input type="text" style="margin-bottom:3px;" name="price" id="pjHostedPaymentPrice">
         <br>
         <input type="submit" name="submit" value="Make Payment">
         <br>
         <label>*A $<span id="pjConvenienceFeeAmount"></span> convenience fee will be added</label>
    </form>
</div>
<script type="text/javascript">
    // Adds the flat fee to the amount entered by the customer
     // Update the line below to change the amount of the convenience fee
     var convenienceFee = 2.00;
     document.getElementById("pjConvenienceFeeAmount").innerHTML = convenienceFee;
     document.getElementById("pjHostedPaymentPrice").value = '';
     function pjApplyConvenienceFee(form) {
         if (isNaN(parseFloat(form.price.value))) {
             alert("Please enter a valid amount to charge.");
             return false;
         } else {
             var oPrice = parseFloat(form.price.value);
             form.price.value = oPrice + convenienceFee;
             form.description.value += " - $" + oPrice.toString() + " plus $" + convenienceFee.toString() + " convenience fee.";
             return true;
         }
     }
</script>


 

User-Selectable Preset Amounts with Custom Amount Option

Same as User-Selectable Preset Amounts button above, however adds an option to enter a custom amount at the customer's discretion.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function pjSetupElements() {
                var selector = document.getElementById("pjPriceDropDownSelector");
                if (selector.value == "custom") {
                    document.getElementById("pjHiddenPriceField").style.visibility = "visible";
                } else {
                    document.getElementById("pjHiddenPriceField").style.visibility = "hidden";
                    selector.form.price.value = selector.value;
                }
            }
        </script>
    </head>
    <body onload="pjSetupElements();">
        <div style="border: 2px solid; width: 280px; padding: 5px;">
            <form method="post" action="https&#58;&#47;&#47;www&#46;payjunction&#46;com/trinity/quickshop/add_to_cart_snap.action">
                <input type="hidden" name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID">
                <input type="hidden" name="need_to_ship" value="no">
                <input type="hidden" name="need_to_tax" value="no">
                <input type="hidden" name="description" value="Online&#32;Bill&#32;Donation">
                <input type="hidden" name="quantity" value="1">
                <div style="clear: both; margin: 2px;">
                    <label style="font-weight: bold;">Donation Amount<label>
                    <select id="pjPriceDropDownSelector" onchange="pjSetupElements();">
                        <option value="1.00">$1.00</option>
                        <option value="5.00">$5.00</option>
                        <option value="20.00" selected>$20.00</option>
                        <option value="50.00">$50.00</option>
                        <option value="100.00">$100.00</option>
                        <option value="custom">Custom Amount</option>
                    </select>
                </div>
                <div id="pjHiddenPriceField" style="visibility: hidden;">
                    <label>Enter Amount:</label>
                    <input type="text" name="price">
                   </div>
                <input type="submit" name="submit" value="Donate" style="margin-left: 200px; margin-top: 2px;">
            </form>
        </div>
    </body>
</html>

The key parts to the above code are the actual script, the HTML form, and the onLoad event handler attached to the body element and onChange event handler attached to the select element. The onLoad handler is for if the customer returns to the page after selecting Custom Amount to make sure the hidden div is displayed, the onChange handler handles making the hidden div visible or hidden again depending on what is selected in the drop-down menu.

Bulk Rate Discount

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function pjDiscountCheck() {
                var originalDescription = "Widget-X";
                var originalPrice = 50.00;
                var qInput = document.getElementById("pjWidgetXQuantity");
                if (qInput.value != "" && !isNaN(qInput.value)) {
                    var quantity = parseInt(qInput.value);
                    if (quantity >= 5) { 
                        qInput.form.description.value = originalDescription + " + 10% Bulk Rate Discount";
                        qInput.form.price.value = originalPrice * 0.9;
                        document.getElementById("pjDiscountAppliedLabel").style.visibility = "visible";
                        document.getElementById("pjDisplayPrice").innerHTML = "$" + (originalPrice * 0.9).toFixed(2);
                        document.getElementById("pjDisplayPrice").style.color = "red";
                    } else {
                        qInput.form.description.value = originalDescription;
                        qInput.form.price.value = originalPrice;
                        document.getElementById("pjDiscountAppliedLabel").style.visibility = "hidden";
                        document.getElementById("pjDisplayPrice").innerHTML = "$" + originalPrice.toFixed(2);
                        document.getElementById("pjDisplayPrice").style.color = "";
                    }
                }
            }            
        </script>
    </head>
     
    <body onload="pjDiscountCheck();">
        <div style="width: 280px; border: 2px solid; padding: 0px 5px 5px 5px;">
            <h3>Widget X</h3>
            <label style="font-weight: bold;">Price: <span style="" id="pjDisplayPrice">$50.00</span></label>
            <label style="color: red; visibility: hidden;" id="pjDiscountAppliedLabel"> - 10% Discount Applied!</label>
            <p style="color: red; font-weight: bold; font-size: 14px;">SALE: Buy 5 or more and receive a 10% discount!</p>
            <p style="font-size: 10px;">*In order to receive your bulk discount pricing, you must set the quantity on this page. Updating the quantity during the check out process or in the shopping cart will not apply the discount rate*</p>
             
            <form method="post" action="https://www.payjunction.com/trinity/quickshop/add_to_cart.action">
                <input name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID" type="hidden">
                <input name="need_to_ship" value="no" type="hidden">
                <input name="need_to_tax" value="no" type="hidden">
                <input name="identifier" value="WX9000" type="hidden">
                <input name="description" value="Widget-X" type="hidden">
                <input name="price" value="50" type="hidden">
                <div style="margin-left: 156px;">
                    <label>Quantity:</label>
                    <input name="quantity" id="pjWidgetXQuantity" style="width: 25px; margin-left: 10px;" onkeyup="pjDiscountCheck();" type="text">
                </div>
                <div style="margin: 3px;">
                    <input name="submit" value="Add to Cart" style="margin-left: 179px;" type="submit">
                </div>
            </form>
        </div>
    </body>
</html>

Similar to the previous example, this template is driven by the onLoad and onKeyUp event handlers which update the price value and hides or displays the 10% Discount Applied! message depending on the quantity entered.

Discount Code (Percentage)

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function pjGetDiscountCodes() {
                return {
                <!-- Codes must be in ALL CAPS -->    
                    'DISCOUNT10'    :    10,
                    'DISCOUNT20'    :    20,
                    'DISCOUNT30'    :    30
                     
                };
            }
             
            function pjDiscountCheck() {
                var originalDescription = "Widget-X";
                var originalPrice = 50.00;
                var discountCodes = pjGetDiscountCodes();
                var discountApplied = 0;
                 
                if (document.getElementById("pjDisplayDiscountDialogue").checked == true) {
                    document.getElementById("pjDiscountDialogue").style.display = "block";
                } else {
                    document.getElementById("pjDiscountDialogue").style.display = "none";
                    pjDiscountReset(originalPrice, originalDescription);
                    return;
                }
                 
                var dcInput = document.getElementById("pjDiscountCodeInput");
                if (dcInput.value != "") {
                    var suppliedCode = dcInput.value.trim().toUpperCase();
                    if (typeof discountCodes[suppliedCode] != "undefined") {
                        document.getElementById("pjDiscountNotRecognized").style.visibility = "hidden";
                        discountApplied = discountCodes[suppliedCode];
                        dcInput.form.description.value = originalDescription + " + " + discountApplied + "% Discount Code";
                        dcInput.form.price.value = originalPrice - (originalPrice * (discountApplied / 100));
                        document.getElementById("pjDiscountApplied").innerHTML = discountApplied;
                        document.getElementById("pjDiscountAppliedLabel").style.visibility = "visible";
                        document.getElementById("pjDisplayPrice").innerHTML = "$" + parseFloat(dcInput.form.price.value).toFixed(2);
                        document.getElementById("pjDisplayPrice").style.color = "red";
                    } else {
                        document.getElementById("pjDiscountNotRecognized").style.visibility = "visible";
                        pjDiscountReset(originalPrice, originalDescription);
                    }
                } else {
                    pjDiscountReset(originalPrice, originalDescription);
                }
            }
                         
            function pjDiscountReset(oPrice, oDescription) {
                var dcInput = document.getElementById("pjDiscountCodeInput");
                //dcInput.value = "";
                dcInput.form.description.value = oDescription;
                dcInput.form.price.value = oPrice;
                document.getElementById("pjDiscountAppliedLabel").style.visibility = "hidden";
                document.getElementById("pjDisplayPrice").innerHTML = "$" + parseFloat(oPrice).toFixed(2);
                document.getElementById("pjDisplayPrice").style.color = "black";
            }
             
            function pjApplyDiscountOnEnter(event) {
                if (event.which == 13) {
                    event.preventDefault();
                    var button = document.getElementById("pjApplyDiscountButton");
                    button.onclick.apply(button);
                }
            }
        </script>
    </head>
     
    <body onload="pjDiscountCheck();">
        <div style="width: 280px; border: 2px solid; padding: 0px 5px 5px 5px;">
            <h3>Widget X</h3>
            <label style="font-weight: bold;">Price: <span style="" id="pjDisplayPrice">$50.00</span></label>
            <label style="color: red; visibility: hidden;" id="pjDiscountAppliedLabel"> - <span id="pjDiscountApplied">10</span>% Discount Applied!</label>
            <br>
            <input form="" onchange="pjDiscountCheck();" id="pjDisplayDiscountDialogue" type="checkbox"><span style="font-size: 8px;">I have a discount code</span>
            <br>
            <form method="post" action="https://www.payjunction.com/trinity/quickshop/add_to_cart.action">
                <input name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID" type="hidden">
                <input name="need_to_ship" value="no" type="hidden">
                <input name="need_to_tax" value="no" type="hidden">
                <input name="identifier" value="WX9000" type="hidden">
                <input name="description" value="Widget-X" type="hidden">
                <input name="price" value="50" type="hidden">
                <div style="display: none;" id="pjDiscountDialogue">
                    <label style="visibility: hidden; color: red; font-size: 8px;" id="pjDiscountNotRecognized">Discount Code Not Recognized</label>
                    <br>
                    <label>Discount Code:</label>
                    <br>
                    <input id="pjDiscountCodeInput" style="width: 100px;" type="text" onkeypress="pjApplyDiscountOnEnter(event);">
                    <button form="" onclick="pjDiscountCheck();" id="pjApplyDiscountButton">Apply Discount</button>
                </div>
                <div style="margin: 3px;">
                    <input name="submit" value="Add to Cart" style="margin-left: 179px;" type="submit">
                </div>
            </form>
             
        </div>
    </body>
</html>

To add/edit/remove discount codes and the percentage to take off the price, simply update the array in the first function, pjGetDiscountCodes(). All codes must use ALL CAPS, and should not use non-alphanumeric characters.

Discount Code with Multiple Buttons

<!DOCTYPE html>
<html>
    <head>
        <script>
            // JS for coupon will go here
            function qsApplyCoupon(f) {
                // Object with coupon codes and percentages.
                // ALL CODES MUST BE IN UPPER CASE!
                var coupons = {
                    'COUPON10' : 10, // 10% discount
                    'COUPON20' : 20, // 20% discount
                    'COUPON30' : 30  // 30% discount
                };
                // Get the current value in the coupon code field, trim it and convert to upper case
                var code = document.getElementById('qsCouponCode').value.trim().toUpperCase();
                // If the code is blank, no coupon code was entered, return true to continue without making changes
                if (code == '') {
                    return true;
                } else if (typeof coupons[code] != 'undefined') {
                    // Coupon code is valid, update the price and description based off the o_ fields
                    var originalDescription = f.o_description.value;
                    var originalPrice = parseFloat(f.o_price.value);
                    f.description.value = originalDescription + " *" + coupons[code] + "% discount applied to original price of $" + f.o_price.value;
                    f.price.value = originalPrice - (originalPrice * (coupons[code] / 100)).toFixed(2);
                    return true;
                } else {
                    // The code is not blank but it does not match anything in the list.
                    alert("The coupon code supplied does not match any active coupons. Please correct the coupon code or delete it to proceed at the normal price.");
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <h1>Coupon Codes and Multiple Buttons Example</h1>
        <label>Coupon Code:</label>
        <input form='' type="text" id="qsCouponCode">
        <ul>
            <li>Widget X - Price: $5.00
                <form method="post" action="https&#58;&#47;&#47;www&#46;payjunction&#46;com/trinity/quickshop/add_to_cart.action" onsubmit="return qsApplyCoupon(this);">
                    <input type="hidden" name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID">
                    <input type="hidden" name="need_to_ship" value="no">
                    <input type="hidden" name="need_to_tax" value="no">
                    <input type="hidden" name="identifier" value="WDGTX">
                    <input type="hidden" name="description" value="Widget&#32;X">
                    <input type="hidden" name="o_description" value="Widget&#32;X">
                    <input type="hidden" name="quantity" value="1">
                    <input type="hidden" name="price" value="5.00">
                    <input type="hidden" name="o_price" value="5.00">
                    <input type="submit" name="submit" value="Add&#32;to&#32;Cart">
                </form>
                 
            </li>
            <li>Widget Y - Price: $10.00
                <form method="post" action="https&#58;&#47;&#47;www&#46;payjunction&#46;com/trinity/quickshop/add_to_cart.action" onsubmit="return qsApplyCoupon(this);">
                    <input type="hidden" name="store" value="YOUR_HOSTEDPAYMENTS_STORE_ID">
                    <input type="hidden" name="need_to_ship" value="no">
                    <input type="hidden" name="need_to_tax" value="no">
                    <input type="hidden" name="identifier" value="WDGTY">
                    <input type="hidden" name="description" value="Widget&#32;Y">
                    <input type="hidden" name="o_description" value="Widget&#32;Y">
                    <input type="hidden" name="quantity" value="1">
                    <input type="hidden" name="price" value="10&#46;00">
                    <input type="hidden" name="o_price" value="10.00">
                    <input type="submit" name="submit" value="Add&#32;to&#32;Cart">
                </form>
                 
            </li>
            <li>Widget Z - Price: $3.33
                <form method="post" action="https&#58;&#47;&#47;www&#46;payjunctionlabs&#46;com/trinity/quickshop/add_to_cart.action" onsubmit="return qsApplyCoupon(this);">
                    <input type="hidden" name="store" value="pj&#45;qs&#45;01">
                    <input type="hidden" name="need_to_ship" value="no">
                    <input type="hidden" name="need_to_tax" value="no">
                    <input type="hidden" name="identifier" value="WDGTZ">
                    <input type="hidden" name="description" value="Widget&#32;Z">
                    <input type="hidden" name="o_description" value="Widget&#32;Z">
                    <input type="hidden" name="quantity" value="1">
                    <input type="hidden" name="price" value="3&#46;33">
                    <input type="hidden" name="o_price" value="3.33">
                    <input type="submit" name="submit" value="Add&#32;to&#32;Cart">
                </form>
                 
            </li>
        </ul>
    </body>
</html>

The required changes being made to the page and the forms for the buttons are the following:

The inclusion of the qsApplyCoupon function on the page

Adding the onsubmit="return qsApplyCoupon(this);" property to each <form> tag

Adding the hidden inputs "o_description" and "o_price" which contain the original text of the description and the original price respectively for each form

Adding the <input form='' type="text" id="qsCouponCode"> tag to the page which the script uses to check for a coupon code

Unless these changes are made, the script will not work and discounts will not be applied.