Thank you for your help.
I'm building a project in TypeScript, React, and Next.js. Please excuse some bad practices as I'm currently trying to get the initial integration working.
I have a `/lib/authorizeNet.ts` file with a `getHostedPaymentPageRequest()` function. This function successfully (200) returns a token, which is a very long string.
I have a `/test.ts` file with a sample `transactionRequest` and `HostedPaymentSettings`. At the bottom of the file, I call `getHostedPaymentPageRequest(transactionRequest, hostedPaymentSettings)` and it successfully returns the token.
Finally, I have a `/app/payment/page.tsx,` it's as follows:
import { testGetHostedPaymentPageRequest } from "@/lib/test"
export default async function Payment() {
const token = await testGetHostedPaymentPageRequest()
return (
<>
{typeof token === "string" ? (
<form
method="post"
action="https://test.authorize.net/payment/payment/"
id="formAuthorizeNetTestPage"
name="formAuthorizeNetTestPage"
>
<input type="hidden" name="token" value={token} />
<button type="submit">Continue to Payment</button>
</form>
) : (
<h1>Hello World</h1>
)}
</>
)
}
In short, it gets a token, creates a simple form, and a button, which when clicked should bring you to the correct sandbox URL with the payload for token. It does this successfully, as I can see in the Network tab.
I end up on https://test.authorize.net/payment/payment/ with several 505 errors. I don't know if my form code is incorrect because it's not bringing me to /payment/payment/token=${token} or something like this. Could you please tell me how I can resolve this issue?
Here's the network payload.
It will no longer let me edit the original post, but I've figured out one problem, but now have another. When I removed the last `/` from `.../payment/payment/` to `.../payment/payment`, it seems to work a bit better. No more 505s, but I'm getting this:
