Hello,
I am making an integration on my site so that my customers can charge with authorize.
I have the following use case where they ask me to charge with more than one account. Then, I provide them with a selector so they can choose which account to charge with.
When I do this and try to charge using the AcceptUI.js library it fails, because the credentials are already loaded.
Then I try to delete the library and all its dependencies and then reload it, and this does not work, because it does not reload it.
This is the test code I implemented to see if by deleting the library and changing the credentials, I could still get paid.
<!DOCTYPE html>
<html>
<head>
<title>Sample form</title>
</head>
<body>
<button id='myButton'>
Load library
</button>
<form id="paymentForm" method="POST">
<input type="hidden" name="dataValue" id="dataValue" />
<input type="hidden" name="dataDescriptor" id="dataDescriptor" />
<button type="button"
id="pay"
class="AcceptUI"
data-billingAddressOptions='{"show":false, "required":false}'
data-apiLoginID="api_login_id"
data-clientKey="client_key"
data-acceptUIFormBtnTxt="Submit"
data-acceptUIFormHeaderTxt="Card Information"
data-responseHandler="responseHandler">Pay
</button>
</form>
<script type="text/javascript">
document.getElementById('myButton').addEventListener('click', loadLibrary);
function loadLibrary() {
deleteLibrary();
let script = document.createElement('script');
script.src=`https://jstest.authorize.net/v3/AcceptUI.js?t=${new Date().getTime()}`;
script.id = 'miScript';
document.body.appendChild(script);
eval(script);
}
function deleteLibrary() {
let scriptExists = document.getElementById('miScript');
if (scriptExists) {
scriptExists.parentNode.removeChild(scriptExists);
let background = document.getElementById('AcceptUIBackground');
if (background) {
background.parentNode.removeChild(background);
}
let container = document.getElementById('AcceptUIContainer');
if (container) {
container.parentNode.removeChild(container);
}
let payButton = document.getElementById('pay');
payButton.setAttribute('data-apiLoginID', 'new_api_login_id');
payButton.setAttribute('data-clientKey', 'new_client_key');
}
}
function responseHandler(response) {
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
console.log(
response.messages.message[i].code + ": " +
response.messages.message[i].text
);
i = i + 1;
}
} else {
console.log(response);
// paymentFormUpdate(response.opaqueData);
}
}
function paymentFormUpdate(opaqueData) {
document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
document.getElementById("dataValue").value = opaqueData.dataValue;
document.getElementById("paymentForm").submit();
}
</script>
</body>
</html>
