I'm developing a website to use the Accept Hosted iframe method for checkout. When retrieving a token, I'm trying to pass customer data including the billing address (per the instructions here http://developer.authorize.net/api/reference/#payment-transactions-get-an-accept-payment-page).
However, it seems that this requires the customer to enter their billing address, click submit, and then click another button to submit the token and other information to the iframe. How can I collect the entered billing info, validate it, and submit it to the iframe without needing to click two submit buttons?
Current Steps:
* Enter billing address into form.
* CLICK Submit.
* Validate billing address and generate token for Accept Hosted checkout form.
* CLICK Submit again to post token and billing address to iframe and display checkout form.
Desired Steps:
* Enter billing address into form.
* CLICK Submit.
* Display checkout form in iframe.
Thanks for any advice!
08-18-2017 11:09 AM - edited 08-18-2017 11:13 AM
One way is to check your token input's value with Javascript, because it will need to be populated with a valid token in order to get an Accept Payment form, then auto submit the form, if a token is found:
<script> var token = document.forms["paymentForm"]["token"].value; if (token > 0) { document.getElementById("paymentForm").submit(); } </script>
08-18-2017 12:39 PM
Thanks for your response.
That's not exactly what I meant, but I am having some success by using AJAX to validate my form.
So far, I'm using JavaScript to intercept the form submission. I make an AJAX call to another script that validates the form values, submits them to authorize.net, and returns an Accept Hosted form token. So, when I submit my form with appropriate values, the AJAX call returns a token and I can inject it into the form before submission to the iframe is executed.
I'm considering something further: configure the form to submit to the Accept Hosted "full redirect method", instead of the iframe method. That way it can serve as a fall-back in case the browser doesn't support JavaScript. Then, upon the response from my AJAX call, my JavaScript can generate a completely new form element to submit the token to the iframe, append it to the document, and submit it.
Thanks again for your suggestion.
I'll try to work up an example to post here when I've got it nailed down.
08-18-2017 03:08 PM - edited 08-18-2017 03:11 PM
With Ajax :
success: function(data) {
var obj = $.parseJSON(data);
$("#token").val(obj['token']);
if($("#token").val() !=''){
$("#payform").submit();
}
08-18-2017 03:21 PM