Hosted Checkout Examples
These tests are not live, and will not produce a valid authorization.
Contents
The demos on this page are slightly enhanced beyond what’s outlined in their respective Detail & Code areas. Mainly, the code examples are a great foundation to build and customize upon.
To run a simulated sale, use the following information:
- Card Number: 4012301230123010
- Expiration: 1216
- CVV: 123
- Address & Zip: Any
- Amount: $1.00 or higher
Donation Example with Javascript
The Javascript in this example is used to:
- Require each field in the billing information section
- Verify formatting is proper for certain fields (no letters, etc in custom amount field)
- In this example, the invoice number is populated with the customer email address. The client_reference_number is populated with the rest of the information. Javascript is used to concatenate the fields.
- If there are no errors, disable the submit button and proceed.
Donation Live Example
Donation example HTML + JavaScript
- <script type=“text/javascript”>
function doSubmit(thisform) {
var error = “”;
var amtsel = false;if(thisform.name.value == “” || thisform.name.value == null)
error = error + “Please fill in your name.\n”;
if(thisform.address.value == “” || thisform.address.value == null)
error = error + “Please fill in your address.\n”;
if(thisform.city.value == “” || thisform.city.value == null)
error = error + “Please fill in your city.\n”;
if(thisform.state.value == “” || thisform.state.value == null || thisform.state.value == “Select a State”)
error = error + “Please pick your state.\n”;
if(thisform.customer_email.value == “” || thisform.customer_email.value == null)
error = error + “Please fill in your email address.\n”;
if(thisform.phone.value == “” || thisform.phone.value == null)
error = error + “Please fill in your Phone Number.\n”;for(x=0; x < thisform.amount.length; x++) {
if(thisform.amount[x].checked == true) {
amtsel = true;
if(thisform.amount[x].value == “custom”) {
if(isNaN(thisform.customamount.value) || thisform.customamount.value == “” || thisform.customamount.value == null)
error = error + “Invalid dollar amount.\n”;
else
thisform.transaction_amount.value = roundNumber(thisform.customamount.value, 2);
} else {
thisform.transaction_amount.value = thisform.amount[x].value;
}
}
}if(!amtsel)
error = error + “Please choose an amount.\n”;if(error != “”) {
alert(error);
return false;
} else {
subbut.disabled = true;
thisform.client_reference_number.value = thisform.name.value + ” “ + thisform.address.value + ” “ + thisform.city.value + ” “ + thisform.state.value + ” “ + thisform.phone.value;
thisform.invoice_number.value = thisform.customer_email.value; return true;
}
}function roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
</script><form method=“POST” action=“https://www.merchante-solutions.com/jsp/tpg/secure_checkout.jsp” onsubmit=“return doSubmit(this)“ name=“theForm”>
<input type=“hidden” name=“profile_id” value=“9410000xxxxx000000xx”>
<input type=“hidden” name=“transaction_amount” value=“” size=“8”>
<input type=“hidden” name=“css_url” value=“http://www.domain.com/default.css”>
<input type=“hidden” name=“cancel_url” value=“http://www.domain.com/cancel.html”>
<input type=“hidden” name=“return_url” value=“http://www.domain.com/checkout.html”>
<input type=“hidden” name=“logo_url” value=“http://www.domain.com/example.png”>
<input type=“hidden” name=“invoice_number” value=“”>
<input type=“hidden” name=“client_reference_number” value=“”>
<input type=“hidden” name=“merchant_email” value=“merchant@address.com”><div>Billing Information</div>
<table border=“0”>
<tr>
<td><span>*</span> Name:</td>
<td><input type=“text” name=“name” size=“30” maxlength=“40”></td>
</tr>
<tr>
<td><span>*</span> Address:</td>
<td><input type=“text” name=“address” size=“30” maxlength=“40”></td>
</tr>
<tr>
<td><span>*</span> City:</td>
<td><input type=“text” name=“city” size=“30” maxlength=“40”></td>
</tr>
<tr>
<td><span>*</span> State:</td>
<td>
<select name=“state”><option value=“” selected=“selected”>Select a State</option>
<option value=“AL”>Alabama</option><option value=“AK”>Alaska</option>
<option value=“AZ”>Arizona</option><option value=“AR”>Arkansas</option>
<option value=“CA”>California</option><option value=“CO”>Colorado</option>
<option value=“CT”>Connecticut</option><option value=“DE”>Delaware</option>
<option value=“DC”>District Of Columbia</option><option value=“FL”>Florida</option>
<option value=“GA”>Georgia</option><option value=“HI”>Hawaii</option>
<option value=“ID”>Idaho</option><option value=“IL”>Illinois</option>
<option value=“IN”>Indiana</option><option value=“IA”>Iowa</option>
<option value=“KS”>Kansas</option><option value=“KY”>Kentucky</option>
<option value=“LA”>Louisiana</option><option value=“ME”>Maine</option>
<option value=“MD”>Maryland</option><option value=“MA”>Massachusetts</option>
<option value=“MI”>Michigan</option><option value=“MN”>Minnesota</option>
<option value=“MS”>Mississippi</option><option value=“MO”>Missouri</option>
<option value=“MT”>Montana</option><option value=“NE”>Nebraska</option>
<option value=“NV”>Nevada</option><option value=“NH”>New Hampshire</option>
<option value=“NJ”>New Jersey</option><option value=“NM”>New Mexico</option>
<option value=“NY”>New York</option><option value=“NC”>North Carolina</option>
<option value=“ND”>North Dakota</option><option value=“OH”>Ohio</option>
<option value=“OK”>Oklahoma</option><option value=“OR”>Oregon</option>
<option value=“PA”>Pennsylvania</option><option value=“RI”>Rhode Island</option>
<option value=“SC”>South Carolina</option><option value=“SD”>South Dakota</option>
<option value=“TN”>Tennessee</option><option value=“TX”>Texas</option>
<option value=“UT”>Utah</option><option value=“VT”>Vermont</option>
<option value=“VA”>Virginia</option><option value=“WA”>Washington</option>
<option value=“WV”>West Virginia</option><option value=“WI”>Wisconsin</option>
<option value=“WY”>Wyoming</option></select>
</td>
</tr>
<tr>
<td><span class=“req”>*</span> Zip Code:</td>
<td><input type=“text” name=“zip” size=“5” maxlength=“5”></td>
</tr>
<tr>
<td><span class=“req”>*</span> Email Address:</td>
<td><input type=“text” name=“customer_email” size=“30” maxlength=“40”></td>
</tr>
<tr>
<td><span>*</span> Phone Number:</td>
<td><input type=“text” name=“phone” size=“30” maxlength=“14”></td>
</tr>
</table><div>Gift Information</div>
<table border=“0”>
<tr>
<td><span>*</span>Select Gift Amount:</td>
<td><input type=“radio” name=“amount” value=“20.00”>$20.00</td>
</tr>
<tr>
<td></td>
<td><input type=“radio” name=“amount” value=“35.00”>$35.00</td>
</tr>
<tr>
<td></td>
<td><input type=“radio” name=“amount” value=“50.00”>$50.00</td>
</tr>
<tr>
<td></td>
<td><input type=“radio” name=“amount” value=“100.00”>$100.00</td>
</tr>
<tr>
<td></td>
<td><input type=“radio” name=“amount” value=“500.00”>$500.00</td>
</tr>
<tr>
<td></td>
<td><input type=“radio” name=“amount” value=“custom”>$ <input type=“text” name=“customamount”></td>
</tr>
<tr>
<td></td>
<td><input type=“submit” class=“formFields” value=“Continue” name=“subbut”></td>
</tr>
<tr colspan=“2”>
<td><span>*</span> Required Fields</td>
</tr>
</table></form>
Embedded iFrame Example
This demonstration is designed to show one potential way of implementing the MeS Hosted Checkout page. It does this by using the popular jQuery JavaScript library, along with an iframe. This example can be extended or modified in several ways; the iframe can be hidden until needed, it could be embedded into a Lightbox, used in a tabbed setting, or a number of other integrations.
Detail & code
An iframe, being simply a page within another page, has a couple of limitations. The primary offender of these is that it needs to have it’s size specifically set. Additionally, it won’t dynamically change it’s size to fit it’s content.
Luckily, we can solve these issues with JavaScript; in fact it’s very easy to do with modern JavaScript libraries. We’ll use the popular jQuery in our examples below.
Step 1. iframe sample
First, we need a simple iframe on our page. We’ll set the source of the frame to our initial payment form.
The text in between the iframe tags is only displayed if the web browser does not support the iframe. The frameBorder=”0″ is necessary for older versions of IE to hide the border.
- <iframe id=“payframe” src=“iframe_start.html” frameBorder=“0” style=“height: 300px; width: 100%; border: none;“>
Sorry, your browser does not support an iframe.
</iframe>
Step 2. Build request form page
This page is named iframe_start.html in the previous example. The names of the form elements are outlined in the PayHere specification, while the JavaScript is mostly for simple validation. A few lines have been highlighted for additional details:
Line 6: jQuery is used on this page. You can always download the jQuery script from jQuery.com.
Line 28: One of the issues with an iframe is that the size is static, unless we resize it. Luckily that’s pretty easy with jQuery. Line 29 resizes the iframe to 800px, but only if there are no errors, and we’re submitting the form. Depending on the logo size used, you’ll likely need to adjust the 800px. Notice on line 27 that we’re referencing the ID of the iframe by using the selector $(“#payframe”, window.parent.document). The window.parent.document is necessary to specify the scope of the selector.
Much of this page can be automatically generated with our PayHere HTML generator.
- <style type=“text/css” media=“screen”>
#container { text-align:center; width: 98%; margin: 1%; }
#payhere_table { text-align:left; width: 400px; border: 1px dashed black; margin: 0 auto 0 auto; }
.req { color: red; }
</style><script type=“text/javascript” src=“jquery.min.js”></script>
<script type=“text/javascript”>
<!–
function doSubmit(thisform) {
var error = “”;
var amtsel = false;//Customize this however you wish
if(thisform.cardholder_first_name.value == “” || thisform.cardholder_first_name.value == null)
error = error + “Please fill in your first name.\n “;
if(thisform.invoice_number.value == “” || thisform.invoice_number.value == null)
error = error + “Please fill in the apartment number.\n “;
if(isNaN(thisform.transaction_amount.value) || thisform.transaction_amount.value == “” || thisform.transaction_amount.value == null)
error = error + “Invalid dollar amount.\n “+thisform.transaction_amount.value;
if(error != “”) {
alert(error);
return false;
}
else {
// Jquery here expands/contracts our frame to accomodate for the size of the hosted page
$(“#payframe”, window.parent.document).animate({
‘height’: ‘800px’
}, 1000);
thisform.submitbutton.disabled = true;
return true;
}
}
–>
</script>
<form method=“POST” action=“https://merchante-solutions.com/jsp/tpg/secure_checkout.jsp” onsubmit=“return doSubmit(this)“>
<input type=“hidden” name=“profile_id” value=“9410000xxxxx000000xx”>
<input type=“hidden” name=“cancel_url” value=“http://www.example.com/iframe_cancel.html”>
<input type=“hidden” name=“return_url” value=“http://www.example.com/iframe_return.html”>
<input type=“hidden” name=“response_url” value=“http://www.example.com/response.php”>
<input type=“hidden” name=“css_url” value=“https://www.example.com/default.css”>
<input type=“hidden” name=“logo_url” value=“https://www.example.com/checkout.png”><div id=“container”>
<table id=“payhere_table”>
<tr><th colspan=“2”>Billing Information</th></tr>
<tr>
<td><span class=“req”>*</span> Tenant Name</td>
<td><input type=“text” name=“cardholder_first_name” size=“30” maxlength=“40”></td>
</tr>
<tr>
<td><span class=“req”>*</span> Apartment Number</td>
<td><input type=“text” name=“invoice_number” size=“30” maxlength=“40”></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type=“text” name=“cardholder_email” size=“30” maxlength=“40”></td>
</tr><tr><th colspan=“2”>Amount</th></tr>
<tr>
<td> </td>
<td>$<input type=“text” name=“transaction_amount” value=“”></td>
</tr>
<tr>
<td><span class=“req”>*</span> Required Fields</td>
<td><input type=“submit” value=“Continue” name=“submitbutton”></td>
</tr>
</table>
</div></form>
Step 3. Cancel page
We’ll call it iframe_cancel.html. For the most part, this page’s design is entirely up to you. You may wish to collect information about why the cancel happened, or simply display a cancel message. Since we enlarged the iframe size in the previous page however, we’ll likely want to resize it back down upon return. This is easily taken care of with jQuery, as seen with line 6. Additionally, we’ll provide for resetting the iframe contents to the original form, when the #reopenelement is clicked (line 12).
- <script type=“text/javascript” src=“jquery.min.js”></script><script type=“text/javascript”>
<!–
$(document).ready(function(){
$(“#payframe”, window.parent.document).animate({
‘height’: ‘300px’
}, 1000);
});$(function() {
$(“#reopen”).click(function(){
$(“#payframe”, window.parent.document).attr(“src”, “iframe_start.html”);
});
});
–>
</script><h1>Your payment was cancelled</h1>
<div>
Please provide feedback on why you cancelled the payment by emailing support.
</div>
<div>
To begin again, <a id=“reopen” style=“border–bottom: 1px dotted black;“>click here</a>.
</div>
Step 4. Return page
This is the landing page after a successful transaction has processed. Unless you wish to do some special handling, this is likely going to be similar to the cancel page (but with a nice thank you message).
- <script type=“text/javascript” src=“jquery.min.js”></script><script type=“text/javascript”>
<!–
$(document).ready(function(){
$(“#payframe”, window.parent.document).animate({
‘height’: ‘300px’
}, 1000);
});$(function() {
$(“#reopen”).click(function(){
$(“#payframe”, window.parent.document).attr(“src”, “iframe_start.html”);
});
});
–>
</script><h1>Thank You!<br />Your payment was successful</h1>
<div>
We appreciate your business.
</div>
<div>
To begin again, <a id=“reopen” style=“border–bottom: 1px dotted black;“>click here</a>.
</div>
Step 5. Keep local record (optional)
If you wish to keep a local record of the transaction in a database or flat file, there is an additional field you may send during your request: the response_url (we called it response.php in the step 2 example on line 42). When the response_url is provided, a separate dedicated system will echo out the results of approvals and declines within 1 minute to the response URL. These are sent as a POST, and can easily be picked up and stored with PHP using the $_POSTglobal variable (or the server-side programming language of your choice). The names and possible values to be returned are outlined in the formatted example below.
- tran_type -> Sale
tran_amount -> 1.00
invoice_number -> 123456
currency_code -> 840
client_ref_number -> 654321
acct_number -> xxxxxxxxxxxx8888
card_type -> VS
exp_date -> 0113
billing_address -> 123 N. Main
billing_zip -> 55555
retrieval_ref_number -> 106719428643
auth_code -> T6515H
resp_code -> 000
resp_text -> Exact Match
tran_id -> 4cd3e3a1ac2f3353a47649c8a85fb1a4
tran_date -> 03/21/2011 11:42:46 AM
Additional details for the returned fields are found in the PayHere specification.