HTML implentation examples

Below is an example of the HTML code to put on your website or application.

HTML example (simple)

The example below shows the minimum number of fields required to process (or tokenize) a card. 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/>

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

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

Did this page help you?