sample using iframe and lightbox for asp.net

[rrr944276]

i am trying to find a good sample of using the authorize.net payment form in an iframe and also sample of lightbox. I am doing this so that the customer can see which one they want. I can get the payment form to show on authorize.net website page. but can not seem to find an good exaple on the other ways

[NexusSoftware]

There is a very basic example of each method at : http://45.55.195.86:8080/accepthosted/

[rrr944276]

This is the finshed product but not the code. The simple code how to use iframe in asp.net to use the post in a form is what i need.

[NexusSoftware]

Actually that one is in Java, this one https://nexwebsites.com/authorizenet/ is in C#, but the code you use to get the token is arbitrary. You say are able to get the payment form to show on Authorize.net? The only difference would be to target an iframe or modal with your form, as the case may be.

[jgoldsack]

Do you have the source for that C# sample that can be shared? I am having a heck of a time getting it to work in my asp.net project.

[NexusSoftware]

Getting an Accept Hosted payment page is even simpler using .NetCore:

    public IActionResult Index()
        {

			HttpClient client = new HttpClient();
			client.BaseAddress = new Uri(@"https://apitest.authorize.net/");
			client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/xml"));
			HttpContent content = new StringContent(@"<getHostedPaymentPageRequest xmlns=""AnetApi/xml/v1/schema/AnetApiSchema.xsd"">
    <merchantAuthentication>
        <name>YOUR_API_LOGIN</name>
        <transactionKey>YOUR_TRANSACTION_KEY</transactionKey>
    </merchantAuthentication>
    <transactionRequest>
        <transactionType>authCaptureTransaction</transactionType>
        <amount>20.00</amount>
    </transactionRequest>
    <hostedPaymentSettings>
        <setting>
            <settingName>hostedPaymentBillingAddressOptions</settingName>
            <settingValue>{""show"": true, ""required"":true}</settingValue>
        </setting>
        <setting>
            <settingName>hostedPaymentButtonOptions</settingName>
            <settingValue>{""text"": ""Pay""}</settingValue>
        </setting>
        <setting>
            <settingName>hostedPaymentReturnOptions</settingName>
            <settingValue>{""url"":""https://yourstore.com/good"",""urlText"":""Continue"",""cancelUrl"":""https://yourstore.com/cancel"",""cancelUrlText"":""Cancel""}</settingValue>
        </setting>
    </hostedPaymentSettings>
</getHostedPaymentPageRequest>", System.Text.Encoding.UTF8, "application/xml"); 

			HttpResponseMessage result = client.PostAsync("xml/v1/request.api", content).Result;
            result.EnsureSuccessStatusCode();
			var resultContent = result.Content.ReadAsStreamAsync().Result;
			XDocument incomingXml = XDocument.Load(resultContent);

			var token = incomingXml.Descendants()
				.Where(a => a.Name.LocalName == "token")
				.FirstOrDefault().Value;
         
		ViewData["Message"] = token;
            return View();
        }

 

[jgoldsack]

 My issue that I am having isn't getting the token and payment page, it is after that. I understand I am supposed to have a listener page and then that processes the response back on my end, but that is where I am getting lost in what needs to be done.

[NexusSoftware]

The response is conveyed to your parent page via your specified hostedPaymentIFrameCommunicatorUrl. 

<setting>
<settingName>hostedPaymentIFrameCommunicatorUrl</settingName>
<settingValue>{"url":"https://yourstore.com/checkout/IFrameCommunicator.html"}</settingValue>
</setting>

In your parent page you could have something like the following: 

<script>
    window.CommunicationHandler = {};
    function parseQueryString(str) {
        var vars = [];
        var arr = str.split('&');
        var pair;
        for (var i = 0; i < arr.length; i++) {
            pair = arr[i].split('=');
            vars[pair[0]] = unescape(pair[1]);
        }
        return vars;
    }
    window.CommunicationHandler.onReceiveCommunication = function (argument) {
        params = parseQueryString(argument.qstr)
        parentFrame = argument.parent.split('/')[4];
        switch (params['action']) {
            case "transactResponse":
                var transResponse = JSON.parse(params['response']);
                $('#demo').html("Thank you. Your Transaction Id is: "+transResponse.transId);
                             
        }

    }

</script>

 What you do with the response is going to depend on what information you require and how you have your application set up.

[vishalgiri]

Hi Nexussoftware,

Thanks for updating on .net core support.

Can you please share link of any walkthrough for implementing same or link of source code you shared.

[saketk]

Hi Nexussoftware,

I am able to make the payment as you shown the example using iframe but unable to get response which shown on the iframe like transaaction id and details to our controller so i can use these data. So may you guide what should i do? Even i am getting error in console when i am using iframe.