Hi @Aaron, thanks for a reply.
What we have,
sendPaymentDataToAnet() sends 2 requests, first is OPTION with the error response:
https://www.dropbox.com/s/v26a9n1ghonolfd/Screenshot%202017-04-02%2014.17.05.png?dl=0
But I think that doesn't make any problems.
The next one is a POST request with a successful response:
https://www.dropbox.com/s/rri1z5lrhskqihe/Screenshot%202017-04-02%2014.18.18.png?dl=0
But, responseHandler() called twice:
https://www.dropbox.com/s/zr5tjn08ctu6h7y/Screenshot%202017-04-02%2014.19.54.png?dl=0
As you see the first reponse is fine, but then comes the next one (should it?) with an error.
Here is the js code once again:
<script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('.payment-form').submit(function(event) {
var $form = $(this);
event.preventDefault();
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
$('#js-error-message').hide();
sendPaymentDataToAnet();
});
});
function responseHandler(response) {
console.log(response);
if (response.messages.resultCode === 'Error') {
var code = response.messages.message[0].code;
// Show the errors on the form
switch(code){
case "E_WC_05":
$('#js-error-message').html('The credit card number is not valid.').fadeIn();
break;
case "E_WC_08":
$('#js-error-message').html('The expiration date is not valid.').fadeIn();
break;
default:
$('#js-error-message').html(response.messages.message[0].text).fadeIn();
break;
}
$('.payment-form').find('button').prop('disabled', false);
} else {
useOpaqueData(response.opaqueData)
}
}
function useOpaqueData(responseData) {
$form.append($('<input type="hidden" name="sourceToken"/>').val(responseData.dataValue));
// $('.payment-form').get(0).submit();
}
function sendPaymentDataToAnet() {
var secureData = {}, authData = {}, cardData = {};
cardData.cardNumber = document.getElementById('card_number').value;
cardData.month = document.getElementById('expiration_month').value;
cardData.year = document.getElementById('expiration_year').value;
secureData.cardData = cardData;
authData.clientKey = '6LcF9gM6BUc3W6gzJS29L8T77s8CJcbg4MjNtg67RNTPgbw55Fy22JRp4LE3a2uL';
authData.apiLoginID = '4Nna6p3jPQ3m';
secureData.authData = authData;
Accept.dispatchData(secureData, responseHandler);
}
</script>and form code:
<form accept-charset="utf-8" class="form-vertical payment-form" autocomplete="on" id="payment-form" method="POST" action="https://localhost/jgaf13faaf8l40">
<h3>Contact Information</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group required"><input required="true" class="form-control" placeholder="First Name" id="first_name" type="text" name="first_name" value=""></div>
</div>
<div class="col-md-6">
<div class="form-group required"><input required="true" class="form-control" placeholder="Last Name" autocomplete="family-name" id="last_name" type="text" name="last_name" value=""></div>
</div>
</div>
<div class="row" style="display:none">
<div class="col-md-12">
<div class="form-group required"><input required="true" class="form-control" placeholder="Email" autocomplete="email" id="email" type="email" name="email" value=""></div>
</div>
</div>
<p> <br/> </p>
<h3>Billing Address <span class="help">*Billing address must match address associated with credit card.</span></h3>
<div class="row">
<div class="col-md-6">
<div class="form-group required"><input required="true" class="form-control" autocomplete="address-line1" placeholder="Street" id="address1" type="text" name="address1" value=""></div>
</div>
<div class="col-md-6">
<div class="form-group"><input class="form-control" autocomplete="address-line2" placeholder="Apt/Suite" id="address2" type="text" name="address2" value="2"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group required"><input required="true" class="form-control" autocomplete="address-level2" placeholder="City" id="city" type="text" name="city" value="Odessa"></div>
</div>
<div class="col-md-6">
<div class="form-group required"><input required="true" class="form-control" autocomplete="address-level1" placeholder="State/Province" id="state" type="text" name="state" value="Odessa"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group required"><input required="true" class="form-control" autocomplete="postal-code" placeholder="Postal Code" id="postal_code" type="text" name="postal_code" value="65000"></div>
</div>
<div class="col-md-6">
<div class="form-group country-select required"><select required="true" class="form-control" id="country_id" name="country_id"><option value="" disabled="disabled">Country</option><option value="4">Afghanistan</option><option value="248">Åland Islands</option><option value="8">Albania</option></select></div>
</div>
</div>
<p> <br/> </p>
<h3>Billing Method</h3>
<div class="row">
<div class="col-md-9">
<div class="form-group required"><input required="true" class="form-control" id="card_number" placeholder="Card Number" autocomplete="cc-number" type="text" name="card_number"></div>
</div>
<div class="col-md-3">
<div class="form-group required"><input required="true" class="form-control" id="cvv" placeholder="CVV" autocomplete="off" type="text" name="cvv"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group required"><select required="true" class="form-control" id="expiration_month" autocomplete="cc-exp-month" name="expiration_month"><option value="" disabled="disabled" selected="selected">Expiration Month</option><option value="1">01 - January</option><option value="2">02 - February</option><option value="3">03 - March</option><option value="4">04 - April</option><option value="5">05 - May</option><option value="6">06 - June</option><option value="7">07 - July</option><option value="8">08 - August</option><option value="9">09 - September</option><option value="10">10 - October</option><option value="11">11 - November</option><option value="12">12 - December</option></select></div>
</div>
<div class="col-md-6">
<div class="form-group required"><select required="true" class="form-control" id="expiration_year" autocomplete="cc-exp-year" name="expiration_year"><option value="" disabled="disabled" selected="selected">Expiration Year</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option><option value="2026">2026</option></select></div>
</div>
</div>
<div class="row" style="padding-top:18px">
<div class="col-md-5">
<input id="token_billing" type="checkbox" name="token_billing" CHECKED value="1" style="margin-left:0px; vertical-align:top">
<label for="token_billing" class="checkbox" style="display: inline;">Save card details</label>
<span class="help-block" style="font-size:15px">
</span>
</div>
</div>
<div class="col-md-12">
<div id="js-error-message" style="display:none" class="alert alert-danger"></div>
</div>
<p> </p>
<center>
<button type='submit' class='btn btn-success btn-lg'>PAY NOW - 1,500.00 USD</button>
</center>
<p> </p>
</form>
Just FYI, I'm testing it on localhost with self-generated SSL certificate. Which may cause a problem?
