Problem passing credentials as a variable Accept.js

[scoeat]

HTML:

  <form id="paymentForm" 
    method="POST" 
    action="javascript&colon;handlePayment()">
    <input type="hidden" name="dataValue" id="dataValue"/>
    <input type="hidden" name="dataDescriptor" id="dataDescriptor"/>
    <input type="hidden" name="paymentResponse" id="paymentResponse"/>
    <button type="button" 
      data-apiLoginID=""
      data-clientKey=""
      data-responseHandler="responseHandler"
      data-billingAddressOptions='{"show":true, "required":false}' 
      data-acceptUIFormHeaderTxt=""
      data-acceptUIFormBtnTxt="Submit" 
      class="AcceptUI" 
      ID="payButton">Pay
    </button>
  </form>

On load, a js file updates the button attributes based on the results of a method (orgCred) inserting credentials for the current client as needed. The apiLoginID, clientKey and acceptUIFormHeaderTxt are all updated based on the current client.

js - updating credentials for payment.

var payButton = document.getElementById("payButton");
payButton.setAttribute("data-apiLoginID", orgCred.loginID);
payButton.setAttribute("data-clientKey", orgCred.clientKey);
payButton.setAttribute("data-acceptUIFormHeaderTxt", orgCred.orgName);

I can see the button element has the correct credentials after the page loads. If I look at document.getElementById("payButton") in the console everything looks good. When the payButton is clicked the hosted page displays but the updated attributes are not ALLWAYS being passed to A.net. It will work fine for several tests but then fails indicating two errors (E_WC_10: Please provide valid apiloginid. and E_WC_18: Client key is required.) When I view the element in dev tools everything looks good but it seems pass the default (blank) attributes instead of the updated credentials that are updated on load.

Sometimes I can click away to another page then back to the payment page and it will work fine but not reliably. Reloading (Alt+reload) the page or restarting the browser also fixes the issue on occasion. I can not seem to find any consistency to the behavior. It feels like it could be a timeing issue but I am at a loss on how to fix it.

I have been testing using the https://jstest.authorize.net/v3/AcceptUI.js library and my sandbox credentials. Testing in Chrome. Currently the form, button, responseHandler, paymentFormUpdate and handlePayment/paymentRequest mehtods are all defined in line within the html file with some basic javascript events. Any help/advice is greatly appreciated. Let me know what else is needed to diagnose the issue.

Thank you!

[scoeat · Accepted solution]

I finally figured this out.  I moved the AcceptUI.js script integration (below) from the main index.html where the form is initiated into a sub component that is loaded after the loginID and client key are updated.  Seems to work fin now! 

<script type="text/javascript" src="https://jstest.authorize.net/v3/AcceptUI.js" charset="utf-8"></script>