title: iframes from square-connect for CC processing not working in angularjs
body: <p>I'm building a simple SPA with angular that I would like to use to process credit card payments using my Square account.  For security Square wants to use iframes so the CC info never touches my page.</p>
  
  <p>I've read about using <code>$sce.trustResourceAsUrl()</code> but square specifically requires that the file be loaded from their CDN (so there's no modifying it).</p>
  
  <p>The <a href="https://docs.connect.squareup.com/articles/adding-payment-form/" rel="nofollow noreferrer">https://docs.connect.squareup.com/articles/adding-payment-form/</a> doesn't list anything about integrating with AngularJS and I'm not finding any usefully examples.  </p>
  
  <p>Anyone have experience successfully embedding square payment forms in an angular1 app that they could point me to? Or are there security risks that prevent this? Thanks!</p>
  
  <p>This is the example file from the documentation:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://js.squareup.com/v2/paymentform"&gt;
  &lt;script&gt;
  var paymentForm = new SqPaymentForm({blah blah blah});
  &lt;/script&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;label&gt;Card Number&lt;/label&gt;
  &lt;div id="sq-card-number"&gt;&lt;/div&gt;
  &lt;label&gt;CVV&lt;/label&gt;
  &lt;div id="sq-cvv"&gt;&lt;/div&gt;
  &lt;label&gt;Expiration Date&lt;/label&gt;
  &lt;div id="sq-expiration-date"&gt;&lt;/div&gt;
  &lt;label&gt;Postal Code&lt;/label&gt;
  &lt;div id="sq-postal-code"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm not totally sure how to adapt this to work within an angular view.  any suggestions would be much appreciated.</p>