{"_id":"57e2bdf51e7b7220000d7fa6","__v":0,"user":"5720c075db52d01700f5d1e4","parentDoc":null,"project":"571f5e8cd8667f0e00a3c498","category":{"_id":"57e104db9ff1e21900a721ab","__v":0,"version":"571f5e8cd8667f0e00a3c49b","project":"571f5e8cd8667f0e00a3c498","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-09-20T09:43:55.998Z","from_sync":false,"order":4,"slug":"form-api-jquery-plugin","title":"Form-API"},"version":{"_id":"571f5e8cd8667f0e00a3c49b","hasDoc":true,"__v":12,"hasReference":true,"project":"571f5e8cd8667f0e00a3c498","createdAt":"2016-04-26T12:26:52.312Z","releaseDate":"2016-04-26T12:26:52.312Z","categories":["571f5e8cd8667f0e00a3c49c","571f73cfcb4baa0e00d13a80","571f7451cb4baa0e00d13a88","571f7d2720695f3400f38797","571f7fb0ac2a080e0014c661","571f884be54f2d0e003ebb0a","572200c9ecb38d0e00d80ebd","572c301e7c8eff0e00aaa174","57df91b2c6348d0e0020c452","57e104db9ff1e21900a721ab","57fd04caeaa77f19008b8202","5899c7113514ce0f0014da84"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-21T17:05:57.887Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"Credit card fields are special fields in iframes. Neither the FundraisingBox nor your server has direct access to the safety critical number and secure id. So these fields need a special treatment of handling and we recommend to use our jQuery-Plugin which does a lot of helpful automatic work for you.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Required fields\"\n}\n[/block]\nThe plugin automatically loads the extra javascript if all required credit card fields with following IDs exist.\n- payment_credit_card_owner\n- payment_credit_card_token\n- payment_credit_card_number (div for iframe)\n- payment_credit_card_number_hidden\n- payment_credit_card_secure_id (div for iframe)\n- payment_credit_card_secure_id_hidden\n- payment_credit_card_expire_date_month\n- payment_credit_card_expire_date_year\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"You have to use these IDs!\"\n}\n[/block]\n**Full default example:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div>\\n  <div id=\\\"payment_credit_card_owner_wrapper\\\">\\n    <div class=\\\"label\\\">\\n      <label for=\\\"payment_credit_card_owner\\\">Karteninhaber/-in&nbsp;*</label>\\n    </div>\\n    <div class=\\\"field\\\">\\n      <input type=\\\"text\\\" id=\\\"payment_credit_card_owner\\\" name=\\\"payment[credit_card_owner]\\\" autocomplete=\\\"off\\\">\\n    </div>\\n    <div class=\\\"error\\\" id=\\\"payment_credit_card_owner_error\\\"></div>\\n  </div>\\n  <input type=\\\"hidden\\\" id=\\\"payment_credit_card_token\\\" name=\\\"payment[credit_card_token]\\\">\\n  <div id=\\\"payment_credit_card_number_wrapper\\\">\\n    <div class=\\\"label\\\">\\n      <label for=\\\"payment_credit_card_number\\\">Kartennummer&nbsp;*</label>\\n    </div>\\n    <div class=\\\"field\\\">\\n      <div id=\\\"payment_credit_card_number\\\"></div>\\n    </div>\\n    <div class=\\\"error\\\" id=\\\"payment_credit_card_number_error\\\"></div>\\n  </div>\\n  <div id=\\\"payment_credit_card_number_hidden_wrapper\\\">\\n    <div class=\\\"label\\\">\\n      <label for=\\\"payment_credit_card_number_hidden\\\">Kartennummer&nbsp;*</label>\\n    </div>\\n    <div class=\\\"field\\\">\\n      <input type=\\\"text\\\" id=\\\"payment_credit_card_number_hidden\\\" name=\\\"payment[credit_card_number_hidden]\\\" readonly=\\\"readonly\\\">\\n    </div>\\n    <div class=\\\"error\\\" id=\\\"payment_credit_card_number_hidden_error\\\"></div>\\n  </div>\\n  <div id=\\\"payment_credit_card_secure_id_wrapper\\\">\\n    <div class=\\\"label\\\">\\n      <label for=\\\"payment_credit_card_secure_id\\\">Prüfnummer&nbsp;*</label>\\n    </div>\\n    <div class=\\\"field\\\">\\n      <div id=\\\"payment_credit_card_secure_id\\\"></div>\\n    </div>\\n    <div class=\\\"error\\\" id=\\\"payment_credit_card_secure_id_error\\\"></div>\\n  </div>\\n  <div id=\\\"payment_credit_card_secure_id_hidden_wrapper\\\">\\n    <div class=\\\"label\\\">\\n      <label for=\\\"payment_credit_card_secure_id_hidden\\\">Prüfnummer&nbsp;*</label>\\n    </div>\\n    <div class=\\\"field\\\">\\n      <input type=\\\"text\\\" id=\\\"payment_credit_card_secure_id_hidden\\\" name=\\\"payment[credit_card_secure_id_hidden]\\\" readonly=\\\"readonly\\\">\\n    </div>\\n    <div class=\\\"error\\\" id=\\\"payment_credit_card_secure_id_hidden_error\\\"></div>\\n  </div>\\n  <div id=\\\"payment_credit_card_expire_date_month_wrapper\\\">\\n    <div class=\\\"label\\\">\\n      <label for=\\\"payment_credit_card_expire_date_month\\\">Gültig bis Monat&nbsp;*</label>\\n    </div>\\n    <div class=\\\"field\\\">\\n      <select id=\\\"payment_credit_card_expire_date_month\\\" name=\\\"payment[credit_card_expire_date_month]\\\">\\n        <option value=\\\"1\\\">1</option>\\n        <option value=\\\"2\\\">2</option>\\n        <option value=\\\"3\\\">3</option>\\n        <option value=\\\"4\\\">4</option>\\n        <option value=\\\"5\\\">5</option>\\n        <option value=\\\"6\\\">6</option>\\n        <option value=\\\"7\\\">7</option>\\n        <option value=\\\"8\\\">8</option>\\n        <option value=\\\"9\\\">9</option>\\n        <option value=\\\"10\\\">10</option>\\n        <option value=\\\"11\\\">11</option>\\n        <option value=\\\"12\\\">12</option>\\n      </select>\\n    </div>\\n    <div class=\\\"error\\\" id=\\\"payment_credit_card_expire_date_month_error\\\"></div>\\n  </div>\\n  <div id=\\\"payment_credit_card_expire_date_year_wrapper\\\">\\n    <div class=\\\"label\\\">\\n      <label for=\\\"payment_credit_card_expire_date_year\\\">Gültig bis Jahr&nbsp;*</label>\\n    </div>\\n    <div class=\\\"field\\\">\\n      <select id=\\\"payment_credit_card_expire_date_year\\\" name=\\\"payment[credit_card_expire_date_year]\\\">\\n        <option value=\\\"2016\\\">2016</option>\\n        <option value=\\\"2017\\\">2017</option>\\n        <option value=\\\"2018\\\">2018</option>\\n        <option value=\\\"2019\\\">2019</option>\\n        <option value=\\\"2020\\\">2020</option>\\n        <option value=\\\"2021\\\">2021</option>\\n        <option value=\\\"2022\\\">2022</option>\\n        <option value=\\\"2023\\\">2023</option>\\n        <option value=\\\"2024\\\">2024</option>\\n        <option value=\\\"2025\\\">2025</option>\\n        <option value=\\\"2026\\\">2026</option>\\n        <option value=\\\"2027\\\">2027</option>\\n        <option value=\\\"2028\\\">2028</option>\\n      </select>\\n    </div>\\n    <div class=\\\"error\\\" id=\\\"payment_credit_card_expire_date_year_error\\\"></div>\\n  </div>\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"iframe-inputs\"\n}\n[/block]\nAs you can see in the example above there is only a empty \"payment_credit_card_number\"-div and a \"payment_credit_card_secure_id\"-div. Our plugin injects automatically the iframe-inputs into these divs.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Styling\"\n}\n[/block]\nAs you don't have direct access to the inputs in the iframe, we recommend to style the surrounding divs like they were inputs.\n\n**creditCardFieldTemplate-Option**\nYou can provide a \"template\" for the iframe-inputs, in general we recommend to use the \"credit_card_owner\"-field. If a template is given, our plugin sets the border to \"0\", the width to \"100%\" and the background to \"none\" of the iframe-inputs. It also copies the height and the font-styles of the template to the iframe-inputs.\nThis automatic style propagation takes place on window resize as well.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Custom fonts\",\n  \"body\": \"For security reasons custom fonts are not possible in the iframe-inputs.\"\n}\n[/block]\nIf you want to style the iframe-inputs directly, you can use the \"creditCardStyle()\"-function (see [Functions](doc:form-api-jquery-plugin-functions#section-creditcardstyle-css-)). But we do not recommend this.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Readonly \\\"Hidden\\\"-fields\"\n}\n[/block]\nAfter creating the credit card token, the credit card number and secure id are returned obfuscated. Example: the number 4567891234567890 will be returned as 456789\\*\\*\\*\\*\\*\\*7890, the secure id is always just \\*\\*\\*. \n\nThe \"payment_credit_card_number_hidden\" and \"payment_credit_card_secure_id_hidden\" fields are required to show this obfuscated credit card data to the user. These fields should be readonly.\n\nOur plugin hides automatically the wrappers of these fields in the first place. After sucessfully creating the token, these fields are filled with the obfuscated data and the wrappers will be shown. At the same time the \"payment_credit_card_number_wrapper\" and \"payment_credit_card_secure_id_wrapper\" will be hidden. The function \"creditCardReset()\" will reset and show the iframe-inputs and hides the \"_hidden\"-fields.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Focus\"\n}\n[/block]\nIt's a good manner to highlight the currently focused field, but highlighting the iframe-inputs is not easily possible. So our plugin sets a \"focus\"-class to the \"payment_credit_card_number\"-div and the \"payment_credit_card_secure_id\"-div if the respective iframe-input is focused.\nYou can now consider this class for your design.\n\nOur plugin considers the other way around as well: if a label is clicked, the respective iframe-input is focused.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Create token\"\n}\n[/block]\nIf the option \"autoSubmit\" is active (default) the plugin automatically call the \"creditCardMakeToken()\"-function (see [Functions](doc:form-api-jquery-plugin-functions#section-creditcardmaketoken-) for further details) and trys to create the credit card token before sending the data to the payment session. If you disable autoSubmit you have to call the \"creditCardMakeToken()\" by yourself.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Simple credit card fields code example\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<style>\\n  input:focus, .focus {\\n    border-color: #0f0;\\n  }\\n</style>\\n\\n<form id=\\\"form\\\">\\n\\t<div id=\\\"myFormFields\\\"></div>\\n\\t<input type=\\\"submit\\\" value=\\\"submit\\\">\\n</form>\\n\\n<script src=\\\"path/to/jquery.min.js\\\"></script>\\n<script src=\\\"https://secure.fundraisingbox.com/js/jquery.fundraisingbox.min.js\\\"></script>\\n<script>\\n$(function() {\\n    myForm = $(\\\"#form\\\").fundraisingBoxForm({\\n        hash: \\\"{your_form_hash}\\\",\\n        creditCardFieldTemplate: \\\"payment_credit_card_owner\\\"\\n    });\\n\\n    myForm.on(\\\"fundraisingBox:init\\\", function(event) {\\n        myForm.appendFieldRowsTo(\\\"#myFormFields\\\", [\\n            \\\"payment_method\\\",\\n            \\\"credit_card_owner\\\",\\n            \\\"credit_card_token\\\",\\n            \\\"credit_card_number\\\",\\n            \\\"credit_card_number_hidden\\\",\\n            \\\"credit_card_secure_id\\\",\\n            \\\"credit_card_secure_id_hidden\\\",\\n            \\\"credit_card_expire_date_month\\\",\\n            \\\"credit_card_expire_date_year\\\"\\n        ]);\\n      \\t\\n      \\t// reset the fields on payment method change\\n        $(\\\"#payment_payment_method\\\").change(function() {\\n            if($(this).val() != \\\"micropayment_credit_card\\\")\\n            {\\n                myForm.creditCardReset();\\n            }\\n        });\\n      \\n      \\t// some custom styling\\n        myForm.on(\\\"fundraisingBox:creditCardReady\\\", function() {\\n            myForm.creditCardStyle(\\\"color\\\", \\\"#00f\\\");\\n        });\\n    });\\n});\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"form-api-credit-card-data-processing","type":"basic","title":"Credit card data processing"}

Credit card data processing


Credit card fields are special fields in iframes. Neither the FundraisingBox nor your server has direct access to the safety critical number and secure id. So these fields need a special treatment of handling and we recommend to use our jQuery-Plugin which does a lot of helpful automatic work for you. [block:api-header] { "type": "basic", "title": "Required fields" } [/block] The plugin automatically loads the extra javascript if all required credit card fields with following IDs exist. - payment_credit_card_owner - payment_credit_card_token - payment_credit_card_number (div for iframe) - payment_credit_card_number_hidden - payment_credit_card_secure_id (div for iframe) - payment_credit_card_secure_id_hidden - payment_credit_card_expire_date_month - payment_credit_card_expire_date_year [block:callout] { "type": "warning", "title": "You have to use these IDs!" } [/block] **Full default example:** [block:code] { "codes": [ { "code": "<div>\n <div id=\"payment_credit_card_owner_wrapper\">\n <div class=\"label\">\n <label for=\"payment_credit_card_owner\">Karteninhaber/-in&nbsp;*</label>\n </div>\n <div class=\"field\">\n <input type=\"text\" id=\"payment_credit_card_owner\" name=\"payment[credit_card_owner]\" autocomplete=\"off\">\n </div>\n <div class=\"error\" id=\"payment_credit_card_owner_error\"></div>\n </div>\n <input type=\"hidden\" id=\"payment_credit_card_token\" name=\"payment[credit_card_token]\">\n <div id=\"payment_credit_card_number_wrapper\">\n <div class=\"label\">\n <label for=\"payment_credit_card_number\">Kartennummer&nbsp;*</label>\n </div>\n <div class=\"field\">\n <div id=\"payment_credit_card_number\"></div>\n </div>\n <div class=\"error\" id=\"payment_credit_card_number_error\"></div>\n </div>\n <div id=\"payment_credit_card_number_hidden_wrapper\">\n <div class=\"label\">\n <label for=\"payment_credit_card_number_hidden\">Kartennummer&nbsp;*</label>\n </div>\n <div class=\"field\">\n <input type=\"text\" id=\"payment_credit_card_number_hidden\" name=\"payment[credit_card_number_hidden]\" readonly=\"readonly\">\n </div>\n <div class=\"error\" id=\"payment_credit_card_number_hidden_error\"></div>\n </div>\n <div id=\"payment_credit_card_secure_id_wrapper\">\n <div class=\"label\">\n <label for=\"payment_credit_card_secure_id\">Prüfnummer&nbsp;*</label>\n </div>\n <div class=\"field\">\n <div id=\"payment_credit_card_secure_id\"></div>\n </div>\n <div class=\"error\" id=\"payment_credit_card_secure_id_error\"></div>\n </div>\n <div id=\"payment_credit_card_secure_id_hidden_wrapper\">\n <div class=\"label\">\n <label for=\"payment_credit_card_secure_id_hidden\">Prüfnummer&nbsp;*</label>\n </div>\n <div class=\"field\">\n <input type=\"text\" id=\"payment_credit_card_secure_id_hidden\" name=\"payment[credit_card_secure_id_hidden]\" readonly=\"readonly\">\n </div>\n <div class=\"error\" id=\"payment_credit_card_secure_id_hidden_error\"></div>\n </div>\n <div id=\"payment_credit_card_expire_date_month_wrapper\">\n <div class=\"label\">\n <label for=\"payment_credit_card_expire_date_month\">Gültig bis Monat&nbsp;*</label>\n </div>\n <div class=\"field\">\n <select id=\"payment_credit_card_expire_date_month\" name=\"payment[credit_card_expire_date_month]\">\n <option value=\"1\">1</option>\n <option value=\"2\">2</option>\n <option value=\"3\">3</option>\n <option value=\"4\">4</option>\n <option value=\"5\">5</option>\n <option value=\"6\">6</option>\n <option value=\"7\">7</option>\n <option value=\"8\">8</option>\n <option value=\"9\">9</option>\n <option value=\"10\">10</option>\n <option value=\"11\">11</option>\n <option value=\"12\">12</option>\n </select>\n </div>\n <div class=\"error\" id=\"payment_credit_card_expire_date_month_error\"></div>\n </div>\n <div id=\"payment_credit_card_expire_date_year_wrapper\">\n <div class=\"label\">\n <label for=\"payment_credit_card_expire_date_year\">Gültig bis Jahr&nbsp;*</label>\n </div>\n <div class=\"field\">\n <select id=\"payment_credit_card_expire_date_year\" name=\"payment[credit_card_expire_date_year]\">\n <option value=\"2016\">2016</option>\n <option value=\"2017\">2017</option>\n <option value=\"2018\">2018</option>\n <option value=\"2019\">2019</option>\n <option value=\"2020\">2020</option>\n <option value=\"2021\">2021</option>\n <option value=\"2022\">2022</option>\n <option value=\"2023\">2023</option>\n <option value=\"2024\">2024</option>\n <option value=\"2025\">2025</option>\n <option value=\"2026\">2026</option>\n <option value=\"2027\">2027</option>\n <option value=\"2028\">2028</option>\n </select>\n </div>\n <div class=\"error\" id=\"payment_credit_card_expire_date_year_error\"></div>\n </div>\n</div>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "iframe-inputs" } [/block] As you can see in the example above there is only a empty "payment_credit_card_number"-div and a "payment_credit_card_secure_id"-div. Our plugin injects automatically the iframe-inputs into these divs. [block:api-header] { "type": "basic", "title": "Styling" } [/block] As you don't have direct access to the inputs in the iframe, we recommend to style the surrounding divs like they were inputs. **creditCardFieldTemplate-Option** You can provide a "template" for the iframe-inputs, in general we recommend to use the "credit_card_owner"-field. If a template is given, our plugin sets the border to "0", the width to "100%" and the background to "none" of the iframe-inputs. It also copies the height and the font-styles of the template to the iframe-inputs. This automatic style propagation takes place on window resize as well. [block:callout] { "type": "info", "title": "Custom fonts", "body": "For security reasons custom fonts are not possible in the iframe-inputs." } [/block] If you want to style the iframe-inputs directly, you can use the "creditCardStyle()"-function (see [Functions](doc:form-api-jquery-plugin-functions#section-creditcardstyle-css-)). But we do not recommend this. [block:api-header] { "type": "basic", "title": "Readonly \"Hidden\"-fields" } [/block] After creating the credit card token, the credit card number and secure id are returned obfuscated. Example: the number 4567891234567890 will be returned as 456789\*\*\*\*\*\*7890, the secure id is always just \*\*\*. The "payment_credit_card_number_hidden" and "payment_credit_card_secure_id_hidden" fields are required to show this obfuscated credit card data to the user. These fields should be readonly. Our plugin hides automatically the wrappers of these fields in the first place. After sucessfully creating the token, these fields are filled with the obfuscated data and the wrappers will be shown. At the same time the "payment_credit_card_number_wrapper" and "payment_credit_card_secure_id_wrapper" will be hidden. The function "creditCardReset()" will reset and show the iframe-inputs and hides the "_hidden"-fields. [block:api-header] { "type": "basic", "title": "Focus" } [/block] It's a good manner to highlight the currently focused field, but highlighting the iframe-inputs is not easily possible. So our plugin sets a "focus"-class to the "payment_credit_card_number"-div and the "payment_credit_card_secure_id"-div if the respective iframe-input is focused. You can now consider this class for your design. Our plugin considers the other way around as well: if a label is clicked, the respective iframe-input is focused. [block:api-header] { "type": "basic", "title": "Create token" } [/block] If the option "autoSubmit" is active (default) the plugin automatically call the "creditCardMakeToken()"-function (see [Functions](doc:form-api-jquery-plugin-functions#section-creditcardmaketoken-) for further details) and trys to create the credit card token before sending the data to the payment session. If you disable autoSubmit you have to call the "creditCardMakeToken()" by yourself. [block:api-header] { "type": "basic", "title": "Simple credit card fields code example" } [/block] [block:code] { "codes": [ { "code": "<style>\n input:focus, .focus {\n border-color: #0f0;\n }\n</style>\n\n<form id=\"form\">\n\t<div id=\"myFormFields\"></div>\n\t<input type=\"submit\" value=\"submit\">\n</form>\n\n<script src=\"path/to/jquery.min.js\"></script>\n<script src=\"https://secure.fundraisingbox.com/js/jquery.fundraisingbox.min.js\"></script>\n<script>\n$(function() {\n myForm = $(\"#form\").fundraisingBoxForm({\n hash: \"{your_form_hash}\",\n creditCardFieldTemplate: \"payment_credit_card_owner\"\n });\n\n myForm.on(\"fundraisingBox:init\", function(event) {\n myForm.appendFieldRowsTo(\"#myFormFields\", [\n \"payment_method\",\n \"credit_card_owner\",\n \"credit_card_token\",\n \"credit_card_number\",\n \"credit_card_number_hidden\",\n \"credit_card_secure_id\",\n \"credit_card_secure_id_hidden\",\n \"credit_card_expire_date_month\",\n \"credit_card_expire_date_year\"\n ]);\n \t\n \t// reset the fields on payment method change\n $(\"#payment_payment_method\").change(function() {\n if($(this).val() != \"micropayment_credit_card\")\n {\n myForm.creditCardReset();\n }\n });\n \n \t// some custom styling\n myForm.on(\"fundraisingBox:creditCardReady\", function() {\n myForm.creditCardStyle(\"color\", \"#00f\");\n });\n });\n});\n</script>", "language": "html" } ] } [/block]