Devsupport AI - Ionic Integration

{"title":"Devsupport AI - Ionic Integration","slug":"devsupport-ai-ionic-integration","body":"At Instamojo, we recently decided to support Ionic integrations.\n\n## What all can I expect?\nWith this SDK, your customers would be able to pay using: \n1. Credit / Debit Cards\n2. EMI\n3. Netbanking\n4. Wallets\n5. UPI\n\n## What do I need? \n1. Back end server (We currently support PHP & Python.)\n2. Client Id, and Client Secret from dashboard.\n3. Ionic setup on your machine with Android or iOS emulator\n[block:callout]\n{\n \"type\": \"danger\",\n \"title\": \"Important!\",\n \"body\": \"You are responsible for your client id and client secret. They are to be embedded in your server script. DO NOT use them in your client side code.\"\n}\n[/block]\n\n[block:callout]\n{\n \"type\": \"info\",\n \"title\": \"Not Using PHP or Python?\",\n \"body\": \"If you are using other languages, take a look at this section: [Other Back end Technologies]\"\n}\n[/block]\n## Step 1: \nDownload Devsupport AI from [here](https://github.com/artpar/devsupport/releases/latest). Install the .exe if you are on Windows, mac.zip if you are on Mac and .deb if you are on Linux. \n\n## Step 2: \nLink your Ionic project and proceed with integration. Type **Instamojo** when asked which product you'd like to integrate.\n\n## Step 3:\nProceed with back end integration first. Choose either PHP or Python, fill your client_id and client_secret, and download the file generated by the tool. Host this file on your server and keep it's URL handy. \n\nIf you use other back end technologies, refer [Other Back end Technologies](https://docs.instamojo.com/v1.1/page/devsupport-ai-ionic-integration#section-how-do-i-get-access-token-)\n\n##Step 4:\nProceed to Ionic integration and paste the access_token URL when the tool asks. E.g. https://iamironman.com/access_token.php or https://iambatman.com/access_token.py\n\n##Step 5:\nRun these three commands:\n1. npm install\n2. ionic cordova plugin add cordova-plugin-advanced-http\n3. ionic cordova plugin add cordova-plugin-inappbrowser\n[block:api-header]\n{\n \"title\": \"Other Back end Technologies\"\n}\n[/block]\nDevsupport AI tool expects an access token generated on your server. \n## How do I get access token?\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"var qs = require(\\\"querystring\\\");\\nvar http = require(\\\"https\\\");\\n\\nvar options = {\\n \\\"method\\\": \\\"POST\\\",\\n \\\"hostname\\\": \\\"test.instamojo.com\\\",\\n \\\"port\\\": null,\\n \\\"path\\\": \\\"/oauth2/token/\\\",\\n \\\"headers\\\": {\\n \\\"content-type\\\": \\\"application/x-www-form-urlencoded\\\",\\n \\\"cache-control\\\": \\\"no-cache\\\"\\n }\\n};\\n\\nvar req = http.request(options, function (res) {\\n var chunks = [];\\n\\n res.on(\\\"data\\\", function (chunk) {\\n chunks.push(chunk);\\n });\\n\\n res.on(\\\"end\\\", function () {\\n var body = Buffer.concat(chunks);\\n console.log(body.toString());\\n });\\n});\\n\\nreq.write(qs.stringify({ grant_type: 'client_credentials',\\n client_id: 'test',\\n client_secret: 'test' }));\\nreq.end();\",\n \"language\": \"javascript\"\n },\n {\n \"code\": \"OkHttpClient client = new OkHttpClient();\\n\\nMediaType mediaType = MediaType.parse(\\\"application/x-www-form-urlencoded\\\");\\nRequestBody body = RequestBody.create(mediaType, \\\"grant_type=client_credentials&client_id=test&client_secret=test\\\");\\nRequest request = new Request.Builder()\\n .url(\\\"https://test.instamojo.com/oauth2/token/\\\")\\n .post(body)\\n .addHeader(\\\"content-type\\\", \\\"application/x-www-form-urlencoded\\\")\\n .addHeader(\\\"cache-control\\\", \\\"no-cache\\\")\\n .build();\\n\\nResponse response = client.newCall(request).execute();\",\n \"language\": \"java\"\n },\n {\n \"code\": \"package main\\n\\nimport (\\n\\t\\\"fmt\\\"\\n\\t\\\"strings\\\"\\n\\t\\\"net/http\\\"\\n\\t\\\"io/ioutil\\\"\\n)\\n\\nfunc main() {\\n\\n url := \\\"https://test.instamojo.com/oauth2/token/\\\"\\n\\n\\tpayload := strings.NewReader(\\\"grant_type=client_credentials&client_id=test&client_secret=test\\\")\\n\\n\\treq, _ := http.NewRequest(\\\"POST\\\", url, payload)\\n\\n\\treq.Header.Add(\\\"content-type\\\", \\\"application/x-www-form-urlencoded\\\")\\n\\treq.Header.Add(\\\"cache-control\\\", \\\"no-cache\\\")\\n\\n\\tres, _ := http.DefaultClient.Do(req)\\n\\n\\tdefer res.Body.Close()\\n\\tbody, _ := ioutil.ReadAll(res.Body)\\n\\n\\tfmt.Println(res)\\n\\tfmt.Println(string(body))\\n\\n}\",\n \"language\": \"go\"\n }\n ]\n}\n[/block]\nAccess Token looks like this:\n\n```\n\n{\n \"access_token\": \"tyDkRjkirDEmF4PP8AHNrS3NnGwrt6\",\n \"expires_in\": 36000,\n \"token_type\": \"Bearer\",\n \"scope\": \"read write payouts:read payments:read payments:fulfil payments:refund\"\n}\n\n```\n\nRead access_token and prepend your environment to it. \n\nE.g if you are testing on Test environment, access token should look like this: testtyDkRjkirDEmF4PP8AHNrS3NnGwrt6\n\nIf you are on Production environment, access token should look like this:\nproductiontyDkRjkirDEmF4PP8AHNrS3NnGwrt6\n\nHost your script on server, keep it's URL ready and proceed to the bot for Android integration.\n\nWhen publicly accessed, this url should output the access token. E.g. testtyDkRjkirDEmF4PP8AHNrS3NnGwrt6 or productiontyDkRjkirDEmF4PP8AHNrS3NnGwrt6\n\nInitiate the payment with the method:\npayNow()\nRemember to change the below data fields per your logic.\n\ndata.purpose = \"Test\"; \ndata.amount = 9; \n\nHandle the response with the code snippet:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"this.instamojoClient.payNow(data).then(response => {\\n // alert(\\\"Payment complete: \\\" + JSON.stringify(response));\\n }).catch(err => {\\n // alert(\\\"Payment failed: \\\" + JSON.stringify(err));\\n throw err;\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nRESPONSE FORMAT:\nSuccess Response:\n\nstatus=success:orderId=a089f02724ed4a8db6c069f6d30b3245:txnId=None:paymentId=MOJO7918005A76494611:token=qyFwLidQ0aBNNWlsmwHx1gHFhlt6A1\n\nFailure Response:\ncode - Failure Code\nReason - Reason in String\n[block:callout]\n{\n \"type\": \"warning\",\n \"title\": \"Important!\",\n \"body\": \"Once you receive success callback, process the order. For your records, store token, orderid and payment id on your server.\"\n}\n[/block]\n## Need help?\nDrop us an email at [email protected] or [email protected] with the exact problem you are facing. We will help you out.","html":"","htmlmode":false,"fullscreen":false,"hidden":false,"_id":"5a708485c3cfa000542fbe6c","project":"56a1c9c13845200d0066d6fe","user":{"name":"Instamojo","username":"","_id":"56a1c959842b650d0088899c"},"createdAt":"2018-01-30T14:43:17.120Z","__v":0,"metadata":{"title":"","description":"","image":[]}}

At Instamojo, we recently decided to support Ionic integrations. ## What all can I expect? With this SDK, your customers would be able to pay using: 1. Credit / Debit Cards 2. EMI 3. Netbanking 4. Wallets 5. UPI ## What do I need? 1. Back end server (We currently support PHP & Python.) 2. Client Id, and Client Secret from dashboard. 3. Ionic setup on your machine with Android or iOS emulator [block:callout] { "type": "danger", "title": "Important!", "body": "You are responsible for your client id and client secret. They are to be embedded in your server script. DO NOT use them in your client side code." } [/block] [block:callout] { "type": "info", "title": "Not Using PHP or Python?", "body": "If you are using other languages, take a look at this section: [Other Back end Technologies]" } [/block] ## Step 1: Download Devsupport AI from [here](https://github.com/artpar/devsupport/releases/latest). Install the .exe if you are on Windows, mac.zip if you are on Mac and .deb if you are on Linux. ## Step 2: Link your Ionic project and proceed with integration. Type **Instamojo** when asked which product you'd like to integrate. ## Step 3: Proceed with back end integration first. Choose either PHP or Python, fill your client_id and client_secret, and download the file generated by the tool. Host this file on your server and keep it's URL handy. If you use other back end technologies, refer [Other Back end Technologies](https://docs.instamojo.com/v1.1/page/devsupport-ai-ionic-integration#section-how-do-i-get-access-token-) ##Step 4: Proceed to Ionic integration and paste the access_token URL when the tool asks. E.g. https://iamironman.com/access_token.php or https://iambatman.com/access_token.py ##Step 5: Run these three commands: 1. npm install 2. ionic cordova plugin add cordova-plugin-advanced-http 3. ionic cordova plugin add cordova-plugin-inappbrowser [block:api-header] { "title": "Other Back end Technologies" } [/block] Devsupport AI tool expects an access token generated on your server. ## How do I get access token? [block:code] { "codes": [ { "code": "var qs = require(\"querystring\");\nvar http = require(\"https\");\n\nvar options = {\n \"method\": \"POST\",\n \"hostname\": \"test.instamojo.com\",\n \"port\": null,\n \"path\": \"/oauth2/token/\",\n \"headers\": {\n \"content-type\": \"application/x-www-form-urlencoded\",\n \"cache-control\": \"no-cache\"\n }\n};\n\nvar req = http.request(options, function (res) {\n var chunks = [];\n\n res.on(\"data\", function (chunk) {\n chunks.push(chunk);\n });\n\n res.on(\"end\", function () {\n var body = Buffer.concat(chunks);\n console.log(body.toString());\n });\n});\n\nreq.write(qs.stringify({ grant_type: 'client_credentials',\n client_id: 'test',\n client_secret: 'test' }));\nreq.end();", "language": "javascript" }, { "code": "OkHttpClient client = new OkHttpClient();\n\nMediaType mediaType = MediaType.parse(\"application/x-www-form-urlencoded\");\nRequestBody body = RequestBody.create(mediaType, \"grant_type=client_credentials&client_id=test&client_secret=test\");\nRequest request = new Request.Builder()\n .url(\"https://test.instamojo.com/oauth2/token/\")\n .post(body)\n .addHeader(\"content-type\", \"application/x-www-form-urlencoded\")\n .addHeader(\"cache-control\", \"no-cache\")\n .build();\n\nResponse response = client.newCall(request).execute();", "language": "java" }, { "code": "package main\n\nimport (\n\t\"fmt\"\n\t\"strings\"\n\t\"net/http\"\n\t\"io/ioutil\"\n)\n\nfunc main() {\n\n url := \"https://test.instamojo.com/oauth2/token/\"\n\n\tpayload := strings.NewReader(\"grant_type=client_credentials&client_id=test&client_secret=test\")\n\n\treq, _ := http.NewRequest(\"POST\", url, payload)\n\n\treq.Header.Add(\"content-type\", \"application/x-www-form-urlencoded\")\n\treq.Header.Add(\"cache-control\", \"no-cache\")\n\n\tres, _ := http.DefaultClient.Do(req)\n\n\tdefer res.Body.Close()\n\tbody, _ := ioutil.ReadAll(res.Body)\n\n\tfmt.Println(res)\n\tfmt.Println(string(body))\n\n}", "language": "go" } ] } [/block] Access Token looks like this: ``` { "access_token": "tyDkRjkirDEmF4PP8AHNrS3NnGwrt6", "expires_in": 36000, "token_type": "Bearer", "scope": "read write payouts:read payments:read payments:fulfil payments:refund" } ``` Read access_token and prepend your environment to it. E.g if you are testing on Test environment, access token should look like this: testtyDkRjkirDEmF4PP8AHNrS3NnGwrt6 If you are on Production environment, access token should look like this: productiontyDkRjkirDEmF4PP8AHNrS3NnGwrt6 Host your script on server, keep it's URL ready and proceed to the bot for Android integration. When publicly accessed, this url should output the access token. E.g. testtyDkRjkirDEmF4PP8AHNrS3NnGwrt6 or productiontyDkRjkirDEmF4PP8AHNrS3NnGwrt6 Initiate the payment with the method: payNow() Remember to change the below data fields per your logic. data.purpose = "Test"; data.amount = 9; Handle the response with the code snippet: [block:code] { "codes": [ { "code": "this.instamojoClient.payNow(data).then(response => {\n // alert(\"Payment complete: \" + JSON.stringify(response));\n }).catch(err => {\n // alert(\"Payment failed: \" + JSON.stringify(err));\n throw err;\n});", "language": "javascript" } ] } [/block] RESPONSE FORMAT: Success Response: status=success:orderId=a089f02724ed4a8db6c069f6d30b3245:txnId=None:paymentId=MOJO7918005A76494611:token=qyFwLidQ0aBNNWlsmwHx1gHFhlt6A1 Failure Response: code - Failure Code Reason - Reason in String [block:callout] { "type": "warning", "title": "Important!", "body": "Once you receive success callback, process the order. For your records, store token, orderid and payment id on your server." } [/block] ## Need help? Drop us an email at [email protected] or [email protected] with the exact problem you are facing. We will help you out.