Getting Form Data From Outcoming HTTP POST response in Angular js - angularjs

Question

I am trying to develop payment module with angularjs and asp.net web api.
I am using an payment api (iyzico).
With that api I create shopping token request and this request return an js script response and a shopping token.
I load this js file and payment form is generated by returning js file.
After generating payment form, I entered my credit card infos and send these infos to payment api then payment api return response but I could not get this response from page (This response come when page is loading).
Http Get method for generating shopping token in payment.js
function loadDetails() {
$http.get( '/API/api/profile/GetPaymentToken').then(function (results) {
$scope.paymentData = jQuery.parseJSON(results.data);
$scope.code_snippet = $sce.trustAsHtml($scope.paymentData.code_snippet);
var paymentScriptUrl = "https://www.iyzico.com/frontend/form/v1/widget.js?mode=test&token=" + $scope.paymentData.transaction_token;
$.ajax({
url: paymentScriptUrl,
dataType: "script",
cache: true,
success: function (data, textStatus, jqXHR) {
var f = new Function(data);
f();
iyzi_jQuery(this).iyziPayment({
host: 'https://iyziconnect.com/pay-with-transaction-token/',
mode: 'test',
assetsURL: 'https://www.iyzico.com/frontend/form/v1/',
installment: '0',
language: 'tr'
});
},
error: function (jqXHR, status, err) {
console.log("");
}
});
},
function (response) { // optional
_helper.error.handleError(toaster, response.data, response.status);
})
}
Token Generator in Web.Api, it is called in payment.js
[Authorize]
[HttpGet]
[Route("GetPaymentToken")]
public async Task<IHttpActionResult> GetPaymentToken()
{
System.Diagnostics.Debugger.Break();
WebRequest request = WebRequest.Create("https://api.iyzico.com/v2/create");
request.Method = "POST";
var rand = new Random();
var external_id = rand.Next(0, 100000000);
string postData = "api_id=my_id"
+ "&secret=my_secret"
+ "&external_id=" + external_id.ToString()
+ "&mode=test"
+ "&type=CC.DB"
+ "&return_url=http://localhost:2020/payment2" //returning url
+ "&amount=10020"
+ "&currency=TRY"
+ "&descriptor=PAYMENT_DESCRIPTION"
+ "&customer_contact_ip=CUSTOMER_IP"
+ "&customer_language=tr"
+ "&installment=false";
byte[] byteArray = System.Text.Encoding.UTF8.GetBytes(postData);
request.ContentType = "application/x-www-form-urlencoded";
request.ContentLength = byteArray.Length;
System.IO.Stream dataStream = request.GetRequestStream();
dataStream.Write(byteArray, 0, byteArray.Length);
dataStream.Close();
WebResponse response = request.GetResponse();
dataStream = response.GetResponseStream();
System.IO.StreamReader reader = new System.IO.StreamReader(dataStream);
string responseFromServer = reader.ReadToEnd();
reader.Close();
dataStream.Close();
response.Close();
return Ok(responseFromServer);
After getting shopping token I enter my credit card infos and send form to external payment api and external api return information to my return url (http://localhost:2020/payment2) about my payment is successful or failed .
I can see returning responce from external api at chrome developer tools > network actions but I can not get that form data from mycontroller js file. returning response is at below
Remote Address:[::1]:2020
Request URL:http://localhost:2020/payment2
Request Method:POST
Status Code:200 OK
Response Headers
view source
Cache-Control:private
Content-Length:11337
Content-Type:text/html
Date:Fri, 03 Apr 2015 08:45:22 GMT
Server:Microsoft-IIS/8.5
X-Powered-By:ASP.NET
Request Headers
view source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6,tr;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:532
Content-Type:application/x-www-form-urlencoded
Cookie:countrySCJS=TR; ootdcuSCJS=34602; ootdchSCJS=10742; ctxjs1420m06d05=7b2273756363657373223a302c226c6f675f616374697665223a317d; ASPSESSIONIDQCDBDRBQ=BKGJHHKCKDDLJCBBPMPJJHFH; ASPSESSIONIDQAADBTBR=AMPJDALCPFGILMAOKEDMMGBP; ASPSESSIONIDSCAADQAR=GKKFJCCDLILKPNHAEHBHHLHJ
Host:localhost:2020
Origin:null
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36
Form Data
view source
view URL encoded
**json:{"response":{"state":"failed","date_time":"15-04-03 08:43:24","error_code":"800.100.154","error_message":"transaction marked as invalid","error_message_tr":""},"transaction":{"transaction_id":"MTQyODA1MDU4NAnrin0vdEV06f4hWARX","external_id":"23583443","reference_id":"____________20150403084323.653059Kq","state":"rejected","connector_type":"Isbank","installment_count":0}}**
How can I get that json named array?

Answer 1

You have to sacrifice your your single page application for callback.
Get callback to your REST address
Process the POST parameters
Generate (return text/html) a simple SUCCESS of FAIL page. Let this page contain the result and link to appropriate page (main page url or payment page url)
Link should open your single page angularjs and your controller should display
appropriate page according to URL.