{"_id":"5632a5ec49e16d0d001224c2","category":{"_id":"5632a5e749e16d0d00122444","pages":["5632a5ec49e16d0d001224bd","5632a5ec49e16d0d001224be","5632a5ec49e16d0d001224bf","5632a5ec49e16d0d001224c0","5632a5ec49e16d0d001224c1","5632a5ec49e16d0d001224c2","5632a5ec49e16d0d001224c3","5632a5ec49e16d0d001224c4","5632a5ec49e16d0d001224c5","5632a5ec49e16d0d001224c6","5632a5ec49e16d0d001224c7","5632a5ec49e16d0d001224c8","5632a5ec49e16d0d001224c9","5632a5ec49e16d0d001224ca","5632a5ec49e16d0d001224cb","5633bab59c607719001b86a1","5633bcbac49a7c19001fd0a6","5633befcc49a7c19001fd0a9","5633c585b904a10d0032f864","5633d7547b56ae0d0025a062","5633d7e87b56ae0d0025a066","5633d85435355017003ca3c8","5633da507e9e880d00af1a28","5633daa3fa71f30d00ba74ab","5633e1f87e9e880d00af1a3f","5633e323fa71f30d00ba74b9","5633e3aa7b56ae0d0025a072","5633e4c6737ea01700ea3276"],"project":"55b933b3146ef121002158d3","version":"5632a5e549e16d0d00122443","__v":14,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-31T23:12:47.262Z","from_sync":false,"order":0,"slug":"epayment-form","title":"ePayment Form"},"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"},"githubsync":"","user":"55b932ba8fd1a02b00f496c8","__v":0,"project":"55b933b3146ef121002158d3","parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-08-03T18:34:20.689Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"Certain merchants may want to create a convenience fee or handling charge that is added to the transaction total. We have example code for both flat fees and percentage fees.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding a flat convenience fee\"\n}\n[/block]\nThis code is for adding a flat fee to each transaction that occurs on your payment form. The below example assumes you are using the default payment form without any changes.\n\n1. Log into your eBizCharge merchant gateway. Go to “Settings”, then “Source Keys”. Select the source key you are using and click “Edit”. Click “Edit Customization to Epay Form”.\n2. In the header of the document, add the following code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\nvar servicefee = 5 ;\\nfunction addCharge()\\n{\\nvar baseamount = document.epayform.baseamount.value ;\\nvar total = (baseamount*1) + servicefee ;\\ndocument.epayform.UMamount.value = total ;\\ndocument.getElementById('totalamount').innerHTML = total ;\\n}\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n1. “servicefee” will be the amount that you are adding on to the transaction. Locate the below command in the list of hidden values, and delete it:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input type=\\\"hidden\\\" name=\\\"UMamount\\\" value=\\\"[UMamount]\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n2. Find the following code in your form:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tr>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\">Order Amount:</font></td>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\">[UMamount]\\n</td>\\n</tr>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n1. Replace it with the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tr>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\">Payment Amount:</font></td>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\"><input type=\\\"text\\\" name=\\\"baseamount\\\" size=10  onChange=\\\"addCharge()\\\">\\n</td>\\n</tr>\\n<tr>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\">Service Fee ($5):</font></td>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\"> 5.00\\n</td>\\n</tr>\\n<tr>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\">Total Charge:</font></td>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\"><input type=\\\"hidden\\\" name=\\\"UMamount\\\" value=\\\"[UMamount]\\\"><div id=\\\"totalamount\\\"></div>\\n</td>\\n</tr>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n1. Save the changes to your form. Once the form is saved, the customer will be able to type in the amount they are paying and automatically have a convenience fee added to the transaction total. The customer will not be able to edit the amount of the fee or the grand total of the transaction.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding a Convenience Fee as a Percentage\"\n}\n[/block]\nFollow the above instructions for adding a flat-rate convenience fee to your account, but use the following Javascript:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\nfunction doTotal()\\n{\\n var form = document.epayform;\\n var amount = form.UMcustom1.value = form.UMcustom1.value.replace(/[^0-9\\\\.]/, \\\"\\\");\\n var fee = Math.round(amount * .02*100)/100; // Don't forget to change the percentage here\\n var total = Math.round(((amount*1)+fee) *100)/100;\\n form.UMcustom2.value=fee;\\n form.UMamount.value=total;\\n document.getElementByName('UMcustom2').innerHTML = fee;\\n document.getElementByName('UMamount').innerHTML = total;\\n}\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAnd the following HTML:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tr>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\">Payment Amount:</font></td>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\"><input type=\\\"text\\\" name=\\\"UMcustom1\\\" value=\\\"[UMcustom1]\\\" size=10 onChange=\\\"doTotal()\\\"></td>\\n</tr>\\n<tr>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\">Service Fee (2%):</font></td> // Change the percentage here as well!\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\"><input type=text name=\\\"UMcustom2\\\" value=\\\"[UMcustom2]\\\" readonly=\\\"readonly\\\" onChange=\\\"doTotal()\\\"></td>\\n</tr>\\n<tr>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"234\\\" align=\\\"right\\\"><font size=\\\"2\\\" face=\\\"Verdana\\\">Total Charge:</font></td>\\n<td bgcolor=\\\"#F0F0F0\\\" width=\\\"450\\\"><input type=text name=\\\"UMamount\\\" value=\\\"[UMamount]\\\" readonly=\\\"readonly\\\" onChange=\\\"doTotal()\\\"></td>\\n</tr>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## Adding fees with Format Currency \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n     var servicefee = 3 ;\\n     function addCharge()\\n     {\\n     var baseamount = document.epayform.baseamount.value ;\\n     var total = (baseamount*1) + servicefee ;\\n     document.epayform.UMamount.value = total ;\\n     document.getElementById('totalamount').innerHTML = CurrencyFormatted(total) ;\\n     }\\n</script>\\n<script>\\nfunction CurrencyFormatted(amount)\\n{\\n       var i = parseFloat(amount);\\n       if(isNaN(i)) { i = 0.00; }\\n       var minus = '';\\n       if(i < 0) { minus = '-'; }\\n       i = Math.abs(i);\\n       i = parseInt((i + .005) * 100);\\n       i = i / 100;\\n       s = new String(i);\\n       if(s.indexOf('.') < 0) { s += '.00'; }\\n       if(s.indexOf('.') == (s.length - 2)) { s += '0'; }\\n       s = minus + s;\\n       return s;\\n}\\n// end of function CurrencyFormatted()\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nHtml code is the same as in the example #1","excerpt":"","slug":"convenience-fee","type":"basic","title":"Convenience Fee"}
Certain merchants may want to create a convenience fee or handling charge that is added to the transaction total. We have example code for both flat fees and percentage fees. [block:api-header] { "type": "basic", "title": "Adding a flat convenience fee" } [/block] This code is for adding a flat fee to each transaction that occurs on your payment form. The below example assumes you are using the default payment form without any changes. 1. Log into your eBizCharge merchant gateway. Go to “Settings”, then “Source Keys”. Select the source key you are using and click “Edit”. Click “Edit Customization to Epay Form”. 2. In the header of the document, add the following code: [block:code] { "codes": [ { "code": "<script>\nvar servicefee = 5 ;\nfunction addCharge()\n{\nvar baseamount = document.epayform.baseamount.value ;\nvar total = (baseamount*1) + servicefee ;\ndocument.epayform.UMamount.value = total ;\ndocument.getElementById('totalamount').innerHTML = total ;\n}\n</script>", "language": "javascript" } ] } [/block] 1. “servicefee” will be the amount that you are adding on to the transaction. Locate the below command in the list of hidden values, and delete it: [block:code] { "codes": [ { "code": "<input type=\"hidden\" name=\"UMamount\" value=\"[UMamount]\">", "language": "html" } ] } [/block] 2. Find the following code in your form: [block:code] { "codes": [ { "code": "<tr>\n<td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font size=\"2\" face=\"Verdana\">Order Amount:</font></td>\n<td bgcolor=\"#F0F0F0\" width=\"450\">[UMamount]\n</td>\n</tr>", "language": "html" } ] } [/block] 1. Replace it with the following: [block:code] { "codes": [ { "code": "<tr>\n<td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font size=\"2\" face=\"Verdana\">Payment Amount:</font></td>\n<td bgcolor=\"#F0F0F0\" width=\"450\"><input type=\"text\" name=\"baseamount\" size=10 onChange=\"addCharge()\">\n</td>\n</tr>\n<tr>\n<td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font size=\"2\" face=\"Verdana\">Service Fee ($5):</font></td>\n<td bgcolor=\"#F0F0F0\" width=\"234\"> 5.00\n</td>\n</tr>\n<tr>\n<td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font size=\"2\" face=\"Verdana\">Total Charge:</font></td>\n<td bgcolor=\"#F0F0F0\" width=\"450\"><input type=\"hidden\" name=\"UMamount\" value=\"[UMamount]\"><div id=\"totalamount\"></div>\n</td>\n</tr>", "language": "html" } ] } [/block] 1. Save the changes to your form. Once the form is saved, the customer will be able to type in the amount they are paying and automatically have a convenience fee added to the transaction total. The customer will not be able to edit the amount of the fee or the grand total of the transaction. [block:api-header] { "type": "basic", "title": "Adding a Convenience Fee as a Percentage" } [/block] Follow the above instructions for adding a flat-rate convenience fee to your account, but use the following Javascript: [block:code] { "codes": [ { "code": "<script>\nfunction doTotal()\n{\n var form = document.epayform;\n var amount = form.UMcustom1.value = form.UMcustom1.value.replace(/[^0-9\\.]/, \"\");\n var fee = Math.round(amount * .02*100)/100; // Don't forget to change the percentage here\n var total = Math.round(((amount*1)+fee) *100)/100;\n form.UMcustom2.value=fee;\n form.UMamount.value=total;\n document.getElementByName('UMcustom2').innerHTML = fee;\n document.getElementByName('UMamount').innerHTML = total;\n}\n</script>", "language": "javascript" } ] } [/block] And the following HTML: [block:code] { "codes": [ { "code": "<tr>\n<td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font size=\"2\" face=\"Verdana\">Payment Amount:</font></td>\n<td bgcolor=\"#F0F0F0\" width=\"450\"><input type=\"text\" name=\"UMcustom1\" value=\"[UMcustom1]\" size=10 onChange=\"doTotal()\"></td>\n</tr>\n<tr>\n<td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font size=\"2\" face=\"Verdana\">Service Fee (2%):</font></td> // Change the percentage here as well!\n<td bgcolor=\"#F0F0F0\" width=\"450\"><input type=text name=\"UMcustom2\" value=\"[UMcustom2]\" readonly=\"readonly\" onChange=\"doTotal()\"></td>\n</tr>\n<tr>\n<td bgcolor=\"#F0F0F0\" width=\"234\" align=\"right\"><font size=\"2\" face=\"Verdana\">Total Charge:</font></td>\n<td bgcolor=\"#F0F0F0\" width=\"450\"><input type=text name=\"UMamount\" value=\"[UMamount]\" readonly=\"readonly\" onChange=\"doTotal()\"></td>\n</tr>", "language": "html" } ] } [/block] ## Adding fees with Format Currency [block:code] { "codes": [ { "code": "<script>\n var servicefee = 3 ;\n function addCharge()\n {\n var baseamount = document.epayform.baseamount.value ;\n var total = (baseamount*1) + servicefee ;\n document.epayform.UMamount.value = total ;\n document.getElementById('totalamount').innerHTML = CurrencyFormatted(total) ;\n }\n</script>\n<script>\nfunction CurrencyFormatted(amount)\n{\n var i = parseFloat(amount);\n if(isNaN(i)) { i = 0.00; }\n var minus = '';\n if(i < 0) { minus = '-'; }\n i = Math.abs(i);\n i = parseInt((i + .005) * 100);\n i = i / 100;\n s = new String(i);\n if(s.indexOf('.') < 0) { s += '.00'; }\n if(s.indexOf('.') == (s.length - 2)) { s += '0'; }\n s = minus + s;\n return s;\n}\n// end of function CurrencyFormatted()\n</script>", "language": "javascript" } ] } [/block] Html code is the same as in the example #1