helcim.com

HTML Implementation

Below is an example of the HTML code to put on your website or application. In order for Helcim.js to correctly intercept and process transactions, the HTML element ID's must match the examples below.

Required HTML Elements

HTML Element TypeElement IDFormatDescription
scripttext/javascriptThe Helcim.js JavaScript. Should be src="https://secure.myhelcim.com/js/version2.js"
formhelcimFormmethod="POST"The HTML form containing required and optional form elements. Once the transaction is complete, Helcim.js will submit the form back to the merchant server (website) to capture the transaction results.
divhelcimResultsEmptyThis DIV content will be overwritten by Helcim.js - it will display errors or transaction results before the form is finally submitted.
input hiddentokenStringYour Helcim.js configuration token. This is used to identify your account and configuration settings.
input hiddenlanguageStringThe language for error message. Default is "en" for English.
input hiddentestIntegerSet to "1" for test-mode.
input textcardNumber
cardExpiry
etc. (see below)		-The input fields. Please refer to documentation here.
input buttonbuttonProcessonclick="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 using getElementById, but prevent the fields from being submitted back to the merchant server. Helcim.js will also attempt to mask sensitive data before submitting the form.

HTML example (simple)

The example below shows the minimum number of fields required to process through Helcim.js. The token value should be changed to your own Helcim.js Configuration token.

When using Helcim.js to verify and tokenize card details the amount value should be 0.00.

<!--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/>

	<!--AVS- INFORMATION-->
	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 example (detailed)

This example shows a complete list of possible fields that you can include. Again, the token value should be changed to your own Helcim.js config token.

<!--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/>

	<!--AVS-INFORMATION-->
	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>

Updated 3 days ago