topic Re: Accept Hosted Form problems in Integration and Testing

Accept Hosted Form problems

ZachE844 — Tue, 04 Apr 2017 02:24:10 GMT

Hello,

I am successfully getting a token from the getHostedPaymentPageRequest.

I then post the hidden token to the payment api and getting HTML returned. However, the CSS and Script tags are not being found and the button text is not being replaced. I'm very confused. heres some HTML as example:

<button class="btn btn-primary payButton pull-right bg-color" id="payBtn" ng-click="payBtnHandler()" ng-disabled="!(paymentForm.$valid && isValidCaptchResponse)">{{payButtonText}}</button>

Thanks,
Zach

Re: Accept Hosted Form problems

Aaron — Tue, 04 Apr 2017 17:18:48 GMT

Hi @ZachE844,

Can you give us a little more information?

For example, could you give us a sample token request so we can see what parameters you're sending in the request with which values?

Which URL are you posting the token to?

Re: Accept Hosted Form problems

uwlmhardy — Wed, 28 Jun 2017 19:57:10 GMT

Hi @Aaron and @ZachE844,

Was there ever a solution to this? I am encountering the same issues at the moment, with every JS/CSS file in the sandbox returning a 550 error.

Thanks,

Mason

Re: Accept Hosted Form problems

Aaron — Wed, 28 Jun 2017 19:59:55 GMT

Hi @uwlmhardy,

Looks like the original poster never followed up, but I'll pose the same questions to you:

Can you give us a little more information?

For example, could you give us a sample token request so we can see what parameters you're sending in the request with which values?

Re: Accept Hosted Form problems

uwlmhardy — Wed, 28 Jun 2017 20:44:37 GMT

@Aaron Here's a sample token:

xQT8BEA7RlM7qGDZEtTSiRtTLeFaO6GOud8ICMH5UzO5jNjdgfqQQGyTUhlIHpHoMsEgzF3zj/WbXIjJzNnsIuhV1Ckh9l/aJ18alhgLDnnS7fJ7Ta+kbBXm+bRdJR9ZfaW8a83FaNwThXVWxCikdB8snlgasX1fonOoZx2KibKXo+HwsoXywXuZvnnrOyseYgIG5yT7yuj1rv8JbXRodR3fCwcEBO1ID4ZdQ4OlmNNN48xhQVPuMnfZqHPVAUpLTdZXgV4QqRwEaMeomOVsuE0fm0YhejQLgVkjW/cFP2QzfrexhNr6a9wVAM9Mz8RWXf2EdX3f+EispzHapGxInNU90t1NaMOBUJ7u4y3FqlitR31HOh8XAc4zWvnAlcNxgi16J/s2DSps1/Z0kpS/o8Vn+PP0RSgH92TvJyW5wFhHi4P8WBhJWpDhiozZKPncXJJSshxCjxygeCb7maray2lMfkWd+uGoYBtufdmkp4qYhkC7KNTRwdIMcRlhmIZ4k+sppQp9Qsw+5qVBkViVjzkWwAVxGwejXQ+VCO1w3U3e02cj98j9tQM8YbIgDkoV9xEF0GIZs3dwE76CARcVnARKh3AZZWBOXUoTF8bGnqZRdpfR1A2C6EFMFPYzH0dYN64apHdvGMThUChLv45aOn1lwq7+X5fyF+kEz46XIPsiqfblsFfJJjclNCmjkrszzVt+Lo8PlW5ZEFWHe/Y/LpiGXaAgOosMTomr7tsXFC7EX3EoEN9IxWt7OGc/3/rZCH79Qnkg4hD1X5Y3EsUD+cn6VmAkLEDaxn7WrT+qeC7YYSogvkjLpjUdlt2ysCDfVCXdiWgLjktIX41xz/yYpIJMaSSBkPZuTJFKlbm7vGOMB/ZAGPWqUeF3PYobpvetDZLjchSGQkdugt5e/gRLGkwe1DiGNv6BEjAOS/9itxdi/XO7+YJOpqoC40j2wcqWOI7GPB4dhH49Ci0odbsTazMMiC2DKzoJY24il3ykOY0iVFH5knKzagy8qmmb77ft96oYhYpDKPpq3wanNNEZMLKnEoaAJRQfG7gbZ0FUvouGdxJGZGx6P9+bPi93o5iv1z2DDteLV1Su3rm1TA71zjAQ9tWG9WC36AlWMUpO84g1m39o5kaw81PJKehGIcPJ.2f5ePY7Pp26J

Let me know what other information would be useful for me to provide.

Mason

Re: Accept Hosted Form problems

Aaron — Wed, 28 Jun 2017 21:19:43 GMT

Hi Mason,

It's not so much the token I need as what information you're sending to get the token. Do you have a log of the actual request into our system to get the token?

Re: Accept Hosted Form problems

uwlmhardy — Thu, 29 Jun 2017 14:40:37 GMT

@Aaron,

Here's the JSON object I'm sending, otherwise I can copy and paste the C#code I'm using to generate the token:

{
    "Title": "",
    "Object": {
      "transactionRequest": {
        "transactionType": "authCaptureTransaction",
        "amount": 50.0,
        "amountSpecified": true,
        "currencyCode": null,
        "payment": null,
        "profile": null,
        "solution": null,
        "callId": null,
        "terminalNumber": null,
        "authCode": null,
        "refTransId": null,
        "splitTenderId": null,
        "order": null,
        "lineItems": null,
        "tax": null,
        "duty": null,
        "shipping": null,
        "taxExemptSpecified": false,
        "poNumber": null,
        "customer": null,
        "billTo": null,
        "shipTo": null,
        "customerIP": null,
        "cardholderAuthentication": null,
        "retail": null,
        "employeeId": null,
        "transactionSettings": null,
        "userFields": null
      },
      "hostedPaymentSettings": [
        {
          "settingName": "hostedPaymentButtonOptions",
          "settingValue": "{\"text\": \"Donate\"}"
        },
        {
          "settingName": "hostedPaymentOrderOptions",
          "settingValue": "{\"show\": false}"
        },
        {
          "settingName": "hostedPaymentShippingAddressOptions",
          "settingValue": "{\"show\" : false }"
        },
        {
          "settingName": "hostedPaymentBillingAddressOptions",
          "settingValue": "{\"show\" : true, \"required\" : true }"
        },
        {
          "settingName": "hostedPaymentReturnOptions",
          "settingValue": "{ \"showReceipt\" : true, \"url\" : \"https://www.uwlax.edu/foundation2/\", \"urlText\" : \"Continue\", \"cancelUrl\" : \"https://www.uwlax.edu/foundation2/?transaction=cancelled\" }"
        }
      ],
      "merchantAuthentication": null,
      "clientId": null,
      "refId": null
    }

Is that more of what you are looking for?

Mason

Re: Accept Hosted Form problems

Aaron — Thu, 29 Jun 2017 22:43:12 GMT

That's closer, but what you've posted isn't an actual token request. Some of those names aren't our field names. Is this a template that your code uses to build the request or something like that?

For reference, here's a log of an actual HTTP request with a well formatted request (with my personal info redacted):

POST /xml/v1/request.api HTTP/1.1
Host: apitest.authorize.net
Content-Type: application/json
Cache-Control: no-cache

{
	"getHostedPaymentPageRequest": {
        "merchantAuthentication": {
            "name": "API_LOGIN",
            "transactionKey": "TRANSACTION_KEY"
        },
		"transactionRequest": {
			"transactionType": "authCaptureTransaction",
			"amount": "50.00"
		},
		"hostedPaymentSettings": {
			"setting": [
		        {
		          "settingName": "hostedPaymentButtonOptions",
		          "settingValue": "{\"text\": \"Donate\"}"
		        },
		        {
		          "settingName": "hostedPaymentOrderOptions",
		          "settingValue": "{\"show\": false}"
		        },
		        {
		          "settingName": "hostedPaymentShippingAddressOptions",
		          "settingValue": "{\"show\" : false }"
		        },
		        {
		          "settingName": "hostedPaymentBillingAddressOptions",
		          "settingValue": "{\"show\" : true, \"required\" : true }"
		        },
		        {
		          "settingName": "hostedPaymentReturnOptions",
		          "settingValue": "{ \"showReceipt\" : true, \"url\" : \"https://www.uwlax.edu/foundation2/\", \"urlText\" : \"Continue\", \"cancelUrl\" : \"https://www.uwlax.edu/foundation2/?transaction=cancelled\" }"
		        }
    		]
		}
	}
}

Let me just ask a few clarifying questions: You're not having any trouble getting the token itself, right? You send a request, you get a token back, and the you do a form submission in the browser to submit the token to https://test.authorize.net/payment/payment, right?

At that point, the browser's not rendering anything because it's trying to retrieve files but getting 550 errors? Is that happening with every browser? From other networks as well?

What I'm looking for is some way to reproduce this on my end. If there was something you were sending in the token request that was causing our system to generate tokens that couldn't be used, I'd want to see exactly what was being sent in the token request. Then, I could send the same information from my system for my account and get a token and see if that token caused the same behavior. If so, I can go in one direction to troubleshoot. If not, the problem would be tied to your account or system somehow, and I could move in another direction to troubleshoot.

Do you have any other way I could reproduce it? Do you have this code running on the web anywhere where I could see it failing?

Re: Accept Hosted Form problems

uwlmhardy — Thu, 06 Jul 2017 17:04:26 GMT

Aaron,

First, here is the Github doc I have been following to create the API request: https://github.com/AuthorizeNet/sample-code-csharp/blob/master/PaymentTransactions/GetAnAcceptPaymentPage.cs

Here is the C# server code I am using to generate the Token based on that sample code page

public static string GetANetToken(decimal amount)
		{
			System.Net.ServicePointManager.SecurityProtocol = System.Net.SecurityProtocolType.Ssl3 | System.Net.SecurityProtocolType.Tls12;
#if DEBUG
			ApiOperationBase<ANetApiRequest, ANetApiResponse>.RunEnvironment = AuthorizeNet.Environment.SANDBOX;
#else
			ApiOperationBase<ANetApiRequest, ANetApiResponse>.RunEnvironment = AuthorizeNet.Environment.HOSTED_VM;
#endif
			ApiOperationBase<ANetApiRequest, ANetApiResponse>.MerchantAuthentication = new merchantAuthenticationType()
			{
				name = AFMerch,
				ItemElementName = ItemChoiceType.transactionKey,
				Item = AFTrans
			};
			var transactionRequest = new transactionRequestType
			{
				transactionType = transactionTypeEnum.authCaptureTransaction.ToString(),
				amount = amount,
				amountSpecified = true
			};
			
			var request = new getHostedPaymentPageRequest();
			request.transactionRequest = transactionRequest;
			var settings = new List<settingType>();
			settings.Add(new settingType()
			{
				settingName = settingNameEnum.hostedPaymentButtonOptions.ToString(),
				settingValue = @"{""text"": ""Donate""}"
			});
			settings.Add(new settingType()
			{
				settingName = settingNameEnum.hostedPaymentOrderOptions.ToString(),
				settingValue = @"{""show"": false}"
			});
			settings.Add(new settingType()
			{
				settingName = settingNameEnum.hostedPaymentShippingAddressOptions.ToString(),
				settingValue = @"{""show"" : false }"
			});
			settings.Add(new settingType()
			{
				settingName = settingNameEnum.hostedPaymentBillingAddressOptions.ToString(),
				settingValue = @"{""show"" : true, ""required"" : true }"
			});
			settings.Add(new settingType()
			{
				settingName = settingNameEnum.hostedPaymentReturnOptions.ToString(),
				settingValue = @"{ ""showReceipt"" : true, ""url"" : ""https://www.uwlax.edu/foundation2/"", ""urlText"" : ""Continue"", ""cancelUrl"" : ""https://www.uwlax.edu/foundation2/?transaction=cancelled"" }"
			});
			request.hostedPaymentSettings = settings.ToArray();

			UwlSharedClassLibrary.Helpers.General.WriteLog.LogObject(request);
			var controller = new getHostedPaymentPageController(request);
			controller.Execute();
			var response = controller.GetApiResponse();
			if(response != null && response.messages.resultCode == messageTypeEnum.Ok)
			{
				return response.token;
			}
			else
			{
				return "";
			}
			//System.Net.ServicePointManager.SecurityProtocol = System.Net.SecurityProtocolType.Ssl3;
		}

If some of the names aren't your field names, is the C# API access point out of date, or is that sample page out of date perhaps?

After the token is generated, the form posts to https://test.authorize.net/payment/payment/. I have tried different browsers (Chrome, Firefox and IE 11), but am unable to test different networks yet since the page is in development and only exists on my dev machine and a server on our network.

Thanks,

Mason

Re: Accept Hosted Form problems

Aaron — Thu, 06 Jul 2017 17:25:27 GMT

Hi Mason,

Again, to clarify, where do the 550 errors come in? When the token is posted to https://test.authorize.net/payment/payment? You earlier said every JS/CSS file in the sandbox gives the 550. So, after you post the token, an HTML response is returned to the browser? But every JS/CSS referred to in that HTML is not retrievable by the browser because each request gets a 550 response?

You can still test the part that's breaking on another network even if the C# token request code is only on your dev machine/server. Use that code to request the token, but submit the token to https://test.authorize.net/payment/payment from a machine on a different network. If a browser can't access your existing dev server from outside your network, you could request the token with the C# code, send the token somewhere else (by email or whatever), then submit the token from a browser outside the network.

Basically, I'm trying to separate the token request process from the token use process. If a token received with exactly the same process can't retrieve the form when used to request a form inside your network, but works when outside your network, clearly the problem is in the form request/rendering process, and possible blocking of things within your network. But, if the code that requests a token receives a token that doesn't work no matter where you use it, the problem is in either the token request process on your end or the token generating process on our end. Anything we can do to narrow stuff down is important.

Re: Accept Hosted Form problems

Aaron — Thu, 06 Jul 2017 17:30:00 GMT

One more thing: I'm hoping to see the actual token request as it would travel over the wire to our servers. You're logging the request object, which the SDK has filled with a bunch of null fields that it's not actually going to end up sending. I want to get a log of the actual request that it's going to post to our servers after the SDK has fully formatted it. What kind of log can you capture if you try to log the controller object instead of the request object?

Of course this would be easier if we had better logging in our .NET SDK...

Re: Accept Hosted Form problems

uwlmhardy — Thu, 06 Jul 2017 19:46:24 GMT

Aaron,

I did as you suggested and generated the token and submitted that on a device on a different network (my phone on the cellular network), and the CSS and Javascript files are still not being fetched properly.

I am able to post the token and get to the https://test.authorize.net/payment/payment/ page, but then the CSS and JS files on that page are returning 550 errors. Here is a screenshot of the resulting page, and the console errors for each file so you can see what I am seeing.

Thanks,

Mason

Re: Accept Hosted Form problems

Aaron — Thu, 06 Jul 2017 21:12:44 GMT

This is great, thanks! Any luck getting a log of the token request?

Re: Accept Hosted Form problems

NexusSoftware — Sat, 08 Jul 2017 22:49:46 GMT

Hi @Aaron,

I noticed a discrepancy in the referenced js and css files depending on how the application is called.

Notice the 2 URLs below, the first is good and is what is being referenced when posting to https://test.authorize.net/payment/payment and the second URL is what is being referenced when posting to https://test.authorize.net/payment/payment/ which generates the 550 server errors, the key difference being the trailing slash.

https://test.authorize.net/payment/scripts/lib/angular.min.js
https://test.authorize.net/payment/payment/scripts/lib/angular.min.js

The answer is, they are probably posting to https://test.authorize.net/payment/payment/ instead of https://test.authorize.net/payment/payment

Although the documentation and you reference the correct URL, apparently this trailing slash is the cause of some confusion.

Easy fix to reference the the js and css files from the application with full paths instead of relative URLs or remove the trailing slash with the following in the application's Web.config:

<rewrite>
  <rules>
     <rule name="Remove trailing slash" stopProcessing="true">
      <match url="(.*)/$" />
      <conditions>
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Redirect" redirectType="Permanent" url="{R:1}" />
    </rule>
    
  </rules>
</rewrite>

Re: Accept Hosted Form problems

uwlmhardy — Mon, 10 Jul 2017 16:17:22 GMT

Well, that did it.

Thank you, @NexusSoftware for the solution and thank you @Aaron for helping me try to debug.

Mason

Re: Accept Hosted Form problems

Aaron — Mon, 10 Jul 2017 16:45:49 GMT

Hi @NexusSoftware,

As usual, your contributions are outstanding! I have no doubt that the rest of us would have stumbled upon this eventually, but it may have taken us a few more days (or weeks!) of posting back and forth to get there. You've saved us all a ton of time.

I'll escalate this internally so we can figure out ways to better handle the URL in the future.