Helcim Logo Support & Tutorials

© Copyright 2006-2018 Helcim Inc.

All Rights Reserved.

Helcim.js »

HTML Structure

Once the transaction is completed and the form is submitted, POST data will be sent back to the merchant's server (webpage). The POST data will include the fields listed below. The POST field [xml] will also contain an XML structure of the response.

HTML Element Type Element Name Element ID Format Description
script - - text/javascript The Helcim.js JavaScript. Should be src="https://secure.myhelcim.com/js/version2.js"
form helcimForm helcimForm method="POST" The HTML form. Once the transaction is complete, Helcim.js will submit the form back to the merchant server (website) to capture the transaction results.
div helcimResults helcimResults Empty This DIV will be overwritten by Helcim.js - it will display errors as well as the transaction results before the form is finally submitted.
input hidden none* token String Your Helcim.js configuration token. This is used to identify your account and configuration settings.
input hidden none* language String The language for error message. Default is "en" for English.
input hidden none* test Integer Set to "1" for test-mode.
input text none* cardNumber, cardExpiry, etc.. - The input fields. Please refer to documentation here.
input button buttonProcess buttonProcess onclick="javascript:helcimProcess();" The input button to process the payment. The value can be set to anything, such as "Process Payment" or "Save Card".

* IMPORTANT: Fields with sensitive credit card information should not have an HTML field name, only an HTML field "id". This will allow the JavaScript to retrieve the values (getElementById), but prevent the fields from being submitted back to the merchant server. Helcim.js will also attempt to mask sensitive data before submitting form.

Code Samples

HTML Structure Sample - Simple HTML

<!--SCRIPT-->
<script type="text/javascript" src="https://secure.myhelcim.com/js/version2.js"></script>

<!--FORM-->
<form name="helcimForm" id="helcimForm" action="your-checkout-page.php" method="POST">

	<!--RESULTS-->
	<div id="helcimResults"></div>

	<!--SETTINGS-->
	<input type="hidden" id="token" value="58ae1d44d7ac6959332969">
	<input type="hidden" id="language" value="en">

	<!--CARD-INFORMATION-->
	Card Token: <input type="text" id="cardToken" value="1"><br/>
	Credit Card Number: <input type="text" id="cardNumber" value=""><br/>
	Expiry Month: <input type="text" id="cardExpiryMonth" value=""> Expiry Year: <input type="text" id="cardExpiryYear" value=""><br/>
	CVV: <input type="text" id="cardCVV" value=""><br/>

	<!--OPTIONAL-AVS-->
	Card Holder Name: <input type="text" id="cardHolderName" value=""><br/>
	Card Holder Address: <input type="text" id="cardHolderAddress" value=""><br/>
	Card Holder Postal Code: <input type="text" id="cardHolderPostalCode" value=""><br/>

	<!--OPTIONAL-AMOUNT-->
	Amount: <input type="text" id="amount" value="100.00"><br/>

	<!--BUTTON-->
	<input type="button" id="buttonProcess" value="Process" onclick="javascript:helcimProcess();">

</form>

HTML Structure Sample - Detailed HTML

<!--SCRIPT-->
<script type="text/javascript" src="https://secure.myhelcim.com/js/version2.js"></script>

<!--FORM-->
<form name="helcimForm" id="helcimForm" action="your-checkout-page.php" method="POST">

	<!--RESULTS-->
	<div id="helcimResults"></div>

	<!--SETTINGS-->
	<input type="hidden" id="token" value="58ae1d44d7ac6959332969">
	<input type="hidden" id="language" value="en">

	<!--CARD-INFORMATION-->
	Card Token: <input type="text" id="cardToken" value="1"><br/>
	Credit Card Number: <input type="text" id="cardNumber" value=""><br/>
	Expiry Month: <input type="text" id="cardExpiryMonth" value=""> Expiry Year: <input type="text" id="cardExpiryYear" value=""><br/>
	CVV: <input type="text" id="cardCVV" value=""><br/>

	<!--OPTIONAL-AVS-->
	Card Holder Name: <input type="text" id="cardHolderName" value=""><br/>
	Card Holder Address: <input type="text" id="cardHolderAddress" value=""><br/>
	Card Holder Postal Code: <input type="text" id="cardHolderPostalCode" value=""><br/>

	<!--OPTIONAL-AMOUNT-->
	Amount: <input type="text" id="amount" value="100.00"><br/>
	<input type="hidden" id="amountShipping" value="2.00">
	<input type="hidden" id="amountTax" value="3.00">

	<!--OPTIONAL-BILLING-ADDRESS-->
	Billing - Contact Name: <input type="text" id="billing_contactName" value=""><br/>
	Billing - Business Name: <input type="text" id="billing_businessName" value=""><br/>
	Billing - Address Street 1: <input type="text" id="billing_street1" value=""><br/>
	Billing - Address Street 2: <input type="text" id="billing_street2" value=""><br/>
	Billing - City: <input type="text" id="billing_city" value=""><br/>
	Billing - Province: <input type="text" id="billing_province" value=""><br/>
	Billing - Postal Code: <input type="text" id="billing_postalCode" value=""><br/>
	Billing - Country: <input type="text" id="billing_country" value=""><br/>
	Billing - Phone Number: <input type="text" id="billing_phone" value=""><br/>
	Billing - Email Address: <input type="text" id="billing_email" value=""><br/>
	Billing - Fax: <input type="text" id="billing_fax" value=""><br/>

	<!--OPTIONAL-SHIPPING-ADDRESS-->
	Shipping - Contact Name: <input type="text" id="shipping_contactName" value=""><br/>
	Shipping - Business Name: <input type="text" id="shipping_businessName" value=""><br/>
	Shipping - Address Street 1: <input type="text" id="shipping_street1" value=""><br/>
	Shipping - Address Street 2: <input type="text" id="shipping_street2" value=""><br/>
	Shipping - City: <input type="text" id="shipping_city" value=""><br/>
	Shipping - Province: <input type="text" id="shipping_province" value=""><br/>
	Shipping - Postal Code: <input type="text" id="shipping_postalCode" value=""><br/>
	Shipping - Country: <input type="text" id="shipping_country" value=""><br/>
	Shipping - Phone Number: <input type="text" id="shipping_phone" value=""><br/>
	Shipping - Email Address: <input type="text" id="shipping_email" value=""><br/>
	Shipping - Fax: <input type="text" id="shipping_fax" value=""><br/>

	<!--OPTIONAL-ORDER-->
	Order Number: <input type="text" id="orderNumber" value="4"><br/>

	<!--OPTIONAL-CUSTOMER-->
	Customer Code: <input type="text" id="customerCode" value="3"><br/>

	<!--OPTIONAL-COMMENTS-->
	Comments: <input type="text" id="comments" value=""><br/>

	<!--OPTIONAL-ITEM-->
	ITEM 1 - SKU: <input type="text" id="itemSKU1" value="SKU100"><br/>
	ITEM 1 - Description: <input type="text" id="itemDescription1" value="Item 1 Description"><br/>
	ITEM 1 - Serial Number: <input type="text" id="itemSerialNumber1" value="SN10100100101"><br/>
	ITEM 1 - Quantity: <input type="text" id="itemQuantity1" value="2"><br/>
	ITEM 1 - Price: <input type="text" id="itemPrice1" value="10.00"><br/>
	ITEM 1 - Total: <input type="text" id="itemTotal1" value="20.00"><br/>

	ITEM 2 - SKU: <input type="text" id="itemSKU2" value="SKU200"><br/>
	ITEM 2 - Description: <input type="text" id="itemDescription2" value="Item 2 Description"><br/>
	ITEM 2 - Serial Number: <input type="text" id="itemSerialNumber2" value="SN20200200202"><br/>
	ITEM 2 - Quantity: <input type="text" id="itemQuantity2" value="2"><br/>
	ITEM 2 - Price: <input type="text" id="itemPrice2" value="15.00"><br/>
	ITEM 2 - Total: <input type="text" id="itemTotal2" value="30.00"><br/>

	<!--BUTTON-->
	<input type="button" id="buttonProcess" value="Process" onclick="javascript:helcimProcess();">

</form>