I am trying to implement authorize.net payments with a web application, after Square's technology not being compatible with the W3C Shadow DOM spec. When trying to initialize the accept.js script within a web component I get the following error:
Library is not coming from Accept CDN
Is authorize.net also not compatble? The element is structured as follows:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
// more web component imports
<script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script> <dom-module id="credit-card"> <template> <form> <gold-cc-input type="tel" inputmode="numeric" name="ccNumber" id="ccNumber" placeholder="Card Number" autocomplete="cc-number" no-label-float required></gold-cc-input> <div class="card-bottom"> <div class="row input-row"> <gold-cc-expiration-input class="animate-light" label="Expiry" required autocomplete="cc-exp"></gold-cc-expiration-input> <gold-cc-cvc-input id="ccCVV" name="ccCVV" required autocomplete="cc-csc"></gold-cc-cvc-input> </div> </form> </template> <script> Polymer({ is: 'credit-card', _sendPaymentDataToAnet: function() { // function }
});
</script> </dom-module>
05-02-2017 04:36 PM
Hi @mdm777,
Accept.js does some checking to determine that the script itself was loaded from our servers, and to determined that it hasn't been changed since it was retrieved from our servers. This is important for security, because the script is the thing interacting with the actual card data.
Accept.js isn't going to work in the context of a shadow DOM unless its calls to determine the location it was loaded from give it what it would expect. From your post, it appears that that's not happening. I've read through the spec you've referenced, and I'm not sure we could say it's "compatible" or "not compatible" with the spec since there doesn't appear to be any mechanism defined within the spec that could make it compatible.
Whether or not it can someday be made to work in that situation depends on whether there's a way for the script to identify where it's loaded from. What does a call for something like window.location even return in a shadow DOM?
05-05-2017 03:00 PM