{"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":[]}}