I'm using authorize.net for a NextJS project for a client's payment processing. I am trying to make test transactions and it just won't work. I am correctly using the getHostedPaymentPageRequest to get my token, and when I go to display the form via Accept Hosted Redirect, that works too, but when I click "Pay", I get the email receipt that the payment worked, but on the hosted payment page I just see "Processing..." for around 2 minutes and then I get this error. POST https://test.authorize.net/Payment/Api.ashx 550. I see several other people have asked similar questions to this, but they were not answered. Any help would be greatly appreciated. I will post my code below.
Get Hosted Payment Page Response
export async function POST(req) {
try {
const merchantAuthenticationType =
new APIContracts.MerchantAuthenticationType()
merchantAuthenticationType.setName(process.env.API_LOGIN_ID)
merchantAuthenticationType.setTransactionKey(process.env.TRANSACTION_KEY)
const transactionRequestType = new APIContracts.TransactionRequestType()
transactionRequestType.setTransactionType(
APIContracts.TransactionTypeEnum.AUTHCAPTURETRANSACTION
)
transactionRequestType.setAmount(utils.getRandomAmount())
const setting1 = new APIContracts.SettingType()
setting1.setSettingName('hostedPaymentButtonOptions')
setting1.setSettingValue('{"text": "Pay"}')
const setting2 = new APIContracts.SettingType()
setting2.setSettingName('hostedPaymentOrderOptions')
setting2.setSettingValue('{"show": false}')
const setting3 = new APIContracts.SettingType()
setting3.setSettingName('hostedPaymentStyleOptions')
setting3.setSettingValue('{"bgColor": "#426224"}')
const setting4 = new APIContracts.SettingType()
setting4.setSettingName('hostedPaymentIFrameCommunicatorUrl')
setting4.setSettingValue(
'{"url": "https://ron-shirks.vercel.app/iframe.html"}'
)
const setting5 = new APIContracts.SettingType()
setting5.setSettingName('hostedPaymentReturnOptions')
setting5.setSettingValue(
'{"showReceipt": true, "url": "https://ron-shirks.vercel.app/receipt", "urlText": "Continue", "cancelUrl": "https://ron-shirks.vercel.app/", "cancelUrlText": "Cancel"}'
)
const settingList = [setting1, setting2, setting3, setting4]
const alist = new APIContracts.ArrayOfSetting()
alist.setSetting(settingList)
const getRequest = new APIContracts.GetHostedPaymentPageRequest()
getRequest.setMerchantAuthentication(merchantAuthenticationType)
getRequest.setTransactionRequest(transactionRequestType)
getRequest.setHostedPaymentSettings(alist)
const ctrl = new APIControllers.GetHostedPaymentPageController(
getRequest.getJSON()
)
ctrl.setEnvironment('https://apitest.authorize.net/xml/v1/request.api')
// ctrl.setEnvironment('https://api.authorize.net/xml/v1/request.api')
// Define a function to execute the controller and return a promise
function executeController(ctrl) {
return new Promise((resolve, reject) => {
ctrl.execute(function () {
try {
var apiResponse = ctrl.getResponse()
const response = new APIContracts.GetHostedPaymentPageResponse(
apiResponse
)
resolve(response)
} catch (error) {
reject(error)
}
})
})
}
const controllerResponse = await executeController(ctrl)
return NextResponse.json({
response: controllerResponse.token,
})
} catch (error) {
console.error('An error occurred:', error)
return NextResponse.error('Internal Server Error', { status: 500 })
}
}
Display Form
return transToken ? (
<form
method='post'
action='https://test.authorize.net/payment/payment'
id='formAuthorizeNetTestPage'
name='formAuthorizeNetTestPage'
>
<input type='hidden' name='token' value={transToken} />
Continue to Authorize.net to Payment Page
<button id='btnContinue'>Continue to next page</button>
</form>
) : (
<div>
You must have a form token. Have you made a call to the
getHostedPaymentPageRequestAPI?
</div>
)
