Sample Form

Sample HTML


		
	<form id="payment_form">
        <div class="col-md-4 mb-3">
            <label for="card_holder_id_number">Enter Card Holder ID</label>
            <div class="form-control" id="card_holder_id_number"></div>
            <div id="errors_for_card_holder_id_number" class="error_message"></div>
        </div>

        <div class="col-md-4 mb-3">
            <label for="credit_card_number">Enter credit card</label>
            <div class="form-control" id="credit_card_number"></div>
            <div id="errors_for_credit_card_number" class="error_message"></div>
        </div>

        <div class="col-md-4 mb-3">
            <label for="cvv">Enter CVV</label>
            <div class="form-control" id="cvv"></div>
            <div id="errors_for_cvv" class="error_message"></div>
        </div>

        <div class="col-md-4 mb-3">
            <label for="expiry">Enter credit card</label>
            <div class="form-control" id="expiry"></div>
            <div id="errors_for_expiry" class="error_message"></div>
        </div>

        <div class="col-md-4 mb-3">
            <label for="amount">Enter Transaction Amount</label>
            <input class="form-control" id="amount">
            <div id="errors_for_amount" class="error_message"></div>
        </div>

        <input class="form-control" type="submit" value="Submit">

    </form>

Sample JS


	
<script type="text/javascript">
    var fields;

    $(document).ready(
        function () {

            fields = TzlaHostedFields.create({
                sandbox: false,

                fields: {
                    card_holder_id_number: {
                        selector: '#card_holder_id_number',
                        placeholder: '123456789',
                        tabindex: 1
                    },
                    credit_card_number: {
                        selector: '#credit_card_number',
                        placeholder: '4580 4580 4580 4580',
                        tabindex: 2
                    },
                    cvv: {
                        selector: '#cvv',
                        placeholder: '123',
                        tabindex: 3
                    },
                    expiry: {
                        selector: '#expiry',
                        placeholder: '12/21',
                        tabindex: 4,
                        version: '1'
                    },
                    // amount: {
                    //     selector: '#amount',
                    //     tabindex: 5
                    // }
                },
                styles: {
                    'input': {
                        'height': 'auto',
                        'width': 'auto'
                    },
                    'select': {
                        'height': 'auto',
                        'width': 'auto'
                    }
                }

            })

        },
    );


    $(document).ready(function () {
        $('#payment_form').on('submit', function (e) {
            console.log('submit');
            debugger;
            e.preventDefault();
            chargeCcData();
        })
    });

    function chargeCcData() {
        console.log('start charging');

        fields.charge({
            //REQUIRED PARAMS, Those have to be in every card charge
			
	    // card_holder_id_number: $('#card_holder_id_number').val(),
            // credit_card_number: $('#credit_card_number').val(),
            // cvv: $('#cvv').val(),
            // expiry: $('#expiry').val()
            amount: $('#amount').val(),
			
            // //OPTIONAL FIELDS, you can add and remove if needed
            terminal_name: 'naortest', // todo change it to correct terminal name
            response_language: 'english',

        }, function (err, response) {
            console.log('err: ' + JSON.stringify(err));
            console.log('response:' + JSON.stringify(response));
            if (err) {
                handleErrors(err);
            }
            if (response) {
                parseResponse(response);
            }
        }
        )
    }

    function handleErrors(error) {
        error.messages.forEach(function (message) {
            $('#errors_for_' + message.param).text(message.message);
        });
    }

    function parseResponse(response) {
        // Handle the response, redirect if needed
        console.log(response);
    }


</script>