Polymer 2.0 Stripe 支付请求按钮集成

Question

我在使用 Polymer 2.0 将 STRIPE 付款请求按钮集成到我的 PWA 中时遇到了挑战。我无法将条纹支付按钮添加到元素的 div 内部模板标记中。

我创建了一个条纹支付元素。它基本上是一个简单的聚合物元素，带有模板 dom-bind 和卡片内的基本 div 标签。

我想做的是将条纹支付请求按钮添加到 div id = hostcard。目前，条纹付款请求按钮以全宽 100% 显示在页面顶部。

在下面元素代码的注释中插入了我尝试过的代码。

有 2 个问题： 1. 如何将按钮添加到 div hostcard 以便它显示在卡内？ 2. 有没有更好的方法来显示聚合物元素的付款请求按钮？

条纹-payment.html

<script src="https://js.stripe.com/v3/"></script>
<dom-module id="stripe-payment">
<template is="dom-bind">
<style include="shared-styles">
</style>
   <template is="dom-if" if="[[signedin]]">
     <div id="hostcard" class="card">
       <div class="circle">3</div>
       <h1>Stripe Payment</h1>
     </div>
  </template>
</template>
<script>
  class StripePayment extends Polymer.Element {
  static get is() { return 'stripe-payment'; }

  static get properties() {
    return {
      user: { type: Object, notify: true, readOnly: false, observer: '_userChanged' },          
    };
  }

  ready() {
    super.ready();
  }
}
//STRIPE CODE
const DIVx = document.createElement('div');
const buttonSlot = DIVx.cloneNode();
buttonSlot.setAttribute('slot', 'button');
// Create stripe card wrapper
let button = DIVx.cloneNode();
button.id = 'payment-request-button';
// Add wrapper to slot
buttonSlot.appendChild(button);

//None worked -- either give null or undefined or function not defined
//this.$.hostcard.appendChild(buttonSlot);
//this.$$('#hostcard').appendChild(buttonSlot);
//var myElement = document.getElementById('stripe-payment'); - not working
//myElement.$.hostcard.appendChild(buttonSlot);

var element = this.shadowRoot;
console.log('Element is ->'+element);
document.body.appendChild(buttonSlot);

// Create a Stripe client
var stripe = Stripe('pk_test_**************');
// Create an instance of Elements
var elements = stripe.elements();
// Create a payment charges
var paymentRequest = stripe.paymentRequest({
        country: 'AU',
        currency: 'aud',
        total: {
          label: 'BizRec - Subscription',
          amount: 100, //in cents
        },
      });

// Create an instance of Payment Request Button
var prButton = elements.create('paymentRequestButton', {
    paymentRequest: paymentRequest,
    style: {
      paymentRequestButton: {
        type: 'default' , // | 'donate' | 'buy' | default: 'default'
        theme: 'dark', // | 'light' | 'light-outline' | default: 'dark'
        height: '40px', // default: '40px', the width is always '100%'
      },
    },
  });

// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
    // Add an instance of the card Element into the `card-element` <div>
    //cardElement.mount('#card-element');
  }
});

paymentRequest.on('token', function(ev) {
  // Send the token to your server to charge it!
  fetch('/charges', {
    method: 'POST',
    body: JSON.stringify({token: ev.token.id}),
  })
  .then(function(response) {
    if (response.ok) {
      // Report to the browser that the payment was successful, prompting
      // it to close the browser payment interface.
      ev.complete('success');
    } else {
      // Report to the browser that the payment failed, prompting it to
      // re-show the payment interface, or show an error message and close
      // the payment interface.
      ev.complete('fail');
    }
  });
});

  window.customElements.define(StripePayment.is, StripePayment);
  </script>
</dom-module>

Answer 1

目前，Elements 不支持您提到的 Shadow DOM。如果您使用 Polymer，那么您可能需要自己做一些自定义工作。您可以看到 third-party 开发人员的这个项目，它应该有助于解除阻塞：https://github.com/bennypowers/stripe-elements

Polymer 2.0 Stripe 支付请求按钮集成

Polymer 2.0 Stripe Payment Request Button Integration

stripe-payments

polymer-2.0