The authentication data object includes only two values, your API Login ID and the Public Client Key.
The simplest example is below:
<script type="text/javascript"
src="https://jstest.authorize.net/v3/AcceptUI.js"
charset="utf-8">
</script>
<form id="paymentForm"
method="POST"
action="https://YourServer/PathToYourPaymentProcessingScript">
<input type="hidden" name="dataValue" id="dataValue" />
<input type="hidden" name="dataDescriptor" id="dataDescriptor" />
<button type="button"
class="AcceptUI"
data-billingAddressOptions='{"show":true, "required":false}'
data-apiLoginID="YOUR API LOGIN ID"
data-clientKey="YOUR PUBLIC CLIENT KEY : 64 byte string"
data-acceptUIFormBtnTxt="Submit"
data-acceptUIFormHeaderTxt="Card Information"
data-responseHandler="responseHandler">Pay
</button>
</form>
<script type="text/javascript">
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 {
paymentFormUpdate(response.opaqueData);
}
}
function paymentFormUpdate(opaqueData) {
document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
document.getElementById("dataValue").value = opaqueData.dataValue;
document.getElementById("paymentForm").submit();
}
</script>In the above example, your Sandbox credentials would apply. Once the lightbox payment form is submitted, the dataValue input is auto-populated with the token and submitted to your payment processing script.
<input type="hidden" name="dataValue" id="dataValue" value="eyJjb2XXX...">
To test, login to the Sandbox, get your API Login ID and the Public Client Key and replace the placeholder values in the JavaScript above.
