{"_id":"59caaa3fc72d0c001049fdba","project":"55b933b3146ef121002158d3","version":{"_id":"5632a5e549e16d0d00122443","__v":6,"project":"55b933b3146ef121002158d3","createdAt":"2015-10-29T23:04:05.701Z","releaseDate":"2015-10-29T23:04:05.701Z","categories":["5632a5e749e16d0d00122444","5632a5e749e16d0d00122445","5632a5e749e16d0d00122446","5632a5e749e16d0d00122447","5632a5e749e16d0d00122448","5632a5e749e16d0d00122449","5632a5e749e16d0d0012244a","5632a5e749e16d0d0012244b","5632a5e749e16d0d0012244c","5632a5e749e16d0d0012244d","5632a5e749e16d0d0012244e","5632a5e749e16d0d0012244f","5632a5e749e16d0d00122450","5632b179df556c0d00cd095b","564e13053b2b4a19000cd69b","59caa9df65accc001a489c95","59cab50965accc001a489d28","59cadd464ab7b70024378e74"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"category":{"_id":"59caa9df65accc001a489c95","project":"55b933b3146ef121002158d3","version":"5632a5e549e16d0d00122443","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-09-26T19:26:23.064Z","from_sync":false,"order":1,"slug":"jquery-library","title":"jQuery Library"},"user":"55b932ba8fd1a02b00f496c8","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-09-26T19:27:59.847Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"ueForm is a jquery library designed to tokenize credit card data for transaction processing.\n[block:api-header]\n{\n  \"title\": \"\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Include Code:\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Basic Form\"\n}\n[/block]\nThis is the most basic usage of the ueForm plugin. All that is required is jQuery 1.7 or greater, the plugin itself and a basic form. The default names required by the plugin for the tokenization are address, zip, ccnum, cvv2 and expdate.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n \\n<form>\\n  Address: <input type=\\\"text\\\" name=\\\"address\\\" />\\n  Zip: <input type=\\\"text\\\" name=\\\"zip\\\" />\\n  Credit Card Number: <input type=\\\"text\\\" name=\\\"ccnum\\\" />\\n  cvv2: <input type=\\\"text\\\" name=\\\"cvv2\\\" />\\n  Exp Date: <input type=\\\"text\\\" name=\\\"expdate\\\" />\\n  <input type=\\\"submit\\\" value=\\\"Submit\\\" />\\n</form>\\n \\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"html\",\n      \"name\": \".\"\n    }\n  ]\n}\n[/block]\nWhen this form is submitted the credit card information will be sent to EBizCharge and tokenized. The token will be returned and placed inside of the credit card number field and the cvv2 information will be removed from the form. After this has happened processing of the submission event will continue as normal.\n\nBy default the ueForm plugin will be initialized on all form elements.\n[block:api-header]\n{\n  \"title\": \"Non Default Input Names\"\n}\n[/block]\nIn this example the address field has been split into two separate fields, the credit card number has been split into four fields and the zip does not have the default name.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n \\n<form>\\n  Address: <input type=\\\"text\\\" name=\\\"address_1\\\" />\\n  Address cont.: <input type=\\\"text\\\" name=\\\"address_2\\\" />\\n  Zip: <input type=\\\"text\\\" name=\\\"mZip\\\" />\\n  Credit Card Number: \\n  <input type=\\\"text\\\" name=\\\"cc_num1\\\" />\\n  <input type=\\\"text\\\" name=\\\"cc_num2\\\" />\\n  <input type=\\\"text\\\" name=\\\"cc_num3\\\" />\\n  <input type=\\\"text\\\" name=\\\"cc_num4\\\" />\\n  cvv2: <input type=\\\"text\\\" name=\\\"cvv2\\\" />\\n  Exp Date: <input type=\\\"text\\\" name=\\\"expdate\\\" />\\n  <input type=\\\"submit\\\" value=\\\"Submit\\\" />\\n</form>\\n \\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"html\",\n      \"name\": \" \"\n    }\n  ]\n}\n[/block]\nIf you have changed the names from the default values expected by the ueForm plugin, then you must reinitialize the plugin with the options that will tell the plugin what fields to use.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  $('form')\\n  .ueForm({\\n    name_map  : {\\n      ccnum    : ['cc_num1', 'cc_num2', 'cc_num3', 'cc_num4'],\\n      address  : ['address_1', 'address_2'],\\n      zip      : 'mZip'\\n    }\\n  });\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis javascript uses the name_map option parameter to tell the plugin that it should use the inputs with names address_1 and address_2 for address and cc_num1, cc_num2, cc_num3 and cc_num4 for ccnum. If multiple inputs are to be used for a single field then you should use an array of the name values. Single value inputs such as zip in this example do not need to be an array. When the values from a multi field input such as address or ccnum are combined they will have their whitespace trimmed and be concatenated together in order provided with a single space separating each value.\n[block:api-header]\n{\n  \"title\": \"Ajax Submission Through Click Event Without Form\"\n}\n[/block]\nThe previous two examples both used the form's submit event to process the form. However, this is not the only way to process form data. Through the use of ajax requests and javascript, forms can be processed using other events such as a button's click event. Notice in the code below that the button input is of type button and not submit. Also in this example the form tag has been replaced with a div.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n \\n<div>\\n  Address: <input type=\\\"text\\\" name=\\\"address\\\" />\\n  Zip: <input type=\\\"text\\\" name=\\\"zip\\\" />\\n  Credit Card Number: <input type=\\\"text\\\" name=\\\"ccnum\\\" />\\n  cvv2: <input type=\\\"text\\\" name=\\\"cvv2\\\" />\\n  Exp Date: <input type=\\\"text\\\" name=\\\"expdate\\\" />\\n  <input type=\\\"button\\\" id=\\\"ajax-submit\\\" value=\\\"Ajax Submission\\\" />\\n</div>\\n \\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nBy default when this button is pressed nothing will happen. However in the code below we use jQuery to bind code to the click event of the button. The code inside of the jquery click event processes the input data and sends the data for processing by use of an ajax call. In order to properly tokenize the credit card data before your click event handler you must initialize the ueForm plugin on the element whos' action will ultimately submit the data. In this instance it is the button with id ajax-submit and we're using the click event. The options we must use are event and container. The values we pass in are click for event because that is the event used to process the input and div for container because it is the element that contains all of the input required. The container option takes a jQuery selector as its value. The ueForm plugin will look for parents of the target, in this case #ajax-submit, which match the selector provided by the container option. Once the container element has been found all descendent input elements will be serialized for processing.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  $('#ajax-submit')\\n    .ueForm({\\n      event      : 'click',\\n      container  : 'div'\\n    })\\n    .click(function(e){\\n      ... // Gather data\\n      $.ajax({\\n        ... // Make an ajax request to process the data\\n      })\\n    });\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAlternatively you could add the events like this.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  $('#ajax-submit')\\n    .click(function(e){\\n      ...\\n    });\\n  $('#ajax-submit')\\n    .ueForm({\\n      event      : 'click',\\n      container  : 'div'\\n    });\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nI know what you're thinking. “Hold your horses there programming wizard. Javascript events are processed in a first in first out (FIFO) queue. If you add the .click event before .ueForm adds its .click event the tokenization will happen second!” It is true that events on elements are processed in the order they are added, however the ueForm plugin jumps the line and inserts its event as the first event to be executed. Since this is the case you must be sure not to use any code that similarly tries to jump the line in the event queue. If you require such functionality then you must call .ueForm after adding your event.\n[block:api-header]\n{\n  \"title\": \"Javascript Generated HTML\"\n}\n[/block]\nAnother possibility for a website is that the form is not HTML on the page but rather html injected by javascript.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n \\n<div id=\\\"dynamic-form-container\\\"></div>\\n \\n<script>\\n  $('#dynamic-form-container')\\n    .html(\\n      '<form id=\\\"dynamic-form\\\">'+\\n        'Address: <input type=\\\"text\\\" name=\\\"address\\\" placeholder=\\\"1833 Victory Bvld\\\"/>'+\\n        'Zip: <input type=\\\"text\\\" name=\\\"zip\\\" placeholder=\\\"91202\\\"/>'+\\n        'Credit Card Number: <input type=\\\"text\\\" name=\\\"ccnum\\\" placeholder=\\\"5555 5555 5555 5555\\\"/>'+\\n        'cvv2: <input type=\\\"text\\\" name=\\\"cvv2\\\" placeholder=\\\"555\\\"/>'+\\n        'Exp Date: <input type=\\\"text\\\" name=\\\"expdate\\\" placeholder=\\\"09/22\\\"/>'+\\n        '<input type=\\\"submit\\\" id=\\\"ajax-primary\\\" class=\\\"btn btn-primary\\\" value=\\\"Submit\\\" />'+\\n      '</form>'\\n    );\\n</script>\\n \\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nOnce the form has been created the ueForm plugin must be called on the form.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  $('#dynamic-form').ueForm();\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Token Duration\"\n}\n[/block]\nTokens may be valid for either a length of time up to 8 hours, 28800 seconds, or for the life of the card they represent. A token by default is only valid for 900 seconds, or 15 minutes. This time may be increased by adding a hidden field with the name duration to the HTML form (The duration value is in seconds). In order for the token to be valid for the life of the card you must initialize the ueForm plugin on the form and set the indefinite option to true.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n \\n<form>\\n  Address: <input type=\\\"text\\\" name=\\\"address\\\" />\\n  Zip: <input type=\\\"text\\\" name=\\\"zip\\\" />\\n  Credit Card Number: <input type=\\\"text\\\" name=\\\"ccnum\\\" />\\n  cvv2: <input type=\\\"text\\\" name=\\\"cvv2\\\" />\\n  Exp Date: <input type=\\\"text\\\" name=\\\"expdate\\\" />\\n  <input type=\\\"submit\\\" value=\\\"Submit\\\" />\\n  <input type=\\\"hidden\\\" name=\\\"duration\\\" value=\\\"28800\\\" />\\n</form>\\n \\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nYou can also set the duration by setting the duration options parameter when initializing ueForm.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  $('form')\\n    .ueForm({\\n      duration  : 28800 // 8 hours\\n    });\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe code below will set tokens generated via this to be valid until the card expires.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  $('form')\\n    .ueForm({\\n      indefinite  : true\\n    });\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe indefinite option overrides any set duration.\n[block:api-header]\n{\n  \"title\": \"Error Handling\"\n}\n[/block]\nThere are two different error situations that the ueForm plugin can encounter. The first is missing input data required for tokenization or a malformed credit card number. The second is an error thrown by the call to EBizCharge when tokenizing the credit card data.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n \\n<form>\\n  Address: <input type=\\\"text\\\" name=\\\"avs_street\\\" />\\n  Zip: <input type=\\\"text\\\" name=\\\"avs_zip\\\" />\\n  Credit Card Number: <input type=\\\"text\\\" name=\\\"cc_num\\\" />\\n  cvv2: <input type=\\\"text\\\" name=\\\"cvv2\\\" />\\n  Exp Date: <input type=\\\"text\\\" name=\\\"exp_date\\\" />\\n  <input type=\\\"submit\\\" value=\\\"Submit\\\" />\\n</form>\\n \\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nWhen malformed or missing data is discovered the form_error function will be called. The parameter errors is an object containing the members address, zip, ccnum, cvv2 and expdate. Each member will be either boolean true, indicating an error with this field or false, indicating no error. When an error occurs during the tokenization of the credit card data the function error will be called. This function gets passed two parameters, the error code and the error text.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  $('form')\\n    .ueForm({\\n      form_error  : function ( errors ) {\\n        ...\\n      },\\n      error       : function ( code, text ) {\\n        ...\\n      }\\n    });\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Putting It All Together\"\n}\n[/block]\nAll together now! (minus html injection)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n \\n<div id=\\\"all-together-input\\\">\\n  Address: <input type=\\\"text\\\" name=\\\"address_1\\\" />\\n  Address cont.: <input type=\\\"text\\\" name=\\\"address_2\\\" />\\n  Zip: <input type=\\\"text\\\" name=\\\"mZip\\\" />\\n  Credit Card Number: <input type=\\\"text\\\" name=\\\"cc\\\" />\\n  cvv2: <input type=\\\"text\\\" name=\\\"cvc\\\" />\\n  Exp Month: <select name=\\\"exp_mth\\\" /> ... </select>\\n  Exp Year: <select name=\\\"exp_yr\\\" /> ... </select>\\n  <input type=\\\"button\\\" id=\\\"btn-process-payment\\\" value=\\\"Submit\\\" />\\n</div>\\n \\n<script>\\n  $('#btn-process-payment')\\n    .ueForm({\\n      event       : 'click',\\n      container   : '#all-together-input',\\n      duration    : 1800, // 30 minutes\\n      name_map    : {\\n        address  : ['address_1', 'address_2'],\\n        zip      : 'zip',\\n        ccnum    : 'cc',\\n        ccv      : 'cvc',\\n        expdate  : ['exp_mth', 'exp_yr']\\n      },\\n      form_error  : function ( errors ) {\\n        var error_text = '';\\n        $.each( errors, function( field, isError ){\\n          if ( isError )\\n            error_text += field + ', ';\\n        })\\n        error_text = error_text.slice( 0, -2 ); // Remove the trailing comma and space\\n        alert('Form Error: Incorrect input for ' + error_text + '.');\\n      },\\n      error       : function ( code, text ) {\\n        alert('Error (' + code + '): ' + text);\\n      }\\n    })\\n    .click(function(e){\\n      ...\\n    });\\n</script>\\n \\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"ueform","type":"basic","title":"ueForm"}
ueForm is a jquery library designed to tokenize credit card data for transaction processing. [block:api-header] { "title": "" } [/block] [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "javascript", "name": "Include Code:" } ] } [/block] [block:api-header] { "title": "Basic Form" } [/block] This is the most basic usage of the ueForm plugin. All that is required is jQuery 1.7 or greater, the plugin itself and a basic form. The default names required by the plugin for the tokenization are address, zip, ccnum, cvv2 and expdate. [block:code] { "codes": [ { "code": "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n \n<form>\n Address: <input type=\"text\" name=\"address\" />\n Zip: <input type=\"text\" name=\"zip\" />\n Credit Card Number: <input type=\"text\" name=\"ccnum\" />\n cvv2: <input type=\"text\" name=\"cvv2\" />\n Exp Date: <input type=\"text\" name=\"expdate\" />\n <input type=\"submit\" value=\"Submit\" />\n</form>\n \n<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "html", "name": "." } ] } [/block] When this form is submitted the credit card information will be sent to EBizCharge and tokenized. The token will be returned and placed inside of the credit card number field and the cvv2 information will be removed from the form. After this has happened processing of the submission event will continue as normal. By default the ueForm plugin will be initialized on all form elements. [block:api-header] { "title": "Non Default Input Names" } [/block] In this example the address field has been split into two separate fields, the credit card number has been split into four fields and the zip does not have the default name. [block:code] { "codes": [ { "code": "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n \n<form>\n Address: <input type=\"text\" name=\"address_1\" />\n Address cont.: <input type=\"text\" name=\"address_2\" />\n Zip: <input type=\"text\" name=\"mZip\" />\n Credit Card Number: \n <input type=\"text\" name=\"cc_num1\" />\n <input type=\"text\" name=\"cc_num2\" />\n <input type=\"text\" name=\"cc_num3\" />\n <input type=\"text\" name=\"cc_num4\" />\n cvv2: <input type=\"text\" name=\"cvv2\" />\n Exp Date: <input type=\"text\" name=\"expdate\" />\n <input type=\"submit\" value=\"Submit\" />\n</form>\n \n<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "html", "name": " " } ] } [/block] If you have changed the names from the default values expected by the ueForm plugin, then you must reinitialize the plugin with the options that will tell the plugin what fields to use. [block:code] { "codes": [ { "code": "<script>\n $('form')\n .ueForm({\n name_map : {\n ccnum : ['cc_num1', 'cc_num2', 'cc_num3', 'cc_num4'],\n address : ['address_1', 'address_2'],\n zip : 'mZip'\n }\n });\n</script>", "language": "javascript" } ] } [/block] This javascript uses the name_map option parameter to tell the plugin that it should use the inputs with names address_1 and address_2 for address and cc_num1, cc_num2, cc_num3 and cc_num4 for ccnum. If multiple inputs are to be used for a single field then you should use an array of the name values. Single value inputs such as zip in this example do not need to be an array. When the values from a multi field input such as address or ccnum are combined they will have their whitespace trimmed and be concatenated together in order provided with a single space separating each value. [block:api-header] { "title": "Ajax Submission Through Click Event Without Form" } [/block] The previous two examples both used the form's submit event to process the form. However, this is not the only way to process form data. Through the use of ajax requests and javascript, forms can be processed using other events such as a button's click event. Notice in the code below that the button input is of type button and not submit. Also in this example the form tag has been replaced with a div. [block:code] { "codes": [ { "code": "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n \n<div>\n Address: <input type=\"text\" name=\"address\" />\n Zip: <input type=\"text\" name=\"zip\" />\n Credit Card Number: <input type=\"text\" name=\"ccnum\" />\n cvv2: <input type=\"text\" name=\"cvv2\" />\n Exp Date: <input type=\"text\" name=\"expdate\" />\n <input type=\"button\" id=\"ajax-submit\" value=\"Ajax Submission\" />\n</div>\n \n<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "javascript" } ] } [/block] By default when this button is pressed nothing will happen. However in the code below we use jQuery to bind code to the click event of the button. The code inside of the jquery click event processes the input data and sends the data for processing by use of an ajax call. In order to properly tokenize the credit card data before your click event handler you must initialize the ueForm plugin on the element whos' action will ultimately submit the data. In this instance it is the button with id ajax-submit and we're using the click event. The options we must use are event and container. The values we pass in are click for event because that is the event used to process the input and div for container because it is the element that contains all of the input required. The container option takes a jQuery selector as its value. The ueForm plugin will look for parents of the target, in this case #ajax-submit, which match the selector provided by the container option. Once the container element has been found all descendent input elements will be serialized for processing. [block:code] { "codes": [ { "code": "<script>\n $('#ajax-submit')\n .ueForm({\n event : 'click',\n container : 'div'\n })\n .click(function(e){\n ... // Gather data\n $.ajax({\n ... // Make an ajax request to process the data\n })\n });\n</script>", "language": "javascript" } ] } [/block] Alternatively you could add the events like this. [block:code] { "codes": [ { "code": "<script>\n $('#ajax-submit')\n .click(function(e){\n ...\n });\n $('#ajax-submit')\n .ueForm({\n event : 'click',\n container : 'div'\n });\n</script>", "language": "javascript" } ] } [/block] I know what you're thinking. “Hold your horses there programming wizard. Javascript events are processed in a first in first out (FIFO) queue. If you add the .click event before .ueForm adds its .click event the tokenization will happen second!” It is true that events on elements are processed in the order they are added, however the ueForm plugin jumps the line and inserts its event as the first event to be executed. Since this is the case you must be sure not to use any code that similarly tries to jump the line in the event queue. If you require such functionality then you must call .ueForm after adding your event. [block:api-header] { "title": "Javascript Generated HTML" } [/block] Another possibility for a website is that the form is not HTML on the page but rather html injected by javascript. [block:code] { "codes": [ { "code": "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n \n<div id=\"dynamic-form-container\"></div>\n \n<script>\n $('#dynamic-form-container')\n .html(\n '<form id=\"dynamic-form\">'+\n 'Address: <input type=\"text\" name=\"address\" placeholder=\"1833 Victory Bvld\"/>'+\n 'Zip: <input type=\"text\" name=\"zip\" placeholder=\"91202\"/>'+\n 'Credit Card Number: <input type=\"text\" name=\"ccnum\" placeholder=\"5555 5555 5555 5555\"/>'+\n 'cvv2: <input type=\"text\" name=\"cvv2\" placeholder=\"555\"/>'+\n 'Exp Date: <input type=\"text\" name=\"expdate\" placeholder=\"09/22\"/>'+\n '<input type=\"submit\" id=\"ajax-primary\" class=\"btn btn-primary\" value=\"Submit\" />'+\n '</form>'\n );\n</script>\n \n<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "html" } ] } [/block] Once the form has been created the ueForm plugin must be called on the form. [block:code] { "codes": [ { "code": "<script>\n $('#dynamic-form').ueForm();\n</script>", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Token Duration" } [/block] Tokens may be valid for either a length of time up to 8 hours, 28800 seconds, or for the life of the card they represent. A token by default is only valid for 900 seconds, or 15 minutes. This time may be increased by adding a hidden field with the name duration to the HTML form (The duration value is in seconds). In order for the token to be valid for the life of the card you must initialize the ueForm plugin on the form and set the indefinite option to true. [block:code] { "codes": [ { "code": "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n \n<form>\n Address: <input type=\"text\" name=\"address\" />\n Zip: <input type=\"text\" name=\"zip\" />\n Credit Card Number: <input type=\"text\" name=\"ccnum\" />\n cvv2: <input type=\"text\" name=\"cvv2\" />\n Exp Date: <input type=\"text\" name=\"expdate\" />\n <input type=\"submit\" value=\"Submit\" />\n <input type=\"hidden\" name=\"duration\" value=\"28800\" />\n</form>\n \n<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "html" } ] } [/block] You can also set the duration by setting the duration options parameter when initializing ueForm. [block:code] { "codes": [ { "code": "<script>\n $('form')\n .ueForm({\n duration : 28800 // 8 hours\n });\n</script>", "language": "javascript" } ] } [/block] The code below will set tokens generated via this to be valid until the card expires. [block:code] { "codes": [ { "code": "<script>\n $('form')\n .ueForm({\n indefinite : true\n });\n</script>", "language": "javascript" } ] } [/block] The indefinite option overrides any set duration. [block:api-header] { "title": "Error Handling" } [/block] There are two different error situations that the ueForm plugin can encounter. The first is missing input data required for tokenization or a malformed credit card number. The second is an error thrown by the call to EBizCharge when tokenizing the credit card data. [block:code] { "codes": [ { "code": "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n \n<form>\n Address: <input type=\"text\" name=\"avs_street\" />\n Zip: <input type=\"text\" name=\"avs_zip\" />\n Credit Card Number: <input type=\"text\" name=\"cc_num\" />\n cvv2: <input type=\"text\" name=\"cvv2\" />\n Exp Date: <input type=\"text\" name=\"exp_date\" />\n <input type=\"submit\" value=\"Submit\" />\n</form>\n \n<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "javascript" } ] } [/block] When malformed or missing data is discovered the form_error function will be called. The parameter errors is an object containing the members address, zip, ccnum, cvv2 and expdate. Each member will be either boolean true, indicating an error with this field or false, indicating no error. When an error occurs during the tokenization of the credit card data the function error will be called. This function gets passed two parameters, the error code and the error text. [block:code] { "codes": [ { "code": "<script>\n $('form')\n .ueForm({\n form_error : function ( errors ) {\n ...\n },\n error : function ( code, text ) {\n ...\n }\n });\n</script>", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Putting It All Together" } [/block] All together now! (minus html injection) [block:code] { "codes": [ { "code": "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n \n<div id=\"all-together-input\">\n Address: <input type=\"text\" name=\"address_1\" />\n Address cont.: <input type=\"text\" name=\"address_2\" />\n Zip: <input type=\"text\" name=\"mZip\" />\n Credit Card Number: <input type=\"text\" name=\"cc\" />\n cvv2: <input type=\"text\" name=\"cvc\" />\n Exp Month: <select name=\"exp_mth\" /> ... </select>\n Exp Year: <select name=\"exp_yr\" /> ... </select>\n <input type=\"button\" id=\"btn-process-payment\" value=\"Submit\" />\n</div>\n \n<script>\n $('#btn-process-payment')\n .ueForm({\n event : 'click',\n container : '#all-together-input',\n duration : 1800, // 30 minutes\n name_map : {\n address : ['address_1', 'address_2'],\n zip : 'zip',\n ccnum : 'cc',\n ccv : 'cvc',\n expdate : ['exp_mth', 'exp_yr']\n },\n form_error : function ( errors ) {\n var error_text = '';\n $.each( errors, function( field, isError ){\n if ( isError )\n error_text += field + ', ';\n })\n error_text = error_text.slice( 0, -2 ); // Remove the trailing comma and space\n alert('Form Error: Incorrect input for ' + error_text + '.');\n },\n error : function ( code, text ) {\n alert('Error (' + code + '): ' + text);\n }\n })\n .click(function(e){\n ...\n });\n</script>\n \n<script type=\"text/javascript\" src=\"https://sandbox.ebizcharge.com/tokenize/jquery.ueform.js\"></script>", "language": "html" } ] } [/block]