{if $processor_template_data}
    {literal}
		<script src="content/vendors/i4go/jquery.i4goTrueToken.js"></script>
		<script src="content/vendors/i4go/cardswipe.js"></script>
		<script>
				var i4goTrueTokenObj = $("#form-main").i4goTrueToken({
	{/literal}
				server:"{$processor_template_data.i4go_server}",
				accessBlock:"{$processor_template_data.i4go_accessblock}",
				self: document.location,
				template:"bootstrap3",
				frameAutoResize: true,
				debug: false,
				encryptedOnlySwipe:false,
				acceptedPayments:  "AX,DC,JC,MC,NS,VS",
	{literal}
				onSuccess: function(form,data) {
					if (data.i4go_responsecode == 1) {
                        $("#last-request-result").html('  '+data.i4go_response+'  ');
                        $("#i4go_cardtype2").html('  '+data.i4go_cardtype+'  ');
                        $("#i4go_maskedcard2").html('  '+"********"+data.i4go_uniqueid.substring(0,4)+'  ');

                        $("#i4go-secure-button").show();
                        $("#request-result").slideDown();
                        $("#payment-iframe").slideUp();

                        var shift4result = $("#payment-info").clone();
                        $(".IFGO_RESULT").detach();
                        $(shift4result).addClass('IFGO_RESULT');
                        $(shift4result).appendTo('#opc-payment-method-form');
                        opc_billing.setIsCompleted(true);
                        onePageCheckout.setCompleteButton();
                        opc_payment.processPayment();
                    }
                },
                onFailure: function(form,data) {
                    $(".IFGO_RESULT").detach();
                    opc_billing.setIsCompleted(false);
                    onePageCheckout.setCompleteButton();
                    console.warn("My onFailure called!");
                    $("#last-request-result").html('  '+data.i4go_response+'  ');
                    $("#i4go-secure-button").hide();
                    $("#request-result").slideDown();
                }
            });

        $.cardswipe({
            success: function (data) {
                i4goTrueTokenObj.sendSwipeToFrame(data);
            },
            error: function() {
                console.warn("Swipe failed!");
            }
        });

        if(i4goTrueTokenObj){
            opc_billing.setIsCompleted(false);
            onePageCheckout.setCompleteButton();
        }


        $("#i4go-secure-button").click(function(){
            $("#request-result").slideUp();
            $("#payment-iframe").slideDown();
            opc_billing.setIsCompleted(false);
            onePageCheckout.setCompleteButton();
        });

    </script>
{/literal}
<form id="form-main" method="post" action="{$processor_template_data.successUrl}" class="form" role="form">
    <fieldset id="payment-iframe">
        <div id="i4goFrame"></div>
    </fieldset>
    <fieldset id="request-result" style="display: none">
        <legend> <br/>
            <b>Card Secure Success/Failure: </b> <div style="text-align: center" id="last-request-result"/>
            <br/>
        </legend>
        <div class="form-group">
            <label  style="font-weight:bold; margin-left: 5px;" for="i4go_cardtype2">Card Type: </label> <sapn id="i4go_cardtype2"/>
        </div>
        <div class="form-group">
            <label style="font-weight:bold; margin-left: 5px;" for="i4go_maskedcard2">Card Mask: </label> <span id="i4go_maskedcard2"/>
        </div>
        <div class="spacer text-right gap-top gap-bottom">
            <input id="i4go-secure-button" class="submit" type="button" value="{$msg.opc.i4go_reenter_card_button}" style="display: inline;">
        </div>
    </fieldset>
    <fieldset id="payment-info" style="display: none">
        <div class="form-group">
            <input id="i4go_response" name="i4go_response" type="text" class="form-control" size="30" maxlength="30" placeholder="Response" readonly="readonly" />
            <input id="i4go_responsecode" name="i4go_responsecode" type="text" class="form-control" size="30" maxlength="30" placeholder="Text" readonly="readonly" />
            <input id="i4go_responsetext" name="i4go_responsetext" type="text" class="form-control" size="30" maxlength="30" placeholder="Text" readonly="readonly" />
            <input id="i4go_cardtype" name="i4go_cardtype" type="text" class="form-control" size="30" maxlength="30" placeholder="Type" readonly="readonly" />
            <input id="i4go_maskedcard" name="i4go_maskedcard" type="text" class="form-control" size="30" maxlength="30" placeholder="Masked card" readonly="readonly" />
            <label for="i4go_uniqueid">Token</label>
            <input id="i4go_uniqueid" name="i4go_uniqueid" type="text" class="form-control" size="30" maxlength="30" placeholder="Payment token" readonly="readonly" />
            <input id="i4go_expirationmonth" name="i4go_expirationmonth" type="text" class="form-control" size="4" maxlength="4" placeholder="Month" readonly="readonly" />
            <input id="i4go_expirationyear" name="i4go_expirationyear" type="text" class="form-control" size="4" maxlength="4" placeholder="Year" readonly="readonly" />
        </div>
    </fieldset>
</form>
{/if}