How to Load Square Payment Form in Shadow DOM

问题

I am trying to create a Web Component for the Square Payment form, but am having trouble getting it to load into the shadow DOM.

I am wondering whether or not this is possible, since the form is populated with a script from the Square CDN.

Has anyone had any luck with this use case?

I am using code from an example on https://docs.connect.squareup.com/articles/adding-payment-form and inserting it into a Web Component template.

The full code example is on Codepen.

https://codepen.io/kvnapavl/pen/BRQZrx?editors=1000#0

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

<dom-module id="square-payment-form">

<template>

  // Square payment form code from https://docs.connect.squareup.com/articles/adding-payment-form

</template>

<script>

  Polymer({

    is: 'square-payment-form'

  });

  </script>

</dom-module>

回答1:

At this time you won't be able to use the Square e-commerce form inside the shadow dom. I'd recommend keeping it in the light 🙂.

来源：https://stackoverflow.com/questions/43620053/how-to-load-square-payment-form-in-shadow-dom