{"_id":"59887cd34c88d500259401e5","project":"56a1c9c13845200d0066d6fe","initVersion":{"_id":"571749c2d2a6510e00840a82","version":"2"},"user":{"_id":"56a1c959842b650d0088899c","username":"","name":"Instamojo"},"__v":0,"hidden":false,"createdAt":"2017-08-07T14:44:35.024Z","fullscreen":false,"htmlmode":false,"html":"**Render Instamojo checkout form and collect payments on your webpage with just the instamojo-payment-url.**\n\n## Integration\n\nYou can begin integrating Checkout with as little as the below code: \n[block:code]\n{\n  &quot;codes&quot;: [\n    {\n      &quot;code&quot;: &quot;\\n&quot;,\n      &quot;language&quot;: &quot;html&quot;\n    }\n  ]\n}\n[/block]\n**You can refer to the checkout demo <a href=\"http://jsbin.com/naxotagosa/edit?html,output\" target=\"_blank\">here</a>**\n[block:callout]\n{\n  &quot;type&quot;: &quot;warning&quot;,\n  &quot;title&quot;: &quot;Note&quot;,\n  &quot;body&quot;: &quot;Checkout must be loaded directly from **https://js.instamojo.com/v1/checkout.js**. \\nUsing a local copy of Checkout is unsupported, and may result into user-visible errors when we push new changes.&quot;\n}\n[/block]\n## Methods\n\nOnce checkout.js file is loaded in the browser, we have the following methods available in the global scope:\n\n1. **Instamojo.open()**\nCall this method to open any instamojo link in checkout form.\nIt requires instamojo-payment-url to be passed as the first parameter to render checkout form.\n\n2. **Instamojo.close()**\nCall this method to close the checkout form manually.\n\n3. **Instamojo.configure()** \nCall this method to set callback Handlers for the checkout form.\n[block:parameters]\n{\n  &quot;data&quot;: {\n    &quot;h-0&quot;: &quot;Method&quot;,\n    &quot;h-1&quot;: &quot;Example&quot;,\n    &quot;0-0&quot;: &quot;open(paymentUrl)&quot;,\n    &quot;0-1&quot;: &quot;Instamojo.open('https://www.instamojo.com/@ayushya')&quot;,\n    &quot;1-0&quot;: &quot;close()&quot;,\n    &quot;1-1&quot;: &quot;Instamojo.close()&quot;,\n    &quot;2-0&quot;: &quot;configure(options)&quot;,\n    &quot;2-1&quot;: &quot;Instamojo.configure({\\n   handlers: {\\n     onOpen: function() { alert('Modal is Opened') },\\n     onClose: function() { alert('Modal is Closed') }\\n   }\\n});&quot;\n  },\n  &quot;cols&quot;: 2,\n  &quot;rows&quot;: 3\n}\n[/block]\n## Options\n\n### Handlers\n[block:code]\n{\n  &quot;codes&quot;: [\n    {\n      &quot;code&quot;: &quot;\\n&quot;,\n      &quot;language&quot;: &quot;html&quot;,\n      &quot;name&quot;: &quot;Setting up handlers&quot;\n    }\n  ]\n}\n[/block]\n**Note:** All handler functions are optional.\n\n1. **onOpen** \nThis function is invoked when the checkout form is opened.\n\n2. **onClose** \nThis function is invoked when the checkout form is closed.\n\n3. **onSuccess**\nThis function is invoked after a successful payment. It has payment response as first argument.\n\n4. **onFailure**\nThis function is invoked after a failed payment. It has payment response as first argument.\n[block:parameters]\n{\n  &quot;data&quot;: {\n    &quot;h-0&quot;: &quot;Function&quot;,\n    &quot;h-1&quot;: &quot;Arguments&quot;,\n    &quot;0-0&quot;: &quot;onOpen: function () {}&quot;,\n    &quot;1-0&quot;: &quot;onClose: function () {}&quot;,\n    &quot;2-0&quot;: &quot;onSuccess: function (response) {}&quot;,\n    &quot;3-0&quot;: &quot;onFailure: function (response) {}&quot;,\n    &quot;0-1&quot;: &quot;none&quot;,\n    &quot;1-1&quot;: &quot;none&quot;,\n    &quot;2-1&quot;: &quot;response: Payment Response Data&quot;,\n    &quot;3-1&quot;: &quot;response: Payment Response Data&quot;\n  },\n  &quot;cols&quot;: 2,\n  &quot;rows&quot;: 4\n}\n[/block]\n## Examples\n### Opening Checkout Form with Button Click\n[block:code]\n{\n  &quot;codes&quot;: [\n    {\n      &quot;code&quot;: &quot;\\n  \\n  \\t\\n       \\n  \\n  \\n    \\n      Open Instapay\\n    \\n  \\n&quot;,\n      &quot;language&quot;: &quot;html&quot;\n    }\n  ]\n}\n[/block]\nDemo <a href=\"http://jsbin.com/pizotetere/1/edit?html,output\" target=\"_blank\">here</a>\n\n### Adding Callbacks\n[block:code]\n{\n  &quot;codes&quot;: [\n    {\n      &quot;code&quot;: &quot;\\n  \\n    \\n    \\n  \\n  \\n    \\n      Open Instapay\\n    \\n  \\n&quot;,\n      &quot;language&quot;: &quot;html&quot;\n    }\n  ]\n}\n[/block]\nDemo with callbacks <a href=\"http://jsbin.com/vewuwahure/1/edit?html,output\" target=\"_blank\">here</a>\n\n# Supported Browsers\n\nCheckout supports all the recent versions of majority browsers. For providing the best user experience to our customers we do not support outdated browser versions which are no longer receiving security updates and represent a small minority of traffic.\n\n* We support Edge and Internet Explorer 10 and above.\n* We support Safari, Chrome and Firefox on all platforms.\n* We support Opera/Opera Mini on Android, IOS and desktop platforms.\n* We support Android Native Browsers on Android 4.4 and later.","body":"**Render Instamojo checkout form and collect payments on your webpage with just the instamojo-payment-url.**\n\n## Integration\n\nYou can begin integrating Checkout with as little as the below code: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://js.instamojo.com/v1/checkout.js\\\"></script>\\n<script>\\n  Instamojo.open(\\\"YOUR_INSTAMOJO_LINK_HERE\\\");\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**You can refer to the checkout demo <a href=\"http://jsbin.com/naxotagosa/edit?html,output\" target=\"_blank\">here</a>**\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Note\",\n  \"body\": \"Checkout must be loaded directly from **https://js.instamojo.com/v1/checkout.js**. \\nUsing a local copy of Checkout is unsupported, and may result into user-visible errors when we push new changes.\"\n}\n[/block]\n## Methods\n\nOnce checkout.js file is loaded in the browser, we have the following methods available in the global scope:\n\n1. **Instamojo.open()**\nCall this method to open any instamojo link in checkout form.\nIt requires instamojo-payment-url to be passed as the first parameter to render checkout form.\n\n2. **Instamojo.close()**\nCall this method to close the checkout form manually.\n\n3. **Instamojo.configure()** \nCall this method to set callback Handlers for the checkout form.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Method\",\n    \"h-1\": \"Example\",\n    \"0-0\": \"open(paymentUrl)\",\n    \"0-1\": \"Instamojo.open('https://www.instamojo.com/@ayushya')\",\n    \"1-0\": \"close()\",\n    \"1-1\": \"Instamojo.close()\",\n    \"2-0\": \"configure(options)\",\n    \"2-1\": \"Instamojo.configure({\\n&nbsp;&nbsp; handlers: {\\n&nbsp;&nbsp;&nbsp;&nbsp; onOpen: function() { alert('Modal is Opened') },\\n&nbsp;&nbsp;&nbsp;&nbsp; onClose: function() { alert('Modal is Closed') }\\n&nbsp;&nbsp; }\\n});\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]\n## Options\n\n### Direct Payment Mode\nFast-forward your customers to a specified Payment Mode using this option.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://js.instamojo.com/v1/checkout.js\\\"></script>\\n<script>\\n  Instamojo.configure({\\n    directPaymentMode: 'net banking'\\n  });\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n### Handlers\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://js.instamojo.com/v1/checkout.js\\\"></script>\\n<script>\\n  Instamojo.configure({\\n    handlers: {\\n      onOpen: function() {},\\n      onClose: function() {},\\n      onSuccess: function(response) {},\\n      onFailure: function(response) {}\\n    }\\n  });\\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Setting up handlers\"\n    }\n  ]\n}\n[/block]\n**Note:** All handler functions are optional.\n\n1. **onOpen** \nThis function is invoked when the checkout form is opened.\n\n2. **onClose** \nThis function is invoked when the checkout form is closed.\n\n3. **onSuccess**\nThis function is invoked after a successful payment. It has payment response as first argument.\n\n4. **onFailure**\nThis function is invoked after a failed payment. It has payment response as first argument.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Function\",\n    \"h-1\": \"Arguments\",\n    \"0-0\": \"onOpen: function () {}\",\n    \"1-0\": \"onClose: function () {}\",\n    \"2-0\": \"onSuccess: function (response) {}\",\n    \"3-0\": \"onFailure: function (response) {}\",\n    \"0-1\": \"none\",\n    \"1-1\": \"none\",\n    \"2-1\": \"response: Payment Response Data\",\n    \"3-1\": \"response: Payment Response Data\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\n## Examples\n### Opening Checkout Form with Button Click\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  <head>\\n  \\t<script src=\\\"https://js.instamojo.com/v1/checkout.js\\\"></script>\\n    <script>\\n      function onButtonClick() {\\n        Instamojo.open('http://www.instamojo.com/@ayushya');\\n      }\\n    </script>   \\n  </head>\\n  <body>\\n    <button onclick=\\\"onButtonClick()\\\">\\n      Open Instapay\\n    </button>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nDemo <a href=\"http://jsbin.com/pizotetere/1/edit?html,output\" target=\"_blank\">here</a>\n\n### Adding Callbacks\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  <head>\\n    <script src=\\\"https://js.instamojo.com/v1/checkout.js\\\"></script>\\n    <script>\\n      /* Start client-defined Callback Handler Functions */\\n      function onOpenHandler () {\\n        alert('Payments Modal is Opened');\\n      }\\n\\n      function onCloseHandler () {\\n        alert('Payments Modal is Closed');\\n      }\\n\\n      function onPaymentSuccessHandler (response) {\\n        alert('Payment Success');\\n        console.log('Payment Success Response', response);\\n      }\\n\\n      function onPaymentFailureHandler (response) {\\n        alert('Payment Failure');\\n        console.log('Payment Failure Response', response);\\n      }\\n      /* End client-defined Callback Handler Functions */\\n\\n      /* Configuring Handlers */\\n      Instamojo.configure({\\n        handlers: {\\n          onOpen: onOpenHandler,\\n          onClose: onCloseHandler,\\n          onSuccess: onPaymentSuccessHandler,\\n          onFailure: onPaymentFailureHandler\\n        }\\n      });\\n      \\n      function onButtonClick() {\\n        Instamojo.open('http://www.instamojo.com/@ayushya');\\n      }\\n    </script>\\n  </head>\\n  <body>\\n    <button onclick=\\\"onButtonClick()\\\">\\n      Open Instapay\\n    </button>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nDemo with callbacks <a href=\"http://jsbin.com/vewuwahure/1/edit?html,output\" target=\"_blank\">here</a>\n\n# Supported Browsers\n\nCheckout supports all the recent versions of majority browsers. For providing the best user experience to our customers we do not support outdated browser versions which are no longer receiving security updates and represent a small minority of traffic.\n\n* We support Edge and Internet Explorer 10 and above.\n* We support Safari, Chrome and Firefox on all platforms.\n* We support Opera/Opera Mini on Android, IOS and desktop platforms.\n* We support Android Native Browsers on Android 4.4 and later.\n\n# Changelog\n\n3/10/17\nAdded Support for directPaymentMode Option\n\n27/07/17\nAdded Callback Handlers\n\n19/05/17\nInitial Release","slug":"seamless-checkout","title":"Seamless Checkout"}

Seamless Checkout


**Render Instamojo checkout form and collect payments on your webpage with just the instamojo-payment-url.** ## Integration You can begin integrating Checkout with as little as the below code: [block:code] { "codes": [ { "code": "<script src=\"https://js.instamojo.com/v1/checkout.js\"></script>\n<script>\n Instamojo.open(\"YOUR_INSTAMOJO_LINK_HERE\");\n</script>", "language": "html" } ] } [/block] **You can refer to the checkout demo <a href="http://jsbin.com/naxotagosa/edit?html,output" target="_blank">here</a>** [block:callout] { "type": "warning", "title": "Note", "body": "Checkout must be loaded directly from **https://js.instamojo.com/v1/checkout.js**. \nUsing a local copy of Checkout is unsupported, and may result into user-visible errors when we push new changes." } [/block] ## Methods Once checkout.js file is loaded in the browser, we have the following methods available in the global scope: 1. **Instamojo.open()** Call this method to open any instamojo link in checkout form. It requires instamojo-payment-url to be passed as the first parameter to render checkout form. 2. **Instamojo.close()** Call this method to close the checkout form manually. 3. **Instamojo.configure()** Call this method to set callback Handlers for the checkout form. [block:parameters] { "data": { "h-0": "Method", "h-1": "Example", "0-0": "open(paymentUrl)", "0-1": "Instamojo.open('https://www.instamojo.com/@ayushya')", "1-0": "close()", "1-1": "Instamojo.close()", "2-0": "configure(options)", "2-1": "Instamojo.configure({\n&nbsp;&nbsp; handlers: {\n&nbsp;&nbsp;&nbsp;&nbsp; onOpen: function() { alert('Modal is Opened') },\n&nbsp;&nbsp;&nbsp;&nbsp; onClose: function() { alert('Modal is Closed') }\n&nbsp;&nbsp; }\n});" }, "cols": 2, "rows": 3 } [/block] ## Options ### Direct Payment Mode Fast-forward your customers to a specified Payment Mode using this option. [block:code] { "codes": [ { "code": "<script src=\"https://js.instamojo.com/v1/checkout.js\"></script>\n<script>\n Instamojo.configure({\n directPaymentMode: 'net banking'\n });\n</script>", "language": "html" } ] } [/block] ### Handlers [block:code] { "codes": [ { "code": "<script src=\"https://js.instamojo.com/v1/checkout.js\"></script>\n<script>\n Instamojo.configure({\n handlers: {\n onOpen: function() {},\n onClose: function() {},\n onSuccess: function(response) {},\n onFailure: function(response) {}\n }\n });\n</script>", "language": "html", "name": "Setting up handlers" } ] } [/block] **Note:** All handler functions are optional. 1. **onOpen** This function is invoked when the checkout form is opened. 2. **onClose** This function is invoked when the checkout form is closed. 3. **onSuccess** This function is invoked after a successful payment. It has payment response as first argument. 4. **onFailure** This function is invoked after a failed payment. It has payment response as first argument. [block:parameters] { "data": { "h-0": "Function", "h-1": "Arguments", "0-0": "onOpen: function () {}", "1-0": "onClose: function () {}", "2-0": "onSuccess: function (response) {}", "3-0": "onFailure: function (response) {}", "0-1": "none", "1-1": "none", "2-1": "response: Payment Response Data", "3-1": "response: Payment Response Data" }, "cols": 2, "rows": 4 } [/block] ## Examples ### Opening Checkout Form with Button Click [block:code] { "codes": [ { "code": "<html>\n <head>\n \t<script src=\"https://js.instamojo.com/v1/checkout.js\"></script>\n <script>\n function onButtonClick() {\n Instamojo.open('http://www.instamojo.com/@ayushya');\n }\n </script> \n </head>\n <body>\n <button onclick=\"onButtonClick()\">\n Open Instapay\n </button>\n </body>\n</html>", "language": "html" } ] } [/block] Demo <a href="http://jsbin.com/pizotetere/1/edit?html,output" target="_blank">here</a> ### Adding Callbacks [block:code] { "codes": [ { "code": "<html>\n <head>\n <script src=\"https://js.instamojo.com/v1/checkout.js\"></script>\n <script>\n /* Start client-defined Callback Handler Functions */\n function onOpenHandler () {\n alert('Payments Modal is Opened');\n }\n\n function onCloseHandler () {\n alert('Payments Modal is Closed');\n }\n\n function onPaymentSuccessHandler (response) {\n alert('Payment Success');\n console.log('Payment Success Response', response);\n }\n\n function onPaymentFailureHandler (response) {\n alert('Payment Failure');\n console.log('Payment Failure Response', response);\n }\n /* End client-defined Callback Handler Functions */\n\n /* Configuring Handlers */\n Instamojo.configure({\n handlers: {\n onOpen: onOpenHandler,\n onClose: onCloseHandler,\n onSuccess: onPaymentSuccessHandler,\n onFailure: onPaymentFailureHandler\n }\n });\n \n function onButtonClick() {\n Instamojo.open('http://www.instamojo.com/@ayushya');\n }\n </script>\n </head>\n <body>\n <button onclick=\"onButtonClick()\">\n Open Instapay\n </button>\n </body>\n</html>", "language": "html" } ] } [/block] Demo with callbacks <a href="http://jsbin.com/vewuwahure/1/edit?html,output" target="_blank">here</a> # Supported Browsers Checkout supports all the recent versions of majority browsers. For providing the best user experience to our customers we do not support outdated browser versions which are no longer receiving security updates and represent a small minority of traffic. * We support Edge and Internet Explorer 10 and above. * We support Safari, Chrome and Firefox on all platforms. * We support Opera/Opera Mini on Android, IOS and desktop platforms. * We support Android Native Browsers on Android 4.4 and later. # Changelog 3/10/17 Added Support for directPaymentMode Option 27/07/17 Added Callback Handlers 19/05/17 Initial Release