Different payment amounts Accept.js

[awright]

Hey Dev Community!

I am trying to implement the Hosted Form for Accept.js to a web page. Am I able to attach this to two different payment amounts to be sent by the form to the Authorize.net server? Or am I going to have to code this with my own form and attach the different payment amounts some how? 

In other words:

What is the best way to have two different payment amount options? The hosted form (if even possible) or my own form? 

I am using HTML vanilla Javascript.

An example would be very helpful. 

[benmehlman · Accepted solution]

With Accept.js (your own form) or AcceptUI.js (hosted form), the first step is to just collect the card information and get back the opaqueData, which you will later use to authorize or authCapture the payment.

You do not need the payment amount for that first step.

Then the second step is to put that opaqueData you got back into a form element which you post to your server.  And on the server, you do another authorize.net transaction to authorize/capture the payment.

So just put whatever selections you want the user to make regarding price in the same form where the opaqueData will be posted to your server.. and then all that information will be used on the server for Step #2 (authorization).

[awright]

So it has to be done server side - there is no way to do the createTransactionRequest client side, is that my understanding?

Just want to make sure I clearly understand the process! :)

[benmehlman]

It's not that there's "no way" to do it, it's that you can't do it without revealing your api transactionKey to the whole world, which you definitely should not do.

By using their javascript API on the client side to convert the private card data to opaqueData, you avoid the need for your server to handle the card data, which reduces your security requirements.  That operation only requires for the clientKey and apiLoginID (aka. "name") to be revealed to the client side.  The clientKey can only be used for certain operations (such as this), it can't be used to create transactions, and I am pretty sure that the opaqueData is tied to your account so only you can use it in place of a card when you do create the transaction server side.

So it's pretty secure.

But if you were to reveal your transactionKey to the client, then sure, you could do any transaction you want client side.. and so could anyone else.. using your account.

[awright]

Thank you for your help and explanation! Definitely gave me the direction I need to go.