如何在Shadow DOM中加載廣場支付表格

我正在嘗試爲Square支付表單創建Web組件，但無法將其加載到影子DOM中。如何在Shadow DOM中加載廣場支付表格

我想知道這是否可能，因爲窗體填充了來自Square CDN的腳本。

有沒有人有這個用例的運氣？

我正在使用https://docs.connect.squareup.com/articles/adding-payment-form 上的示例中的代碼，並將其插入到Web組件模板中。

完整的代碼示例在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>

來源

2017-04-25 KVNA

這時，你將無法使用影子DOM裏面的廣場的電子商務形式。我建議保持光明。

來源

2017-04-26 00:23:22 tristansokol

所以，要明確一點，如果有人正在構建基於Polymer Starter Kit之類的漸進式Web應用程序，則必須使用不同的支付提供商？ – KVNA

我不確定你的意思。 AFAIK如果元素包含在使用shadow DOM的應用程序外殼中，則它被認爲是輕量級的。 https://www.polymer-project.org/1.0/docs/devguide/local-dom – KVNA

對不起，我的意思是你將無法使用組件內的電子商務表單（JavaScript庫可以' t遍歷組件的影子dom來創建iframe）。對於聚合物入門套件，您仍然可以將電子商務表格粘貼到「」之外的index.html中。 – tristansokol

如何在Shadow DOM中加載廣場支付表格

回答

相關問題