Polymer 2.0集成Stripe支付请求按钮问题求助

我之前在Polymer项目里集成Stripe支付按钮时也踩过这个坑！问题根源其实很明确：Stripe的Payment Request Button默认会把生成的元素直接挂载到document.body上，完全没考虑Polymer Shadow DOM的隔离特性，所以按钮才会跑到页面顶部，而不是你指定的#hostcard容器里。

下面是具体的解决步骤，亲测有效：

1. 正确获取Shadow DOM内的目标容器
   别再用document.querySelector('#hostcard')了！因为Shadow DOM是隔离的，全局的document无法直接访问元素内部的节点。你需要在Polymer元素的生命周期钩子中，通过this.shadowRoot.querySelector('#hostcard')来获取目标div。

2. 初始化时明确指定挂载容器
   调用Stripe的元素创建方法时，一定要通过container参数指定刚才拿到的Shadow DOM容器。示例代码如下：

   connectedCallback() {
     super.connectedCallback();
     // 替换成你的Stripe公钥
     const stripe = Stripe('pk_test_your_public_key');
     const paymentRequest = stripe.paymentRequest({
       country: 'US',
       currency: 'usd',
       total: {
         label: '订单总额',
         amount: 1000,
       },
     });
   
     const elements = stripe.elements();
     const prButton = elements.create('paymentRequestButton', {
       paymentRequest: paymentRequest,
     });
   
     // 检查当前环境是否支持支付请求
     paymentRequest.canMakePayment().then((result) => {
       if (result) {
         // 获取Shadow DOM内的目标容器
         const targetContainer = this.shadowRoot.querySelector('#hostcard');
         // 把按钮挂载到指定容器里
         prButton.mount(targetContainer);
       } else {
         console.log('当前环境不支持该支付方式');
       }
     });
   }
   

3. 注意Polymer的生命周期时机
   如果你的元素有异步模板或者数据绑定，建议等元素完全渲染完成后再初始化Stripe。可以用updateComplete Promise来确保Shadow DOM已经就绪：

   async connectedCallback() {
     super.connectedCallback();
     // 等待元素模板渲染和更新完成
     await this.updateComplete;
     // 这里再执行Stripe初始化逻辑
   }
   

4. 排查样式隔离问题
   有时候按钮可能已经挂载到容器里，但被Shadow DOM的样式隔离影响导致显示异常。你可以在元素的<style>标签里给#hostcard加些基础样式，确保容器有足够空间：

   #hostcard {
     padding: 16px;
     min-height: 60px; /* 适配支付按钮的高度 */
   }
   

核心思路就是：手动告诉Stripe要把按钮挂载到Shadow DOM内的指定容器，而不是默认的document.body。按上面的步骤调整后，按钮应该就能乖乖出现在你想要的位置了。

内容的提问来源于stack exchange，提问作者Vinayak Vanarse