Hosted Fields

The Hosted Fields feature on the Secure Hosting (SH) platform is a way of placing transactions through our system while allowing the customer to remain on your website. This will mean that your site will be eligible for the easiest level of PCI compliance "SAQ A"

Certain payment fields on the checkout page must be hosted securely, This requires you to host the information on an external payment gateway's webserver and present the fields to your users in a iframe or with a redirect.

This Hosted Fields solution enables this by rendering an iframe to handle input of the following payment fields on your checkout page:

  • Card Number

  • Start Month

  • Start Year

  • CV2 Number

  • Expiry month

  • Expiry year

This enables the deveopler to customize the look of the page while still being within with PCI requirements.

Implementation

Mandatory Form Fields:
<input type="hidden" name='shreference' value=shXXXXXX /> 
<input type="hidden" name='checkcode' value=123456 /> 
<input type="hidden" name='transactionamount' value='5.00' /> 

notes:

shreference to contain your account number (which starts sh)

checkcode to contain data which can be extracted from the management portal > settings > company details

Form fields to be contained within a form which has a "id attribute" (used later on)

To be placed within the head tags:
<script>var basketFormID = "basketform"; var successPage = "transaction success page";</script>
<script src="https://payments.monek.com/hostedfields/js/hostedFields.js"></script>

notes:

"basketform" needs to be changed to reflect id of the form which references the mandory fields

varible "successPage" needs to reflect where the customer is sent to following a successful payment

To be placed wherever you want them within your payment page:
<iframe src="https://payments.monek.com/hostedfields/hostedFields.php" style="border:0; display:block;" id="iframe-content" scrolling="no" width="80%" height="475"></iframe>
<button onclick="hfSend(basketFormID, successPage);" id="hfsubmit" class="btn btn-info">Complete Order</button> 

notes:

You must also set the domain of where this is hosted in the management portal > company details > website

Example:

The following "code pen" is a basic example of this integration